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?

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

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

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

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

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

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

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

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

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

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

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

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?

Footnotes

  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 performance problems in large companies. Get in touch.

Advertising
  1. 1

    Charlie Prewett

    May 12, 2011 3:35 pm

    I’m looking for a type of word cloud that “rains” stock ticker symbols. I ran across it a few months ago and wished I’d made a fav of it because it was quite unique…. the tickers would pile up at the bottom and over time the most searched ticker would emerge, giving a clue as to where the market might go(?)… anyone who see this type of RC I’d love to hear from you! Thx, Charlie

    -2
  2. 102

    This page needs update !
    Too many sits are not available now,

    -4
  3. 203

    Presentation of tags can be influenced by tag similarities and tag hierarchy ( if there is any). For instance, in the the cloud “ipod, zen, ipad” these terms can stay closer. Similarly, the parent-child in a tag hierarchy (apple-ipod) can stay closer . Have you seen implementations like these? Are those practical?

    Bachelor of Applied Fitness

    0
  4. 304

    Wow! no me canso de este lugar, siempre se puede encontrar cosas maravillosa y prácticas!

    -2
  5. 405

    You should open a fanpage on facebook for your site. Or is there one that I didn’t find?

    -1
  6. 506

    Hey guys, awesome tag clouds. I wanted to realize a tag cloud as well, for the enterprise i´m working for. I realy like the tag cloud from 83degrees. But our design/ ci department don´t like tag clouds and the marketing department as well…

    0
  7. 607

    Hi, You have carried out a fantastic job. I should definitely stumbleupon it and I’ll recommend to my friends. I am sure they will certainly be benefited from this website.

    0
  8. 708

    Thanks with regard to sharing. I believe tag atmosphere are wonderful (if not also overcrowded) and often the first place my own face proceed whenever with a website. After taking a look at several draw impair sets of rules my own do it yourself, listed here are two means of deriving key phrases (tags) when examing a website outwardly

    Visit my site to: rightsandpermissions.org/

    0
  9. 809

    ZoomTags is a “Zoomable — Animated — Themed — Vector Graphics” Tag Cloud Generator developed in C#

    Software: ZoomTags
    Gallery: http://www.muvectors.in/zoomtags/gallery.aspx
    Page: http://www.muvectors.in/zoomtags/
    This provides such unique features as none other can provide.

    0
  10. 910

    I’ve always found that organizing via Categories works better for me. Might be personal preference, but I just think it looks better. For example, on my latest site I feel like this page (http://www.sumocoupon.com/categories) is way easier to navigate and less hard on the eyes than a cloud. Every time a see a tag cloud my eyes just glaze over.

    1

↑ Back to top