Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm looking for a good example for the look and feel of tags. There are a small number (usually 0-3) tags.

  1. If there are already tags present on a record, how should the delete functionality be presented?
  2. Is there a generally accepted look to tags that cannot be edited or clicked. For example, SO uses a raised "button" appearance, but you can click on them. Mine are read/delete/add only.

My interface looks kind of like Visual Studio 2010 with it's round-cornered tool windows.

(If it matters, I'm using WPF)

share|improve this question
add comment

3 Answers

I would say that one of the main benefits of tags in my opinion is that you can click on them and see other items associated with the same tag. If they are really not clickable then perhaps the best thing is to display them as a comma separated list of words/terms, perhaps in a mid grey (or other suitable faded) foreground colour in order to separate them from the main content and not to make them look like they are clickable links - just the metadata that they are.

I do like the lightweight way SE tags are displayed - it's obvious enough what they are not to even need the word 'Tags' although that may not be true for all types of site. And I like that when you hover over them you get a single 'not too annoying' option at the end to go and edit them - although I appreciate that your edit interface needs to then cater for deleting only.

enter image description here

I also like the Behance.net way of doing the actual deleting, once in edit mode which is very clear and quick to perform. You would need a 'done' button to finish.

enter image description here

You could take the tag metaphor a little further and actually tie the delete button to the tag....?

enter image description here

share|improve this answer
    
I like your "tied" delete button. It's cute without getting silly. –  Marjan Venema Jul 15 '11 at 19:05
add comment

There are a number of ways you can probably display (and remove) tags, and I guess quantity is probably the tipping point about how you want to arrange them. It's normally the case that the tags are metadata and therefore, it would probably be something you want to avoid giving too much prominence to.

One good way of doing things would be to take a mixture of Google+'s friend boxes and the Stack Overflow tags. Some of the key characteristics would be:

  • All tags displayed like StackOverflow tags. This would work well upto a small number of tags (maybe < 20), but after that, if the tags are to be used as more than just metadata, you may want to consider displaying in an alternative layout.
  • All tags would have a little X to the far right of them in a subtle colour (usually grey) which when clicking would trigger removal. This X could appear in a number of ways: By default (always shown), upon click (when the current tag is selected or highlighted) or on hover. Of the three ways, the "show on hover" option would be my choice as it hides away any additional clutter from the page. It could be argued however, that while intuitive, the hover-show isn't obvious.
  • If people frequently would be removing lots of tags on a single page, then consider the G+ functionality where by, if you select an number of tags by clicking them, you can remove by clicking another specific link. However, I personally wouldn't consider this unless you have > 10 or so tags. This can be in tandem with the previous point to (in the same way it is at Google+)
share|improve this answer
add comment

Totally agree with both of the great responses above.

2 things I would add though...

  • It's probably obvious but if tags are read/delete only, make sure the visual style of the text on the tag is different enough from the links on the rest of your site. In my experience, user's tend to confuse text on tags as links to search for all items with that tag. And remember, just because it's not got an underline doesn't mean users wont think it's a link.
  • Consider how you're ordering the tags (eg. alphabetically, etc). This may not be such an issue if you only have a few tags, however when you get a significant amount of tags this becomes an issue in terms of tag findability.

Also, be careful when considering how you're going to layout your tags. If you have a large number of tags (to Amadiere's point above) if can be very difficult for the user to scan the list & find what they're looking for. A good example of this problem is on one of my fav sites... siteinspire.com (pic below).

Category widget on siteinspire

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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