Mobile Design Pattern: Sorting
Article Metadata
This design pattern is part of the Mobile Design Patterns series.
Contents |
Description
A means of re-ordering a list based on a chosen parameter.
Advantages
- Increases findability of distinct items within long lists.
Disadvantages
- Providing an easily discoverable and intuitive sort command can be tricky on small screens.
Use when
- When a list contains a large number of items.
- When list items contain complex data and/or multiple associated metadata.
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).
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.
Figure: The S60 sort command is available within the Options menu. The active sort method is indicated using a
submenu indicator.
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.
