Tag clouds are great to visually indicate the popularity or frequency of a word. But as tag clouds increase in size so it takes more time to find the content tag you're looking for.
The efficiency of the tag cloud can be improved by applying colour ranges to match word frequency, as well as better use of text size. The article ("In search of the perfect Tag Cloud" looks at a number of sites with varying techniques.
Another way to quickly view tags by popularity is to filter them by a selected weight. Using the slider interface we can let the user quickly adjust the displayed tags.
Using a number of popular scripting libraries here is an example of our Tag Cloud filter.
The Tag Cloud filter is implemented using unobtrusive techniques and uses the following scripts:
Download Tag Cloud filter (zip archive)- Comments (2) Back home
- Filed under:
- UI Design Patterns
- Interaction design
- JavaScript
- Prototype
- Slider
- Tag Cloud
- UI design
- Widgets
- Posted by:
- James Griffin
- Dated:
- July 16, 2007
2 comments
A nice (but probably complicated) update would be to rescale the fonts when sliding - i.e. when you're filtered to the most popular tags, they're all rendered large and bold, and you can't see which was the most popular out of those.
Perhaps the use of colour or opacity values might work too.
It would be interesting to allow the text sizes to rescale as a person moves the slider rather than simply truncating the less relevant text sizes. This would likely need to utilize AJAX, but could probably be done with pure Javascript. Either way, nice implementation. :)
I actually created a very similar filter not too long ago: http://www.stanback.net/blog/tag-cloud-usability.html