Monday, October 06, 2008
 
May 1

Written by: Rip Rowan
5/1/2008 3:38 PM 

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
--------------------

Tags:

Your name:
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Comment:
Security Code
Enter the code shown above in the box below
Add Comment   Cancel 
Privacy Statement  |  Terms Of Use
Copyright 2008 Rip Rowan