×
Namespaces

Variants
Actions
(Difference between revisions)

Mobile Design Pattern: Sorting

From Nokia Developer Wiki
Jump to: navigation, search
prakash.raman (Talk | contribs)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(5 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Mobile_Design]]
+
[[Category:Mobile Design Patterns]]
[[Category:Mobile_Design_Patterns]]
+
{{ArticleMetaData <!-- v1.1 -->
 
+
|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 -->
 +
|id= <!-- Article Id (Knowledge base articles only) -->
 +
|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]]
 +
}}
  
 
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 7: Line 28:
 
==Description==
 
==Description==
 
A means of re-ordering a list based on a chosen parameter.
 
A means of re-ordering a list based on a chosen parameter.
 
  
 
==Advantages==
 
==Advantages==
Line 14: Line 34:
 
==Disadvantages==
 
==Disadvantages==
 
* Providing an easily discoverable and intuitive sort command can be tricky on small screens.
 
* Providing an easily discoverable and intuitive sort command can be tricky on small screens.
 
  
 
==Use when==
 
==Use when==
Line 24: Line 43:
  
 
* A drop-down menu or toggle located at the top of a table column (primarily used in HTML).
 
* A drop-down menu or toggle located at the top of a table column (primarily used in HTML).
 
  
 
[[Image:37-sort-by-date.jpg]]
 
[[Image:37-sort-by-date.jpg]]
 
 
'''Figure:''' Nokia Messaging provides a drop down menu enabling mail sorting by date, subject and sender (open menu not shown). The above list is sorted chronologically by Date.  
 
'''Figure:''' Nokia Messaging provides a drop down menu enabling mail sorting by date, subject and sender (open menu not shown). The above list is sorted chronologically by Date.  
  
 
* A ‘Sort’ or 'Sort by' command within the Options menu.  
 
* A ‘Sort’ or 'Sort by' command within the Options menu.  
 
 
[[Image:38-sort.jpg]]
 
[[Image:38-sort.jpg]]
 
 
'''Figure:''' The S60 sort command is available within the Options menu. The active sort method is indicated using a  
 
'''Figure:''' The S60 sort command is available within the Options menu. The active sort method is indicated using a  
[http://library.forum.nokia.com/index.jsp?topic=/S60_3rd_Edition_Cpp_Developers_Library/GUID-350C151C-DFF9-4B36-A8CF-CE8DFA1D7923.html submenu indicator].
+
[http://library.developer.nokia.com/index.jsp?topic=/S60_3rd_Edition_Cpp_Developers_Library/GUID-350C151C-DFF9-4B36-A8CF-CE8DFA1D7923.html submenu indicator].  
 
+
* 'Text based' sorting. Very effective method to sort long list on base of title of items.
+
 
+
[[Image:Unsorted.gif]]              [[Image:Sorted.gif]]
+
 
+
'''Figure:''' Shows some contacts in contact list. When user start typing on key pad, list get sorted according to input character sequence.
+
  
  

Latest revision as of 06:06, 16 April 2012

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

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

Contents

[edit] Description

A means of re-ordering a list based on a chosen parameter.

[edit] Advantages

  • Increases findability of distinct items within long lists.

[edit] Disadvantages

  • Providing an easily discoverable and intuitive sort command can be tricky on small screens.

[edit] Use when

  • When a list contains a large number of items.
  • When list items contain complex data and/or multiple associated metadata.

[edit] Use how

Provide users with a contextual series of sorting options. On mobile, these are most often presented in the following way:

  • A drop-down menu or toggle located at the top of a table column (primarily used in HTML).

37-sort-by-date.jpg Figure: Nokia Messaging provides a drop down menu enabling mail sorting by date, subject and sender (open menu not shown). The above list is sorted chronologically by Date.

  • A ‘Sort’ or 'Sort by' command within the Options menu.

38-sort.jpg Figure: The S60 sort command is available within the Options menu. The active sort method is indicated using a submenu indicator.


[edit] Design Tips

  • Where possible, provide an indication of the active sort method. This indicator should ideally be on-screen however this may not always be possible due to limited screen real estate. In S60, the active sort parameter is commonly indicated using a sub-menu indicator.
  • Provide the user with an easily discoverable means to revert the list to its default sort order.
This page was last modified on 16 April 2012, at 06:06.
108 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.

×