On both ecommerce and shopping comparison sites, users can find products in two different ways: searching and browsing. Searching obviously means using the site search whilst browsing involves drilling down through the categories provided by the website.

Regardless of which method is used, users will be presented with a product listing from which to find the product(s) they want. This product listing can contain tens, hundreds or even thousands of products, so finding the right product from this list can be a difficult or even impossible task on any ecommerce site.

Getting sorting and filtering right improves findability and allows users to find the product they want in less time, from this product listing. If users can't find the exact product they require in the minimal time, there's a good chance they'll go to an ecommerce site where they can.

What is sorting and filtering?

Sorting is a method of changing the order of any product listing, where by users can choose which criteria they want the products to be listed by. So, price-conscious web users may choose to list the products in order of price, from cheapest to most expensive.

Filtering is a way of reducing the number of products in a product listing. Users choose which criteria are important to them and view only relevant products. For example, price-conscious users may choose to view only products for under £10 (thereby filtering out all products over £10).

Sort by options

Bringing products with certain criteria to the top of the page can be particularly useful for users who aren't exactly sure what they want. This is especially true if there are a large number of products in the product listing. (Product listings, or a list of products, can be found either by running a search or browsing through the available categories.)

This example from Waterstones is good in that it provides extensive options to sort the returned results of 192:

Screenshot from Waterstones website, offering 7 sort options to users

As well as basic sort by options (e.g. 'Alphabetical: A-Z') the site also tailors its sorting to the fact that it's an online ecommerce bookshop. Users may find it helpful to sort by 'Bestselling', 'Publication date' or 'Average customer review'. The latter is an increasingly popular way of choosing products on the web due to its independent nature.

The language of the options is also plain and simple. For example, 'Price: Low to high' is used instead of 'Price ascending', the former being slightly less ambiguous.

Presenting sort by options

Utilising a dropdown menu for sorting uses up minimal screen space and is generally familiar to users of ecommerce sites. It does however 'hide' some of the options as they're not all visible at first glance.

You could instead offer sort by options as radio buttons, like this example from Airmiles:

Screenshot from Airmles website, showing radio buttons being used for sort options

The main advantage of using radio buttons is that all sort by options are visible to users at one glance. Also, there should be less need to abbreviate terms as options aren't confined to the width of the dropdown field.

As a rough guide, if you offer users four or more sort by options, use a dropdown box. Three or less sort by options then use radio buttons as the options won't be 'hidden' in a dropdown box. Do be sure to restrict radio buttons to one row for easy scanning.

Filtering within product listings

Due to historically poor search results within websites, users are sometimes wary of site searches and will often browse through ecommerce sites to find a product. (They'll then use the search function only if they can't find what they're looking for). For users that are browsing in order to find a product, filtering within a category is crucial to enhance product findability.

Filters let users reduce the number of items within any product listing, by filtering out products that don't conform to specific criteria. This is often more useful for users who have a certain level of knowledge about the product(s) they require.

Dell offers a number of filtering options for their computers with a wide range of specifications:

Screenshot from Dell website, showing four different filtering options

The product filtering concentrates on the technical specifics and usage but also has the option to 'View all...', thereby catering for all users. Filter options must be specific to each product listing and shouldn't be generically applied across the site.

Using filtering to influence a purchase

Filtering can also be useful when there are many different parameters to a product and can be used as a tool to persuade and influence a purchase. H. Samuel, for example, uses an extensive filtering system for their range of watches:

Screenshot from H. Samuel, showing 'Who is it for' and 'Occasion' filtering options

The product listing uses commonly-used filters such as 'Price', which many users will be familiar with. It also uses other, more clever filters, such as 'Occasion: Anniversary, Christmas, Love, Good luck...' and 'Who is it for: For boys, For father, For groom, For bride...'.

These additional filters 'humanise' the online shopping experience matching users' real life expectations and requirements. They essentially create an online 'shop assistant', matching users' needs with specific products.

Conclusion

Do be sure to employ sorting and filtering across all product listings on any ecommerce or shopping comparison website. The options you provide for both should speak users' language and be specific to the actual product listing (and not generically applied across the site).

Sorting and filtering are essential for helping users to find the products they're looking for. Users' increasing levels of sophistication when shopping online means they're likely to 'flick' between similar sites in a matter of seconds. Providing effective sorting and filtering for product listings can play a major part in helping users find (and ultimately buy) the product(s) they're looking for.

Case studies

Our success stories

  • UCAS

    UCAS's Track portal is award-winning, achieving a 95%+ satisfaction rating across its 750,000 users

  • Hotels.com

    Hotels.com gained a much stronger competitive advantage due to a great mobile & tablet strategy

  • Pearson Education

    Pearson Education has embedded user-centred design into all their digital design processes

More case studies

What are you working on?

  • End-to-end customer experience

    Join up your customer touchpoints to deliver the best possible digital experience that is proven to deliver outstanding business results

  • Customer loyalty & retention

    Ensure your brand promises are delivered through your digital channels so that your customers return and bring others with them

  • User experience of digital touchpoints

    Make sure all your customer touchpoints consistently deliver the very best in user experience, design and usability.

  • Online sales & conversion optimisation

    Increase conversion across all your digital channels. Our clients sell more because they reap the benefits of our sales optimisation expertise.

  • Digital strategy

    Get ahead of the competition with a customer-centred digital strategy designed to deliver long-term business success.

  • Application & product design

    Deliver the best experience for your customers with intelligent digital applications tailored to your business goals and customer needs.

  • Mobile & tablet strategy

    Improve your mobile & tablet propositions with innovative, cutting-edge interface designs that work for you and your customers.

Webcredible turns 10

Happy Birthday to us

About us

We're a user experience agency (UX agency) that creates people-centred, efficient and delightful digital experiences.

Get in touch on 020 7423 6320

 

Skip to site navigation