Menu
#14: Do you show relevant selectors for different types of filters?
General rule for UX of filtering options is to use checkboxes, so once user click on a checkbox, product list is automatically updated based on chosen filtering option. But there are also some cases when it's better to use other types of selectors instead of checkboxes.
Why checkboxes is the best UX solution for filtering options? Because in that case it's very easy to see which options are already selected. But below you can see a few examples of better solutions for filtering options besides checkboxes.

Guidelines:
  • If you have color filters, then it's better to show color swatches instead of checkboxes or names of colors;
  • If you have price filters, then it's better to use price range slider or fields where users can write minimum and maximum prices;
  • If you have filters based on customer reviews and overall rating of a product, it's better to show star ratings in each line.

Bad example of color selectors from Smartwool:
They use names of the colors instead of swatches
Bad example of color selectors from Cupshe:
They show checkboxes instead of color swatches
Good example of color selectors from KylieCosmetics:
They show both color swatches and name of the colors, so users will not mix colors, since some of them are similar.
Good example of price filter from HasbroPulse:
You can use price range slider, which is very easy to use and also you can write specific prcies in the fields for minimum and maximum price.
Good example of star rating filter from Amazon:
Made on
Tilda