A compact UI layout for tag-based search

I’ve always been impressed by tags as a way to do search and have been looking to make use of them myself. In my application my initial design for categorizing items was based on the familiar directory-structure, but this presented several problems in relation to search. I needed a more efficient way of locating items so I chose to replace the old solution with a tag-based one. An added bonus was that I could reuse this several other places in my application.

In my application the screen space available for tag search is fairly small. This led me to experiment with how of represent the UI elements. A current sketch is given below. It consists of a tags- and values-section. In the tags-section the left-hand side gives a search input and a page browser. The right-hand side lists the current page of matching tags (constrained by the search text and selected tags). In the values-section a similar search input and page browser is found. The right-hand side lists the current page of matching values (constrained by the search text and selected tags).

In the previous sketch no tags were selected. The next one shows when two tags has been selected, where tag4 is included and tag7 is excluded. Together these will constrain which tags and values are currently searchable.

A possible extension could be types of tags. Not sure if this is something I’d like to add but could be useful for integrating other metadata into the search system. Here tags are extended with types and search input extended with a type constraint which can also reuse the search mechanism for selecting a different type. To abbreviate tag naming some sort of color coding could for example be used to represent types.

In summary, I’m still experimenting with this layout but it seem to working as intended. In my case the search will probably involve some 10 to 1000 items. Tags are usually employed on much larger volumes but I think this UI layout will work out atleast for my setup.

Leave a Reply

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