WordWorks

In pursuit of textual glory

In search of the perfect Tag Cloud

Tagging has become an essential part of browsing the internet these days. If you have read my previous two posts on tagging you would now know why I am not a big fan of the concept and I am not alone in this regard. Well if it is proving to be a necessary evil then it better be easy. Here I did a bit of research regarding the visualization of tags and their usability. There is no denying the fact that more and more people are taking to the net these days and with all these tags flying around their usability is a central tenet that would determine the longevity of the idea.

In spite of all its shortcomings tagging has added to the aesthetic nature of the web in the form of tag clouds and that would be the topic of conversation today. I love tag clouds as they are almost akin to a work of art. It is fascinating to see how the words fit together and form a visual zeitgeist. Some people have different ideas, but I digress. I shall make an attempt to highlight the pitfalls of using tagsclouds from a usability perspective. If tagging is going to be accepted then tag clouds would play a big role as they are the most visible and attractive part of the concept. An example is shown below,

tag cloud
Wikipedia describes tag clouds as such:

A tag cloud (more traditionally known as a weighted list in the field of visual design) is a visual depiction of content tags used on a website. Often, more frequently used tags are depicted in a larger font or otherwise emphasized, while the displayed order is generally alphabetical. Thus both finding a tag by alphabet and by popularity is possible. Selecting a single tag within a tag cloud will generally lead to a collection of items that are associated with that tag.

The first tag cloud appeared on Flickr, the photo sharing site. That implementation was based on Jim Flanagan’s Search Referral Zeitgeist, a visualization of web site referrers. Tag clouds have also been popularised by Technorati, among others.

Tags are not seperate entities, they are used in the context of the material that has been tagged and hence they are related to the other tags used on the same link. One of the highlights of tagging is seen when tags are aggregated as in tag clouds. Then, we can see trends in what people are tagging: interesting links on Del.icio.us, cool pictures on Flickr, for example. These trends are trends of popularity and tag clouds should ideally have a way of depicting them. The other important issue is the one of “emergent tags“. Emergent tags are tags are tags that are in the process of becoming popular. They are valuable because they represent current trends on the net. As Joshua Porter explains :

Why are emergent tags valuable? Well, they’re valuable because they show trends of change. To give you an example of how useful this can be, Tim O’Reilly said in his opening talk that by watching the emergence of the Ajax tag they could predict that if O’Reilly published books about Ajax, readers would gobble them up. And judging by the number of people at this Conference who are building applications in Ajax, and the number of folks I’ve talked to who have shiny new Ajax books, this certainly is the case.

So rule number one would be that tag clouds should show the relation of the tags to each other and secondly they should not be plain beautiful font but should have a way of showing current and emerging trends in a graphical manner, thereby making it easy for people to “get it”. This is important, as for a majority of people not accustomed to the idea, it would be like seeing the data in a graphical manner which is a lot more attractive than viewing plain old search results. It would make discovery of interesting links a lot more easy as clicking on paricular tag would display the relevant results and filter out irrelevant content. A lot more intuitive, that way.

Another problem with tag clouds is that their data displaying ability is limited by the screen size. Why would this be a problem? Well not everyone who searches the tagosphere is looking for cool links. I, in particular am, looking for information on something that happened say a few months ago and the topic wasn’t even “hot” so to speak. Now I have a problem. Most of the sites that display tag clouds are fixated on displaying the flavour of the month, or the tags that hog the screen are the ones that are currently popular. Related to this is the phenomenon of “tag decay“. I quote Joshua Porter on the subject of popular tags :

One of the major problems with popularity is that popularity breeds popularity. When something gets popular enough, it is introduced to newer, wider audiences. These audiences, unaccustomed to the new idea, keep it popular. Unfortunately, these cycles tend to be too long: new things that become popular on a wide scale drown out those newer ideas that are still on the small scale, waiting their turn at the big time. These smaller ideas might be just as valuable as the popular ideas, they just haven’t had their chance to shine. Those folks who already know about the popular idea and are waiting for the new idea are out of luck.

So rule number two would be that systems using tag clouds should taking into account tag decay and come up with systems to negate its effect or atleast keep “decayed” tags still accessible and relevant in the picture.

Lets take a look at some examples and compare the ideas in quest of the perfect tag cloud.

  • Flickr


Flickr Tags

Flickr created the first tag cloud. And they have done a good job of it. They being pioneers in tagging have solved the issue of popularity decay in a fantastic manner. on Flickr you will find that the popular tags are arranged to show three stages of popularity, with three different levels of popularity decay.

One stage contains those tags that were popular in the last 24 hours. This has a short decay period. Tags here today may be gone tomorrow.

A second stage contains those tags that were popular in the last week, and thus a week-long popularity decay. Things that are popular this week might not be popular next week.

The third stage is all-time popular tags, the default popularity for most other systems , and it clearly shows the effect of a slow popularity decay. Tags do not decay here within a set time frame.Tags added to this list, are popular over all-time. Therefore, turnover is very slow, and thus watching this list is not indicative of trends as they happen. When some idea hits this stage, you can be sure that it is popular, but it certainly isn’t new, because it has had to be popular over the very long term. There is an excellent write up on this here. Also related would be the idea if the user could set how fast or slow these tags representative of trends decay. I quote this from Cloudalicio.us. “If websites begin to implement a tag cloud epoch, they can begin to “forget” the stale tags in their system. Sites can begin to have their most visible tags dissolve in an organic, human way. As people do not continue to tag a certain thing a certain way, this thing should fade slowly from view. It should still be findable (and re-findable) through search and browse, but the tags describing it should count less and less when considering what hot lists to put the item on. Interesting thought.

  • del.icio.us

del.icio.us
It is my favourite bookmarking service and rightly so as they have got a lot of things right. No I am not referring to the Yahoo acquisition!, instead I am referring to the usability and customizability of their tag clouds. They have excellent support for third party tools and their tag rolls and clouds adorn many a weblog. In their popular tags tag cloud they make the use of colours to delienate my tags from the rest of the communities’. That is a step towards user friendliness but it can be further improved by allowing the user to specify colours for “emergent tags”. It would be great if I could set preferences for items such as time frame or for tags that are relevant to a particular area etc or even colour the most recent tags a fiery red or remove the most recent tags. Now thats a thought isn’t it? Take a look at this picture below:

delicious custom

delicious tag roll

It shows how they allow customisation of the size of the tag roll, but it doesnt mention what are the tags that they omit when they reduce the size. Is it the least popular ones or the oldest ones, that’s one against del.icio.us. I quite like the way how they allow for the size of the font to be changed. Kirk Biglione lambasted them not too long ago for this, I quote:

“Absolute Font Sizes: Without exception fonts were defined in pixels. As a result I was unable to resize type in Internet Explorer. This was somewhat puzzling given the fact that it would be fairly easy to implement the font size variations using em’s. del.icio.us actually went as far as defining the font size in fractional pixels extended to the 13th decimal place. They must be using one of those 30 inch Cinema Displays.

Lack of Context: These menus currently require a user to actually view the page in order to discern the relative popularity of tags. There is no additional context that could be used to determine popularity. Given the fact that the difference in font size for any pair of tags can be as little as a single pixel, additional context would also be useful to those who are not visually impaired.”

context

The lack of context has been fixed as you can see from the example above. There is an option that allows you to see the context of a tag as a small number by its side.

  • Fontolia

fontolia

Not as comprehensive as del.icio.us and is not very intuitive as it does not give us many options to slice and dice the tag cloud. I like the concept of searching for the most popular tags used to describe a photo but the “top tags of most searched photos.” is a gem.

  • Technorati

technorati

King of blog related tag search unfortunately falls flat in creating the perfect tag cloud. Look at the picture above. It is a plain Jane tag coud with no customisations possible. Has to improve a lot. I would love to use it more if the tag cloud could be “pimped”.

  • Metafilter

metafilter

This is the introductory line on their page:

“Tags are simply free-form keywords people have used to describe their posts. I never could figure out how to create the perfect categorization system for MetaFilter, but this is a great bottom-up way of organizing everything that has ever been posted to MetaFilter. Feel free to plunge into the archives by clicking any phrase that interests you. The larger a word is, the more times it has been used to tag a thread at MetaFilter.”

But despite the disclaimer they have implemented a form of context with respect to the popularity as you can see by the small numbers by the tags.

  • 43Things

43things

No show here. Just a search box. Got to improve. Thats a B- !

Well then whats a perfect tag cloud? I beleive that a perfect tag cloud should have atleast the following properties.

  • Ability to show trends.
  • Be relevant with results
  • Show customisability for people with 15″ screens and those with poor vision.
  • Be searchable against a variety of data eg, dates, time frame etc.
  • Uses colours and looks good.
  • Have a contextual syatem to show how relevant each tag is in its ecosystem.
  • Have a good api and allow tag rolls to be used on blogs and sites.

And the winner is, wait for it, is “del.icio.us” for now. Flickr is a close second. But all of the systems have to improve a lot more.

Any more ideas, do let me know.

No competing interests declared!

Setting up a Google web search Trigger

I love Quicksilver for its fantastic idea and its beautiful implementation. Here I have detailed the method of adding a web search trigger. If you dont have Quicksilver, you can get it here. I just noticed that the latest version of Quicksilver had this to say.

Welcome screen
Setting up a Google web search Trigger

  • Go to www.google.com and enter the charatcters “***” ( 3 stars that is ) into the search box and hit enter. When google has finished searching, remember to copy the URL from the browsers address bar and paste it into a document, say Textedit. Now add the terms ” qss- ” to the front of the url so that it becomes a bookmark. For example if the url at the end of the search was “http://www.google.com” then the bookmark would be “qss-http://www.google.com”
  • Open the Quicksilver preferences window.
  • Select triggers so that you are presented with the trigger preferences pane.
    Click on the small “+” near the bottom to add a new trigger.

QS Search

  • when the window drops down just paste (command+V) the copied bookmark into the first pane.
  • You will see that the second pane automatically becomes “search for”. Also note how the third pane has a text icon in the picture above.

(Sometimes when you set up this trigger you may find that there is some text in the third pane, as shown in the picture below,in which case the trigger will not work.
Wrong Trigger

In such cases, we have to get rid of the text, so close all quicksilver windows and invoke the Quicksilver bezel, then paste (command+V) the earlier copied bookmark into the first pane. If there was text in the third pane while setting up the trigger then quicksilver displays the text as shown below in the third pane.

Bezel

Now tab over to the third pane and go into text mode by typing “.” (A full stop that is) and delete the text in the third pane and then press Return (Very important). Then repeat the steps of setting up a trigger from the preferences pane as described above. You will find that there will not be any text in the third pane, but only a text icon or sometimes nothing at all, thats allright. Now that we have got rid of the text, follow the steps detailed below)

  • Press Return (DO NOT TAB into any other pane or do anything else as you will not get it right. Do not even click on anything else)
  • Now select the trigger from the menu and and assign a shortcut (F5 for example) for it by double clicking next to the key icon. Close the quiclsilver window.
  • Press the key shortcut and see the google search shortcut come to life!

Google Search Trigger

  • Remember you can do the same thing with other sites like yahoo, MSN , ebay , etc. For more such URL’s, look at the web search list.
    You can find more resources here, here, here and here!

Technorati Tags: , , , , , ,

Follow

Get every new post delivered to your Inbox.