Guidelines 137-154
The more choice you give people, the harder it is to choose something. The way to combat paradox of choice is by filters. The more choice you offer, the better filters you need to provide.
Ever been to a wine store? It’s one of those places where the selection knocks you unconscious and you feel like grabbing beer instead. Retail stores don’t have good filters (usually it’s the salesperson).
Online, you can have great filters. The role of the filter is to make finding most suitable products easy.
These guidelines explain what makes a good filter, how to find out what the most useful filters for your products are, and how to design the filtering tool for maximum usability.
Deeper filtering options on the search results.
I think there should be more options available to filter by style (e.g., long sleeve, short sleeve). I am a BIG fan of filters; I think it makes the shopping experience much more user-friendly, easy to navigate to products and stress-free experience. Having to manually go through several products can get a bit tedious so I would definitely improve the filtering portion of the site.
18 guidelines for ecommerce product list & search results page filters:
- Offer filtering options
- Don’t confuse sorting and filters
- Choose highly relevant filters; depends on product at hand
- Learn how people use your filters, adjust them accordingly
- Promote popular filters to the top of the list
- Filters on the product list should be high in visual hierarchy
- Filter values should have checkboxes
- Allow users to select more than one filter
- Show how many products apply to each filter choice in parentheses next to the filter choice
- Only display filter values that apply to what’s available
- Offer themed filters (“fall sweaters” filter in sweaters and jackets product list)
- Offer a “clear all” option for filter selections
- Filter tools should be sticky, especially for endless scrolling and “load more” product lists
- Horizontal filter menu and vertical filter menu should have the same top alignment
- Horizontal filtering bar at top of product list (can be additional to vertical left filtering options) works best when there are only a few filtering options
- Collapse long filtering lists after around 10 filtering values, and clearly indicate that it’s collapsed with ‘see more’ text
- Each filter selection should be a separate action in browser history (many users rely on the back button)
- Auto-refresh search results after a filter has been selected (or deselected)
Guideline #137. Offer filtering options.
This should be a bit of a no-brainer, as filtering is now a feature of all successful ecommerce sites.
If you sell just a few different products, filters are unnecessary. For all other sites, however, filtering is essential to the search process. Many people heavily rely on filtering tools to find what they’re looking for.
Follow convention and either design filters as dropdown boxes at the top of the product page, or as a vertical menu on the left side of the page.
The lack of filtering options available was quite frustrating. I was surprised that a price filter was not utilized especially with a clothing website.
[Frustrated by] the lack of sorting and filtering options on the search results page.
I would have liked to have more filtering options when looking at the items. Being able to filter by price is nice, but I would also like to filter by color, rating, etc.
..add more filter options, like brand, size.
On the first task I did not see a filter option for price. So I had to go through each item. I would have liked some filtering options (price, best seller etc.)
How to do it RIGHT
Lowe’s
Displays filters as collapsible tabs on the left side of the product page
Guideline #138. Don’t confuse sorting and filters.
Sorting applies to values that organize any list of products. Sorting values commonly include price (low to high), best sellers, and highest rated items.
Filters are values that only apply to the current scope of products. These include things like materials, brand, finish type, dimensions, etc.
Imagine a user is browsing for a refrigerator. Filter values would include cubic space, ice maker type, Energy Star qualification, etc. These values do not apply to the majority of products for sale online.
Hayneedle f
Guideline #139. Choose highly relevant filters; depends on product at hand.
Consider what matters the most about a product when people make purchase decisions.
REI has highly relevant filters for their sleeping bags,
There were a lot of categories and good filters to search through them.
Felt like the site could have had a few more filters after I got into the right department and I found the types of lamps I was looking for (color, material, bulb wattage) to help pair down the search results so I didn’t have as many lamps to look through.
I liked that the site was user friendly and … it had great filters.
I did not see an option to filter the list by the price I wanted to pay. I also did not see a way to sort the list by price. I feel that those two options are very important when I am looking for an item as it helps narrow down the list of items I want to buy.
The lack of a price filter was annoying when trying to meet a budget.
How to do it RIGHT
BodyBuilding.com
When browsing the pre-workout product list, provides relevant filters that influence purchase decisions.
L.L. Bean’s
Filtering makes it easy for users to narrow down precisely what they’re looking for.
Guideline #140. Learn how people use your filters, adjust them accordingly.
Collect qualitative data to learn about the power of your filters. Use email and on-site surveys to analyze whether visitors utilize filtering tools, and if so, which are used most.
Collect quantitative data using Google Analytics. Measure which filters are used most often and adjust from there. You can also conduct heat map tests to collect quantitative data, as well.
I would buy because of … the appropriate filtering options.
I was frustrated that the filter search wasn’t present on each page. I had to go three subcategories in for it to come up, and I think it would be helpful to have it on any page with products displayed.
Guideline #141. Promote popular filters to the top of the list.
Increase usability and search flow by placing popular filters at the top of the page.
Additionally, if you use collapsible filter tabs, popular filters can be expanded to draw more attention.
Newegg e
The only thing that frustrated me was that I couldn’t limit my search by color or price.
Guideline #142. Filters on the product list should be high in visual hierarchy.
Because filters are often used to find products, they should be prominent in the product list.
Follow convention and place filters above the fold on the left side of the page.
Home Depot’s filters are prominently and conventionally placed:
To improve the site i would consider making the filter more prominent or possibly bring the different aspects within the filter out and just have them as sort functions for sizing and colors.
There was no way to sort or filter the items once you selected the category. It would have been great to be able to narrow down my choices once I selected a category.
I think my frustration would be that the filter was a little hidden, it didn’t let you know clearly that there was an option for color filter.
The drop downs for the filters were a little hard to notice at first.
Guideline #143. Filter values should have checkboxes.
Users need to know which filters are selected. Create checkboxes as visual indicators.
Lowe’s:
I really enjoyed how … the filters incorporated selection boxes … which made for a great intuitive experience.
Guideline #144. Allow users to select more than one filter.
This common functionality allows site visitors to take full advantage of filtering options.
The only thing that was a bit frustrating is that I was only able to select one sub-filter (e.g., 0-25) under the price filter. If my budget was under $50, I would have liked to have been able to select multiple choices (e.g., 0-25 as well as 25-50)
[I was frustrated] that [the] site reset my color preference when I selected to sort by price.
It was frustrating that I was unable to select more than one pricing category as a filter at the same time.
When searching for items I could only use 1 filter option at a time.
Make it able to use multiple filters for searching for items we are interested in.
Guideline #145. Show how many products apply to each filter choice in parentheses next to the filter choice.
If users can see that only two products apply to the current filter choice, they’ll know not to get any more specific.
If users see that 1,274 products apply to the current filter selection, they’ll know that they can continue to trim down the results.
Showing the number of products available for a filter selection quickly provides valuable information for users’ search journey
The most frustrating thing would have to be the way the search results were listed for an item I was looking for. They were really only 2 of the types of shirt that I was looking for but it listed 7. I was misled by the amount of options because all the different colors for a particular style was listed in the search results.
How to do it RIGHT
Home Depot
Allows users to select multiple filters and shows the number of available items for each filter selection in parentheses
Guideline #146. Only display filter values that apply to what’s available.
If you sell purple bikes, but none for men, don’t allow users to choose both the “men” and “purple” filter selections when browsing for bicycles.
Home Depot a
Guideline #147. Offer themed filters (“fall sweaters” filter in sweaters and jackets product list).
Especially during holidays (e.g. Christmas) and special times of the year (e.g. back to school), themed filters are both a useful and fun addition to typical filters.
Some people will be shopping for gifts, some will simply be browsing and looking for inspiration. Themed filters facilitate these browsing behaviors.
Guideline #148. Offer a “clear all” option for filter selections.
The “clear all” filter selection allows users to remove any applied filter selections with one click.
When users get too specific with their filter selections, want to get a feeling for the full scope of items available, or just want to start their search over again, they can click the “clear all” button to do so.
H&M allows users to clear all filters:
Lowe’s also offers a “clear all” option:
Guideline #149. Filter tools should be sticky, especially for endless scrolling and “load more product lists.
A sticky filter tool will increase usability. Instead of having to scroll all the way to the top of the product list, users can access filters wherever they are on the product list.
Guideline #150. Horizontal filter menu and vertical filter menu should have the same top alignment.
If you display filter tools both on the left hand side and the top of the product list, align the top of the two menus.
Home Depot aligns top and side filtering menus:
Navigation and filter options were available on the left menu, as well as on the header Navigation bar. This made navigating from page to page a breeze!
Guideline #151. Horizontal filtering bar at top of product list (can be additional to vertical left filtering options) works best when there are only a few filtering options.
Horizontal filtering tools are becoming more common, and for good reason. In a recent usability study, horizontal filtering proved more visible than sidebar filters.
Some sites combine filter and sorting tools in the same horizontal bar.
However, horizontal placement only works when there are a few filtering options, simply because there’s less space across the top of a product list.
West Elm places its filters horizontally:
I really liked the filter that [was] placed at the top and it made it very easy for me to get the exact item that I wanted.
Guideline #152. Collapse long filtering lists after around 10 filtering values, and clearly indicate that it’s collapsed with ‘see more text.
Displaying an extensive list of filter choices will slow down users who want to get onto the next filter. Create collapsible tabs for filters with many selections so users can quickly move on to either the next filter, or expand the selection.
Lowe’s online paint section:
I might suggest auto collapsing the filter drop down menus after making a selection.
Guideline #153. Each filter selection should be a separate action in browser history (many users rely on the back button).
This guideline aims to increase usability for those who use the back button as a navigation tool. If each filter selection is an action in the browser history, users can simply click the back arrow to undo any filter selections.
If I am looking for a product, I want to easily be able to go back and forth between the product search and viewing functions. Depending on the browser back button is an oversight of the development team.
Guideline #154. Auto-refresh search results after a filter has been selected (or deselected).
Don’t make users find and click an “apply” button each time a filter selection is chosen. Instead, enable auto-refresh settings every one or two seconds to continually update filter selections.
The [filters] that I chose were not remembered from one page to the next all the time as I navigated the product search and I had to enter the color/cost multiple times.