Every UX designer has worked on a list. Even if you have worked on just one project, you have definitely come across a list. So what qualifies as a list?
Product listing. Data tables. For sure.
But it also includes any drop down menus, list boxes, options of checkboxes and radio buttons. They are also a collection of items after all. And they have become are an integral part of the web interaction.
When the lists are simple and short with only few options, they seem to work fine on their own. They do not require much thought and do not pose much of a threat to the user’s anxiety level. As the number of options increase, the chances of the user getting frustrated and even dropping out increases. In her TED talk “How to make choosing easier”, Sheena Iyengar makes an excellent case.
There a lot of patterns that have emerged over time and many excellent examples of their implementation are available.
This solution has been around for ages. Phone books and dictionaries are widespread examples. It is the most simplest ordering of list items and it comes naturally to us.
E-commerce website use this method a lot while presenting the brand names for filtering the products. Another good example is address fields where the country dropdown is alphabetical.
Contextual Sorting and Grouping
Contextual sorting or grouping of items means to sort or divide the list of items based on a reason which makes sense in the context of the use case.
Let’s take the example of payment gateway integrations. For making a NetBanking payment the list of banks is long. But we often see that most widely used banks are listed first followed by the rest.
In flight booking applications, the most popular destinations are listed first. An e-commerce website prefers listing of products by ratings or popularity. Medium does an excellent job of grouping the menu options on the profile, in the order of frequency of use.
In the book, Universal Principals of Design, there two table of contents. The first is a single list sorted alphabetically. The second breaks the list in groups on the basis of concerns, and each group has a alphabetic sorting within it. The groups go like “How can I enhance usability of a design?”, “How can I make better design decisions?” and so on.
When a list is really long, the sorting and the grouping alone cannot curb the frustration level of users. The is specially true, when the users know what they are looking for but still have to scroll through the list to get to it. Do take note that search has to be supplementary, meaning it cannot replacing the grouping or the sorting. It will enhance it.
Flipkart makes good use of combination of all the techniques for filtering products by brand. The most popular brands comes first, followed by names grouped and sorted alphabetically with ‘Not Available’ brands at the end of the list. A search boxes allows user the type in the brand they are looking for and even the search results are sorted alphabetically.
- Any collection exceeding 6–7 items ought to be given some consideration on making the process of selection easier.
- Some type of natural or contextual sorting is the quickest solution to apply.
- For a more complex and longer lists grouping and categorisation can be applied.
- A supplementary search is in order when the list is long and users have a good idea what they looking for.