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:

How the tags look on beta sites

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?

4 Answers 4


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.
    alt text
    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.

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.

enter image description here

  • +1 for counts first - which explains the ordering. Not sure about displaying them as pure links - I think the 'label-y' display usefully implies their purpose in the app. May 17, 2011 at 18:07

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

(source: ljplus.ru)

  • 1
    Can you tell what's more popular - "menu" or "design-patterns"? How about color blind people, of which there are quite a few?
    – Dan Barak
    Aug 24, 2010 at 21:13
  • 1
    How are the tags ordered? Shouldn't they be alphabetized? Aug 24, 2010 at 21:16
  • 3
    @ Dan Barak: I don't think that exact numbers are important for the majority of users. If they are, we may add numbers. But is there really a big difference if the tag was used two or three times? Color blindness is an issue. But hopefully, as far as I know, difference in color brightness is visible for everyone. I mean if we use red color for one tag and blue for another, than there would be people who aren't able to see the difference. But if we have a color with fixed hue and vary only brightness, than everyone would be able to see this. Please correct me if I'm wrong.
    – Kostya
    Aug 24, 2010 at 21:40
  • @ Patrick McElhaney: You are right, the order may be different. I used the same as Rahul's example (the most recent tag is the first) - this looks appropriate for the main page.
    – Kostya
    Aug 24, 2010 at 21:42
  • @Kostya - brightness might be problematic too, since on my screen for example, I can't even read the light hues :( One other thing to consider is that hue is sometimes used for freshness in tag clouds (i.e. size for # of occurrences and hue for freshness, since there's no "order").
    – Dan Barak
    Aug 25, 2010 at 9:05

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.
  • Hmm, all of these are tough to implement with just CSS, though :)
    – Rahul
    Aug 24, 2010 at 23:53
  • -Maybe in CSS4? Aug 25, 2010 at 3:16
  • 4
    at the rate it take w3c to spit out standards we will be dead before css4
    – Sruly
    Aug 25, 2010 at 8:32

Your Answer

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

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