I am 
Add me to your network10 Best Practices For Displaying Tag Clouds
This is a short list of best practices for rendering and displaying tag clouds that I originally circulated on the IXDG mailing list, and am now posting in response to several requests. These best practices are not in order of priority — they’re simple enumerated.
- Use a single color for the tags in the rendered cloud: this will allow visitors to identify finer distinctions in the size differences. Employ more than one color with discretion. If using more than one color, offer the capability to switch between single color and multiple color views of the cloud.
- Use a single sans serif font family: this will improve the overall readability of the rendered cloud.
- If accurate comparison of relative weight (seeing the size differences amongst tags) is more important than overall readability, use a monospace font.
- If comprehension of tags and understanding the meaning is more important, use a variably spaced font that is easy to read.
- Use consistent and proportional spacing to separate the tags in the rendered tag cloud. Proportional means that the spacing between tags varies based on their size; typically more space is used for larger sizes. Consistent means that for each tag of a certain size, the spacing remains the same. In html, spacing is often determined by setting style parameters like padding or margins for the individual tags.
- Avoid separator characters between tags: they can be confused for small tags.
- Carefully consider rendering in flash, or another vector-based method, if your users will experience the cloud largely through older browsers / agents: the font rendering in older browsers is not always good or consistent, but it is important that the cloud offer text that is readily digestible by search and indexing engines, both locally and publicly
- If rendering the cloud in html, set the font size of rendered tags using whole percentages, rather than pixel sizes or decimals: this gives the display agent more freedom to adjust its final rendering.
- Do not insert line breaks: this allows the rendering agent to adjust the placement of line breaks to suit the rendering context.
- Offer the ability to change the order between at least two options — alphabetical, and one variable dimension (overall weight, frequency, recency, etc.)
For fun, I’ve run these 10 best practices through Tagcrowd. The major concepts show up well — font, color, and size are prominent — but obviously the specifics of the things discussed remain opaque.
Best Practices For Display as a Text Cloud
Related posts:
Category: Tag Clouds
Tags: tagclouds, tagging, visualization 11 comments »
February 27th, 2007 at 12:22 pm
Hmmm… I still think clouds are really poor. I much prefer tag lists ordered by rank:
34 — css
26 — html
17 — php
14 — web 2.0
9 — business
I think it’s a lot easier for the reader than a large paragraph of varying text sizes.
February 27th, 2007 at 2:52 pm
Thanks for your tips Joe. I would be interested to know if anybody has ever done research on the effectiveness of tag clouds — do users understand them and do they improve the user experience? (apart from the aesthetics).
February 28th, 2007 at 9:59 am
Montoya:
Seems people either like tag clouds, or they don’t…
In the long view, good user experience design means offering display options suited to user needs and preferences.
So you should have the choice of seeing a tag cloud displayed as a cloud, a list, etc. when you’re visiting an experience that includes them.
What do you feel is the biggest weakness of tag clouds for display??
Zef: There’s been research on tag clouds for usability — what kinds are you interested in?
February 28th, 2007 at 6:32 pm
Tagclouds are ugly, BUT you should think about the SEO aspect. All your longtail keywords can have a place in this tagcloud and increase your internal linking which google will like.
March 16th, 2007 at 4:10 pm
i use Text Cloud on my friends ( inks) page
March 22nd, 2007 at 1:33 pm
“Use a single color for the tags in the rendered cloud: this will allow visitors to identify finer distinctions in the size differences. Employ more than one color with discretion.“
I agree.
One way to use colors in your cloud tag:
– select a main color, assign it to the biggest font;
– “blend” this color for smaller fonts.
A “coloring” example at
Tag cloud. Key words visualization.
Great advices. Thanks a lot!
March 29th, 2007 at 12:49 pm
I find it intresting that your own site doesnt follow rule 10.
In Fact as of this moment Some of the larger tags — due to line spacing inthe right col overlap limiting readability.
It also seems worth noting that this information is really based on tag/tag clouds as a site tool — not as a core design.
http://www.culturecloud.com uses tags as a core design element and as such the shifting colors allow user input to alter the visual apperance.
But as a general guide, seems perty spiffy
May 30th, 2007 at 6:09 am
Joe Said: There’s been research on tag clouds for usability — what kinds are you interested in?
Hi Joe — I would like to know if tagclouds are more effective in helping people find information (than traditional lists). Has anyone done a usability study comparing a tagcloud with a list and the task success rate for each?
July 11th, 2007 at 5:49 am
I’m not sure why some people seem to associating tag clouds with navigation. They’re a device for getting a feel for the type of content available on the site. To that end, they don’t even need to be links to be effective.
July 11th, 2007 at 3:38 pm
Historically, tag clouds performed both roles of summarization and navigation approximately. They summarized tags, and offered navigation. I think this is a powerful combination, one that represents a new form of information display / navigation that is higher value than the simple lists of links we’ve had to date.
But note that traditional tag clouds summarize tags, meaning they distill the collected tags that people apply to items, and not the contents of the tagged items. Traditional tag clouds leverage human judgements about the meaning /nature of the items, not the contents of the items themselves. Tags are still metadata.
Now that tag clouds have had some time to evolve (going on three years now!), text clouds have emerged as a new form of cloud-style display that directly summarizes content, without including tags or other applied labels. Text clouds typically do not offer navigation, or only offer navigation within the bounded body of text they summarize.
Jonathan, it sounds like you’re in favor of a third variant, a non-navigable cloud of labels. What are the advantages you see in this kind of cloud?
November 26th, 2008 at 9:23 am
Please comment on this tag cloud