Sorting Things Out
In a previous newsletter article, ‘Let Them View It All’ (Vol. 10), we outlined a few behaviors of online shoppers. The basic message of the article was to ensure that eCommerce sites provide visitors a ‘View All’ option.
In addition to wanting to view all the items, customers also desire the ability to narrow and sort through the presented products. Therefore, providing your customers with the means to narrow and sort when shopping online can further a pleasant user experience. Implementing an effective ‘Sort-by’ feature simplifies the comparison of products, thus making the browsing/shopping experience more enjoyable. In considering which sorting options to offer your customers, think of specific product attributes such as: price, size, brand, sale status, category, and how new a particular item is to your site.
Typically, the more sorting options visitors are given, the happier they are! Additionally, when presenting your customers with a ‘Sort-by’ feature which lists price as an option, ensure that visitors are able to view the pricing of the displayed products by either ascending or descending order. Consider the screenshots below where the first example displays two options which customers can use to sort (’Sort by Brand’ and ‘Sort by Price’), by clicking directly on the column headers.
The second example below not only provides customers with more sorting options, but also offers a way in which customers can view the product prices in ascending or descending order, as previously recommended.
This brings us to the question of how and where the ‘Sort-by’ feature should be displayed. If customers are going to be presented with limited sort options, the example displayed by the first screenshot above can suffice. However, ensuring that these options are both prominent and clear in communicating their purpose is displayed in the second screenshot above, where shoppers have a wider array of product attributes from which to select. When providing shoppers with a variety of options, a drop-down menu is a sufficient feature.
Regarding placement of this feature, some sites choose to provide ‘Sort-by’ options both at the beginning (top) of the product list and the end (bottom) as illustrated in the screenshots below. Allowing shoppers to view sorting options at both the top and bottom of the page is ideal when they are presented with a long list of selections. To minimize confusion, both features should be visually identical, and most importantly, placed within close proximity of the products displayed.
In addition to providing shoppers with an effective ‘Sort-by’ feature, shoppers benefit from the ability to narrow their results via a ‘Filter’ option. Just as an in-store shopper may ask to see a particular brand of sweater, he/she will likely want to see it in a specific color as well. Online shoppers should be allowed the same shopping opportunities. The screenshot below demonstrates a ‘Sort-by’ and ‘Filter’ option used to assist shoppers/browsers to be more effective in making a selection from the listed products.
You will notice that the screenshots included in this article explicitly display the term ‘Sort-by’ alongside the feature itself. If the intent is to employ a ‘Sort-by’ feature in the form of column-headers, be sure that shoppers know what these are by clearly labeling the section with ‘Sort-by’. Overall, you should consider two key factors when implementing sort and filter features: ensure that site visitors are given a variety of options, and that filter and sorting options are labeled distinctly. Visitors are more likely to be content and confident with the choice they have made if they can sort things out!
Shannon Froese
Usability Analyst