Home > Software & IT > Tags, Categories… What’s the Difference?

Tags, Categories… What’s the Difference?

2008.05.01

I’m cooking up a categorization / tagging module for the DotNetNuke blog module, and really would like to get it right the first time.

I want to balance ease-of-use, practicality, and power.  Right away, the issue of managing a “true” hierarchical tag structure with multiple selection capability rears its ugly head.  Building a tree-style hierarchy manager is tricky, and can be confusing to users.  And then, assigning categories from a tree structure can be very clumsy, especially if the tree is very tall.  I’ve seen this done with side-by-side listboxes & tree controls, and it’s always really clumsy.

If we set aside the idea of hierarchy for a second, and just look at good ways to apply tags, I like the way Amazon handles it by using a simple Ajax-enabled auto-suggestion textbox.  You can easily type a few characters of an appropriate tag, and the app will suggest the rest of the word.  More tags can be added with a comma delimiter.  If you want to add a brand new tag, you just type it.  This eliminates the need of a long list with checkboxes or a UI for creating and managing tags.  A significant advantage is that it works for short lists yet scales up very well for long lists.   I strongly prefer this UI for applying tags to blog posts.

Trying to implement this with true hierarchies is trickier.  My idea is the use of a hierarchy delimiter.  The user can create hierarchies as deep as they like, and the auto-suggestion box helps them out.  So a blog post might be tagged up as follows:

——————–
[MyBlogPost]
Tags: [Places\Dallas; Places\New York; Places\Paris; Foods\Steak; Foods\Fish; Foods\Pizza; Time of Day\Morning; Time of Day\Evening]
——————–

The data-entry UI would automagically suggest each portion of the hierarchy at a time, so when the user types “Pl” the textbox responds “Places”, and the user hits the delimiter key “\” to accept and begin entering the next hierarchy component:

——————–
Tags: (type) Pl
Tags: (UI responds) Places
Tags: (type) Places\ (user enters delimiter key)
Tags: (UI presents) Places\[drop-down list of places in the places list, if list is < 10 entries]
Tags: (type) Places\Dal
Tags: (UI presents) Places\[drop-down list: Dalhart Dallas Dalton]
Tags: (user selects Dalhart)
Tags: (UI presents) Places\Dalhart; (adds delimiter so user can begin entering next tag)
——————–

The data can be stored in the database using a traditional n-level-hierarchy (parent-child) structure.

A hierarchical list can then be presented:

——————–
Places
..Dallas
….[MyBlogPost]
..New York
….[MyBlogPost]
..Paris
….[MyBlogPost]
Foods
..Steak
….[MyBlogPost]
..Fish
….[MyBlogPost]
..etc
——————–

Advertisements
%d bloggers like this: