Long option lists in filters can significantly hinder users’ ability to navigate a site and find relevant options. Research by the Baymard Institute highlights that overly extensive lists lead to frustration, as users struggle to locate desired values. This often results in abandoned searches and a poor user experience.
FiboFilters has been designed with usability in mind, incorporating all key recommendations from the Baymard Institute to handle long option lists effectively. The following features are implemented to ensure an optimal user experience:
- Limited initial display – the initial display is limited to the first 7 options, with a “more (x)” button available to reveal the full list when needed.
- Search field with alphabetical grouping – when a filter contains more than 15 values, clicking the “More” button will display an additional search field. Additionally, the list of values will be grouped alphabetically.
- Filter values order – filter options are organized logically eg. alphabetically.
- Clear feedback on user selections – selected options are clearly highlighted within the list.
- Mobile optimization
- Limiting the total number of filter values
Limited initial display
In FiboFilters, value lists are limited to 7 options by default. Additional options are hidden and can be revealed by clicking the “more” button. This approach reduces visual clutter and improves clarity, making it easier for users to navigate and interact with filters.
The limit can be adjusted in the plugin settings. Navigate to:
WooCommerce → FiboFilters → Appearance → “Roll up filter value after”
Search field with alphabetical grouping
When a filter contains more than 15 options, clicking the “show all” button will display an additional search field. This feature helps users quickly search through long lists of values. Additionally, the list of values will be grouped alphabetically, making it even easier to navigate and find the desired options.
The limit can be adjusted in the plugin settings. Navigate to:
WooCommerce → FiboFilters → Appearance → “Show search bar after”
Filter values order
Filter values can be sorted using various criteria:
- Alphabetically (default)
- Numerically (only for numeric values)
- By counters (based on the number of matching products)
- By term order (as defined in WordPress taxonomy settings)
You can change the sorting order in the settings of a specific filter:
- Navigate to WooCommerce → FiboFilters → Filters.
- Select the desired filter.
- Click on Advanced settings.
- Choose the preferred sorting option in Values order.
Clear feedback on user selections
Let’s assume a user clicks “More” to expand a filter list beyond the initial 7 values, revealing 10 additional options. The user then selects the last value from the expanded list and collapses the list back to its default 7 visible values.
Will the selected value be among the collapsed? No.
FiboFilters ensures that filter values selected by the user are always displayed in the visible part of the list. This behavior provides a consistent and intuitive experience, making it easy for users to track their selections, even when working with long lists of filter values.
Mobile optimization
All features, including long list handling and search functionality, are optimized for mobile devices, ensuring accessibility and a seamless experience on smaller screens.
Limiting the total number of filter values
By default, the limit is set to 1000, but it can be customized using the following filter:
add_filter( 'fibofilters/filter/max_number_of_filter_values', fn() => 200 );
This default limit is necessary for optimization purposes. Without it, filters with an excessive number of values could negatively impact page loading times, leading to a slower user experience. This is particularly useful for filters with tags, where without the limit, the JSON containing descriptors could become excessively large, further slowing down the page load. Adjusting this limit allows you to balance performance and functionality based on your store’s needs.
Summary
FiboFilters provides powerful tools for managing filter values, including alphabetical grouping, search fields for long lists, and the ability to customize display limits. These features ensure filters remain user-friendly and efficient, even for extensive datasets.