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.


  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:

enter image description here

2 Answers 2


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.

  • I already have in-place edits built into the application - my question was more in the context of inplace editing for visualization based content.
    – PhD
    Commented Dec 25, 2011 at 6:20

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.

  • The context is for top-down decomposition analysis of software systems (for a web-based tool). You identify the top most level as the 'whole system' and you break it down into 'large feature sets' on the next level. Do this recursively till you feel you are at a sufficient level of granularity. Basically a tree like breakdown/analysis...The idea is to be able to capture/display this tree structure with minimal 'modal' overhead as you pointed out and easy to view/understand by non-technical folks
    – PhD
    Commented Dec 24, 2011 at 23:58
  • Ok, sounds like an interesting product. So, what's the situation for reading the list of feature sets? Would I be right in guessing that people probably won't have to keep all the sets open (so a Miller column or expanding section design could be suitable)? Commented Dec 25, 2011 at 0:20
  • quite on the contrary. Yes, collapsibility is preferred but so is viewing the "entire" tree at a glance! I did consider Miller Columns but they only show you one level at a time - not all children at a particular level (i.e., a BFS like view, so to speak)
    – PhD
    Commented Dec 25, 2011 at 4:17
  • Why is seeing the whole tree important? What sorts of activities is your application supporting? Commented Dec 25, 2011 at 21:43
  • stakeholder requirement for at a glance view. Even if scrolling is needed, it's fine. If not possible to view the entire tree then at least 'ALL' children at a particular level. Reason: Helps get a cursory glance of the same level to know if something is left out. Only one at a time will put too much load on the user
    – PhD
    Commented Dec 25, 2011 at 22:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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