Quick Filters - Static and dynamic
Quick filters are used to help a user narrow down a list by specific categories quickly and efficiently
.png)
UI @Shivani | UX @Dorvan | PM @ James | Eng @ Chris | Copy@ Christina
Introduction
This component aimed at enhancing the user experience by introducing a streamlined & efficient filtering system within our software.
The two types of filter documentation I will be diving in detail are
1. Static filter
2. Dynamic filter
.png)
.png)
Make it easier for users to narrow down a long list quickly and efficiently.
Make it easier for users to narrow down a long list quickly and efficiently.
How might we...
Understanding limitations and exploartion
To solve the existing problem of narrowing a long list we first looked at our existing components to see if we can leverage it but after thorough brainstorming we decided to go with quick filters a new component
.png)
Pagination
The table list was long and had multiple page pagination
Custom filter
The intent is that the users should find results quickly and this solution was contradicting
.png)
Search functionality
Search functionality did not provide an optimal user experience.
Testing colors if they pass accessibility test
Adhering to accessibility standards such as WCAG guidelines. By prioritizing color accessibility, UI designs can be inclusive and
user-friendly for all individuals, regardless of their visual abilities.
.png)
Arctic blue - 200
Arctic blue - 200 is a color we mainly use for tonal buttons and that is why this color was considered but since we are testing against two backgrounds it was not a fully accessible choice.
Azure Blue
Azure blue is our primary color and is accessible against both the backgrounds but since many pages across apps have primary action button using this color, it would create confusion for the users.
Testing color options against our 2 backgrounds - WCAG AA and AAA - 01. Curious Blue
Curious blue is one of our accent colors and is mainly used for hover states but this color after testing against the two backgrounds was not fully accessible
Placement & structure
The filters are placed on top of the table for data proximity and relevance and to avoid adding any new variants of the button I utilized the existing button component.
.png)
.png)
Final Color- Accent purple
Default
#4D2E85
Hover
#EBEBFF
Disabled
#F5F5FF
Component specs
Auto layout
Component states without icon
Application of static filters
No results found
Static filter + search
Static filter + custom filter
Hover state for tooltips
With icon
Static filters -
Specs and states
Static filters remain the same regardless
of the search query
Specs
Responsive breakpoints ( 1920px, 1400px, 1200px )
.png)
1920 px breakpoint for web
1400 px breakpoint for web
.png)
%20(1).png)
Filters wrapped
Filters horizontal scroll
1200 px breakpoint
.png)
%20(2).png)
.png)
Filters wrapped
Filters horizontal scroll
Color tokens
1st draft
.png)
When a user selects 3 options
File setup in Figma
Next project...
Acessibility
.png)
.png)
.png)
Key board navigation
Arrow keys : Left and right for quick filters and down and up for filters with dropdown
Enter/return : To select and deselect the items
Impact
After releasing quick filters in the software, there were several positive impacts on the business. To highlight a few
Increased user satisfaction
One key benefit is increased user satisfaction due to the improved usability and efficiency of the software
Higher user retention
This led positive word-of-mouth referrals, ultimately contributing to customer loyalty and business growth
Enhanced user experience
By enabling users to easily narrow down and analyze data, quick filters can enhance productivity and decision-making,
Gain a competitive edge
Since quick filters solved a specific problem the software may gain a competitive edge in the market, potentially attracting new customers and expanding the user base.
Future
For better accessibility the future version targets on in filter search capabilities and clear all buttons that can be accessed by keyboard navigation
.png)
Dynamic filters - states and specs
Dynamic filters change based on the user's input
Problem context
Users
1. Difficulty in efficiently sorting and finding specific information from large datasets
2. Slower navigation and increased frustration
3. Users were struggling to perform targeted analysis or reporting, which hindered decision-making processes.
Business
1. Decrease in conversion and renewal rate
2. the absence of certain features in our software may lead users to consider alternative solutions
Technical constraints
To understand the complications of applying custom filters and quick filters together, I brought this into our weekly design review meetings and the engineering team highlighted some key pain points.
Increased processing time and system resource
usage.
especially because we were dealing with large datasets
High potential of conflict
Another complication can be ensuring that the custom filters do not conflict with the predefined quick filters, which may require careful coordination and testing.
Challenges in maintaining the responsiveness
There may be challenges in maintaining the responsiveness and performance of the application while simultaneously handling the application of multiple filters