WEBSITE DESIGN GUIDE - HELPING YOUR VISITORS FIND RELEVANT PRODUCTS

Visitors can be helped to find the products that are most relevant to them by using a clear and uniform layout, by ensuring key information is available and easily visible, and by providing effective tools to filter down the wider range.

CONTENTS

 

1. INTRODUCTION

 

Return to contents

Let’s start by talking about the earliest stage of the purchase journey and how visitors on your site find relevant products in the first place. In some ways this is the most important stage as if they can’t find anything they're interested in then they obviously won’t buy anything. Getting this right is particularly important if a site’s product range is extensive or diverse as a visitor might only be interested in a few of their products, and these might not be immediately visible.

This guide is dense because there is lots to understand about this topic and much that can typically be improved on the average online store. However, much of this advice will be familiar to you and may even evoke your own bad experiences with other online stores - hopefully motivating you to make improvements for your own visitors.

To really bring these points to life, I’m going to give plenty of examples, many of which will come from the world of online fashion retail. This is not only because these are types of sites that you’ll likely be familiar with, but because fashion retailers have a wide and complex range to sell, with products holding many different properties (such as size, brand and material). 

I’m going to focus solely on the product pages - the ones that show the visitor a selection of what’s on offer, usually in a grid or table-based format.

 

2. HOW YOUR PRODUCTS ARE DISPLAYED

Return to contents

A sensible first step on the road to optimising any store page would be to look at how it actually displays the products. This might sound relatively straightforward, but it’s actually requires thought. This is because there are typically a number of different objectives that the store, and the website’s designer, are trying to achieve:

  • Convincing the visitor that the store has relevant products.

  • Communicating the store has a wide range.

  • Giving the visitor enough information on each product to get them to click through to the product detail page.

  • Promoting the most popular, or newest, products.

  • Keeping the page looking tidy, clean and accessible.

With this in mind, it’s easy to see how designing an effective product page becomes a delicate balancing act that requires careful consideration and planning. Over the next subsection, we’re going to look at how decisions around the basic layout, visualisation and which products to show can help achieve this ideal balance.

 

Basic layout

The rules here are relatively straightforward and are actually quite similar to what we've already discussed in terms of the homepage layout.

Essentially, we want to leave enough white space between all of the products to give a clutter-free look, allowing the range to be easily digested. To do this, most stores choose to leverage a grid format that typically contains three to five columns, with a product in each of these columns (or ‘cells’), and many rows. Others opt for just one product per row and others display in a completely different format altogether, but they almost all rely on grids. 

There isn’t necessarily a ‘right’ answer for how many columns you should use - it depends. It is often influenced by the store’s product category and the size of image required to showcase the product. For example, some technology websites, where the products themselves don’t necessarily look markedly different when viewed in a grid (and where the products aren’t as commonly bought by eye) use smaller images and so can fit more across the page. Clothing websites, where the look of the product is everything, tend to use larger images, so have fewer products in each row. 

Whatever you opt for, it’s usually best to make the cells equal in width and height. The human eye struggles to process irregularity and we tend to prefer uniformity and consistency. Some stores alter the size of certain cells in order to make them stand out more - typically because that cell contains a product that the store is particularly keen to sell. This can be effective and, in truth, breaking up a uniform table a little bit can create a bit of visual interest, but it should be used very selectively or your page will quickly begin to look messy.

In terms of look and feel; the most common background colour on store pages tends to be white. This is because you want to give as much prominence to the products as possible and a white background facilitates that. It’s pretty rare that you’d want to use any other colour and this isn’t the time to try and get overly creative in the design of your page.

 

Product info and visualisation 

Once you've got your product grid set up, you need to then decide how each cell looks and works.

To quickly cover off the basics, each and every cell on your product page should contain the following:

  • An image of the product. This image needs to be large enough to allow visitors to make an initial assessment of the suitability of that product and ensure visitors can quickly scan images, potentially judging many products at one time.

  • The product name. Visitors aren’t expecting a full description of the product, and it would make the page look very cluttered if that were provided, but the name should at least aid understanding of that product. For example, ‘Floral Print 3/4 Sleeve Waisted Mini Dress’ tells the visitor just enough without overloading the page with information.

  • The price and any markdown or offers neatly communicated.

  • A product rating - if the base of reviews on your site is sufficient for this to add value to the visitor.

  • Any product attributes that are so essential to the visitor’s decision that they need to be communicated upfront. This doesn’t tend to exist on clothing websites but is common elsewhere (for example in certain technology categories).

All of this should be appropriately sized, potentially ending up something like this:

Once the basics are all achieved you can then start to think about extra functionality that makes it even easier for visitors to evaluate the products in your range.

The first of these is the comparison functionality. This allows the visitor to select two or more products on a page and bring up a table of useful information, directly comparing them. It is most usefully employed when a site’s products have objective criteria they can be compared on. It’s also best employed (perhaps obviously) in categories where direct comparison is common and where visitors typically want to select just one product from a long list of possible options. An example of this would be with laptops, where you could compare a number of models on screen size, processor speed or hard drive space. 

The second useful functionality is preview. With traditional online stores, the product cell would be completely static and would require a click to get to the product detail page to understand more about that particular product. Nowadays, there are a few common ways that sites can help visitors shortcut this process:

  1. By showing other product images when the initial product image is hovered over. This could either be a second view of the product or the start of a mini slideshow of all its images. Alternate images should always offer a new perspective - for example by switching between product shot and a view of how it looks on the model. 

  2. By providing a ‘quick preview’ button. Clicking this will bring up a modal window on the current page that gives significantly more detail (but still not all of the available detail) to help assessment without click-through to the product detail page.

  3. By providing this quick preview functionality when the product image, or a particular part of the product cell, is hovered over. I’m not keen on this approach as less confident visitors can quickly become overwhelmed when they trigger modal windows simply by moving the mouse, but the option does exist if you think your visitors would benefit from it.

 

3. WHICH PRODUCT RESULTS TO SHOW

Return to contents

You also need to decide which products to show to the visitor as default and also how many products to show.

Firstly, it should go without saying that the product category selected from any given navigation menu should then load products of that category on the product page. If the visitor selects shirts - they want to see shirts.

But which shirts should you show them first? There are quite a few common options:

  • The most popular shirts based on sales.

  • New arrivals/latest stock.

  • The most expensive or cheapest shirts.

  • The shirts with the best customer rating.

  • Shirt with names sorted in alphabetical order.

Again, the decision is very much down to you and what you think is right for your store and for your brand. Potentially, your brand might have something about it that helps inform this decision. For example, if you are known for your visitor community then sorting by customers’ ratings makes sense. If your site is known for offering exciting new products then visitors might well expect to see new arrivals first. If you are known for competitive prices then this might inform your decision (although it might not always make the best business sense to show the cheapest shirts first).

You can (and are required to) select a default sort type, but visitors will also expect to be given the ability to apply their own sort preferences. The most common of these sorts will be on price (lowest to highest, or highest to lowest), so do your visitors a favour and put this option at the top of the filter options list.

You also need to decide the number of products to show as default, with a balance needing to be struck between showcasing lots of products, page loading speed (particularly on mobile) and not overwhelming visitors with too much choice. Generally speaking, 40 - 60 products seems to be a number that most stores settle on.

If the visitor wants to see more products, they typically expect several options to be available to them:

  • To be able to go to the next page of products. This is typically given as an option at both the top and the bottom of the product page.

  • To click to load new products when reaching the bottom of the page. I don't like never-ending pages as I believe they damage the visitor experience. For store pages this is less the case, as a visitor who reaches the bottom of the page is more likely to be looking for more products than for any information in the footer. A good compromise is to present a ‘load more products’ button that then adds extra products to the bottom of that product page without requiring a whole new page to be loaded.

  • To change how many products are displayed at any one time, and potentially to be able to see all products within a range.

The first of these is standard functionality that will do little to improve visitor experience (although it will severely damage the experience if it’s not available). However, the latter two functions can help the visitor navigate the full range quicker and easier, and so should be implemented if possible. 

Whatever you are able to implement, make sure that at the top (and ideally bottom) of the page you show how many products have been returned and how many are still to be seen. This is useful for the visitor to get a sense of the breadth of the range - particularly if they are applying lots of filters (more on these later). For example, if they have filtered down to a selection of 50 long-sleeved, red shirts in their size, then they can be confident that they can continue to filter further (for example on price) to get even closer to what they want.

Finally, there is an argument as to whether you should show out-of-stock products or not. I believe this is fine as long as these products are clearly marked as such (for example by greying them out). Doing so shows that your store does normally sell these products, allowing the visitor to consider revisiting at a later date if they are really keen on something.

 

This is even more the case if your store page provides visitors with the option to be informed when products come back into stock.

 

4. LETTING THE VISITOR REFINE THE RANGE

Return to contents

All good product pages provide the visitor with the option to filter down from a wide range of products to a smaller, more specific selection. This is typically done using a filter bar which is most commonly found on the left-hand side of the page.

You'll have seen many of these before and have probably given little thought to how they work, using them so instinctively and likely taking them for granted. However, a lot of work happens in the background to get them to a state of effectiveness, as even small errors, inconsistencies or complexities can really damage our experience with them.

 

The filter bar

First of all, the decision on where to position the filter bar is a pretty easy one to make. I'd estimate that around 90% of online stores position it on the left-hand side of the page in a vertical format (if not then it is likely to be at the very top of the page, in a horizontal format, just before the products themselves). There are several reasons why this is the most popular place to put it:

  • Many sites tend to use a large number of filters (for example, colour, size, price), each with a number of different values (for example red, blue, yellow, green, black) within them. This can take up a lot of space and so is best running vertically down the page. 

  • Using a bar on the left of the page gives visitors better visibility of it, constantly reminding them that it is there. If it were at the top of the page then its usage would fall sharply as visitors will forget that it’s an option available to them once it is out of their sight.

  • Because this is where the bar is typically positioned, this is where visitors expect to find it, and where they look for it first.

  • Horizontal navigation is the most common type of main navigation used, so the space on the left-hand side of the page is often up for grabs and can be used for the filter bar. 

 

Within the filter bar you are likely to have a wide range of filters. Later we’ll cover how to decide the types of filters to include, but suffice to say that most stores have a lot of different options. It’s, of course, good to give visitors choice and control, but the more filters you add the harder it is for any one filter to stand out and be found. There's a couple of things you can do to help visitors here:

  • Ensure that the most commonly used filters are at the top of the filter bar. Most visitors start their search for their required filter at the top of the list before working down - so order your different filters accordingly. Some marketplaces will collect and display data on which are most used, otherwise you will need to think about how visitors typically shop the product category and the different requirements they are likely to have.

  • Use a combination of collapsed filters and open filters. A collapsed filter is where only the filter name (for example ‘Price’) is shown, requiring a click to display the filter’s values. An open filter is one where the values are all displayed as default. Whilst in other elements of website design it is usually preferential to save visitors a click, having the most-used filters open (and the least-used filters closed) guides the eye to the most important filters (the open ones). It also saves space, makes the bar look less intimidating to navigate and makes it easier for the visitor to see the full range of filters available to them.

 

In terms of functionality, it is important to ensure your store supports multi-faceted navigation (MFN). This is where the visitor can select multiple filters at one time - either within a filter (for example looking for shoes in size 9 or 9.5) or across filters (looking for size 9 shoes in black). Not having this functionality means visitors have far less control over their selections, making it much harder for them to find the products they are interested in.

Whilst the visitor is busy selecting filter values, consideration needs to be given to how the page behaves and, specifically, how it loads products when a selection is made. Good stores will load the products within the existing page, saving on overall loading time. The best stores will delay the load by just a split second to give the visitor a tiny bit of time in which to select another filter option (for example a second size of shoes). This prevents the visitor, who might have complex filtering requirements, from having to wait for products to reload each time before they can add to their filter selection.

Lastly, with all these filters being selected, you need to ensure the visitor can quickly remove them all if they wish. This is best done by providing a remove filter button within the individual filters themselves, and/or by giving a single button that removes all filters. These buttons save the visitor from having to navigate back to the default product page, or manually unticking all their filter options, every time they want to start a new search.

 

The filters themselves

Now we’ve covered how the filter bar works, we need to understand which filter options to actually include. On what dimensions should the visitor be able to narrow down the range, and, within each dimension, what options should they have available to them?

Answering these questions requires a comprehensive understanding of both the products within the category and the visitor journey and drivers of purchase. To really appreciate this, let's play a game. Imagine you are an online store selling wine. What dimensions would make for valid filters? Spend a moment having a go at this and see how many you can think of.

Unless you're a real wine expert with a strong grasp of the product area, I bet you couldn't name quite as many as Amazon offers. Once you start reading them it’s easy to imagine the type of visitor who would be interested in some of these, or the type of journey they’d be on to make these relevant and useful.

I’d imagine you know a good amount about your product category and will be able to write a decent list of filters that are relevant to it. However, below are some questions that might be useful to ask yourself when undertaking this process to ensure that nothing gets missed:

  • What is the typical visitor journey for your product? What products are sought and how are they evaluated?

  • How are your products described by the manufacturer? What key words do they use, which are common and which vary by product?

  • Are there relevant visual differences in the products (for example in the case of clothing)?

  • Are there different products targeted at different user groups (for example men's shirts, women's shirts)?

  • What are all the different use cases for your products (for example formal and casual shirts)?

  • What common questions do you get about products? Think about questions that begin like ‘Do you have any products that...’ or ‘I’m looking for something that…’.

  • What dimensions are universally applicable across all product categories (for example price, delivery availability, brand)?

Doing this exercise for your category will leave you with a nice long list of different filter options, but you really need to evaluate which are genuinely important and useful. We’ve already covered how collapsing less important filters will make it even easier for the visitor but are there any you can cut back on entirely? Remember, your filters should ideally vary across any different product categories that you sell. What works for one category certainly doesn’t work for all.

What about the values within each product? How can we write a list that is digestible, easy to use and provides visitors with the control they need?

In terms of language, they obviously need to be written in visitor-friendly terms and be as concise as possible. As to what to include, a good rule of thumb is to ensure that the values are mutually exclusive, collectively exhaustive (MECE). That is to say; the values shouldn't overlap and should cover all the different possibilities.

This ensures that any visitor going into the filter will find something that gets them closer to their products of interest and that the choices you’re asking them to make are easy and straightforward. This leads to a quicker, simpler experience.

In terms of visualisation; it’s fine to collapse the filter options themselves, but it’s usually best to show all values in a filter once it is loaded. This is to avoid visitors missing the value they might be looking for. If you are getting to a point where your filter lists feel too long, really think about how useful all of these values are and whether you need to show them all. If it is a brand filter, for example, showing all options might make sense, but for colour a long list can easily be simplified down into something shorter. If it will improve the visitor experience, don't be afraid to simplify your list by grouping lesser-sought values into an ‘other’ code.

Like the filters themselves, consideration also needs to be paid to how the values within a filter are ordered. There isn’t a one size fits all here - the ideal experience will differ by type of filter. For example, price should definitely be sorted lowest to highest but brand could be sorted alphabetically or with the most popular brands at the top. Again, just like the filters themselves, the ordering of values can actually guide the visitor through their purchase. If a value is at the very top of a non-alphabetical filter, then that is going to suggest that that is a highly common and popular type of whatever that product is.

Most visitors will understand this, but to some it might look strange to see an non-alphabetised list of values. Listing the number of products that sit below each value is a great way to ensure comprehension, for example ‘Reebok (30)’. This is another useful guide for the visitor and by showing this information you potentially save them from having to click on a filter only to find out the range isn’t as extensive as they might have hoped. It could also save them a selection that returns no results at all, which can be further guarded against by either greying out or by hiding or disabling filter values that will return no products. 

Finally, all of the above is ultimately futile if the filters don’t return accurate results. When setting up your product catalogue you will have to assign values to each product for every filter type you intend to use. This is often a manual process and so it can, understandably, lead to errors and inaccuracies. To prevent this, test your filter options from time to time to ensure they are working as they should. If not, amend your products’ filter data accordingly.

 

5. CHECKLIST

Return to contents

  1. Use a uniform grid layout to display your products, ensuring enough white space is given between products.

  2. Consider how important product images are to your product category and reflect that in the size of the product cells and, hence, how many products you display across a page.

  3. Only use non-uniform product cell sizing sparingly to give emphasis to key products.

  4. Unless there is a really good reason not to, use a white background for your product page.

  5. Avoid showing adverts on your product page.

  6. Provide key product information within each product cell - an image of the product, a useful product name, its price (and any markdown), customer rating and (if there is still room and it is relevant to do so) product attributes.

  7. If relevant to your product category, give visitors the option to easily compare multiple different products.

  8. Provide a way for visitors to learn more about a product by cycling through images on hover, or a ‘quick preview’ button.

  9. Carefully consider how your products should be sorted when the product page initially loads - aligning this with your brand and visitors’ needs if relevant.

  10. Give visitors the tools to sort products against alternative criteria if they prefer.

  11. Consider how many products to show when the product page first loads (40-60 is a fairly typical number on most transactional sites).

  12. Implement either never-ending page functionality, or ‘load more products’ functionality when the visitor reaches the bottom of the product page.

  13. Ensure out-of -stock products are clearly marked on the product page, or are not shown at all.

  14. Prioritise positioning the filter bar on the left-hand side of the product page.

  15. Ensure the most commonly used product filters are at the top of the filter bar.

  16. Collapse down the lesser-used filters to help visitors better navigate the available filter options.

  17. Ensure your visitors can select multiple options within a filter and across different filter types.

  18. Once a filter is selected, aim to have the product selection update without loading a new page.

  19. Prevent your product page from re-loading if your visitor quickly selects another filter option.

  20. Give visitors a way to quickly clear their selected filters.

  21. Evaluate which filter types will benefit your visitors by considering the product category and your visitors’ needs and likely purchase journeys.

  22. Remove filters that don’t add genuine value.

  23. Write filter values in concise, visitor-friendly language.

  24. Ensure filter values are mutually exclusive, collectively exhaustive (MECE).

  25. When a filter is loaded, show all values within it unless the list is prohibitively long (at which point consider if all values are required).

  26. Consider how values within a particular filter type are ordered, varying this by filter type.

  27. Indicate how many product options sit behind each filter value.

  28. Regularly test your filter functionality to ensure it returns accurate results, tweaking your products’ filter data accordingly if not.

Found this content valuable?

Want to get in touch?

Contact us by email or Twitter.