Infinite growing item collection

Question

We have a webapp that lets users to create their own tags and assign them data rows for identification purposes.

Currently design looks something like this like this:

--------------------
Created tags:
tag1, tag2, tag3,
tag4, tag5...
--------------------
Table of items:
item | tag2, tag5
item | tag1
item | ...
--------------------

The problem we are having is that some users use 1 to 3 tags and others use 50-100. So in other words, design & UX has to work with arbitrary amount of tags. We also make it possible for users to click a tag and filter table below.

So we've been trying to find a way to display tags so that it can handle arbitrary amount of tags but still keep it very simple. We considered using collapsible tree menus but from UX POV that looks cumbersome when you've 1-3 tags and you've to click trees open. Current design works great with small number of tags but falls apart when you've a lot of them.

Is there any patterns that would handle this type of UX better than our solution?

Answer 1

You can display reasonably number of tags and hide others. Then display them in popup window on user click, see picture.

Initially displayed tags could be choosen by they importance or weight or frequency.

Answer 2

We are probably going to do something like this. Idea is that user has 1 level categorisation available. They can create categories where they will store their tags. This way one category won't have 100s of tags. App's use case is limited in scope so I doubt users will make more than 5 categories and due app's nature we can also do some color coding with categories to make better UX all around the app.

Answer 3

Funnily enough, Stack Exchange sites have the same problem!

The way they solve it, is by using a text field with suggestions appearing in a <div> once the field has focus. It is initially filtered based on the title and content of your question, but then refined once you start typing to include substring matches.