Web Site Review - Using Tag-Cloud-Style Navigation

After a friend of mine recently shared an interesting web site with me that used tag-cloud concepts for navigation, it gave me a good opportunity to write my next post. The site I am reviewing is the School of Informatics and Computing: Indiana University Bloomington

If you are viewing the site (hopefully, in a new browser window) you will notice on the left panel labeled ‘Navigate’ and the right panel labeled ‘Discover’ there appear to be a random arrangement of words or topics in varying font sizes. These link arrangements are commonly called tag clouds. Generally, users can associate larger items with higher import, and smaller items with less.

According to wikipedia at the time of this writing there are basically, three types of Tag Clouds (see full Wikipedia article):

  1. “In the first type, size represents the number of times that tag has been applied to a single item” - This is more of a democratic style where users vote on how frequently an item (blog post for example) fits with a given tag.
  2. The second type is basically, the opposite.  It is a measure of the popularity of the tag (keyword of phrase) that is used.  So in a blog, or web site, for example, a tag that is applied to many articles would be larger, or more prominent than a tag that is used relatively few times.
  3. The third type is more about categories, where tag labels are groupings of content, and the categories with the most articles in those categories are more prominent. (This is more like the left-hand navigation found on the Indiana University Web Site)

What I found interesting about this site is:

1. Beyond the fact that the tag cloud in the ‘Navigate’ area on the left competes with the one on the right side labeled ‘Discover’; the site is using both hierarchical, and topical navigation.

2. The left navigation uses the categorical type of tag cloud while the ‘Discover’ area appears to use a random arrangement that is probably not driven by popularity or by usage.  Both implementations are not fully executed tag clouds as they both appear to be rigid, but do a nice job leveraging the tag cloud metaphor.

3. While the left navigation area appears to follow along as traditional navigation and maintain state while visiting the links, the right-hand, topical, navigator is gone after those links are clicked.

The theory of using tag-based navigation has always been intriguing for me.  The first place I saw anything like this was more of a mind-mapping tool called theBrain. These guys were about 10 years ahead of their time, but have a very interesting product. You can still see how this works at thebrain.com.  Since then I have seen all sorts of implementations of tag-clouds, from user forum (bulletin boards) to wordpress tag clouds.  These all can be very useful depending the volume of content behind them and the variety of content they catalogue.

Some of the drawbacks to these concepts are that they don’t seem to follow the user very well, and are often times implemented without much thought.  I have some ideas about how to leverage this technique with regard to content management and user interaction.  I will be posting future articles on this topic, and I will be experimenting with some code concepts as i go.

The real power behind using these tools is finding out whether or not they can really improve the user’s experience.  With proper user testing you should be able to find out if users can find what they are looking for in less clicks or with less headache.  Where are users of your site getting dropped off?  Where might you apply techniques like these to your web content?  

If you have a complex hierarchy in your site map, or if there is often duplicity in content within different sections of your site, your users may benefit from a tag cloud tool.  If you have seen interesting uses of tag clouds, please share them here:  I will follow up this article with more thoughts about how to improve on this concept and how to measure success of your tag cloud.

  1. fusiondevs posted this
Short URL for this post: http://tmblr.co/ZVAV4y2yrzHd