List Mobile UI Design Patterns
jlentz 0600004DK1 Visits (7424)
In my article, User interface design for the mobile web, I recommended UI design patterns as a resource for designing applications. In a series of posts,I'll survey UI design patterns for mobile devices starting with the list family of designs. But first, I'll say a few words about UI design patterns. I like Jennifer Tidwell’s definition of a pattern:
Patterns capture a common structure, without being too concrete on the details, which gives you flexibility to be creative
Unlike programming design patterns, UI design patterns define the externals of an application - the user interactions and visual structure of the interface. UI design patterns intentionally omit details about the implementation so that the designer can concentrate on the user experience. UI design patterns are often grouped into collections ("libraries") that are organized by user goals, task or use of specific UI elements.
I'm covering list patterns first because of their pervasiveness in mobile applications. In a sample of 100 popular mobile web applications, I found almost 40% used lists as the central organizing UI feature.
Lists are widely used because they are flexible. They are used for navigation, layout, and option selection. Furthermore, because they are taller than wide, they are well-suited for portrait mode presentation on phones.
The following are some of the most common elemental list patterns. Most of these can be combined to create hybrid patterns.
NavigationSingle Window Drill-Down: A simple list with a ">" symbol on the right edge of each item is used to direct the user forward through a hierarchy of options. Because it is bad form to take a user somewhere without supplying a way out (other than exiting the application!), navigation lists also must supply a way for the user to navigate backwards.
This usually isn't much of an issue for native applications on Android devices because this platform provides a built-in, hardware "Back" button. However, if you are developing a mobile web application that will display on multiple device types, you will usually need to define a software Back button. The Back button usually appears in a page title or heading bar. If the parent page doesn't have a title, use the label "Back" for this button. When the parent page has a title, you should use it as the label for the Back button.
Split View Navigation: The Split View layout is a useful option for organizing a hierarchy of pages on tablets. The left-hand pane consists of a navigation list and the right-hand view displays the contents of the selected item in the list. Because the navigation list is always visible, users can quickly flip through options while remaining visually oriented to the overall navigation structure. Subsequent navigation appears in the right-hand pane. The Settings application on the iPad is a good example of Split View Navigation.
Split View and Single Window Drill-Down Navigation differ in a few details. In split view, the Back button can be omitted in the first level down from the home page because the user can navigate out of this page by selecting another option in the navigation pane. At lower levels, a Back button should be supplied labeled with the title of the parent view. In addition, because the destination page and navigation list are visible together, the ">" icons are unnecessary and can be removed to create a simpler, cleaner appearance.
Search List: Search Lists provide navigation through large, non-hierarchical sets of pages. The search field is used to generate a list of results. If the items in the search result represent links to pages, ">" icons may be provided to indicate that there is additional content to be seen.