List Navigation

From MobileDesign

Navigating between items in a list quickly causes navigation challenges.

[edit] Design

When viewing an item from a list, provide navigation both back to the list and to the next and previous item. In this case, an "item" can be an individual story or picture, or it can be a subset of list of results.

There are three commands for each design: "Next", which takes the user to the next item or page of results; "Previous;, which takes the user to the previous item or page of results; and "Done" which returns the user to the screen that called the first item.

[edit] Web Page

Below the title but above the content, place links labeled (in text or graphically) "Next" and "Done". Rely on the device's back button to achieve Previous.

[edit] Rationale

With no access to the softkeys, the best solution involves on-screen controls.

[edit] Applications on Stylus device

If content is less than one screen tall, put "Previous", "Next", and "Done" buttons below the content. Otherwise, the buttons should be below the title but above the content.

[edit] Rationale

Control buttons on stylus devices tend to go below the content, and the decision regarding whether the next page is needed tends to happen after scanning the content.

[edit] Applications on Nokia-style softkey devices

"Next" is the first item in the Options menu. "Previous" is the second. "Done" is the third.

[edit] Rationale

This is the cleanest design with Next within two clicks. Keeping Next and Previous together helps predictability.

[edit] Applications on other devices

Make the left softkey be "Next" and "Done" to the right softkey. Map the Back button, if available, to "Previous". If not, use an on-screen command to access Previous.

[edit] Rationale

Softkeys and the back button will be the fastest method of accessing these high frequency controls.

[edit] Other Notes

On platforms that support it, "Done" should also remove items from the history. Thus if the user goes to a Flickr.com album from a friend's home page, views some pictures, returns to the album overview screen, and then presses Back, she will return to her friend's home page rather than the most recently viewed image.

[edit] When Used

Use with lists within categories, in which users may not understand the categories as well as you do.

[edit] Rationale

Generally speaking, there are two behaviors when viewing a set of items, whether they are news stories, pictures, email messages, or anything that may find the user viewing more than one of the set. Users exhibiting the first behavior pick an item from the list, view the item, and return to the list. With the other behavior, users view an item, and navigate directly to the next or previous item from there.

Some users prefer the pick-and-view method all the time; others almost always prefer the view-in-sequence method. Other users will switch based on device, context, or information. In most situations, half of the users will choose one method, and half will choose the other.

Some of the recommended designs above recommended relegating "Previous" to the back button, even though the two commands are not the same. This decision is a trade off between providing the extra functionality of a Previous function with the extra user interface complexity of providing a Previous function. Since most of the time the back function achieves the same goal, the simpler design has been chosen.