How best to display top-down decomposition data (hierarchical) with in place-editing and child addition?

Question

We have an HTML/CSS UI where there exists a top-most item (root) - you click that you get a text box to enter some content and save. It shows up as indented/styled child of the parent. Basically the items look like a list and the backgrounds are styled as per the 'level' of the node.

So it's just a typical ordered list looking like this:

• Root
  • Level 1 Item 1
  • Level 1 Item 2
    • Level 1.1 Item 1
    • Level 1.1 Item 2
      • Level 1.1.1 Item 1
  • Level 1 Item 3

And so on...

I've looked at quite a few posts on the forum before posting this question and there may seem to be some overlap. But here are the 'conflicting forces' that I intend to balance and am looking for the best 'way' to achieve it i.e., from a design standpoint rather than code.

So here are the forces:

1. Editable - clicking a node should allow one to edit the text in it (probably by clicking an edit icon when 'hovering' over the node?)
2. Adding a child - as simple as clicking 'add' or something similar to add a child
3. The layout should be 'tree like' - this is the tricky part. The stakeholders prefer a top-down tree based visualization.

Conflicts:

1. The biggest conflict is visualization vs data entry. It's easy to take the input as a list (like above), have the user click a button and the data is represented like a tree. However, this is a read only visualization (I've been unable to find an javascript-based visualization frameworks that allow inplace editing). The need is to be able to perform the analysis with the visualization in front of them rather than 'click to see' visualization
2. Screen real estate: If I do somehow manage to have a pure tree-like top-down capture/viewing it may lead to a great deal of horizontal scrolling on a typical monitor.
3. Show the tree in a left-to-right fashion (root on the left, leaves right). Similar problems like 2 but quite difficult IMHO to implement on a webpage.

My concern is how best to balance the need for visualization and data entry/modification without too much back-and-forth between them. What would be a good design to help edit/capture and visualize such data at the same time?

What's a better way if this doesn't seem to be the best solution?

Reason: The tool is to be used for top-down decomposition analysis and the requirement is to be able to capture what one would be able to effectively do on a whiteboard. The max character length of each 'node' is 50 characters.

Any ideas? Pointers to some tools/articles/frameworks etc., would be equally helpful too. I've looked at quite a few javascript visualization toolkits (Infovis, arbor.js, Raphael.js etc.,) but still in vain.

(NOTE:The typical file-system-like tree-view has been explicitly stated as unacceptable by the stakeholders)

UPDATE: Here's a screenshot from geni.com's family tree creation software. It's in flash (I prefer javascript) but the UI is kinda intuitive and am looking to pull off something similar:

Answer 1

For ideas, you might consider mind and concept mapping tools. Mind maps are designed to display and edit hierarchical information quickly and intuitively. Mind Manager is a popular paid one. Freemind is a good open source version. Wikipedia lists many, including online-only versions.

If you're set on writing code, look for popular JavaScript framework plugins. For example, here's an article with 10 in-place editing plugins for jQuery.

Hmm. Limited to two hyperlinks since this is my first UX-related post. Mind Manager is at mindjet.com. Freemind is at freemind.sourceforge.net.

Answer 2

I'm not really sure if I understand your question. From what I understand, the user clicks a node, enters the content of a child, and then that child appears underneath.

If the user needs to both add nodes and edit them, then that's going to cause problems right from the start. The idea of an 'edit' mode is a non-starter: parts of your interface are going to act in radically different ways in different circumstances - in one mode, clicking adds a child, in another, clicking changes the parent. Users often find 'modal' interfaces unwieldy and confusing, as many modal interfaces do a poor job of explaining what mode the user is in and how to change that. The fact that users can't rely on a consistent set of visual signs makes it hard for them to learn, too.

So, for adding children, you should consider an 'add' button or a greyed out 'add child' child node. Those are the most typical patterns.

The other issue with your interface is that, as you recognize, it doesn't work for large lists or taxonomies, because you consume a lot of screen estate. The solution? Well, it depends on how your users will view and treat the data. If they only need to see individual 'families' of elements at a time, a collapsible structure could be the answer (if you've ever used many XML editors, you'll have seen this behaviour). If users need to compare different families, you might consider a multi-pane interface that lets users directly compare different sections of the data (though these can be trickier to explain to users). I don't recommend a left-right visualization - yes, you'll use screen space efficiently, but users like to read down a left margin in an F-shaped pattern, and vertical ordering with indentation of children is a common pattern that users will readily recognize.

If the problem with a long list is navigation rather than comparison, then that's a slightly different quandry. Solutions include a left-hand pane of first-level elements or Miller columns.

Finally, what's the actual context for the application? I might be able to give you more specific help if I know the circumstances.