Tags! Massive amounts of tags and a sane interface to use them

Question

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

EDIT

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.

Answer 1

I think the interface looks fine.

I think you are too loose in what you offer your users with the ability to tag. Everything isn't a tag. A lot of these options seem mutually exclusive. A song's era is basically in and around its release date -- songs created in the 1920's are always going to be 1920's songs and that's never going to change. A song has an exact release date, so you shouldn't have 1920's as a tag. You should simply have year for the song, and search filter results by era should pick up .

So in short you should split the "everything is a tag" thing into a set of standard boxes with mutually exclusive options wherever possible.

Answer 2

My first question would be what value would a user get from an interface that presents 700 tags to them? The first change I would make would be to cut off the shown tags. Show, say, ten tags or something and then have text after the last tag that says "And 690 more." If the user really wants to see those tags they can click on that and have a larger interface where the tags could be managed.

This way you can keep your tags for searching and sorting or what have you, but you don't overwhelm the user with more than they probably care to see.

Also I think having a separate space for personal tags is fine, but I would call that area "My Tags" instead of personal. It just seems like a more understandable and accepted wording.