Like many of you I’m using tag clouds (or related navigation concepts) on a couple of sites, like CoverBrowser.com.
Sometimes I run into the problem of scaling the cloud, when the page is about to get too large and complicated to serve as an overview.
There are some ways to scale the data contained in the cloud:
- You can hide tags of a certain threshold, e.g. only display tags which are used N times. (This is the most-used approach because tag clouds already utilize font size to indicate importance. But this approach doesn’t lend itself to all uses. What if low-threshold keywords are just as importance?)
- You can include categories which expand a portion of the cloud on-click (by dynamically loading new data via AJAX).
- You can randomize the cloud and only display a portion of it (or its “low-threshold” members) during individual loads.
- You can group related tags into a single keyword (in particular, singular/ plural pairs).
- You can break up the single cloud into several pages, one cloud per letter, and then link to those using a “frontpage” cloud displaying the letters A-Z.
- Via CSS, you can create a restricted cloud area with scroll-bars, though this probably looks rather ugly.
- You can add a search box below the tag cloud for deeper navigation.
- You can add a 1 | 2 | 3 | Next kind of navigation below the cloud.
- If page download size is the main problem, you can add shortened URLs per tag, triggering a redirect to the longer URL on-click (though this is best done only when search engines need not follow these links).
- If you program a really neat Flash (or DHTML?) application, you might also have a fisheye effect, dynamically zooming into the part of the cloud which the mouse cursors hovers over…
Can you think of other good options to optimize a tag cloud that’s getting too large?
