Challenges of increasing usability on table filter for huge amounts of data
I am working as a UiUx designer at a fast-growing start-up in Denmark. Our team is building a high-complexity system for municipalities to better manage waste volume, waste collection efficiency, and citizens’ requests. At the same time, our mission is to keep the system intuitive and efficient.
Visit WasteHero solution here!
As you probably could imagine, the system for municipalities to manage waste for all citizens requires a lot of data. Such as container data, residential information, routes & stops, tickets, and so on. It can easily be more than 100 thousand items in each data category that include different statuses, locations, priorities, and more. Sometimes, it could be frustrating and time-consuming to locate data and keep track of information in such a complex system.
Therefore, we want to provide the easiest and most efficient way for our users to search data in their daily operations — Optimising the table filter is one of our first steps.
Challenge 1: Unlimited amount of filter items
Most of the services in the market have a predefined or limited amount of items in the filter. A shopping site, for example, the filter can be the price range, date, color… etc.
We were taking the same approach as we think it might be the most familiar way for users to filter data. However, the biggest challenge we met is that the filter item in our system can go up to 100+ as filter items are fully customizable in our system. A simple drop-down menu in the filter bar will no longer meet the need of our users as (1) it requires a lot of scrolls, (2) lacks a good overview of all data, and (3) it is hard to have more than 5 filters in limited screen space.
Therefore, we tried to adapt our filter in a modal that makes the filtering option easier and more flexible — and increases the possibility to filter data in a more creative way.
The filter now has the capacity to (1) Contain more items, (2) Enable users to search filter items, (3) Provide a better overview of what filter options they have, (4) expect how much data the user is currently selecting, and most excitingly (5) offer a possibility to filter data in a more creative way. Ex. using maps to mark regions, charts to visualize values, and more.
It could seem like we are steering to a more complex solution, however, we need to acknowledge that a complex system requires a comprehensive UI solution. But it never means we would sacrifice intuitiveness.
Challenge 2: Reducing clicks amount and clear communication
Unlike shopping sites where the users use filters for browsing the information they want, the user in the operating system is searching for data for purposes. They most likely know what they are looking for and want to do it super FAST.
The main issue with the 1st version is that the user has to do the filter setting every time in order to see a certain data group when they enter the view. And as mentioned, the filter can go up to 20+ or even 100+. It could be irritating to do it 10 times a day.
To solve this problem, we introduced a save filter functionality and a clear list of the selected filter item on hover. So instead of 10+ clicks for setting up a filter every time to view certain items, now will be 2 clicks. And users can easily see what data they are currently viewing.
Wrapping up
The purpose of filtering data is to help users to focus on the data that is meaningful to them. There are tons of excellent filter examples out there that are designed for different purposes and user groups we can explore.
In our use case, the filter needs to be very flexible, expandable, and able to adapt fast to users’ criteria. Hence, we see the importance of embracing system complexity and finding opportunities for expanding functionality.
