Filters as tags


I got the idea when working on U/X design for Flowbird products:

  • How to be more ‘user friendly’ with filters and query
  • How to show all active filters in a ‘nice’ way

I figured out that I could avoid adding all filters visible in the UI query component, and display all filters one by one as tags on the UI.
This even brought the possibility to add modification options:

  • Deactivate the filter
  • Invert it
  • And of course, edit the filter in the query


After much refactor and UI development, here is the result:

  • Filters are displayed as tags at the top left of the screen.
  • Filters are displayed with as much ‘functional’ labels and value as possible

  • Filters can be removed from the set with their close button

  • Filters can be deactivated, invert (include or not), manually edited
  • When saving a query, all filters and tags are saved with the query

  • A loaded query can be broken down again in the previous filters for edition

The feeling is really great.
It is easy to load a query as default filters, then search, drill down to the selected items. Then cancel some filters and search for something else.

Play with it, tell me what you think! 🙂

Menu disposition change

Due to the lower importance of the free search now – a filter as others -, the save/load query, undo and clear filters (new icon) buttons have been moved to a dedicated tool bar.

Leave a Reply

Your email address will not be published. Required fields are marked *