Optimal placement of tree navigation on a web application
I'm designing an inventory control page for a web dashboard.
Functionality:
- When the page loads the tree alone is displayed on the left hand side. (currently set at 3/12 grid columns)
- The user is able to navigate the tree by expanding expanding/collapsing branches and clicking on nodes.
- Once a node has been selected the information cards are shown on the right hand side of the page. These cards are stacked one under an other.
- The tree side and the card side have columnar independence and hence separately scrollable.
Issues:
Inventory is structured in a tree format. Imagine this as having to select store > section > isle > row > item.
- This results in a tree that is both deep (many layers) and wide (many branches).
- This in turn leads to entries on the tree getting cut off, and needing horizontal scrolling to read.
The cards contain only basic text information. They essentially serve as an viewable and editable form. But the information displayed is in most cases short text boxes such as names or numbers.
- This results in the forms having too much available free space which leads to overly large input areas.
Question:
What would be a better way to structure the page?
Considering that the tree needs more vertical space to read items, but only when it is expanded to a depth of three which can be fairly common. And considering that the main content of the page is the information on the cards, with the tree being for the most part a navigational tool.
