Smashing Magazine we smash you with the information that will make your life easier. really.

Tag Clouds Gallery: Examples And Good Practices

November 7th, 2007 in Design Showcase | 123 Comments

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.

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

These links are tagged with the word ‘design’ on Del.icio.us. 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.

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.

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.

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.

Shops with Tagclouds

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

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.

Classics: Flickr and del.icio.us

Tags on news.com.

Advertisement with Tags. Sounds more like spam, actually.

Looking For More Ideas?

Tagclouds Photoset offers a number of tag clouds screenshots as a Flickr stream.
Understanding Tag Clouds explains the theory behind tag clouds, their use in practice and displays some examples.
Collection of tools / sites to create tag clouds

Published in Design Showcase, November 7th, 2007
Tags: generators, navigation, startpages, tagclouds, tags

1.

Kevin (November 7th, 2007, 1:07 am)

Like always, a nice post.
- Comment
2.

Patrick Algrim (November 7th, 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! :)
- Comment
3.

Coen Jacobs (November 7th, 2007, 1:21 am)

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! :)
- Comment
4.

Carlos Leopoldo (November 7th, 2007, 1:41 am)

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

Burst Labs (November 7th, 2007, 1:43 am)

Our Link [www.burstlabs.com] 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.
- Comment
6.

Burst Labs (November 7th, 2007, 1:45 am)

That “link’” above should read :

“tag cloud for music discovery”
- Comment
7.

Andrew Benton (November 7th, 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
- Comment
8.

Blogger from Sibir (November 7th, 2007, 2:35 am)

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

Pavel Ciorici (November 7th, 2007, 2:42 am)

Here is another nice tag cloud: Link [habrahabr.ru]
- Comment
10.

MMMeeja (November 7th, 2007, 3:54 am)

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.
- Comment
11.

Paul (November 7th, 2007, 4:16 am)

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

Agust Gudbjornsson (November 7th, 2007, 4:51 am)

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

Link [tagacloud.com]
- Comment
13.

Billy Halsey (November 7th, 2007, 6:34 am)

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 Link [paxoo.com] 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.
- Comment
14.

Wallace (November 7th, 2007, 8:34 am)

nice roundup thanks.
- Comment
15.

blogmunch (November 7th, 2007, 9:09 am)

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

Yogi (November 7th, 2007, 9:23 am)

Great tag clouds. Will be a good inspiration for me.
- Comment
17.

Fabio Sasso (November 7th, 2007, 10:14 am)

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

Vikas Sah (November 7th, 2007, 11:02 am)

Thanks for mentioning Link [www.technacular.com]
- Comment
19.

violinista (November 7th, 2007, 4:59 pm)

Thanks a lot, very useful, as always.

Cheers
- Comment
20.

Imran (November 7th, 2007, 5:48 pm)

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.
- Comment
21.

Matt (November 7th, 2007, 6:11 pm)

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

Rasmus Luckow-Nielsen (November 7th, 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 Link [mitkbh.dk] (it’s in Danish and means “My Copenhagen”)
- Comment
23.

Ben (November 7th, 2007, 8:15 pm)

@ 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
- Comment
24.

dressup (November 7th, 2007, 9:30 pm)

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

Alex Wilson (November 7th, 2007, 10:00 pm)

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…
Link [alexwilsonphoto.com]
(some photos NSFW)
- Comment
26.

Rasmus Luckow-Nielsen (November 7th, 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
- Comment
27.

roger (November 7th, 2007, 10:18 pm)

This one is pretty cool when you mouse over it (on the right column): Link [www.quizoom.com]
- Comment
28.

Noah Everett (November 7th, 2007, 11:38 pm)

Great article. My blog uses a cloud tag as well Link [www.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.
- Comment
29.

Marco (November 7th, 2007, 11:44 pm)

Here, another example of tag cloud Link [koolontheweb.com]
- Comment
30.

vangardx (November 8th, 2007, 12:29 am)

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..
- Comment
31.

John Bokma (November 8th, 2007, 1:26 am)

I wrote a Perl program that generates a tag cloud from the access log of a webserver: Link [johnbokma.com].
- Comment
32.

Paul Jensen (November 8th, 2007, 1:41 am)

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

Link [www.tickex.com]
- Comment
33.

Daniel (November 8th, 2007, 2:38 am)

Wow .. .great list … i like it a lot
- Comment
34.

Glen (November 8th, 2007, 4:45 am)

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

–Link [zzzoot.blogspot.com] clouds are variations of tag clouds used in search refinement.
–HTML pull-downs and scrolling lists can also be mad tag-cloud-like. See “Link [zzzoot.blogspot.com]“.
- Comment
35.

Christoph Thelen (November 8th, 2007, 4:58 am)

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 Link [estudy.mni.fh-giessen.de]
Regards, Christoph
- Comment
36.

Jermayn Parker (November 8th, 2007, 10:19 am)

tags are over rated!
very rarely are they used to good effect
- Comment
37.

João (November 8th, 2007, 5:47 pm)

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.
- Comment
38.

ravi karandeekar (November 9th, 2007, 10:37 am)

“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.
- Comment
39.

Richard Rutter (November 9th, 2007, 7:20 pm)

Another fine - and different - example of a tag cloud is the Link [commentisfree.guardian.co.uk] for the Guardian’s Link [commentisfree.guardian.co.uk] collective blog.
- Comment
40.

DuMe (November 10th, 2007, 12:35 am)

th o is snot bad too :http://www.lyndsey.fr
- Comment
41.

Carola (November 10th, 2007, 1:04 am)

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 ?
- Comment
42.

Bruce Chapman (November 12th, 2007, 2:40 pm)

@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.
- Comment
43.

trond (November 12th, 2007, 3:27 pm)

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.
- Comment
44.

Tom (November 14th, 2007, 11:01 pm)

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

Forrest (November 15th, 2007, 4:07 am)

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.
- Comment
46.

Christian (November 15th, 2007, 6:34 pm)

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.
- Comment
47.

ilyaZ (November 27th, 2007, 10:14 pm)

Nice..nice magazine..i like it so much..
- Comment
48.

meshed (November 30th, 2007, 6:31 am)

I recommend also Link [www.meshed.de] as a page with tag cloud on/as startpage.
- Comment
49.

Ticketwood (December 6th, 2007, 9:14 pm)

What a great post! I’ve been wanting to implement a tag cloud
- Comment
50.

Concerned (January 24th, 2008, 4:17 am)

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 Link [24ways.org].
- Comment
51.

Real Estate Postcards Dude (February 11th, 2008, 7:55 am)

very very nice combination of tag cloud you have here..i think tag clouding becomes more popular the design and interaction models will improve.
- Comment
52.

Mb. (February 18th, 2008, 9:45 am)

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: Link [mattbalara.com].
- Comment
53.

Sam Valiquette (February 22nd, 2008, 6:06 pm)

Hey, Great Post!

Everyone should take a look at Link [virb.com] tag cloud!
- Comment
54.

Farah (April 12th, 2008, 5:38 pm)

hi. nice post, really great ideas there. I am doing up and intranet image bank for my company and would like to use the tag cloud feature as the search keywords feature. however, I wish there was a way to make the look neater, more like the tag index, in columns like that but still reading the keywords of the site like a tagcloud, displaying only keywords which appears with a certain percentage. Is there a way to make the tag cloud look neater say in columns?
- Comment
55.

Alfred Samuel Webalfee (April 18th, 2008, 12:27 am)

its a very nice post and it covers most of the tag clouds that are revolving in the web. in all these tag clouds which one is the best according to your experience
- Comment
56.

Frola Beldy (April 24th, 2008, 2:54 pm)

one more interesting example of tag clouding: Link [www.createcloud.com]
- Comment
57.

Simon Carter (May 1st, 2008, 8:49 pm)

Useful and detailed — but what would you say are good examples of “mainstream” use of tag clouds?
- Comment
58.

MoJo (May 4th, 2008, 9:39 am)

thanks for the news
- Comment
59.

Dirk Maßat (May 7th, 2008, 8:44 am)

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. My Page: Link [www.onlineshop-artikelverzeichnis.de]
- Comment
60.

Carlos (May 11th, 2008, 8:53 pm)

Another cool tag is from the folks of Link [www.couponcodesmall.com]
- Comment
61.

Diane (May 15th, 2008, 7:19 am)

what do you think about the use of tag clouds on sites geared toward an older audience - people who arent as internet savvy? do you think they get it?
- Comment