.svg)
Give the users always an option to filter by price, user ratings, color, size, brand, stock status, delivery speed (if applicable), and "Sales/Deals"
These are the essentials that help users to narrow down the selection on the category pages. Go more in detail, and show real colors for color filers, material thumbnails, icons where applicable, etc - be visual.
Help users to narrow down products with category-specific filters
For example, if "Material" is relevant to a category, showcase it on the filters. Think about the product attributes that "speak" with your users, and help them match it better. A few examples: material, organic, origin, designer, neckline, dress type, sleeve length, body fit, new arrivals - you get the idea!
Help users to narrow down products with thematic or seasonal filters
A few examples: "Occasion: Gift, Present, Surprise; Style: Casual; Season: Winter; Holiday: Christmas; Usage: party, outdoor; home office". Think about where and when users can use the products and help them find them based on the occasion.
Help users to narrow down products with symptomatic filters
For some products, especially in the cosmetics industry, it makes a lot of sense to help people find items per symptom or use case. Examples: "Concern: Dry Skin, Pores, Wrinkles, etc." or an Activity "Place: Gym, Work, etc."
Please users by allowing to always use multiple filters at once
And update the available filters based on the product's current scope (meaning hide irrelevant). As a bonus tip, add tooltips or explainers on some niche and industry-specific filters, that may not be obvious to the majority of users.
Keep the to filter and filtered numbers/results always clear and accurate, and enable quick changes
Show how many items there are to filter, and how many after filtering, and even show per filter attribute level. Give the users the option to clear filters per attribute, and attribute block and also an option to clear all filters.
Please users with these key UX and design principles
You always need to visually indicate the hierarchy and relations (imagine a bullet list with sub-bullets - and always use checkboxes for filters), and whenever the count of attributes per filter exceeds 10, present a show more option (allow users to search filters if the list is huge). For mobile users make the filters and call to action always sticky
Keep sorting and filtering separate, and do not mix it up - and make them update Live
First users usually filter and narrow down, and then they might sort the products - keep them always as two separate features and never reset user filters after sorting.
Keep in mind the very basics of a good sorting experience
First off, allow users to sort by relevance, price (low-high), user rating (low-high), best selling, and newest first. Secondly, keep the sorting available at the top and at the bottom of the page - and always use a dropdown for sorting options. Thirdly, if some sorting options are not applicable to the filtered list, hide them dynamically.
The bonus checklist
Personalize the experience by showing the filtered product variation on the product page while the user navigates from the filtered category view to a specific product page
It dramatically helps users to save time and not do the filtering again, which might cause friction and abandonment.
Show filters by popularity, meaning track the usage and place them wisely to help user users find the products even faster
This is a simple yet powerful exercise, Google Tag Manager or any other similar can provide useful data quickly to make significant improvements.
The “please avoid” checklist
Avoid resetting filters while sorting!
Unfortunately, it happens a lot and on many sites. As soon as you touch the sorting, filters are gone, and vice versa. It really frustrates people.
Avoid making people double-click to apply filters
Usually, people need to see changes take effect immediately. As soon as people select filters, ideally, you show the results too. If you have issues with speed, then as an alternative, you can have a button to "Apply filters", which will allow the user to add several filters and then Apply them at once.
Avoid poor page speed
One two three four five six .... Bye-bye. Speed equals money in your pocket. Remember that, keep your Google page speed index above 90 on desktop and above 70 on mobile.
Avoid poor design, bad use of colors, and low contrast
It has been proven with research, that every 1 USD you invest in design and user experience improvements brings back 100 USD on average (https://tinyurl.com/wunderfront). Do not underestimate design, first impressions, and color psychology. Keep navigation and call to action of high contrast.
Avoid reinventing the wheel
Instead, use plugins, and ready-made software to cover these core guidelines.
Avoid alphabetical sorting
Ask yourself if an alphabetically sorted category page represents a personalized shopping experience, and who can it actually help?
.webp){kind=logo}
.png){kind=logo}
