Best way for user to create category tree

Question

Our clients need to create a shop structure with many categories and subcategories, and our current system is not very easy for them.

I thought the best way would be just a blank text area - creating categories by writing it's name and pressing enter, and subcategories by pressing tab and writing name.

It's probably the quickest, but on the other hand, I think it might not be obvious enough and also you can't set up other attributes of the category.

What would be the best practice to enable users to quickly create a whole set of categories?

Answer 1

I would recommend against simply providing a text area as:

• It's not obvious to the user what structure you require.
• Introduces the opportunity for them to enter invalid syntax.

However, the following methods utilised by Wordpress will be more UX friendly, and allow you to enter other attributes:

1. Drag-and-drop
2. Select parent from a list

---

Drag-and-Drop

Instead, the Wordpress drag-and-drop Menu Structure system works well.

It's a drag-and-drop system which allows the user to visually re-arrange the hierarchy.

If implementing Drag-and-drop, you'll want to follow Nielsen's advice:

Drag-and-drop designs are often the worst offenders when it's not apparent that something can be dragged or where something can be dropped. (Or what will happen if you do drag or drop.)

Common symptoms of the lack of perceived affordances are:

• Users say, "What do I do here?"
• Users don't go near a feature that would help them.
• A profusion of screen text tries to overcome these two problems.

---

Select parent from a list

Alternatively, Wordpress also has another method: Select a parent from a drop-down list.

This is:

• Easier to implement.
• Doesn't require you to make affordances of draggability.
• But the hierarchy is less visually obvious.