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:
Tags: [PlacesDallas; PlacesNew York; PlacesParis; FoodsSteak; FoodsFish; FoodsPizza; Time of DayMorning; Time of DayEvening]
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) PlacesDal
Tags: (UI presents) Places[drop-down list: Dalhart Dallas Dalton]
Tags: (user selects Dalhart)
Tags: (UI presents) PlacesDalhart; (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: