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 third set of patterns will address application navigation design for mobile applications.
Navigating between items in a list quickly causes navigation challenges.
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.
| Platform or Node | Implementation | Rationale |
|---|---|---|
| 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. | With no access to the softkeys, the best solution involves on-screen controls. |
| Application: stylus | 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. | 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. |
| Application: Nokia-style softkeys | "Next" is the first item in the Options menu. "Previous" is the second. "Done" is the third. | This is the cleanest design with Next within two clicks. Keeping Next and Previous together helps predictability. |
| Application: other softkeys | 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. | Softkeys and the back button will be the fastest method of accessing these high frequency controls. |
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.
Applicable Devices and Platforms
Any mobile platform, but implementation varies based on platform and input method.When Used
Use with lists within categories, in which users may not understand the categories as well as you do.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.