good metaphor for deleting tags

Question

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)

Answer 1

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.

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.

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

Answer 2

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+)

Answer 3

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).