According to Wikipedia, Flickr.com was the first website to use tag clouds for navigation. By now, however, they're common on Internet sites, particularly those with large collections of data. In this article, I present techniques for building tag clouds and propose generic mechanisms for supporting different types of data collections.
A tag cloud (Figure 1) is a collection of tags, which is presented in such a way that the visual emphasis of each tag corresponds to the relative importance within the collection. (Depending on the context, tag clouds can also be called "text clouds," "topic clouds," or "word clouds.")
Tag clouds offer three functions in a single visual construction:
- Users can easily search tags because the texts are sorted alphabetically.
- Alternatively (and more spontaneously), users can let their navigation depend on any one of several options.
- But even without navigation, font sizes carry an informative function in regards to the relative importance of different tags and content of the web site.
After examining various approaches, I concluded that tag clouds are generally implemented for specific datasets and layouts, and consider alternatives for other types of data and other UI designs. Clearly, what is needed is a more generic approach. While I don't present a complete implementation of a generic solution here, you can still use my examples as a starting point to build something much better than anything my Internet searches have produced to date.
The design of a tag cloud consists of several functional layers. Most implementations I examined treat data access, business logic, layout, and functionality in one piece of codesometimes even in one class. My proposal treats the individual functional layers individually, one at a time. To me, this makes it easier to implement alternatives within the architectures. My examples are in Visual Basic. NET because its syntax is easy to grasp (especially by myself).