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.</span>
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?
