Tag Cloud


Users need to know which tags are often used and their popularity


List the most common tags alphabetically and indicate their popularity by chaning the font size and weight

From www.flickr.com

Use when

Usually a Blog Page where articles can be tagged but it is also used on News Sites, photo galleries and stores. Basically, it must be a site where many content items are present and the site supports tagging by site visitors. The tags then provide an alternative way to find specific content.


List the top 30-50 most used tags and list them ordered alphabetically. Each tag is a link that takes to user to a page where all objects having that tag are listed.

The relative popularity of each tag (i.e. the amount of items having the tag divided by the total amount of items compared to the most popular tag) is then depicted by varying the font size, and sometimes also the font weight. The tags are usually in a rectangular area, either in the main content area if it is a page dedicated to tags or in the right-hand column if it is secondary to the maint content.


A tag cloud gives a visual depiction of relative frequency rather than absolute frequency. This helps people to understand the most often used ones versus the lesser used one, which often is an indication of popularity or high activity. Alternatively, users could be presented with a ordered list and frequency numbers but that does not facilitate easy comparisions very visually. Besides, a tag cloud looks cool, doesn't it?

Another important aspect of tag clouds is that it says something about what people do on the site, rather than what the site designers have prepared for visitors. Some claim that this may provide a different, and possibly effective, way to navigate to information. However, there does not seem to be strong evidence that this is really the case. Hence, Tag clouds are no replacement for proper information hierarchy supported by an appropriate Main Navigation. They are probably mainly usefull for providing an different view on the content and an alternative way of navigating content.

More Examples

LastFm http://www.amazon.com/gp/tagging/cloud/


Wikipedia on Tag Cloud
An assessment of tag presentation techniques
Zeldman on tag clouds
On sorted tag clouds
10 Best practices
Getting our head in the clouds: toward evaluation studies of tagclouds
The folksonomy tag cloud: When is it useful?
Improving Tag-Clouds as Visual Information Retrieval Interfaces
Tag cloud with zooming

Also known as

Weighted lists

Code examples

Tag cloud generator

plml logo


3 comments have been added to this pattern

Haggis, 29th January 2008
Keep in mind that Tag Clouds can be a self-fulfilling prophesy when used incorrectly. Tags that become more prominent with more visits merely encourage more users to click on them. Thus increasing their size and popularity. This is because they are the largest and visitors simply perusing the site may decide to see what all the commotion is about.
Nathan Hall, 17th February 2008
I agree with Haggis that it can be a self-fulfilling prophesy, but I do not see this as a problem. The users as a population create a taxonomy rather than having one foisted on them by an "expert."

While tag clouds are most frequently about what the users do on the site, rather than what the site designers have prepared, there are some exceptions. The library at the University of Adelaide has implemented a tag cloud generated by Dewey classification headings.

I think this demonstrates some interest by more traditional organizers of information in the visual representation offered by tag clouds.
Zephyr, 23rd March 2008
I would venture that you could make the reservations about the usability of tag clouds a bit more prominent. There's definitely better and worse ways to present them, but a more important question is always: should they be used in the first place? The old "getting the right design" vs. "getting the design right".

Nathan has a good point about the social aspect of it: it's primarily a manner of emphasizing popularity / availability of items. It needn't be a user-generated thing.

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below