×
Namespaces

Variants
Actions
(Difference between revisions)

Mobile Design Pattern: Markable List

From Nokia Developer Wiki
Jump to: navigation, search
Yiibu (Talk | contribs)
m (New page: Category:Mobile_Design Category:Mobile_Design_Patterns This design pattern is part of the Mobile Design Patterns series. ==Description== A me...)
 
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(6 intermediate revisions by 2 users 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.
Line 19: Line 41:
  
 
==Use when==
 
==Use when==
* To create a multi-selection list capability where it is not practical (or desirable) to implement a multi-selection list.
+
* To create a multi-selection list capability where it is not practical (or desirable) to implement a [[Mobile Design Pattern: Multi-selection List | 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.
 
* 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.
  
Line 28: Line 50:
 
* 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.
 
* 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.
 
* 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 [http://library.forum.nokia.com/index.jsp?topic=/S60_5th_Edition_Cpp_Developers_Library/GUID-ED784025-4E65-4BE9-ADA8-A13427B6EA30.html 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.
+
* 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 [http://library.developer.nokia.com/index.jsp?topic=/S60_5th_Edition_Cpp_Developers_Library/GUID-ED784025-4E65-4BE9-ADA8-A13427B6EA30.html 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:''' 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.
 
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 [http://library.forum.nokia.com/index.jsp?topic=/Design_and_User_Experience_Library/GUID-6E5CEE22-7804-4848-9513-F0EFC3130EB0.html Touch Specific Issues in Lists] within the Forum Nokia Design and User Experience Library for more information.  
+
See [http://library.developer.nokia.com/index.jsp?topic=/Design_and_User_Experience_Library/GUID-6E5CEE22-7804-4848-9513-F0EFC3130EB0.html Touch Specific Issues in Lists] within the Nokia Developer Design and User Experience Library for more information.  
  
  
 
==Design Tips==
 
==Design Tips==
 
* Clearly indicate the marked items using an easily recognizable symbol. S60 uses a check mark to indicate marked items.  
 
* 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[ http://www.digital-web.com/articles/richard_ishida/].
+
* 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[http://www.digital-web.com/articles/richard_ishida].

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.
91 page views in the last 30 days.
×