In this meta-question on the site of the StackExchange UI, I work (read: jokes) to design a site for the site. I use a web tool to modify the CSS code of the page, which gives me a lot of freedom to change things while limiting myself to the available HTML rendered by the server.
While modifying and rearranging items (mostly items such as typography and visual weight), I realized that the right column displayed on almost all StackExchange websites was rather inefficient. Here's what it looks like on the meta-site:
The tags (and badges below) are small objects of greater length horizontally than vertically. Each has several attributes:
- Name of the object
- Number of attributions of the tag or awarding the badge to the member
- A visual element to reinforce the notion of object
- A distinct horizontal width depending on the length of the name
The way things are organized now seems very inefficient:
- Each label / badge occupies a space line, even if it does not need all the horizontal width.
- The visual representation of the label and badge on this page seems inadequate. Although the tags and badges are designed to be displayed by themselves, for example a tag on a question or a badge on the profile of a member, they are in this case accompanied by metadata: the number of 39, applications of the tag or member. the badge is awarded to. But the visual representation always assumes a generic application.
- On most StackExchange sites, these elements have strong boundaries, which creates a lot of annoying negative space between each element when it rests on a line.
During my redesign, I took care to reduce the strength of the tags (I have not yet addressed the badges) to reduce this visual noise, but I have not found a way to represent the tags in combination with the number of times applied. again. I've had some ideas, but none feels good:
- Make them in a cloud of keywords. This would use more horizontal and less vertical space. However, tag clouds are mostly readable and unreadable. I do not know if it's a problem though.
- Consider a new visual representation for the tag combination with the number of applications. Maybe 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" under the name. This would take up more space overall, but allowed multiple tags on each line.
- Delete the reference to a specific number of applications and instead use a visual metaphor to indicate the number of applications. Perhaps using a range of thermometers: the "hot" labels could be more red and the colder ones more blue. This would not be immediately visible to new users.
- Delete the reference to a specific number of applications and use the width instead to indicate the hotness. The longer a tag is (in the right column), the more popular it is. As above, however, this would be somewhat confusing at first.
Time of the question: What would be an effective way to redefine how tags and badges are displayed in the right column, since I can only modify the CSS code and not modify the HTML code?