Touchscreen design
up to Web design
I ( @dcorking ) think that we need to tweak our search results display to work better on touchscreens and small or portrait mode screens.
How other designers scroll or page among many search results or a long batch of text (like the org list in LS):
- iPad: Scroll or Card?] (Oliver Reichenstein, iA, 2010)
The scrolling metaphor breaks when pages become too long (as in 20 pages or more) and the scroll bar becomes so tiny that it doesn’t offer a visual clue about page length anymore.
- Avoid the Pains of Pagination (uxmovement.com, 2013)
- iPad Usability: First Findings From User Testing (Jakob Nielsen, 2010)
There's no real reason we can't have both design models: cards on the iPad and scrolls on the desktop (and phones somewhere in the middle). But it's also possible that we'll see more convergence and that the Web's interaction style will prove so powerful that users will demand it on the iPad as well."
I had a brief conversation and demo of the harrowcn beta release with an iphone user, an ipod touch user and an android phone user. These notes include some of my ideas, and some observations and ideas from the users.
####Ideas
-
Make the list fill the viewport all the way to the bottom and a bit beyond. If the list goes off the bottom of the screen, then the user will know to scroll it (** this seems to be a very widely used trick)
-
Links or buttons: 'More' or 'Next' or 'Page on' - even when infinite scrolling is enabled.
-
Can the infinite list be anchored to the page but the map & other elements float (anchored to the viewport)?
-
Preload some entries to make infinite scroll more responsive (on slow connections and when our app is heavily loaded)
-
In portrait mode, should we put the list below the map? (This happens on desktop browsers, but mobile browsers tend to zoom out and give a landscape layout in portrait mode for some reason)
@dcorking noticed these issues on the harrowcn beta with Mobile Safari 6.0 on an iPod Touch and an iPhone. (Similar issues seem to afflict the iPad 3.)
-
HCN2.jpg does not load (do we need to put the height in the HTML or CSS, or is it simply too high resolution for the size we want? Will it still work on retina displays?)
-
Top banner is far too deep and completely obscures the search box. It overlaps about 25% of the map. (Is placeholder for HCN2 logo too big?) (Does not occur on iOS 5)
-
Site looks too tiny
-
The map pins are far too small. They do not react when touched.
iOS 5 iPhone screenshot
iOS 6 emulator screenshot
