Licensing
Find a Needle in the Hay: finding best practices for filter component in Sperta
As our business boosts, the exiting filter components for the tables no longer meet the both our product requirement and user needs. Thus, it is imperative of us to redesign and upgrade our filter component
Filters are the tools our users will rely on to help them navigate their options and make a decision. It’s the complexity and lack of consistency that the data usually entails which requires some filtering.
Key users goals
Efficiency: the design should minimize the time needed for users to get from the default state (when no filters are selected) to the final state (when all filters are successfully applied).
Precision: the design should be aimed to help users target the desired data without misunderstanding, instead of helping them exploring like e-comerce sites
Customization: the design should be fully customizable to user needs, which serves different target stakeholders like data analysis, managers, engineers.
Challenge
How to convince all stackholders that the redesign is better?
How to observe all problem and find the right solutions?
The problem
Analysis the existing ones
To better understand the different problems in our filter components, I started the investigation by collecting all filters across the product and listed out all the pros and cons
Problems of our existing filter components
Key problems & iterations
1. Ambiguous & unpredictable searching
Users are unclear about what to search. Customer feedback indicates that users also tried keywords like expressions and names of authors, which weren't supported by the search feature.
To solve this problem, one possible solutions is to move the search with autocomplete and fuzzy logic into each filter category to help enhance the uer experience
2. Filter categories stacking in the sidebar inefficiently
Constrained by the sidebar layout, it is hard to adapt the filter into specific data categories, especially after we have filters in the sidebars.
Some filter value lists like stage context may get longer, and users need to scroll more times to get the overview of all filter categories.
Possible solution includes
Make the filter value list scrollable, however:
1. The small scrollable pane itself is a bad UX: stage context list still may get super long, require the users to vertically scroll to browse through them. The users need to be extra focused to use such filters
2. the scroll bar of the filter category may overlap with the sidebar's scroll bar, causing usability issue
use the collapsed accordion to contain their filter values, however:
1. stage context list still may get super long and push other filter categories downward which make it harder for users to discover other desired filters
2. make it harder to roughly predict what filter values users will find within each filter category
use the "show more" button to contain their filter values is better than the scroll bar idea, however:
1. stage context list still may get super long and push other filter categories downward which make it harder for users to discover other desired filters
What if we ditch the idea of the sidebar, and use only the horizontal filters to form a toolbar with the CTA button.
it can save a lot of space that can be used to display the content and, in the long run, it can be easily implemented on multiple UIs because it takes up an equal amount of space above any sort of listing (grid).
3. Batch filtering increase labor and time
The old filter required users to choose all filter value and click "Apply filters" button beforethey can see the filtered result. However, during our UX testing,
lack of an overview of applied filters
slowing down the process of tailoring the product list, more labor intensive
Without an applied filters overview, desktop users need to look to the filtering sidebar repeatedly to confirm which filter options have been applied.causing disorientation
no obvious and immediate confirmation that filters have been applied
not having a quick way to remove filters
Possible solution includes
Overview above the filtering sidebar, however, displaying applied labels can be problematic because of limited width of the sidebar. And users need to scroll though the tall sidebar repeatedly if we have multiple filters with long value lists.
Overview above the filtering sidebar. The applied filters are on separate lines, and the addition of each filter pushes the filtering interface further down the page, may takes up more vertical space
Overview below a horizontal filtering. This solution is better since the horizontal toolbar has wider space. Then, the next question is how to display the labels if users apply multiple filter values from the same category
4. Limited applied filter values constrained by the top bar layout
Competitive analysis
Learn from others
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Interview & testing
Survey, usability testing & lots of data
We conducted rounds of usability testing to test between sidebar filler and horizontal filters
Test observations 1: a horizontal filtering toolbar can help users more concentrate, enhancing efficiency
Users tend to scroll upward towards the top of the product list if they want to alter the data displayed.
Thus, the horizontal filtering and toolbar can increase both the discovery and the utilization of a site’s filters.
Applied filters work well with horizontal filtering toolbars because all filtering features can be concentrated above the product list, allowing users to apply and deselect filters in a single area of the page, which means users no longer need to open the sidebar repeatedly to change the applied filter
This is a heatmap from the eye-tracking study we did showing the accumulated eye-fixations of 32 test participants. This clearly confirms that a horizontal filtering toolbar can have higher discovery rate and users concentrated more in the toolbar above the table
Although the horizontal filter tool bar is limited by the screen width, it works well with our sites that naturally have few filters. Customer feedback indicated that users normally apply less than 3 filter categories, which allows the filters to reasonably be fitted onto a single line
Test observations 2: Avoid tiny scrollable panes
Various lengthy filter sections in a tiny scrollable panes is a common frustration shown after just a few usability sessions with customers who try to use filters on their own device. And it is also hard to scale to accomodate future updates
These sections often cause customers to scroll vertically, slowly, accurately, with extreme focus and precision.
The solution
Finally!
We conducted rounds of usability testing to test between sidebar filler and horizontal filters
Horizontal filtering toolbar, with the most used filters surfaced
we identified the few filters people use the most and displayed them comfortably in the horizontal toolbar to avoid users repeatedly looking for the same filter. Anything else is tucked under the ‘+ filter’ dropdown
Customized dropdown for each filter catagory, with data table live-updated when filters are applied
Searching with fuzzy logic in each filter category, accomodating different stakeholders' needs.
While some users know exactly what they want (they are likely to search by keywords directly), other users need some hints to refresh their memory. This will allow the user to narrow down their search quickly and more comfortably.
Searching with fuzzy logic, accomodating different stakeholders' needs
Displaying applied filters in the filter toolbar redundantly
The dark “Xs” within the applied filters help to draw attention, and the “Clear All” link allows for their easy removal.
Users will find it easy to confirm what filters are applied, remove those that are not needed, and keep apprised of the context of the list.
Note, however, that as more filters are applied another row is added, pushing the product list further down the page.
View the full prototype
What's the next step?
More customizable, more fluid
In most of the Enterprise solutions, however, users need to drill down deeper than a regular user might on a e-commerce website. For this reason, it is helpful to define specific filter presets that the user can switch between when looking for commonly used items. A further benefit of this is that the filters are fully customizable to user needs, creating a more fluid workflow.
If we were to take this even further, we could analyze the most commonly used filters by user type and display them according to each new user that might start using the interface, or come up with suggested filters for the more experienced users.