Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.
Mobile Web Design Pattern: Vertical List
1. Vertical list
A vertically aligned list of data. Each list item can be standalone or paired with additional content such as an icon or short description.
Figure: A simple list with custom bullets (The Economist), and a list which also includes icons (YouTube).
Figure: A great example from OVI of list items paired with icons and a header.
Figure: The NY Times uses lists that contain two separate pieces of data; a headline and short description for each list item.
- Vertical lists are the most commonly used format on the mobile web due to the typically narrow screen and the browser’s native scrolling capabilities.
Vertical lists have many advantages over other formats:
- Vertical lists are easy to read. Zebra striping can be useful to increase list legibility and it’s also common to group related list elements within easily distinguishable blocks though the use of a coloured background.
- The list line height can be adjusted to increase legibility.
- Vertical lists can be paired with an icon yet still provide a fair amount of room for the list copy.
- Use of both ordered and unordered lists is supported on the S60 browser, and lists can also be nested (i.e. contained within other lists).
Figure: The S60 browser can effectively render the styles necessary to create very usable nested lists.
Figure: The Economist has increased the line height of news items considerably to ensure each headline stands out. The header and ‘Home’ link however have a normal line height but are still well delimited from each other through the use of a background colour.
- If the list is small and/or there is the need to indicate hierarchy (ex. the list contains the site’s top-level navigation), a horizontal list may be a better choice.
- Consider the amount of content within each list item. Small list items can be difficult to select, especially on the S60 browser which does not automatically jump to the next selectable item if the cursor has been placed far away from this item. If the list contains text that varies wildly from short to long, the large gaps in vertical space may slow navigation.
- Group related list items where possible. Try not to chain unrelated lists without the use of a divider or other visual grouping.
- Test vertical lists on devices with varying screen size and dpi paying particular attention to line height and unexpected wrapping of copy or layout elements.
- If a list contains more than 10 items, consider whether it could be shortened in one of the following ways.
- By displaying only the most popular items then providing a link to the full list.
- By creating a drill-down page hierarchy i.e. a new page (or view) is loaded each time the user ‘drills down’ through the menu or to an object’s detail view.
- Through pagination.
- Remember that using CSS and XHTML, you can make sophisticated list items containing combinations of icons, descriptive copy and related metadata. Be sure however to consider how these will degrade on less capable browsers.
Figure: This example shows similar content viewed on the S60 and S40 browsers. Note: This is a sample only. The actual degradation will depend entirely on your mark-up and can vary if content adaptation has been implemented.
Figure: Taptu provides a list of their top Search categories then a link to see the much larger, but less frequently used complete list.
Figure: YouTube uses detailed, highly formatted lists to display multiple elements and data for each search result.
Figure: UPS uses coloured dividers and backgrounds to group and separate different types of lists and controls.
Figure: Flickr simply adjusts list margins or padding to place list items in logical sub-groupings.
Figure: Yahoo uses a very bold set of dividers to separate the actionable options on the page.