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

  1. 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.
  2. Use a single sans serif font family: this will improve the overall readability of the rendered cloud.
  3. If accurate comparison of relative weight (seeing the size differences amongst tags) is more important than overall readability, use a monospace font.
  4. If comprehension of tags and understanding the meaning is more important, use a variably spaced font that is easy to read.
  5. 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.
  6. Avoid separator characters between tags: they can be confused for small tags.
  7. 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
  8. 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.
  9. Do not insert line breaks: this allows the rendering agent to adjust the placement of line breaks to suit the rendering context.
  10. 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
best_practices_textcloud.jpg

    Related posts:

    1. Text Clouds: A New Form of Tag Cloud? Dur­ing 2006, tag clouds moved beyond their well-known role as...
    2. Tag Clouds Evolve: Understanding Tag Clouds Zeld­man jok­ingly called tag clouds “the new mul­lets” last year....
    3. Cartograms, Tag Clouds and Visualization I was enjoy­ing some of the engag­ing car­tograms avail­able from...
    4. Tag Clouds: Navigation For Landscapes of Meaning I believe the value of sec­ond gen­er­a­tion clouds will be...
    5. Tag Clouds: "A New User Interface?" In Piv­ot­ing on tags to cre­ate bet­ter nav­i­ga­tion UI Matt...

    Category: Tag Clouds
     Tags: , , 12 comments »

    12 Responses to “10 Best Practices For Displaying Tag Clouds”

    1. Montoya
      February 27th, 2007 at 12:22 pm

      Hmmm… I still think clouds are really poor. I much pre­fer tag lists ordered by rank:
      34 — css
      26 — html
      17 — php
      14 — web 2.0
      9 — busi­ness
      I think it’s a lot eas­ier for the reader than a large para­graph of vary­ing text sizes.
    2. Zef
      February 27th, 2007 at 2:52 pm

      Thanks for your tips Joe. I would be inter­ested to know if any­body has ever done research on the effec­tive­ness of tag clouds — do users under­stand them and do they improve the user expe­ri­ence? (apart from the aesthetics).
    3. joe
      February 28th, 2007 at 9:59 am

      Mon­toya:
      Seems peo­ple either like tag clouds, or they don’t…
      In the long view, good user expe­ri­ence design means offer­ing dis­play options suited to user needs and pref­er­ences.
      So you should have the choice of see­ing a tag cloud dis­played as a cloud, a list, etc. when you’re vis­it­ing an expe­ri­ence that includes them.
      What do you feel is the biggest weak­ness of tag clouds for dis­play??
      Zef: There’s been research on tag clouds for usabil­ity — what kinds are you inter­ested in?
    4. jchunk
      February 28th, 2007 at 6:32 pm

      Tag­clouds are ugly, BUT you should think about the SEO aspect. All your long­tail key­words can have a place in this tag­cloud and increase your inter­nal link­ing which google will like.
    5. SvT
      March 16th, 2007 at 4:10 pm

      i use Text Cloud on my friends ( inks) page ;)

    6. Volg
      March 22nd, 2007 at 1:33 pm

      “Use a sin­gle color for the tags in the ren­dered cloud: this will allow vis­i­tors to iden­tify finer dis­tinc­tions in the size dif­fer­ences. Employ more than one color with dis­cre­tion.“
      I agree.
      One way to use col­ors in your cloud tag:
      – select a main color, assign it to the biggest font;
      – “blend” this color for smaller fonts.
      A “col­or­ing” exam­ple at

      Tag cloud. Key words visu­al­iza­tion.

      Great advices. Thanks a lot!
    7. A_User
      March 29th, 2007 at 12:49 pm

      I find it intrest­ing that your own site doesnt fol­low rule 10.
      In Fact as of this moment Some of the larger tags — due to line spac­ing inthe right col over­lap lim­it­ing read­abil­ity.
      It also seems worth not­ing that this infor­ma­tion 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 ele­ment and as such the shift­ing col­ors allow user input to alter the visual apper­ance.
      But as a gen­eral guide, seems perty spiffy
    8. zef
      May 30th, 2007 at 6:09 am

      Joe Said: There’s been research on tag clouds for usabil­ity — what kinds are you inter­ested in?
      Hi Joe — I would like to know if tag­clouds are more effec­tive in help­ing peo­ple find infor­ma­tion (than tra­di­tional lists). Has any­one done a usabil­ity study com­par­ing a tag­cloud with a list and the task suc­cess rate for each?
    9. Jonathan
      July 11th, 2007 at 5:49 am

      I’m not sure why some peo­ple seem to asso­ci­at­ing tag clouds with nav­i­ga­tion. They’re a device for get­ting a feel for the type of con­tent avail­able on the site. To that end, they don’t even need to be links to be effective.
    10. joe
      July 11th, 2007 at 3:38 pm

      His­tor­i­cally, tag clouds per­formed both roles of sum­ma­riza­tion and nav­i­ga­tion approx­i­mately. They sum­ma­rized tags, and offered nav­i­ga­tion. I think this is a pow­er­ful com­bi­na­tion, one that rep­re­sents a new form of infor­ma­tion dis­play / nav­i­ga­tion that is higher value than the sim­ple lists of links we’ve had to date.
      But note that tra­di­tional tag clouds sum­ma­rize tags, mean­ing they dis­till the col­lected tags that peo­ple apply to items, and not the con­tents of the tagged items. Tra­di­tional tag clouds lever­age human judge­ments about the mean­ing /nature of the items, not the con­tents of the items them­selves. Tags are still meta­data.
      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 dis­play that directly sum­ma­rizes con­tent, with­out includ­ing tags or other applied labels. Text clouds typ­i­cally do not offer nav­i­ga­tion, or only offer nav­i­ga­tion within the bounded body of text they sum­ma­rize.
      Jonathan, it sounds like you’re in favor of a third vari­ant, a non-navigable cloud of labels. What are the advan­tages you see in this kind of cloud?
    11. Andrew
      November 26th, 2008 at 9:23 am

      Please com­ment on this tag cloud
    12. muVectors
      July 8th, 2012 at 11:16 pm

      The Ani­mated, Zoomable Tag Cloud gen­er­a­tor at http://www.muvectors.in/zoomtags/ can gen­er­ate Tag Clouds with a theme.

      Please check the gallery: http://www.muvectors.in/zoomtags/gallery.aspx

    Leave a Reply



    CAPTCHA Image
    *

    ↑ Back to top