I like the idea of tag-clouds and tags in general, but I had problems making them look good in becontrary.com. I experimented with changing the relative size and blending colors, as well as with the huge number of visual tweaks you can do with CSS, but the amorphous blob of words just didn't seem to fit with the nice neat columns I had. Until, that is, I sorted the tags by popularity, which made it a lot neater and enhanced the effect of blending the font size / color. I don't know why it didn't occur to me before. I don't see many sites doing this, most tag clouds are sorted alphabetically.

The image below shows a tag-cloud sorted by popularity (left) and just alphabetically (right). Which one do you think looks better?


(Click for a larger image.)

Update: A few people have commented that without alphabetical order it is difficult to pick out a tag you are looking for. Personally I have never used a tag cloud like that, its usually just a starting off point to explore the site. If I wanted something specific I would use the search function. Even if the tag-cloud is used to scan for specific tags, it becomes redundant if you have so many tags that you can only show a subset, which is the case for becontrary.com. So I chose form over function, consequences be damned!
This blog post was posted to It's All Geek to Me on Wednesday October 31st, 2007 at 8:46PM

29 Responses to "Tag clouds look better sorted!"

  • Steve
    October 31st, 2007, 10:23 p.m.

    Sorted by Popularity is so much more useful and logical. It is amazing to me that I've not seen anyone else use this....

  • October 31st, 2007, 11:22 p.m.

    I agree, sorted does look nice. It gives your readers a much better idea of what to expect right up front.

  • October 31st, 2007, 11:34 p.m.

    so much more useful - depends on the beholder/user, and is also affected by how many items your tag list contains. A short list, presented in a narrow format, can be taken in easily by many readers, but as the list grows, this won't be the case. A long list of tags ordered by weight rather than alphabetically become cumbersome if one's purpose is to find a specific tag rather than select tags by weight.

    Maybe offer both, or another way of viewing the tag collection in addition to the cloud. I used a cloud and a table. http://mikewatkins.ca/tags/

  • November 1st, 2007, 12:01 a.m.

    I'm not sure that tag clouds serve much of a useful purpose. They seem to be mostly decorative, and are used as a way of inviting the user to click something. If you really do want to look for particular content, then you would use the search function and simply type it in...

  • November 1st, 2007, 12:59 a.m.

    If you sort your tag clouds by popularity, there is no reason at all to make the more popular tags larger.

  • November 1st, 2007, 1:06 a.m.

    Jerry, how would you know which ones are more popular without differentiating them visually somehow? They could all be the same popularity, for all the reader knows.

  • Alx
    November 1st, 2007, 1:08 a.m.

    Delicious is allowing to display tag cloud by popularity, but it's surely not the most seen options on all web 2.0 websites:


  • November 1st, 2007, 1:10 a.m.

    Well, if they're sorted by popularity, then the first ones in the list are the most popular.

    (That does assume the reader knows how they're sorted, of course, but since they won't be alphabetical it's not a great leap. Or you could just tell them.)

  • November 1st, 2007, 1:15 a.m.

    Not necessarily. A tag may have the same popularity as a tag preceding it, and there would be no way of telling that visually.

    Not that, that information is essential. I just think it looks pretty...

  • ryan
    November 1st, 2007, 1:40 a.m.

    Hmm. I disagree wholeheartedly.

    This is why:

    A sorted-alphabetically list has 2 main benefits. 1) You can see what's popular at a glance based on the size of the items and 2) You can find a peticular tag in the cloud because it's sorted in a meaningful way.

    The problem with sorted-by-popularity is that it's only useful in 1 way. Namely the 'what is popular' way. But it completely obfuscates it's use in any other way (say 'I want posts about Ruby, where is that').

    Aesthetically, you might be right, of course. But functionality wise, you're destroying part of the purpose of a tag 'cloud'.

    Consider this. If it's just in order of popularity why not just list the most popular tier in a straight list instead of in a 'cloud' formation at all.

  • js
    November 1st, 2007, 8:38 a.m.

    Sorting looks good but actually removes order from the list.

    The philosophy of tag cloud is that what is popular is also big. You make this information redundant by also placing popular things to the front.

    But by doing this you remove order by breaking the alphabet sorting and it may become hard to find particular item in the list (apart from using Ctrl+F that nobody uses anyway)

  • November 1st, 2007, 10:25 a.m.

    If I'm searching someones weblog/website and use their tagcloud, I'm looking for specific keywords. My brains want the list to be alphabetically sorted, so in a blink of an eye I 1) can find the keyword and click on it and 2) if the keyword is not there I know it's not used while sorting on popularity means I still have to scroll through the rest of the list.

    So....sorting on popularity: bad idea.

  • kL
    November 1st, 2007, 11 a.m.

    You're duplicating information. Text size/color already defines popularity. Lack of predictable sorting makes it much harder to find a specific keyword.
    ...clouds suck anyway...

  • Ralph Corderoy
    November 1st, 2007, 11:53 a.m.

    ryan's right. Pretty comes second to utility. A user needs quick access based on collating order, and some indication of frequency, e.g. font size, is nice. You could try ordering by frequency and use appearance to indicate collating order, e.g. a colour fade from green to black. Can you quickly locate a particular word then?

  • November 1st, 2007, 12:35 p.m.

    I really don't think it looks prettier and ends up losing the whole "cloud" feel. I'm 100% against the idea of sorting by popularity! I don't really use clouds very often, but part of the appeal to me is that they looks a little "bumpy".

  • Mark Fredrickson
    November 1st, 2007, 5:36 p.m.

    While working on http://drupal.org/project/nodecloud I played around with a lot of different sorting algorithms. I actually really like sorting such that the most popular items were in the middle. It had a wonderful "balloon" effect. Worth a try if you want alternate cloud making algorithms.

  • November 1st, 2007, 6:14 p.m.

    Maybe this could have been a debate on becontrary... ;-)

  • November 1st, 2007, 6:49 p.m.

    I'm all for sorting by popularity. The only utility of alphabetical sorting is for locating a tag, but in most modern browsers you can hit '/' to find it. Heck, I even do that when it *is* sorted alphabetically.


  • Roger
    November 1st, 2007, 6:54 p.m.

    This is a kind of a non-argument isn't it? If people feel strongly about it, simply provide a link to allow the user/reader to re-sort in accordance with the desired criteria.

    Problem solved.

  • November 1st, 2007, 7:35 p.m.

    I had no idea this would be such a contentious topic! Perhaps it should have been a becontrary debate.

  • November 1st, 2007, 8:19 p.m.

    Did you realize that your entry feed contains some spam at the end? Check out the representation on Planet Python http://planet.python.org/ - two paragraphs that show up at the end on downloading films and music. grammatical errors suggest you may not be aware...

  • November 1st, 2007, 8:20 p.m.
  • November 1st, 2007, 8:29 p.m.


    Michael, thanks for bringing that to my attention. Perhaps upgrading Wordpress will fix it.

  • November 1st, 2007, 10:16 p.m.

    It definitely seems interesting, but I would count myself among the people who look at both size and alphabetization. After all, with a traditional tag cloud, the size, not the ordering, indicates the popularity, while the ordering can be used as basic indexing/sorting.

    What I think would be an ideal solution is to have the tag cloud sortable in *both* ways, via javascript. Sorting both by alphabetization and by an attribute should be quite straightforward in JS, and you could offer a toggle between the two in the cloud box.

  • Requiem
    November 2nd, 2007, 1:35 a.m.

    Whether you care or not about duplicating information you should at least realize that it is no longer a "cloud".

    Clouds are supposed to be random and fussy not neatly sorted, it is more of a "tag rainbow" or "tag stalactite".

    Regardless, fuzziness was part of the aesthetic, you just missed the point.

  • November 2nd, 2007, 9:29 a.m.

    Requiem, it is clearly a 'tag waterfall'!

  • November 2nd, 2007, 3:47 p.m.

    Right, it looks better, but it is no longer a tag cloud. It's just a listing by popularity, with sizes. Now, I personally prefer this if this is what you want to convey. And if you want to have an alphabethical listing, and still convey popularity, maybe just listing them in different sizes? For me, standard tag clouds are just hard to use. The different sizes break up the flow, and make the alphabetical ordering unusable.

  • December 11th, 2007, 2:29 p.m.

    While I agree that sorting the cloud by popularity is redundant, it is probably very easy to implement a little JavaScript function that sorts the tags the preferred way and a little icon/button with which the user can change the sorting with one click.

  • [...] clouds can be sorted in different ways: alphabetically, by frequency, semantically and randomly. Will McGugan prefers them sorted by frequency, because that makes them look better. In the comments people pointed out that it is easier to find [...]

Leave a Comment

You can use bbcode in the comment: e.g. [b]This is bold[/b], [url]http://www.willmcgugan.com[/url], [code python]import this[/code]
Preview Posting...
Previewing comment, please wait a moment...
Will McGugan

My name is Will McGugan. I am an unabashed geek, an author, a hacker and a Python expert – amongst other things!

You are reading my tech blog. See the homepage for my other blogs.

Search for Posts
Possibly related posts
Popular Tags
Recent Comments
Sir, can you give me full code.?
Trying to implement this code. What are the requirements? Does it need a certain version of PHP, etc? Do I ...
Hi Will Can't seem to run any pyopengl applications on my Win7 64bit setup. Using python 3.3 but keep getting ...
Great work, is it possible to jump to a specified picture?
Thanks for the lesson and library, but: What if I wanted to limit the frames as well? Is it really ...
- The novice on Master time with PyGame
© 2008 Will McGugan.

A technoblog blog, design by Will McGugan