Skip to main content

Hi everyone!

In this blog I want to take you through my thought process regarding the Filter, Sort, and Search functionalities in the Universal GUI. I’m introducing a couple of concepts for which I’m particularly curious to hear your thoughts.

 

Introduction

Over time functionality has been gradually added, each of which has improved the Universal GUI. However, we also notice that it can resulted in a more cluttered and less intuitive user interface where certain elements are hidden or not very user-friendly.

Based on my own review, drawing from my experiences and comparing with best practices around Filter, Sort, and Search, I came to the following conclusion:

  1. Filters are hidden: The filtering option is not immediately visible and is buried under the … menu.
  2. Unclear status of active filters: While filtered results are shown after applying a filter, the positioning of the filter interface is not always intuitive, making it hard to find and unclear whether a filter is currently active.
  3. Sort: is not working as it should - Sorting is possible, but there is no option to resets it back to the default sorting.

 

With the 2025.1 release, we've made significant progress. Related to this topic, for example, the active and inactive states of the pre-filters have been improved. It is also now possible to enhance usability in the Universal GUI to some extent with the Configurable Action bar. The Action bar is customizable according to your needs. This gives you the freedom to tailor it to your own requirements or those of your users. I’ll tell you more about this in my blog about the capabilities of the Action bar.

 

As indicated on the Roadmap 2025 H1 topic (Roadmap 2025 H1 | Thinkwise Community), Filter, Sort & Search will get more advanced features soon. Behind the scenes, we have been working on how to gradually optimize this topic. Currently, we are focusing on areas such as the Filter in the Detail Tab and AND-OR filtering.

To avoid going too far off-topic, I will walk you through the concepts I have developed. As previously explained, I have done this based on my own experiences, best practices, and also your earlier feedback on this topic.

Criteria for the desired to-be state:

  • Visible Filter button: Filters should be directly accessible and not hidden.
  • Clear indication of (in)active Filters: Adding visual cues to clarify whether Filters are active or inactive.
  • Replace the Quick Filters: Optimizing Quick Filters for a more intuitive experience.
  • Improving the Filter: Enhancing the structure and usability of the Filter form.
  • Improving the Sorting: By adding a reset to going back to the default Sorting

With these improvements, we aim to create a more intuitive and user-friendly filtering system.

 

Wireframe concepts

To begin with, it's important to understand that the concepts below are wireframes. This means they serve as a digital sketch of the interface. The primary purpose of a wireframe is to gain insight into the functionality and structure of a design, without involving design, color usage, or visual style. Wireframes help define interaction and user experience early in the process, ensuring the focus is on usability and logic rather than aesthetics.

 

Concept 1: Quick win

In Concept 1, the filter has been removed from the overflow menu and placed next to the Search bar and Pre-Filters, ensuring that filtering takes place specifically on the left side. Additionally, the Quick Filter has also been removed from the overflow menu and now becomes visible on hover within the cell. The Excel Filtering remains unchanged, but its icon has been applied consistently and will be visible when an filter is active. And the sorting starts with the default order. When clicked once, it sorts A-Z or 1-9. A second click reverses the order to Z-A or 9-1, and a third click resets it back to the default sorting.

The ideas of the Quick Filter, Excel Filter and Sorting are applied to all concepts.

 

Concept 1: Quick win

Concept 2: Improved Filter Form

This concept builds on the quick win. The idea behind it is that the filter button allows users to open a predefined Filter Form. This form contains a selection of 4-6 frequently used filters, including the Search function, which can be further configured in the Filter Pop-up. The Search function is integrated into the Filter Form to reduce Action bar buttons and trigger users to use Column-specific filtering first, ensuring a faster and more responsive interaction with the GUI. Filters from the Filter Form can also be adjusted within the pop-up.

Additionally, in this concept, the display of active filters has been clarified. When a filter is active, a small "X" appears in the input fields, allowing users to easily remove it. At the column level, the filter icon remains visible at all times, with a warning indicator to show that a filter is active. This also applies to the filter next to the search bar, which, like the column-level filter, now visually indicates its active status.

Concept 2: Improved Filter Form

Concept 3: Filter in Search

The idea is to filter directly from the Search bar, similar to how it works in Outlook and Gmail. In this concept, the Filter icon becomes redundant, as all filtering can be done via Search queries. However, if the Filter icon is clicked, the filter pop-up will still appear with the previously explained functionalities.
To enhance visual recognition, a red indicator is used to clearly show when a filter is active, making it easier for users to see which filters are currently applied.

Concept 3: Filter in Search

Filter by typing

Something that should complement the Search in Filter concept well is an idea I have visualized.

When a user searches for a specific word, the first results are displayed immediately. At the top, the user has the option to search within the detail tabs, with the default setting set to "All."

The search term is not only matched with the content of the columns in the main view but also with the columns within the detail tabs, ensuring a clear and structured display of the results.

From this view, the user has the option to open all results or activate the filter pop-up for further refinement of the Search query.

Filter by typing

Concept 4: Pills 

This concept builds on Concept 3, where the "Search in Filter" functionality remains the same. As an enhancement, I’ve introduced Pills to clearly display active filters as visual elements, giving users an even clearer overview of the filters they have applied.

When filtering via the search bar or the pop-up, Pills appear on the screen. This best practice provides a visual representation of active filters and allows users to easily remove them. In practice, multiple filters are often active at the same time, causing the Pills to be displayed side by side. This ensures a clear and manageable overview of all active filters, making it easier for users to adjust or remove them when needed.

Concept 3: Filter in Search

 

Concept 5: Collapsible filters

In this concept, i’ve moved the prefilters below, keeping the row with the search bar, filters, and action bar clean and organized. All filters including prefilters, active filters, and related buttons are now grouped on a lower level, which can be shown or hidden using the filter toggle or close button. This approach gives us a clean and streamlined GUI that can easily expand when the user needs more filtering options, without overwhelming the main interface.

Concept 5: Collapsible filters

 

I hope I have been able to give you a clear understanding of my approach and the reasoning behind my concepts. Could you let me know which concept you prefer and why?

Thanks for this blog post!
Filters — especially Excel-style filtering and filtering on details — are exactly what we've been waiting for since we started working with Thinkwise. It's great to see that this is now getting attention, and the concepts you’ve shared look promising.

Regarding concept 1. By using the custom action bar, I’ve already added the filter next to the search field — which feels very logical and intuitive. This works for sure. Putting the quick - filter in the cell will also be more clear to the user.

Regarding Concept 2 and the 4–6 frequently used filters:
Will this be user-specific? And will it be possible to configure this within the subject settings, similar to how we can define the number of columns for a form?

Also, I would suggest including the name of the field within the filter input itself. When using outlined form fields, this might actually be a nice option. Currently, for example, I see “Senior Product…” — in that case it’s clear that it's a function. But for fields like first name and last name, it would be helpful to show the field name explicitly to avoid confusion.

As for Concept 3: if the search is fast enough, it could be a viable option. However, based on experience, that’s currently not the case. Search works reasonably well for up to 4 or 5 fields, but not across all fields of a table.

Regarding the use of pills: how will these be shown when a selection is made in detail tabs?
It’s definitely valuable for users to be able to clearly see which filters are currently active.

It will also be very interesting to see how detail tab filtering will be implemented.
When do you expect to share wireframes for this? Looking forward to this

​@Mustafa Kazanc I tend to prefer concept 4 as it the one that could unify the filter concepts. Maybe with the option to collapse the pill-bar (or whatever it could be called). Basically you how have:

  • Pre-filters
  • Filter form
  • Search (is also filter)
  • grid header filter
  • and full filter in overflow 

It has been, and still is, in some scenario's not to obvious te see which filters are active. Besides the fact that users tend to get lost where to filter what. 

I am an advocate of unifying all filters, including the pre-filter one. Using pills could achieve that, because you can show the pre-filter as a pill as well. 

And with pre-filters you also have the hidden version, where especially in case of column based filters it can be handy to show there is a filter active on a column..  but then again you sometimes really want it to be hidden :) 

So a +1 for concept 4 for me. Hopefully a future place to go for all your filter questions. 

Hey ​@Mustafa Kazanc ,

First of all, great post! Thanks for sharing.

I would prefer a combination of concept 3 and 4. So a pill telling the user what column is being filtered on. And maybe make it like how Discord does it, the ability to prompt your search. Like type in the name of the column you wanna search in and then folled by the keyword of your search.

Ohh.. and the ability to save your prompt and to set one you always want to open your table with. That also makes users very happy ;)

However, like ​@avandervelden said, searching across 5 columns goes “oke-ish” as long as you don't have to search more then 25000 lines in the table. But we have tables that have the potential of growing into large tables of +3 milion record lines and 20 columns. Try searching that one cross table before the time-out kicks in. This is also my biggest concern.

I hope the feedback helps you to make the right choices in your project! Would love to see what's coming from it.

Gentlemen, first of all, thank you for your valuable feedback — I truly appreciate it!

​@avandervelden 

To keep it clear and organized, I’ll respond to each piece of feedback separately, per concept.

Concept 2:

The underlying idea was indeed to align with the current behavior of the Filter Form, based on Subject → Data → Filter setting 'Always'. It would be user-specific, depending on the number of columns. Ideally, I would aim for 4 to 6 columns. As mentioned, having more is certainly possible, but these would then be managed through a pop-up menu where configuration is possible (for example, adjusting the order), in order to keep the main screen clean and organized.

Regarding your comment about the form: you raise a valid point. However, this is a matter of wireframe versus UI design. In the final design, the input fields will be styled correctly. As mentioned earlier, my intention is to guide you through my thought process, focusing on interaction and functionality first, separate from the visual design at this stage.

Concept 3:

Good point — I fully agree with you. We will definitely take performance issues into account, especially if we move forward with a concept like Filter in Search. After all, when something performs well, it naturally results in a better experience.

My thoughts here is that filtered data should be clearly visualized with a pill. To maintain consistency, we want to apply this approach across the board. As I mentioned in my blog, we are also working in the background on the AND-OR filter functionality. A little sneak preview: this will run parallel to the filter in the detail tab. Ultimately, all this will come together in the "Advanced Filter," where users will be able to build their own filter structures as needed.

When a filter is applied through the Advanced Filter — for instance, when filtering within a detail tab — a pill will indicate that an Advanced Filter is active.

Keep an eye on this community idea in the coming days we will update it with the AND-OR filter.

​@Freddy 

Based on your input, I’ve created an additional concept, and I’m curious to hear if this works better for you.

​@The Boulder Guy 

It’s actually possible to save a filtered state as a prefilter this might be a useful solution for your case, as it provides a similar experience to what you are suggesting. I completely understand your concern about large tables with many records and columns. That’s exactly why we want to give filtering the right attention, ensuring that users can quickly and easily surface the relevant data without performance issues.

Tip: Keep an eye on this community idea in the coming days. We’ll soon be adding the AND-OR filter there, which could also be very interesting for handling large tables!

Hi ​@Mustafa Kazanc ,
Very nice concepts!
It's hard to pick one, I really like nr 4 and 5.
One thing I often run into is overlaps between a prefilter (for exampe “today”) and then filtering on records from last week. When the user filters on for example a date column which is already being filtered on by e.g. a prefilter one of them should be disabled or at least clearly marked.

Hi Mustafa,

All nice concepts! I think only Concept 1 works good for small action bars and small devices. 

In that context, it might be an interesting idea to have 2 overflow menu buttons in the action bar. Named "Near" and one for "Far", similar to the buttons that are assigned to them.

We now position all filter functions on the left, but have noticed that filter and other actions end up together and mixed up in the right side overflow menu if there is not enough space.

I have posted a some questions and ideas regarding the action bar, perhaps you can also look at those when you work this out further:

https://community.thinkwisesoftware.com/questions-conversations-78/behaviour-prefilters-in-action-bar-5910
 

https://community.thinkwisesoftware.com/ideas/rename-task-for-action-bars-5909 

Hi ​@Mustafa Kazanc,

I would prefer options 4 and 5. I think both options should be available, but which will be used should by something a developer can set up per screen type.

To achieve this, you’ll need to have the filter setting (pill) bar as a screen component with an additional setting to determine whether or not users are allowed to hide this section.

This will also allow you to have a different behavior on mobile devices because you can use a different screen type for a specific resolution.

Reply


Terms & ConditionsCookie settings