×
Namespaces

Variants
Actions
(Difference between revisions)

Mobile Web Design Pattern: Expanding List

From Nokia Developer Wiki
Jump to: navigation, search
Yiibu (Talk | contribs)
symbianyucca (Talk | contribs)
Line 38: Line 38:
  
 
'''Tip:''' Visit [[Simple Web Runtime Design Patterns Using jQuery ]] within the Forum Nokia Wiki for code samples including Expand/Collapse, Slide and Fade in/Out.
 
'''Tip:''' Visit [[Simple Web Runtime Design Patterns Using jQuery ]] within the Forum Nokia Wiki for code samples including Expand/Collapse, Slide and Fade in/Out.
 +
 +
'''Tip:''' Visit [http://wiki.forum.nokia.com/index.php/Simple_Web_Runtime_Design_Patterns_Using_Dojo Simple Web Runtime Design Patterns Using Dojo] within the Forum Nokia Wiki for code samples including Expand/Collapse, Slide and Fade in/Out.

Revision as of 06:23, 3 November 2009


This design pattern is part of the Mobile Web Design Patterns series.

Contents

Description

A series of list items that (each) expand when clicked to reveal additional related content.

23-expand-collapse.png

Use when

  • A user must have access to, or interact with large amounts of content yet there is only room to display smaller amounts at a time. Examples include:
    • Revealing submenu options.
    • Revealing non-critical metadata associated with a dataset (ex. revealing the sender’s address or message size in an email application).

Rationale

Expansion lists have several advantages over other formats:

  • They take up less vertical space when collapsed yet can display more information one expanded.
  • They provide users with a higher level of control over the information they interact with at any given time.

Exceptions

In all cases where JavaScript is crucial to the interaction, it’s worth considering how the content will be displayed on a less capable browser. In the case of expanding lists, would the content still make sense if the expanded content were not visible or instead—visible all the time?

If page refresh is needed this becomes less useful.

Design Tips

  • Where possible, visually distinguish between links or controls that will prompt an expansion vs. those that will simply drill down—especially as the drill down will likely require a page refresh that the user may not be expecting.
  • Consider visually distinguishing each list item so that once the new content opens, it’s easier for the user to quickly distinguish the expanded content from the overall list.


24-expand-collapse-native.png


Figure: This example (from a native Symbian application) shows the use of an expanding list to display emails grouped by date.


Tip: Visit Simple Web Runtime Design Patterns Using jQuery within the Forum Nokia Wiki for code samples including Expand/Collapse, Slide and Fade in/Out.

Tip: Visit Simple Web Runtime Design Patterns Using Dojo within the Forum Nokia Wiki for code samples including Expand/Collapse, Slide and Fade in/Out.

149 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×