What is a good design choice for two collapsible panels on the left?

Question

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:

1. The narrow folder tree on the left hand side
2. 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?

^{download bmml source}

• Approach 2: Have a vertical separator line that can be dragged

  Cons:

  • 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.

  Cons:

  • 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.

Answer 1

The way I would approach this is to slightly rethink everything. For instance, if I were designing it, before a node has been selected I would have the node selector fill the entire working area. Then, when a node has been selected, the node selector would collapse into narrowness and fade into the background like in the Spotify web app.

In this example, I am on an artist page.

If I then click on an album by said artist, the artist page moves to the left and collapses EDIT: If you were to click on the collapsed artist page at this point, the album page would go away again and the artist page would take center-stage.

If I were to then invoke search, then it covers the collapsed artist page.

Now, translating that into your app, the tree view would be the artist page, collapsing when it is no longer needed and reappearing when it is. If the left hamburger menu is activated, it completely covers the tree view. It is essentially a stack.

Answer 2

OK, this is my first answer at UX, so bear with me, but my approach would be this:

PROBLEM 1) You need to have that sidebar menu 2) You need to have a "content" or "canvas" area which will be sub-divided in 2 vertical halves. 3) You'd like to have some space in this "canvas"

PROPOSED SOLUTION With this in mind, I think your best bet would be to hide/show elements "on demand". Some simple jQuery will allow you to do something like this, where your "toggle" button (required as you said) will display the first menu, then clicking on any item of this menu will open the second menu (sibling) and hide the parent menu.

Now, you could have this second menu open with a higher z-index and simply have a close button.

But a more elegant solution would be to hide the parent, expand the sibling (with some nice transition) and then clicking outside of the sibling would transition back and bring the parent again.

See image to understand what I mean:

note: the red panel (sibling or second menu) would take the whole height, or at least most of it, the image shows a lesser height just to show the sidebar below

Answer 3

A combination of the following:

Consider moving the tree to the right side of the screen.

if the user frequently shows and hides the tree, the content of the work area always moves around. If the tree is on the right, it will only cover the right half of the work area, but the "most important" elements of the content area remain in place.

Make "Select Node" a menu item

Only downside: To get to the tree would be two taps instead of one.

hide the tree automatically when a node was selected.

I assume while the user is navigating through the tree, you want to use the "work area" as preview for node content, so you cannot hide the tree when a node is selected.

But you can hide the tree automatically when focus moves to (or input happens in) the work area.

When hiding automatically, I would strongly recommend to have the tree on the right.

Squeeze it into one hamburger

e.g. click or tap expands / collapses the tree, right click or hold for the navigaiton menu.

Should work well enough for experienced users, but users may not find the navigation menu.

Have the hamburger show both the tree and the menu

This sacrifices work area space while the user is selecting a node.

Have the hamburger show both the tree and the menu, hide menu when user is interacting with the tree

Tap the hamburger to show the tree and the menu. If the user selects another tree node, hide the menu.

if the user taps the hambuger while the tree is visible but menu is hidden, show tree and menu again.