Mobile Design Pattern: Sorting
This design pattern is part of the Mobile Design Patterns series.
A means of re-ordering a list based on a chosen parameter.
- Increases findability of distinct items within long lists.
- Providing an easily discoverable and intuitive sort command can be tricky on small screens.
- When a list contains a large number of items.
- When list items contain complex data and/or multiple associated metadata.
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).
- 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.
- 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.