9

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:

drop-down style multiselect

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:

filtering list on user input

This is already a bit unwieldy, especially if a lot of tags are applied:

tag overload!

... 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: example

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.

2 Answers 2

7

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.

3
  • 4
    +1 for "not everything needs to be a tag". Nov 8, 2011 at 15:04
  • Also: Not everything need to be tagged (manually), you can "auto-generate" some tags like the 1920's tag from the release date. Jun 10, 2016 at 7:47
  • Not sure the song era means the time it was released but perhaps the musical "era" itself. for example you can make today a song with an era of 1940's..
    – vsync
    Aug 18, 2018 at 7:52
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.

5
  • mspace.fm calls them private tags and public tags. Sep 13, 2011 at 15:48
  • The track tags (where there are thousands of tags) are descriptive, so there's a tag for instruments that are featured on the track, for example, or tags for breathy vocals vs. rasp vocals. The tags for tracks are taken from Pandora's Music Genome Project. The app would use them as Pandora does, to find "similar" tracks based on similarities in tags. We've watered it down a little from Pandora's implementation, though - a tag called "extensive use of vamping" is pretty useless unless you know what the hell "vamping" is. Before we pared the tags down, there were over ten thousand!
    – Chris
    Sep 13, 2011 at 15:51
  • Also, thanks for the link @Roger Atrill... checking it out
    – Chris
    Sep 13, 2011 at 15:54
  • @Chris So why are these tags being presented to the end user at all? When I use pandora and create a new station it tells me it is now creating a station with music similar to the qualities of some band such as x, y and z. They don't show me 700 or ten thousand tags because what do I care. Sep 13, 2011 at 16:01
  • The tags are used by the end-user for browse-based searching: img823.imageshack.us/img823/2815/browserr.png The interface I am working with here is for staff or power users to add the tags to the tracks to begin with. This is something they would do as they used the program normally.
    – Chris
    Sep 13, 2011 at 16:13

Your Answer

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

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