×
Namespaces

Variants
Actions
(Difference between revisions)

Mobile Web Design Pattern: Vertical List

From Nokia Developer Wiki
Jump to: navigation, search
Yiibu (Talk | contribs)
m (New page: == 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. [[I...)
 
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Web Design" to "")
 
(11 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 +
{{ArticleMetaData <!-- v1.1 -->
 +
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|id= <!-- Article Id (Knowledge base articles only) -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090423
 +
|author= [[User:Yiibu]]
 +
}}
 +
 +
 +
[[Category:Mobile Design Patterns]]
 +
[[Category:Mobile Web Design Patterns]]
 +
 +
 +
This design pattern is part of the [[:Category:Mobile Web Design Patterns|Mobile Web Design Patterns]] series. See also [[ Mobile Web Design Pattern: Horizontal List | Horizontal Lists]].
  
 
== 1. Vertical list ==
 
== 1. Vertical list ==
Line 48: Line 78:
 
*If a list contains more than 10 items, consider whether it could be shortened in one of the following ways.
 
*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 displaying only the most popular items then providing a link to the full list.  
** By creating a [http://designinginterfaces.com/One-Window_Drilldown 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.
+
** By creating a [http://designinginterfaces.com/patterns/one-window-drilldown/ 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.
 
** 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.
 
* 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.
Line 61: Line 91:
  
 
'''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:''' Taptu provides a list of their top Search categories then a link to see the much larger, but less frequently used complete list.
 
  
 
[[Image:11-complex-list.png]]
 
[[Image:11-complex-list.png]]
Line 67: Line 96:
  
 
'''Figure:''' YouTube uses detailed, highly formatted lists to display multiple elements and data for each search result.
 
'''Figure:''' YouTube uses detailed, highly formatted lists to display multiple elements and data for each search result.
 
  
 
[[Image:12-grouped.png]]
 
[[Image:12-grouped.png]]
Line 74: Line 102:
 
'''Figure:''' UPS uses coloured dividers and backgrounds to group and separate different types of lists and controls.
 
'''Figure:''' UPS uses coloured dividers and backgrounds to group and separate different types of lists and controls.
  
 
+
[[Image:13-grouped2.png]]
[[Image::13-grouped2.png]]
+
  
  
 
'''Figure:''' Flickr simply adjusts list margins or padding to place list items in logical sub-groupings.  
 
'''Figure:''' Flickr simply adjusts list margins or padding to place list items in logical sub-groupings.  
 
  
 
[[Image:14-grouped3.png]]
 
[[Image:14-grouped3.png]]

Latest revision as of 06:31, 9 May 2012

Article Metadata
Article
Created: User:Yiibu (23 Apr 2009)
Last edited: hamishwillee (09 May 2012)


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

Contents

[edit] 1. Vertical list

[edit] 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.

[edit] 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.

[edit] 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

[edit] 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.

This page was last modified on 9 May 2012, at 06:31.
200 page views in the last 30 days.
×