Returned Results

From MobileDesign

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 AlphaListShort short and AlphaListLong long.

[edit] Design

The optimal length for the number of items displayed from a longer list depends especially on the time to refresh the list.

Note: if providing numbered access to pages, like Google results, provide those numbers at the bottom of the page. They are less frequently used and their presence at the top of the page would cause extra scrolling.

[edit] Web pages without 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.

[edit] Rationale

A network request introduces a delay

[edit] 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.

[edit] Rationale

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.

[edit] Web pages with 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.

[edit] Rationale

Same as applications.

[edit] Applicable Devices and Platforms

All devices and platforms.

[edit] When Used

Use for list display whenever an application returns a list of results, unless the results naturally are alphabetic.

[edit] Rationale

There 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.