×
Namespaces

Variants
Actions
(Difference between revisions)

Mobile Design Pattern: Markable List

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Automated change of text from Forum Nokia to Nokia Developer. (Rebrand))
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]]
  
 
This design pattern is part of the [[:Category:Mobile Design Patterns|Mobile Design Patterns]] series.
 
This design pattern is part of the [[:Category:Mobile Design Patterns|Mobile Design Patterns]] series.
Line 8: Line 30:
  
  
[[Image:34-marked-list.jpg]]
+
[[File:34-marked-list.jpg]]
  
 
'''Figure:''' A marked list of emails. Each marked item is indicated with a check mark.
 
'''Figure:''' A marked list of emails. Each marked item is indicated with a check mark.

Latest revision as of 06: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 mechanism enabling users to select multiple items within a list then apply an action to the entire marked group of items.


34-marked-list.jpg

Figure: A marked list of emails. Each marked item is indicated with a check mark.

Advantages

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

[edit] Disadvantages

  • Can require complex sequences of actions that may not be easily discoverable.

[edit] Use when

  • To create a multi-selection list capability where it is not practical (or desirable) to implement a multi-selection list.
  • This option is most useful to enable record management (i.e. emails, photos, audio, video, documents). Common contextual commands include Move, Delete, Upload, Add to folder etc.

[edit] Use how

  • A contextual menu command is provided enabling users to Mark items by first placing focus on them and then selecting this Mark command.
  • A ‘Mark All’ option is also provided.
  • Once one or more items have been marked, ‘Unmark All’ replaces ‘Mark All’ and an additional ‘Unmark’ command becomes available.
  • The user is free to apply any contextually available command to the group of items at any time. Note: Only commands that can be applied to the entire group should be provided.
  • Once the command is applied, the list items remain marked until the user navigates away from the list (typically through a Back or Exit command). In this way, multiple commands can be applied to the same Marked list without the need to re-mark the items.
  • This pattern is most effective when combined with key-mapped shortcut to assist power-users. S60 3rd Edition FP2 now maps the Mark/Unmark command to the # key and has also implemented a host of related shortcut behaviours. These dramatically reduce the amount of time required to mark large numbers of items however discoverability may be a concern given the sophistication of certain shortcuts.

Note: This pattern can be used with both direct and indirect manipulation devices. Note however that in a touch device without hardware keys, the marking may only be available through the Options menu. This can impact both discoverability and usability.

See Touch Specific Issues in Lists within the Nokia Developer Design and User Experience Library for more information.


[edit] Design Tips

  • Clearly indicate the marked items using an easily recognizable symbol. S60 uses a check mark to indicate marked items.
  • In this context the check mark (a common symbol to indicate correctness in many countries) is used to indicate a positive choice. In Japan however, a check mark can be used to mean that something is incorrect so may not be the best option[1].
This page was last modified on 9 May 2012, at 06:26.
48 page views in the last 30 days.