How to optimise the space used by tags in the right column of StackExchange sites?

Question

In this meta question about what the StackExchange UI site should look like, I'm working on (read: messing around with) a design for the site. I'm using a web-based tool to edit the page's CSS, which is giving me a lot of freedom to change things while limiting me to the available HTML rendered by the server.

While changing and reorganising things (mainly elements like typography and visual weight) I realised that the right hand column as shown on nearly every StackExchange website is pretty inefficient. Here's how it looks on the meta site:

Tags (and below, badges) are small objects greater in length horizontally than vertically. Each one has several attributes:

• Name of the object
• Number of times the tag has been awarded or member the badge has been assigned to
• A visual element to reinforce the notion of the object
• A distinct horizontal width depending on the length of the name

The way things are organised now feels very inefficient:

• Each tag/badge takes up one line of space, despite not needing the entire horizontal width.
• The tag and badge visual representation on this page feels inadequate. While tags and badges are designed to be displayed by themselves, for instance a tag on a question, or a badge on a member's profile, in these cases they are accompanied by metadata: the number of times the tag has been applied, or the member the badge is awarded to. But the visual representation still assumes a generic application.
• On most StackExchange sites, these elements have strong borders, which creates a lot of awkward negative space in between each element as it sits on a line.

In my redesign I've taken care to reduce the strength of the tags (haven't tackled badges yet) to reduce that visual noise, but I haven't come up with a good way to represent tags in combination with number of times applied yet. I've had some ideas, but none of them feel right:

• Render them in a tag cloud. This would use more horizontal and less vertical space. However, tag clouds are mostly scannable and not legible. Not sure if that's a problem though.
• Consider a new visual representation for the combination of tag with number of applications. Perhaps by including the number in the tag: < discussion ]x14 would become < discussion|14 ]. Or by increasing the height of the tag element and placing the "14" below the name. That would take up more vertical space overall, but allow for several tags on each row.
• Remove reference to specific number of applications and instead use a visual metaphor to indicate number of times applied. Perhaps by using a thermometer palette: "hot" tags could be more red, and cold ones more blue. This wouldn't be immediately apparent to new users, though.
• Remove reference to specific number of applications and instead use width to indicate hotness. The wider a tag (in the right hand column), the more popular it is. As above, however, this would be somewhat confusing initially.

Question time: What would be an effective way to redesign the way tags and badges are displayed in the right hand column, given that I'm only able to modify the CSS and can't tamper with the HTML?

Answer 1

Kudos for the effort - very nice!

I have a few comments about the list at the end:

• Personally I feel tag clouds aren't very useful.
  The order between the elements isn't clear, it's not always easy to see which is bigger and you don't know what are the tags sorted by.
• As for your second suggestion, I might have a tiny improvement, but it doesn't feel that right either - Use the width, but don't simply make the tag wider - stack them up!
  I.e. just show a "shadow" to the right of each tag for each instance.
  
  Naturally you'll set a boundary and anything above 10 or so will have ellipsis (...)
  If you want, you can incorporate the number of appearances over the stack, but it might create clutter.

Answer 2

I think that the daunting list of tags on this site makes me avoid as subconsciously it scares me by being so long. I think limiting it to top ten with an option to see all of them would make user scan it quickly and see what it going on within a matter of seconds.

Also, I could never understand how the tags were sorted. It seems to me that they are sorted by the numbers on the right rather than recency. Therefore, I think moving the numbers to the left and aligning them (the numbers) to the right would create certainty that they are sorted by it. Removing the repetitive "x" sign and the graphic around each tag would de-clutter the list and improve scannability.

Moreover, making tags look like links would signify that it is clickable and that it will take you to another page.

Answer 3

Maybe use font-size-weighted or font-color approach?

_{(source: ljplus.ru)}

Answer 4

A few ideas, more to spark other out-of-the-box ideas than anything else:

• A slider (panels of tags fade in and out consecutively)
• Stock-ticker of tags
• Static tag chart
• Interactive tag chart
• Something similar to the visualizations at Digg Labs.