Menu Search
Jump to the content X X

Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now →

Tag Clouds Gallery: Examples And Good Practices

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 menus1. [Content Care Oct/11/2016]

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

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

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

Screenshot Tagcloud

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 Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

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 Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

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 Tagcloud

Shops with Tagclouds Link

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

Screenshot Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

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 Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

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 Tagcloud

Screenshot Tagcloud

Screenshot Tagcloud

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

Screenshot Tagcloud

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

Screenshot Tagcloud

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.

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 Tagcloud

Screenshot Tagcloud

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.

Screenshot Tagcloud

Looking For More Ideas? Link

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2013/12/efficiently-simplifying-navigation-information-architecture/
  2. 2 https://www.smashingmagazine.com/taking-pattern-libraries-next-level/
  3. 3 http://www.googlewatchblog.de/2007/03/19/greasmonkey-script-zeigt-tagwolke-in-den-suchergebnissen/
  4. 4 http://www.tagcloud-generator.com/
  5. 5 http://winkwaves.com/tag-cloud-generator/
  6. 6 http://www.flickr.com/photos/factoryjoe/sets/72157600013680800/detail/
  7. 7 http://www.technacular.com/2007/04/22/collection-of-toolssites-to-create-tag-cloud/

↑ Back to top Tweet itShare on Facebook

Advertisement

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.

  1. 1

    Like always, a nice post.

    0
  2. 2

    Patrick Algrim

    November 7, 2007 1:17 am

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

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

    nice roundup thanks.

    0
  5. 5

    Carlos Leopoldo

    November 7, 2007 1:41 am

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

    0
  6. 6

    That “link'” above should read :

    “tag cloud for music discovery”

    0
  7. 7

    Andrew Benton

    November 7, 2007 2:09 am

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

    -1
  8. 8

    Blogger from Sibir

    November 7, 2007 2:35 am

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

    -1
  9. 9

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

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

    0
  11. 11

    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.

    0
  12. 12

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

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

    0
  14. 14

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

    0
  15. 15

    @ 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
  16. 16

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

    -1
  17. 17

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

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

    Thanks a lot, very useful, as always.

    Cheers

    0
  20. 20

    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

↑ Back to top