Mobile Web Design : Tag Cloud

From Forum Nokia Wiki

This design pattern is part of the Mobile Web Design series.

Introduction

As the information available on web sites increases by the day, the challenge from a developer’s point of view to ensure that finding the relevant information still remains an easy enough task for the end user. Web designers are coming up with newer and innovative ways to beat the information overload that seems to be happening. It seems like a good idea to let the user know what are the most viewed/sought after content available on the site, that ways they can figure out the profile of other users on the site and the popular content available. This pattern is classified as tag cloud.

What is tag cloud

Tag cloud is a graphical/visual form of representing the popular/most viewed tag items on the website to the user. The tag cloud gives the user an insight into the content available on the site and also the profile of the users who are using the website. The tags are highlighted and differentiated from the others with the use of different colors and fonts depending upon their popularity.

Tags are usually hyperlinks which when clicked take the user to the pages/content that has been tagged with the particular tag. Users can possibly create their own custom tags also depending upon the implementation.

Tag Cloud in image

When to use

Some places where tag cloud can be used are:-

Social networking/blogging sites where the popular blogs/profiles get tagged with higher ratings and hence are prominently visible.
Where you want the user to decide what content is more important/relevant by allowing them the option of tagging content.
On websites that do not have a fixed hierarchical structure where the importance of the information is pre-decided.

Tag Cloud in images

Advantages

Some of the key advantages of using tag cloud are:-

Gives the user a sense of what to expect on the site and to allow them easy navigation/search mechanism.
Allows the user to understand the average peer profile on the set, as users who are tagging content tend to leave a character trail of themselves.

Disadvantages

Some of the key disadvantages of using this using tag cloud are:-

There is no restriction on the tag name, hence they are open to misuse where the user might give falsonomies/psynonyms which could be confusing and meaningless to others.
Since the users are in charge, if they flock to a particular tag en masse it ends up becoming more important to a point where the other important(from an overall standpoint) tags become almost invisible owing to lesser interest shown in them.
Incorrect tagging for particular information could end up reducing the overall effectiveness of the search and site hierarchy. For instance if people decide to tag the Big Ben in London as say “The Great Clock” and continuously to a point where the tag ‘Big Ben’ ceases to exist all together.

Usability guidelines

Some usability guidelines to follow while using/creating tag clouds are:-

Allow the user a way to customize the tag cloud.

Customizable tag cloud

Express the popularity of the tag in numbers

It might be a good idea to attach some numbers like how many people have tagged the category, and maybe a list of those users, so that it makes more sense for the others viewing the tag cloud.

Quantitative approach to tag cloud

Ensure consistency of font size/color based on tag popularity

It is important to ensure consistency of font size especially when showing tags on the user interface. It shouldn’t happen that two tags with the same number of user hits get depicted with different sizes, it might end up confusing the user.

Final Word

Tag cloud is a nice visual representation of the popular content on the website, but at the same time since it is prone to misuse it should be used with care. A possible restriction on what can possibly be tagged as what could be a good idea or a moderator approved tagging mechanism could also be put in place to ensure that the tags serve their larger purpose of helping the average user on the web page.

Another mechanism could be to actually have a customization option for tag clouds as mentioned here on Configurable Tag Cloud

Additional Resources

Wikipedia

Jeffrey Zeldman’s report

Improving tag clouds

--- Added by Mayank on 30/06/2009 ---

Community: Wiki