This post is part of a series on mobile user interface design patterns, excerpted from Designing the Mobile User Experience, John Wiley & Sons, 2007. This second set of patterns will address screen design for mobile applications.
Designers frequently ask, "how many items should be displayed on the screen?" For older browsers, the maximum page size limited things closely. Many current browsers display entire desktop web pages on a small screen, but the user experience is less than enjoyable for many sites. What is the balance between scrolling for more results and fetching them?See also Alphabetic Listings, both short and long.
DesignThe optimal length for the number of items displayed from a longer list depends especially on the time to refresh the list.
|Web pages (no scripting)||Limit the list to a maximum of two to three screens of results based on the current distribution of screen sizes. Place controls to navigate to the next screen at the bottom of the list.||A network request introduces a delay|
|Applications||Display exactly one screen worth of results, so no scrolling is necessary. Provide navigation to the next and previous screens as controls at the top of the screen.||With no delay in fetching the next page, keeping the display limited to just the current screen eliminates the need for scrolling at all. Next and previous controls at the top of the screen allow quick navigation.|
|Web pages (scripting)||Use scripting (AJAX) to achieve the same user experience as applications, above. Keep both the next and previous set of results in memory, displayable with no delay.||Same as applications.|
Applicable Devices and PlatformsAll devices and platforms.
When UsedUse for list display whenever an application returns a list of results, unless the results naturally are alphabetic.
RationaleThere are two relevant costs to the user associated with navigating lists: scrolling through lists, and navigating between pages. The Next/Previous method of navigating between pages is well understood amongst Internet users, so the cognitive cost of using it is quite low. If the Next button has focus when the screen is drawn (either by it being the first control or by manipulating focus, depending on the platform), then a single keypress will get the user to the next page.
If there is a fetch delay, then scrolling will have some advantages over many fetches. The list is limited to approximately the size that will avoid the user being lost on a very long page.