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.
OrganizationLists provide a linear structure for options or values. Vertical lists work well with structured textual information.
Rich Lists: Good user interface design presents information in a hierarchy that allows the user to quickly scan through a page to determine which items to attend to in order to reach his or her goals with minimal physical and cognitive effort. The designer accomplishes this by balancing information overload - presenting too much detail and information underload - presenting insufficient information for accurate choices. Rich Lists manage information load by providing multiple types of information of varying detail and emphasis. The user can glance at an image or title and quickly decide whether to continue to scan the item or proceed to the next. Examples of rich list applications abound. Music stores such as iTunes, YouTube, the Apple App Store, and Facebook all make good use of the rich list pattern.
Highlight Lists: Highlight Lists include an expanded view of one of the list items. Typically the expanded view is at the top of the page with the list immediately below it. A common application of a highlight list is to advertise a specific item. For example, music store applications often use Highlight Lists to call out new releases. Another application is to provide additional detail about a selected item.
Table Lists: A Table List is a simple table created with a list widget. Because of limited space on phones, Table Lists often have no more than two columns. A common use case is the display of name-value pairs. For example, a weather app might employ a list with city names as item labels and current temperatures as values. Tables with drill down capability can be created by using "badges" preceding the navigation icon to summarize data in the subsequent page.
SelectionChoice Lists: Choice Lists are similar to selection lists in desktop GUIs. On phones, long Choice Lists often appear as their own page. This can be a more usable solution than an HTML drop down control because it insures that each list item is large enough to serve as an adequate touch target. Short Choice Lists on phones may also appear in slide-up overlays.
In a single-selection Choice List, item selection is complete when an item is touched. For example if the list is transient, it should automatically dismiss after a choice is made. Multiple selection Choice Lists must supply a "Back" or "Done" button for the user to mark selection completion.
On tablet devices, choice lists are often embedded in dialog boxes. This is preferable to full view lists because they visual context of the current page is maintained during selection.
Editable Lists: Some applications need lists in which the user can add, remove or change the order of items. The Editable List pattern indicates editabilty with an "add" button (using a "+" icon), "remove" buttons (using a "-" icon) and "grab" icons to indicate that items are movable.
Because removing items in a list is destructive, it is important to prevent accidental changes to the list. An interlock is provided by defining a default non-editable mode. The user must explicitly enter edit mode to expose edit controls on the list.
In my next post, I'll take a look at form patterns.