Our company UI standards enforce the following overall design:
- Left hand side of the window contains a menu (what would have been navigational tabs otherwise)
- Right hand side is the app working area
- The menu is expandable/collapsible via a hamburger icon placed at the top left corner of the app working area.
download bmml source – Wireframes created with Balsamiq Mockups
The problem I face is that, in my app, the working area itself is divided in 2 vertical halves:
- The narrow folder tree on the left hand side
- The area for working on data for individual node of that tree on the right hand side.
Once you pick a node in the tree to work on, the tree becomes superfluous to the workflow, so I would strongly like to collapse it as well.
The question is, what's the appropriate design/UI approach to that?
Couple of things I considered:
Approach 1: Have a hamburger icon same as for the navigation tabs.
The downside of that is that now we have TWO hamburger icons, not sure what to do with them when both collapsible areas are closed? When only tree is closed?
Approach 2: Have a vertical separator line that can be dragged
First, The tree makes no sense if you show only the left half of it - looks awful and isn't very useful. So having sliding separator is worse than a binary "open/closed" UI.
Second, vertical separator is a very narrow element, so grabbing and dragging it with a mouse is a hard task.
Approach 3: Have a vertical separator line, with a left-facing or right-facing triangle icon in the middle of it. Clicking on the icon expands/collapses the tree area.
First, in order for the icon to be clickable without major effort, it needs to be somewhat wide (10+ pixels). And to do that, the separator line has to be wide as well and that looks UGGGGLY! (this is the current app design, and I had plenty of negative user feedback that I somewhat agree with).
Second, now we have two widely distinct UI elements doing same job. Not elegant and even worse, may be very confusing.