The Rights and Wrongs of Tag Clouds

by on June 23, 2007

I’m not obsessed with tag clouds, really I’m not, but I think they are the single most useful, yet criminally misunderstood and mis-applied UI device out there. I’ve written about tag clouds before, but this time I’m turning up the heat.

Controversy time: writing about “best practice” for tag clouds in terms of what fonts to use and other minutiae is the hallmark of the usability nerd. The other hallmark is forgetting – in this case utterly – to consider context. Whether or not a tag cloud is useful at all is 100% down to the context it’s in. Everything else is as near as dammit to irrelevant. The fact that few things in information architecture are as clear cut as this is particularly damning here. The one thing you have to understand in user experience design is context.

Tag clouds have a very particular use. They can instantly summarise to the user the informational “mood” of the site – the Zeitgeist; the drift, the “scene” – in a way that no other informational device can. They are in their element when there is a large amount of diverse information that you need quickly to get a handle on in order to decide whether you should spend more time on the site or not, or whether the information set is likely to be relevant to you. Once you have decided in the affirmative to this all-important issue, you can then use them as a primitive means of going to that part of the information that you are interested in (ie by clicking on one of the tags). They are not about navigation.

If you’re a designer, it’s immensely important to realise that it’s also very easy to have a tag cloud that is as useful to your audience as a bowl of sick.

Here’s an example of a good tag cloud journey (hate that word, but sometimes I have to use it). You go to a site which you’ve been told is a “designers’ community.” First problem: the context of the word “design” more or less determines what that word means, and whether you’re likely to join the community depends rather a lot on that meaning. It might mean visual design, business process design, systems design, structural design, or several other flavours of the term. Luckily, however, members of this site can attach tags to their profiles, and those tags are represented as a tag cloud.

Let’s pause there and consider what the user of the site should know once they have registered the existence of the tag cloud:

  1. The site is about “design” (whatever that means)
  2. The tags in the cloud are submitted by users registered on the site (it says so at the top of the cloud)
  3. The bigger the word in the cloud, the more common the tag

Instantly, you see the word “graphics,” “design,” “art,” “illustration,” “magazines” and “painting” are bigger than all the others. You then see that “digital” is very small and things like “rotoscoping,” “patterns” and “interaction” are completely absent.

Bingo. You now know what the site is about: it’s full of visual designers who have only marginal interest in digital media and probably all hate Jakob Nielsen, assuming they even know who he is.

Once again: there is no better way to known that for sure. The tag cloud is the only mechanism that delivers the right bang for the buck: near instant understanding of the data set. Sure, the graphic design of the site may offer some clues, or there may be some more scent around things like information about art galleries or whatever, but without the tag cloud you’d always be thinking “what do they mean by ‘design’?

Here’s an example of a bowl of sick. You go to a site that sells electronic goods like TVs, video cameras and hard drives. You are looking to buy a new monitor for your PC. On the home page is a tag cloud with the words “TV,” “monitor,” “camera” and “printer” all in the ascendant. It also has lots of other names of gadgets and consumables in the cloud.

The tag cloud takes up a lot of space, but there’s no way to know how the cloud is constructed. Is it numbers in stock? Is it different models? No explanation. Not even an apologetic “What is this?” link.

So how the hell is that in any way useful to you in the context of shopping for consumer electronics? Sites selling electronic goods are not very mysterious places. They might not stock some esoteric widget that you are looking for, but you can find that out by using the search. The one thing you are not there to do is marvel at the fact they have more cameras than printers. The fact that you can’t tell what the cloud is showing you also goes down like a lead balloon. Tag clouds should be about instant understanding. Using them as horizontal navigation is just idiotic.

So, best practice in tag clouds is nothing to do with line spacing or sorting options – it’s about considering the context and making sure people can easily understand how they are constructed.

The good example.

The bowl of sick.

Comments

Speaking of missed context, you’ll find extensive discussion of many aspects of tag clouds – including their role in the larger spectrum of information navigation / visualization methods, their current state, their historical development, their likely directions of future evolution, as well as the critical importance of contextual information as a necessary user experience element of any successful tag cloud – in the collection of essays available from my blog here:

http://www.joelamantia.com/blog/archives/cat_tag_clouds.html

In this larger context, the role of the posting on usability best practices for tag clouds was to answer specific questions from the community, and set the stage for the necessary and ongoing discussion about how to construct tag clouds.

The importance of establishing a baseline for consistent structure, composition, and rendering of tag clouds should be obvious: unless all we ever expect from tag clouds is for them to serve as interactive mood rings for isolated destinations, they’ll need to follow basic architectural
principles that allow for interoperability, scalability, syndication, etc.

The larger context for the question of how to build tag clouds is thus the role that interconnected tag clouds can (and probably should) play in creating an effective layer of open, cost-effective, and easily realized environmental infrastructure across the Internet that supports the
emergence of the New Web (business models, user experiences, etc.) by making human judgements on meaning directly apparent and manipulable.

As someone self-described as passionate about tag clouds, you – and some of your readers – might be interested in joining one or more of the communities actively discussing these (and other additional) questions?

Thanks Joe. So it looks like I was taking your post out of context.

I’m not entirely sure what you mean by “the role that interconnected tag clouds can … play in creating an effective layer of open, cost-effective, and easily realized environmental infrastructure” but I’ll have a look at more of your stuff to find out.

Which communities are you referring to, by the way?

interesting that the “good example” tag cloud gives an instant indication not only of site content but of geographical bias (of the site members). So we know not only what they are interested in, but also that most of them associate themselves with Deptford (and hence are probably graduates of Goldsmiths).

Jonathan,

You’ve pulled out the juicy bit of my long comment. The basic idea is that a common structure and syntax for tag clouds would allow people to read, search, index, catalog, combine, compare, track, visualize, and in general work with clouds of tags from many different sources, created by many different communities, at the same time. If the isolated pools of tags we have now could be merged, mashed up, remixed, etc., no doubt people much smarter than I will further who knows what sort of goal.

In this way, a large number interoperable tag clouds buit up from many different sources could form layer of tags that becomes common to the larger environment.

Regarding some of the work to these ends, check out TagCommons, the Microformats initiative, and iTags.

Cheers,
Joe

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>