0

The UI is a web application. There is a set of thousands of objects. Each of them can optionally be labeled by 0-10 tags. Each tag is a key value pair - for example color: red or taste: sour.

The user should be able to search the objects based on 1-N tags. The interface should allow querying the objects based on:

  1. tag existence - Give me all objects featuring the tag key color - its value does not matter.
  2. tag value - Give me all objects featuring the tag key's color value equal red.
  3. combination of above - Give me all objects featuring the tag key taste AND featuring the tag's color value equal red, etc.

Common web solutions like a tag-cloud or a simple auto-select box do not really fit - the tag-cloud selects only the key and auto-select produces only a key or a key value pair.

Having multiple auto-select boxes or even a "query" text input tend to be confusing.

Is there a clean UX solution to this problem?

1 Answer 1

2

You could accomplish this with a series of checkboxes and selectors.

Checking a checkbox would show a selector with a default value of "any", which means that anything tagged with the selected tag would be shown.

Then, the user could change the selector from "any" to more specific values (the selector could support multiple selections).

It could look like this, using progressive disclosure.

three steps of a filter using progressive disclosure

3
  • Thanks, this solution looks great for cases having low count of the available tags. Does it scale with the tag count? The real use case allows for new tags being defined by users. This means each object can potentially be labeled by up to 10 completely different user-defined tags. Therefore the total sum of different tags can be tens of thousands.
    – Yuri
    Apr 19, 2023 at 5:09
  • @Yuri - How many tag keys would there be? And would the user-defined tags have a tag key like "Custom" or another label that would keep them together?
    – Izquierdo
    Apr 19, 2023 at 19:50
  • Assuming the end users are use the tags in a sane way, the real-world tag key count would be 10-20. However, the users are still permitted to define new custom tag keys for each object (there are be objects having "special" properties). The current implementation features no way to differentiate between the Custom and Regular tag keys.
    – Yuri
    Apr 20, 2023 at 7:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.