×
Namespaces

Variants
Actions
Revision as of 16:45, 19 May 2009 by jaaura (Talk | contribs)

Mobile Web Design Pattern: Vertical List

From Nokia Developer Wiki
Jump to: navigation, search


This design pattern is part of the Mobile Web Design Patterns series. See also Horizontal Lists.

Contents

1. Vertical list

Description

A vertically aligned list of data. Each list item can be standalone or paired with additional content such as an icon or short description.

03-Vertical List.png

Figure: A simple list with custom bullets (The Economist), and a list which also includes icons (YouTube).

04-Icon-list-OVI.png

Figure: A great example from OVI of list items paired with icons and a header.

05-2-part-list.png

Figure: The NY Times uses lists that contain two separate pieces of data; a headline and short description for each list item.

Use when

  • 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.

Rationale

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).


06-nested-list.png

Figure: The S60 browser can effectively render the styles necessary to create very usable nested lists.


07-line-height.png

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.

Exceptions

  • 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.


08-uneven-list.png

Design Tips

  • 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.


09-degradation.png

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.

10-truncated-list.png


Figure: Taptu provides a list of their top Search categories then a link to see the much larger, but less frequently used complete list.

11-complex-list.png


Figure: YouTube uses detailed, highly formatted lists to display multiple elements and data for each search result.

12-grouped.png


Figure: UPS uses coloured dividers and backgrounds to group and separate different types of lists and controls.

13-grouped2.png


Figure: Flickr simply adjusts list margins or padding to place list items in logical sub-groupings.

14-grouped3.png


Figure: Yahoo uses a very bold set of dividers to separate the actionable options on the page.

142 page views in the last 30 days.
×