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:
- 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:
- Editable - clicking a node should allow one to edit the text in it (probably by clicking an edit icon when 'hovering' over the node?)
- Adding a child - as simple as clicking 'add' or something similar to add a child
- The layout should be 'tree like' - this is the tricky part. The stakeholders prefer a top-down tree based visualization.
- 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.
- 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.
(NOTE:The typical file-system-like tree-view has been explicitly stated as unacceptable by the stakeholders)