Tag Clouds Gallery: Examples And Good Practices

Advertisement

Compared to conventional navigation patterns tag clouds don’t necessarily offer a more convenient and intuitive navigation. However, used properly, they can provide visitors with an instant illustration of the main topics, giving a very specific and precise orientation of the site’s content. Since human beings tend to think in concepts and models, it’s easier to get an idea of presented content if the main concepts are given straight away — in digestible pieces, and prioritized by their weight. In fact, the main advantage of tag clouds lies in their ability to highlight the most important or/and popular subjects dynamically which is not the case in conventional navigation menus.

Tag clouds offer a quite interesting approach for site navigation; although the technique is sometimes considered to be an “alternative”, it shouldn’t replace the “common” navigation but support it giving users additional clues about the content of the site. Due to their “cloudy” form the design of tag clouds sets them apart from other design elements on a page. And although designers don’t really have that much choice in designing them, they still find their ways to break through the bounds of creativity and come up with some unusual approaches and solutions.

This article offers some selected examples of tag clouds, its shortcomings and also some suggestions for tagging data and links in a more profound and effective way.

Tag Clouds: Are They Here To Stay? Link

Tagging is the process of labeling data with related keywords. The basic idea of tag clouds is to represent tags according to their meaning, their weight and their frequency relatively to other tags. This is done with appropriate font sizes and colors. The more important a tag is, the bigger and louder it appears (or at least should appear).

Tag clouds are often considered as one of the typical design elements in Web 2.0. However it’s possible that the concept is recently loosing its popularity. Over the last years many sites used the technique, because they wanted to look “smashy”, although they really weren’t. This resulted in unusable and boring designs, supported by the quick’n’dirty-tagging. The best example are probably Technorati’s tag clouds1 which have a number of repetitions, sometimes have spam and basically consist of mainstream and irrelevant terms.

Technorati: Boing Boing2
This is what BoingBoing3 is about according to Technorati4.

On the other side some prominent bloggers have already removed tag clouds from their sites — e.g. Web 2.0 avant-gardist O’Reilly5.

Types of Tag Clouds Link

There is a variety of ways to implement tag clouds. Some methods are more popular than the other ones. Most clouds are primarily sorted alphabetically.

  • Tags are sorted alphabetically. The most important or frequent terms are highlighted via an appropriate font size.
  • Tags are sorted alphabetically. All terms have the same font size and weight. More important terms are highlighted with a font color or a background color.
  • Tags are sorted according to their importance or frequency. Both font-size and colors can be used to emphasize the importance of terms.
  • Tags aren’t sorted at all. Font-size, font-weight and colors in use.
  • Tags are sorted according to their similarity. Similar terms appear as neighbours next to each other. A variety of visual formatting can be applied.

Your Tags Are Not My Tags Link

At the first glance tagging might seem like a simple task: you have a data, you describe it, find appropriate keywords, add the labels, done. However, although the tagging itself is extremely powerful, it also has some shortcomings. The problem is that the natural language we use is ambiguous. While labeling data with tags we make use of our personal understanding of this data and these tags. However, keywords are usually not specific enough.

For instance, it’s not clear whether the tag “design”6 is related to graphic design, web design, software design or the design of hardware architecture. Most words have a number of different meanings which is why the quality of tag clouds quickly gets messy and useless once you label data with too many common tags.

Del.icio.us: Design7
These links are tagged with the word ‘design’ on Del.icio.us8. Do you recognize what is what?

To keep a clean and hierarchical structure of tag clouds you need to follow some simple guidelines. Concepts can be described in a variety of ways, but to give the concept the weight it deserves, you need to group similar labels and choose a single tag instead.

  • Find the right balance.
    If you work in team make sure you have a very precise and unambiguous understanding of how tags are given and how the hierarchy of tags is built. Do you want to be more abstract or more concrete? The more concrete tags you have, the larger your tag clouds become and the less topics are given a higher priority. Do you want to label a set of icons as “icon set”, “icon kit”, “icon” or something more abstract like “freebie”?
  • Keep your tags clean.
    Make sure you’ve agreed upon the choice of singular/plural and lowercase/uppercase, avoid mistakes and general terms.

Tag Index Instead Of Tag Clouds Link

An interesting tendency we’ve been observing recently is the use of tag indexes instead of tag clouds. In some cases tag clouds might be not the best solution for precise content presentation. For instance, if visitors are looking for some specific topic they would prefer a search engine rather than “weighting” proportions of the tags. In such situations a “reference index” of tags comes in handy. In fact, it’s used more and more often — in indexes the tags are sorted alphabetically.

Screenshot Tagcloud

Screenshot Tagcloud9

Screenshot Tagcloud10

Screenshot Tagcloud11

Font-size-weighted Tag Clouds Link

In many cases tag clouds are placed within a sidebar on the left or the right side of the page; therefore they usually don’t have much site area to fill. Consequently, enormous fonts are used sparingly.

Screenshot Tagcloud12

Screenshot Tagcloud13

Screenshot Tagcloud14

Screenshot Tagcloud15

Screenshot Tagcloud16

Screenshot Tagcloud17

Screenshot Tagcloud18

Colorful Tag Clouds Link

Instead of large font sizes designers tend to use colors. The weight of the tags isn’t only determined by the font-size, but also by the color it has. The more contrast exists between the color of the tag and the background, the more active the tag is. “Passive” tags usually have colors more similar to the background color — they have to remain in the background.

Caution: the more colors are used, the more irritating tag clouds are. Visitors have to be able to gain an immediate understanding of how tag weights are distributed; a variety of colors doesn’t provide any helpful information. What do the used colors stand for? Is green more important than blue? In most cases 2-3 colors should be the maximal number of colors used in a tag cloud.

Screenshot Tagcloud19

Screenshot Tagcloud20

Screenshot Tagcloud21

Screenshot Tagcloud22

Screenshot Tagcloud23

Screenshot Tagcloud24

Screenshot Tagcloud25

Screenshot Tagcloud26

Screenshot Tagcloud27

Screenshot Tagcloud28

Screenshot Tagcloud29

Screenshot Tagcloud30

Screenshot Tagcloud31

Form Of Tags in Clouds Link

Most designers tend to experiment with font-sizes and colors, but you can experiment with background of tags as well. The background has to support the tag it stands for. “Pseudo”-buttons are common.

Screenshot Tagcloud32

Screenshot Tagcloud33

Shops with Tagclouds Link

Apparently, online-shops seem to have discovered the usefulness of tag clouds. The design is, however, not always perfect.

Screenshot Tagcloud34

Screenshot Tagcloud35

Screenshot Tagcloud36

Screenshot Tagcloud37

Screenshot Tagcloud38

Tag Clouds Which Are Not Tag Clouds Link

Right. Some designers create and label some site elements as tag clouds although they aren’t really tag clouds. Thus site owners try to highlight the main sections of the site manually. Colorful, but neither functional nor useful.

Screenshot Tagcloud39

Screenshot Tagcloud40

Screenshot Tagcloud41

Tagclouds as Startpages Link

On these web-sites tag cloud is the only design element used on the start page. Extreme tag-o-rama. Frankly, some content would be quite useful.

Screenshot Tagcloud42

Screenshot Tagcloud43

Screenshot Tagcloud44

A map of Google News. Take notice of the arrows: they symbolize the development of popularity of the given tag.

Screenshot Tagcloud45

Extreme-Tagging on Plurn. And no, it’s not the original screenshot. It was scaled down.

Screenshot Tagcloud46

This site is kind of links-directory. The color of the tags stands for the topic the tag belongs to. E.g. pink stands for fashion. Many users might have problems sorting out what is what.

Screenshot Tagcloud47
Chain of thoughts: a web-site as a single tag cloud.

Complete Tagpages Link

Since tag clouds tend to use large areas of layouts, sometimes they are moved to a single page. There they have much space and designers can risk experiments they wouldn’t risk in a sidebar. Such design solutions are quite rare.

Screenshot Tagcloud48

Screenshot Tagcloud49

Classics: Flickr and del.icio.us

Screenshot Tagcloud50

Tags on news.com.

Screenshot Tagcloud51

Advertisement with Tags. Sounds more like spam, actually.

Tagcloud Generators Link

There is a number of tools which help you to create tag clouds automatically. The main idea behind these services is the analysis of keywords, or most frequent words which appear in a text or on a given web-site. Services listed below enable you to paste a text or let the crawler browse through your web site. That’s enough for static web-sites; dynamic web-sites (driven by CMS or Weblog-engine), however, need a specific plug-in.

Looking For More Ideas? Link

Footnotes Link

  1. 1 http://technorati.com/blogs/www.boingboing.net
  2. 2 http://technorati.com/blogs/www.boingboing.net
  3. 3 http://www.boingboing.net
  4. 4 http://technorati.com/blogs/www.boingboing.net
  5. 5 http://radar.oreilly.com/
  6. 6 http://del.icio.us/tag/design
  7. 7 http://del.icio.us/popular/design
  8. 8 http://del.icio.us/popular/design
  9. 9 http://ma.gnolia.com/tags/
  10. 10 http://maniacalrage.net/past/tags
  11. 11 http://blog.fiveruns.com/
  12. 12 http://www.webdesignerwall.com/
  13. 13 http://blog.calm-n-easy.de/topics/
  14. 14 http://www.retailmenot.com/
  15. 15 http://wordpress.org/support/
  16. 16 http://www.sevenload.de
  17. 17 http://www.lastfm.com/
  18. 18 http://chir.ag/phernalia/preztags/
  19. 19 http://www.seancoon.org/
  20. 20 http://blogs.msdn.com/tims/
  21. 21 http://www.formlogix.com/
  22. 22 http://www.gutefrage.net/
  23. 23 http://cslingphotography.com/blog/
  24. 24 http://www.cjung.info/wordpress/
  25. 25 http://abduzeedo.com/
  26. 26 http://www.mister-wong.com/
  27. 27 http://www.gearcritech.com/
  28. 28 http://www.becontrary.com/
  29. 29 http://www.isit20.com/
  30. 30 http://www.surfgarden.de
  31. 31 http://professionalontheweb.com/
  32. 32 http://www.we-make-money-not-art.com/
  33. 33 http://www.extratasty.com/
  34. 34 http://en.shoppero.com/
  35. 35 http://www.discountd.com/
  36. 36 http://www.toubeauty.com/
  37. 37 http://www.a-better-tomorrow.com/
  38. 38 http://www.o2online.de/
  39. 39 http://www.listal.com/
  40. 40 http://www.bureausla.nl/other/index.php?value=sla
  41. 41 http://www.antoonverwater.nl/
  42. 42 http://83degrees.com/
  43. 43 http://www.bureausla.nl/
  44. 44 http://newzingo.com/
  45. 45 http://www.keotag.com/
  46. 46 http://www.tag-clouds.com
  47. 47 http://www.chainofthoughts.com/
  48. 48 http://www.flickr.com
  49. 49 http://del.icio.us/tag/
  50. 50 http://www.news.com/2243-12-0.html
  51. 51 http://tagspage.com/
  52. 52 http://www.googlewatchblog.de/2007/03/19/greasmonkey-script-zeigt-tagwolke-in-den-suchergebnissen/
  53. 53 http://www.tagcrowd.com/
  54. 54 http://www.tagmycloud.com/
  55. 55 http://www.tag-cloud.de/
  56. 56 http://www.artviper.net/texttagcloud/
  57. 57 http://www.tagcloud-generator.com/
  58. 58 http://www.makecloud.com/
  59. 59 http://winkwaves.com/tag-cloud-generator/
  60. 60 http://winkwaves.com/tag-cloud-generator/
  61. 61 http://tagcloud.oclc.org/tagcloud/TagCloudDemo
  62. 62 http://zoomclouds.egrupos.net/
  63. 63 http://www.flickr.com/photos/factoryjoe/sets/72157600013680800/detail/
  64. 64 http://www.joelamantia.com/blog/archives/ideas/tag_clouds_evolve_understanding_tag_clouds_1.html
  65. 65 http://www.technacular.com/2007/04/22/collection-of-toolssites-to-create-tag-cloud/

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

Advertisement
  1. 1

    Blogger from Sibir

    November 7, 2007 2:35 am

    Very thank you! Very-very nice. Now i know, how do my Tag Clouds.

    -1
  2. 2

    Like always, a nice post.

    1
  3. 3

    Very nice, I have always liked tagclouds on some websites. But on others they just don’t work. I like your resource list though. I think we have similar sites! :)

    0
  4. 4

    For my weblogs, the choice I made was to remove all of the Tag Clouds, since they don’t represent the visitors. A Tag Cloud only describes the tags with the most posted linked to it. I prefer a ‘Most popular posts widget’ or something similar! :)

    0
  5. 5

    nice roundup thanks.

    0
  6. 6

    @Coen Jacobs I really like tag clouds it represents a most easy way to find something in the site.

    0
  7. 7

    Our tag cloud for music discovery is set to randomize the data on each visit, allowing our clients to (hopefully) discover new music by finding new relationships between different songs and instrumental tracks.

    -2
  8. 8

    That “link'” above should read :

    “tag cloud for music discovery”

    0
  9. 9

    Very nice collection, great variety and some looked much better in the article than they do on the actual websites :P

    -2
  10. 10

    Great tag clouds. Will be a good inspiration for me.

    -1
  11. 11

    Thanks a lot for showing my blog’s tag cloud here…. I really like your lists

    -1
  12. 12

    Another great article, the most relevant quote being “your tags are not my tags”.

    I love my del.icio.us tag cloud, but it’s only really useful for me, because I have my own tagging practices. When many people get to tag similar items the results are necessarily fuzzy, which is great for searching but not so good represented as a tag cloud.

    So, I’d argue that tag clouds are good for customised content but pointless for general navigation.

    0
  13. 13
  14. 14

    Tag clouds are ugly. Please stop using them. Thank you, and have a nice day.

    0
  15. 15

    Agust Gudbjornsson

    November 7, 2007 4:51 am

    Where is the “famous” Tag A Cloud :o)

    http://tagacloud.com/

    0
  16. 16

    Great roundup of tag clouds. Along the lines of adding backgrounds to tags, I’ve used the CSS :before and :after pseudo classes to style my WordPress tag cloud. Take a look at my blog if you’d like to see it in use. Of course, not all browsers will support it, but my readership (per Google Analytics) uses browsers that do. I also wrote a WP plugin to break up those nonbreaking spaces in the tag cloud so that it will right-justify appropriately.

    -1
  17. 17

    There are some really nice tag clouds on show on this post. Great roundup as usual.

    I believed a well design tag cloud (good color mix and font size ratio) can make a difference conveying information across. But nowadays, most tag clouds are ugly, like the del.icio.us cloud.

    0
  18. 18

    Thanks a lot, very useful, as always.

    Cheers

    -1
  19. 19

    Great ideas. I say that if tags clouds can be designed well, then they should be used liberally.

    WordPress recently released a version of their blogging software with better (native) support for tags. But sadly, there’s few easy ways to integrate them into the blog itself, barring the use of widgets.

    It’d be great to see some Web 2.0 tagging generators that would allow me to more easily use WordPress tags without the need for a widgetized site.

    -1
  20. 20

    This is brilliant, just in the process of looking into tag clouds for my blog!

    -1
  21. 21

    Rasmus Luckow-Nielsen

    November 7, 2007 6:48 pm

    Hi, we have a tag cloud that’s a litte different.
    It’s our main navigation of our Copenhagen cityguide, and the special thing is, that you can combine the tags by pressing on different words, e.g. “Italian + Cheap + City” and then retrieve the results (places where all the tags has been applied).
    I haven’t seen this approach anywhere else on the internet?

    See for yourself on http://www.mitkbh.dk (it’s in Danish and means “My Copenhagen”)

    0
  22. 22

    @ Rasmus Luckow-Nielsen

    This looks great, but you could do with a way of clearing all your selections in one go, without having to click them all off again individually

    0
  23. 23

    This tools will be usefull for my works.I wish you explain How I can use this tools and whish one is best ?

    -1
  24. 24

    I wrote up a tag cloud for my art photography gallery — but only for the initial page. I found the alphabetical and font size method was the most “intuitive”. Once you use the cloud to get started, it uses tags under the covers. It’s an experiment…
    Alex Wilson Photography experimental gallery
    (some photos NSFW)

    0
  25. 25

    Rasmus Luckow-Nielsen

    November 7, 2007 10:01 pm

    @Ben, yeah, but I’m not sure it really is necessary, as the results will decrease very rapidly if you press more than 2-3 tags.
    And actually, I just remember this feature IS actually there. Press the link “nulstil” (reset) in the top of the results, and then the selections will be reset.

    /rasmus

    -1
  26. 26

    This one is pretty cool when you mouse over it (on the right column): http://www.quizoom.com

    -1
  27. 27

    Great article. My blog uses a cloud tag as well FindMotive.com and I’ve found that I get a good amount of hits from search engines to the tag search pages. Another good reason to use them.

    -1
  28. 28

    Here, another example of tag cloud http://koolontheweb.com/mostpopular

    -1
  29. 29

    hello there, what a nice combination of tag cloud you have here..i think tag cloud is suitable at archive page not at the sidebar..

    -1
  30. 30

    I wrote a Perl program that generates a tag cloud from the access log of a webserver: Google Search Cloud with Perl.

    -1
  31. 31

    A little shameless pluggin, but relevant. Check out the interactive tag cloud we use for user’s search queries:

    http://www.tickex.com

    -1
  32. 32

    Wow .. .great list … i like it a lot

    -1
  33. 33

    You should take a look at the following two tag cloud variations:

    Drill clouds are variations of tag clouds used in search refinement.
    HTML pull-downs and scrolling lists can also be mad tag-cloud-like. See “Tag Cloud inspired HTML Select lists“.

    -1
  34. 34

    Hi, great article!
    At my University of Applied Sciences we are running our own eLearning and eCollaboration platform, where many of the universitie’s courses are organized. Among other Web 2.0 features (Mashups, …) we’ve also created a unique style of tag cloud for quickly accessing the courses. We call it a three dimensional tag cloud. On first look, it is like a ‘common’ tag cloud where the course’s names have different font sizes representing the course size. The second dimension is the tag color. It denotes the course activity compared to all other courses. Black means a course is almost ‘dead’ whereas red means that that course is so ‘hot’, that you wish you could join right away and take part. Now, the third dimension is something special. It is a tooltip with extra information what a particular course is all about. Students new to the portal can quickly skim through all courses to get an overview and start their eLearning experience right away.
    Take a look at our tag cloud at eStudy of University of Applied Sciences Giessen-Friedberg
    Regards, Christoph

    -1
  35. 35

    tags are over rated!
    very rarely are they used to good effect

    -1
  36. 36

    Good post, but you forgot to mention two other possible and usefull use of tag clouds: in “landing” pages (search results, for instance) and in 404 error pages.

    -1
  37. 37

    “The best example are probably Technorati’s tag clouds which have a number of repetitions, sometimes have spam and basically consist of mainstream and irrelevant terms.” some what true. but technorati tagcloud helps my readers to find out more blogs on the topic so i find them useful even when they are not updated.

    -2
  38. 38

    Another fine – and different – example of a tag cloud is the heat map for the Guardian’s Comment is Free collective blog.

    -1
  39. 39
  40. 40

    I wanted to put tag clouds in one of the sites I designed. However, the SEO consultant said Google doesn’t like them ’cause there is too much abuse of them, thus considered as spam. What do you think ?

    -1
  41. 41

    @Carola, my irreverent answer would be to find a new web consultant! Seriously though, I’ve built sites with tag clouds and tagging systems, and as far as Google goes, a lot of the search traffic comes directly into the tag search pages. This is because a tag is generally a single keyword hyperlink, and as such Google appears to rate these highly. I’ve not experienced any problems as far as Google is concerned. Perhaps sites do get blacklisted, but it may be due to other reasons and not tag clouds. If you follow Google’s advice of making your webpage full of useful content for users, then you’ll be OK. Tag clouds, IMO, in the correct setting, are a good way of letting users summarise the site and drill down into content quickly and logically.

    -1
  42. 42

    Interesting post with valid points.

    @Coen Jacobs
    “remove all of the Tag Clouds, since they don’t represent the visitors.”

    Wouldn’t the same logics lead you to remove any navigation and classification scheme (like categories)?

    In my opinion, tags are most def. more powerful on a single blog than on a site living off of aggregated content, like Technorati. Technorati might as well have smeared all the words of the English language across the screen instead of using tags, as they represent millions (?) of users’ individual vocabularies.

    -1
  43. 43

    There are some really nice tag clouds on show on this post. Great roundup as usual.

    -1
  44. 44

    What a great post! I’ve been wanting to implement a tag cloud – the ugly red-headed step child of blogging? – and this gives me so much more to think about than simply how to implement it in PHP. Especially the singular/plural tags … I naturally try to keep this clean, but I think I’ve just been inspired to go back and do an “audit” of sorts.

    -1
  45. 45

    Sorry for the criticism, but i don’t like so long articles because it takes me to much time to click trough all you examples.

    -1
  46. 46

    Nice..nice magazine..i like it so much..

    -1
  47. 47

    I recommend also http://www.meshed.de as a page with tag cloud on/as startpage.

    -1
  48. 48

    What a great post! I’ve been wanting to implement a tag cloud

    -1
  49. 49

    While the points you make about tagclouds needing to be styled are good, it is clear you have no understanding of well-formed html or accessibility.

    To say that technorati has the best tag cloud is laughable. While it may be usable, it is in no way accessible. Look at the source of one of thier pages and you’ll see a huge mess of nested em’s.

    If you budding developers would like some proper information on how to create a well-formed tag cloud – may I direct you here.

    -1
  50. 50

    Interesting collection. Tag clouds are a pretty difficult design challenge if you ask me: how to make the data useful and “at a glance” meaningful, without dragging the whole page into a chaotic soup? Haven’t seen anyone who’s managed to solve this completely so far. Maybe the whole web 2.0 thing is meant to be chaotic?

    A while back I had an idea that I haven’t seen anyone use yet. Unfortunately I’m not technically skilled enough to build it myself. Bar chart tags: Check it out.

    -1

↑ Back to top