Namespaces

Variants
Actions

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.

(Difference between revisions)

Mobile Web Design Pattern: Expanding List

From Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata etc)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Web Design" to "")
 
(One intermediate revision by one user not shown)
Line 21: Line 21:
 
|author= [[User:Yiibu]]
 
|author= [[User:Yiibu]]
 
}}
 
}}
[[Category:Mobile Design]]
+
 
 
[[Category:Mobile Design Patterns]]
 
[[Category:Mobile Design Patterns]]
 
[[Category:Mobile Web Design Patterns]]
 
[[Category:Mobile Web Design Patterns]]
[[Category:Mobile Web Design]]
+
 
  
 
This design pattern is part of the [[:Category:Mobile Web Design Patterns|Mobile Web Design Patterns]] series.
 
This design pattern is part of the [[:Category:Mobile Web Design Patterns|Mobile Web Design Patterns]] series.

Latest revision as of 03:31, 9 May 2012

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


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

Contents

[edit] Description

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

23-expand-collapse.png

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

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

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

[edit] 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 Nokia Developer Wiki for code samples including Expand/Collapse, Slide and Fade in/Out.

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

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

This page was last modified on 9 May 2012, at 03:31.
95 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.

×