I am working on a web application for music which uses multi-tier tagging. Artists, albums, and tracks have a separate set of tags from a pre-defined list that can be applied, plus each user may add their own tags to any of these items ("personal" tags are only visible to the user that made/added them).
The list of tags for albums and artists is relatively small, which lead me to use this interface:
If the user clicks in the tag container, a drop-down is displayed with all available tags. If the user types, the list is filtered and the matching text hilighted:
This is already a bit unwieldy, especially if a lot of tags are applied:
... but for artists and albums, this example far exceeds what is typical. With tracks, however, the list is longer (about 7,000 tags), each tag is longer, and thus the whole thing takes up more room. We end up with so much space taken up by the existing tags that the already too-long drop-down hangs off the screen, making it unusable. If we scale it to not display so tall, it is also unusable due to the list length.
Now also consider that below this interface, as a separate repetition of this interface is another one dedicated to the personal tags. I am not a fan of this sharp division, but it was expedient to have one list which is not editable and one that is. Thoughts on that front would also be appreciated.
I am looking for examples of tagging done well, especially where it is space-efficient. Or, any input on the current interface elements that I've posted here. Of course, I see the StackExchange tags, but it occurs to me that the use case here is different - the user starts with knowledge about what they are asking. For this use case, there will be a wide variety of tags available and a need for exploration of those tags by a user who is not familiar with which tags are available.
Our requirements are:
- Handle large list of tags in small(ish) space
- Allow for clear definition between established global tags and editable personal tags
- Encourage exploration or browsing of tags for consideration to be added by a user not familiar with which tags are available
Here's a screen shot of one area where the tags are used by the end-user:
Also, if it may be relevant to add: this application will be used by on-air personnel at a radio station. The interface shown is for use by certain on-air staff ("power users") and office staff to add the tags to begin with. We have some in place, but the whole system needs a good deal of data-entry to be performed.