Facets (the term "filters" is often used as synonym) in search results pages are allowing your users to narrow search results by different product attributes or categories.
Nosto Search will automatically select which facets to show based on the products in the search results page or a category page. It will show only relevant facets based on shared attributes of the most relevant products.
It will also show only available facets. As soon as a user selects a facet value, Nosto Search updates the available facet options based on their current selections. This helps users avoid dead-end searches with no results and ensures that only relevant facets are displayed.
Creating facets
To create a facet group, you should use a product attribute, that is relevant for your users. It should contain data that can be used for showing facets. For example, if we look at a Color facet, its values should be something like Red, Blue, or Orange. If the color attribute’s values are not prepared well e.g.; red-color, #FF0000, color5, it won’t be relevant for users and shouldn’t be used for facets.
Facets order
When users search, Nosto’s Search will select and show only those facets present in found products data. We call these facets contextual facets. You can also set facets in a specific order if you prefer some facets always being in a certain position. This is done in the Facet Manager by clicking on the 3 dots and pin.
Facets look & feel guidelines
We recommend that facets look the same way both in search and category pages. Users shouldn’t feel a difference exploring products as both search & categories help users find products, and experiences should be aligned.
Here are some best practices for creating a relevant and user-friendly frontend UI for faceted navigation:
Show counts next to facet values so users can expect how many results will be returned if they click on it. This makes them trust facets more and use them more often;
Opt for Multi-Select Options: Allow users to select multiple values within a facet to create more precise search results. This enables users to filter products by multiple colors, sizes, or brands simultaneously.
Show Selected Filters: Clearly display the user's selected filters, so they know what criteria their search results are based on. Provide an easy way to remove these filters, such as an "X" icon next to each selected filter.
Responsive Design: Ensure your faceted navigation is easily accessible and functional on all devices. Consider using an expandable filters menu on mobile devices to conserve screen space and prevent clutter.
Use Clear Visual Cues: Use icons, colors, and typography to distinguish different facet types and selections. This helps users quickly understand the available filters and their current selections.
Collapsible Facet Sections: Consider using collapsible sections to save space and minimize visual clutter for some facet types. This allows users to expand and collapse facets as needed, making navigating through the available filters easier.
Use Familiar UI Patterns: Stick to familiar UI patterns for facet controls, such as checkboxes for multi-select facets, radio buttons for single-select facets, and sliders for continuous values (e.g., price ranges). This makes it easier for users to understand how to interact with the filters.
Accessible Design: Ensure that your faceted navigation design is accessible to all users, including those with disabilities. Use proper contrast ratios for text and background colors, provide alt text for icons, and ensure keyboard navigability.
By focusing on these design and UI elements, you can create a visually appealing and easy-to-use faceted navigation system that enhances your eCommerce site's search experience and helps users quickly find the products they're looking for.