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 Design Pattern: Multi-selection List

From Wiki
Jump to: navigation, search
Yiibu (Talk | contribs)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(One intermediate revision by one user not shown)
Line 1: Line 1:
[[Category:Mobile_Design]]
+
{{ArticleMetaData <!-- v1.2 -->
[[Category:Mobile_Design_Patterns]]
+
|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 -->
 +
|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= 20090506
 +
|author= [[User:Yiibu]]
 +
}}
 +
 
 +
[[Category:Mobile Design Patterns]]
  
  
Line 9: Line 31:
  
  
[[Image:35-multi-select.jpg]]
+
[[File:35-multi-select.jpg]]
  
 
==Advantages==
 
==Advantages==
Line 42: Line 64:
  
  
[[Image:36-custom-tick.jpg]]
+
[[File:36-custom-tick.jpg]]
  
 
'''Figure:''' This S60 application uses a custom tick box component. The tick has been replaced with a check mark and the overall style of the component differs from the standard S60 offering.
 
'''Figure:''' This S60 application uses a custom tick box component. The tick has been replaced with a check mark and the overall style of the component differs from the standard S60 offering.

Latest revision as of 03:26, 9 May 2012

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


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

Contents

[edit] Description

A list whose purpose is to clearly emphasize (and enable) selection of multiple items in any order.


35-multi-select.jpg

[edit] Advantages

  • Can be extremely useful in high productivity scenarios such as deletion or management of email.

[edit] Disadvantages

  • Will require scrolling if the list is long.
  • Can require many clicks on indirect manipulation devices as activation of each control will require two clicks (one to focus, and one to activate).

[edit] Use when

  • When the user is required to provide multiple parameters or data choices ex. Choose several email recipients, choose several Tags to filter a list.


[edit] Use how

  • A list of choices is provided with a check box or tick box appended to each item.
  • Unless the user is returning to a previously edited multi-selection list, all items begin unchecked.
  • Under certain contexts, the selection is part of a larger task. In this case, a task-specific control is provided to enable the user to indicate completion. Ex. In the image above, the list is triggered as part of an ‘image-tagging’ task. The OK command is therefore provided to enable the user to complete the selection of tags and appends these to the (previously) chosen image.

[edit] Indirect manipulation

• On indirect manipulation devices, the user navigates up and down the list using the Up and Down keys. Similar to radio buttons, the user must first focus the control, then click to activate it. • Selections are indicated by clicking the Center and/or Left softkey. Once an item has been selected, a tick is added to that list item’s tick box. • The user is free to tick and un-tick as many items as needed.

[edit] Direct manipulation and web

  • On touch devices, the user simply taps a tick box to mark the selection. Once an item has been selected, a tick is added to that list item’s check box.
  • The user is free to tick and un-tick as many items as needed.


[edit] Design Tips

  • Tick boxes are now a very well recognized control. Where possible, do not reinvent the wheel (or in this case the box)—especially if the technology or platform you are designing for includes a native tick box component.
  • When styling tick boxes, ensure there is clear contrast between the active and inactive state.


36-custom-tick.jpg

Figure: This S60 application uses a custom tick box component. The tick has been replaced with a check mark and the overall style of the component differs from the standard S60 offering.

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

×