Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Overview

I have a custom lightweight web CMS I am developing. It has a feature that allows business users to define hierarchical taxonomies, add/edit/delete nodes, change their sort order relative to sibling nodes, and change their parent node within a taxonomy.

Taxonomies could be n levels deep (the application doesn't force any limits) though in practice a great majority of them will be 1-3 levels deep.

Problem Statement

Previously in the admin UI a tree represented the node hierarchy with client-side drag-and-drop for rearranging nodes within the hierarchy. This was poorly received by users due to the mouse dexterity required to drag a node and place it next to or under another node. This created a negative experience which turned users off to dragging and dropping entirely. As a result using a different mechanism for managing the node hierarchy is required.

Requirements

The user must be able to:

  • Add new nodes to the hierarchy (create the title and description)
  • Edit exsiting nodes (update the title and description)
  • Reorder nodes (change sort order relative to sibling nodes or change parent node)
  • Delete nodes

Research

I have been researching alternatives and have found several good questions on ux.se however they are either different use cases or the answers supplied do not address my specific problem statement:

  • What is the most user friendly way to allow users to insert data into a hierarchy?

    This is a very similar question however I don't need to just allow for insertion, I need to support editing, deleting, and re-ordering. The best answer in that thread suggests using a miller table that adds a new column for each level of the hierarchy.

    The problem with this approach is to address all CRUD requirements could make for a lot of buttons. Plus the possibility of horizontal scrolling exists in edge cases where hierarchy depth exceeds 3-4 levels.

  • For large hierarchies - checkbox tree or 'guided tree construction'

    Another similar yet not quite the same use case. The best answer suggests a flattened list-builder pattern. The issue with this approach is that the user does not have a full view of the hierarchy, and making simple changes will require multiple post backs reloading the entire screen which could get old pretty quickly.

Solution A: Two Panel Selector

One approach I have considered is a two panel selector pattern:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

It's similar to the flattened list builder except it maintains visibility of the hierarchy and provides instant feedback after an action is taken without taking the user to a different page (reducing pogo-sticking).

The possible drawback would be for shallow hierarchies with many siblings at each level. This could create some scrolling or would require the right panel to be "sticky".

Solution B: Tree Table w/ Modal Window

Another option is to use a tree table pattern combined with a modal window:

mockup

download bmml source

Higher fidelity version of Solution B tree table:

Solution B Hi Fidelity

This is a little more structured and less cluttered (selecting and editing are more distinctly separated). I'm leaning toward this approach.

Which option do you think is better (and why), or what third option do you think would be better (and why)?

share|improve this question
1  
+1 Great question! –  Benny Skogberg Dec 20 '12 at 19:25
    
Just a heads up, better to have the save button aligned right, and the cancel button to be at the left side of the save button. –  Andy Dec 27 '12 at 20:57
    
I've been playing around with that actually -- currently I have the cancel button in the top right but I still have the save button aligned bottom left. –  Charles Wesley Dec 27 '12 at 21:00
    
@Andy Check this out, it has some good info in it. –  Charles Wesley Dec 27 '12 at 21:18
1  
For Windows, nowadays they are actually stacked vertically for a saving popup window. For installation screens, i think it's a design flaw that they are too lazy to fix or too late to fix. For an alert box that shows only a message and requires no user input, it's a different story because it's not a form. So what I am saying is, the universal rule is "right" means "forward" while "left" means "back." That's how we read book and that's how we swipe mobile screen. That's just based on my observation and just my opinion. –  Andy Dec 27 '12 at 21:38

4 Answers 4

This is a good place to use the control-panel pattern, such as in Adobe Illustrator, when you click on a shape object, it will show you the operations you can perform with it in the control panel.

Control panel is the E area in this screenshot:

enter image description here

So here's what you can do: enter image description here

There's nothing wrong with your last solution except that it's too long with the toolbar. And the solution with cleaner icons from one of the above answers doesn't have affordance, no one knows that they suppose to select an item in order to see the toolbar. Maybe you can combine them, which means rollover to see a shorter toolbar.

share|improve this answer
    
This is a good option as well --- how would you envision this working as the item list collection grows to 30+? Would you have the item box scroll, have the toolbar stick to the top of the viewport...? –  Charles Wesley Dec 27 '12 at 20:39
1  
Yeah, as implied by the bounding box, the scrollbar will be rendered inside the box that directly contain the items. As you can see from the Adobe Illustrator screenshot, the scrollbars do not concern the control panel. –  Andy Dec 27 '12 at 20:53

An option 1 I see is to use toolbar instead of a separate panel.

An option 2 I see is to use context actions, i.e. actions shown near the selected (focused) row (or, maybe, a several rows):

enter image description here

So, the "Add child" and "Edit" options will popup a dialog with details to add or change.

share|improve this answer
1  
And it seems like it's almost like your High Fidelity Solution B (which was posted just before I finished editing my answer :) –  alexeypegov Dec 20 '12 at 20:12
    
Yes I added that high fidelity version just because the lofi didn't seem like it accurately illustrated. However I like your cleaner tool bar quite a bit. –  Charles Wesley Dec 20 '12 at 21:08

Charles,

I suggest the following approach:

enter image description here

The icons are below the listbox, keeping the design simple and hopefully the implementation simpler as well (no need to show/hide icons every time selection changes). Note that there is no Edit icon; most people are now familiar with double-clicking to edit. However, you can still add it or use the following icons:

enter image description here

On the gears menu, you can put

  • Edit “Citrix”

  • Delete “Citrix”

You can use the gears menu as a way to provide other options such as Add Child, and add any number of future options in a way that would not be possible icons-on-a-list-item (solution B) or would require more extensive changes to the implementation (solution A).

share|improve this answer
    
This is a great option as well, plus I think your implementation point is very well taken –  Charles Wesley Jan 2 '13 at 16:05

Tough problem. I don't like #2 because it strikes me as very unconventional to place editing commands in a table like that.

Option #1 seems a little less unconventional but I think it might be take some poking around to discover how to restructure things (edit -> change parent). Perhaps combine the edit panel into first side panel, so there's only one side panel showing all the operations.

share|improve this answer
    
I've gone back and forth on the mechanism for changing the parent. I've gone from including it in the UI to hiding it under the edit view and back again. –  Charles Wesley Dec 20 '12 at 21:46

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.