Experimental Cocoalicious Tag Browser

by Jonathan Deutsch

This has been mentioned before and presented at TagCamp, but I thought I’d finally make an actual post about it.

A while ago, I was using Buzz’s Cocoalicious, and realized that as my list of tags grew, the tag browser became less useful; the alphabetically sorted list didn’t scale.


the original Cocoalicious tag browser

The problem is there are too many tags in the list and most tags have only one post associated with them (the long tail), making it difficult to find a tag which will result in a useful set of posts. Additionally, making a multiple selection to find intersections usually resulted in empty sets, since I didn’t have a good sense of which intersections would work. Since Cocoalicious is open source, I decided I’d try to make a better tag browsing interface.

The main goal was scalability, but it took several iterations (and In-N-Out burgers with Buzz) before that was fully realized. Here’s what the final version looks like:


click for a larger view

The new tag browser uses a button grid, similar to GarageBand’s loop interface. Tags are sorted by their post count, thus more relevant tags are always found at the top, keeping scrolling to a minimum. When a button is highlighted, all related posts are displayed in the table below, and at the same time tags in the tag browser which do not intersect the selection fade away while related tags bubble up to the top. Beyond being a slick effect, the animation gives a nice visual cue as to where the next location of the buttons are and helps identify relationships between tags.

This interface scales quite nicely; each click cuts down the tag list significantly, and the bubbled-up tags are physically close and always related, so searching and scrolling is rarely required. It also works well for exploring the “long tail,” since the previously insignificant tags eventually come to the top. Dare I say, using it is a lot of fun! Here’s a video of it in action:


click to download the 3.7 MB quicktime video

A few less noticed features are that tag browser has full keyboard navigation and type-ahead, and the button grid can be sorted alphabetically. The animation effect itself is fast and can run well even on my 800 Mhz iBook.

Overall, I’d say my new tag browser is a vast improvement, and should make it into a Cocoalicious build in the near future.

UPDATE: Buzz talks more about some of the design issues.