4

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.

mockup

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?

mockup

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.

  • How large is the far-left menu? Is it an option to just put the tree below it? – Graham Herrli Sep 20 '14 at 21:35
  • How many nodes are in the tree? If its very large, it might work to lay it out as a cascading list above the main content. – Graham Herrli Sep 20 '14 at 21:37
  • How large is the content itself? Is it possible to show it inline in the tree (as an expanded node)? – Graham Herrli Sep 20 '14 at 21:38
  • @3nafish - There are 2 reasons that's impossible: (#1). the menu isn't terribly large but the tree is. The tree needs a full vertical space of the page. (#2). The app has several functionalities (under nav tabs). Only SOME of them have the tree, others do not. Having the tree appear/disappear below the tabs seems confusing as hell even if it could fit. – DVK Sep 20 '14 at 21:38
  • @3nafish - The content is VERY large (as you can see in the mock-up, it's a very large table, basically full page size). The whole reason to collapse the tree is that without it, the content is too cramped for space. – DVK Sep 20 '14 at 21:39
2

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.An artist page

If I then click on an album by said artist, the artist page moves to the left and collapsesAn album page with collapsed artist page. 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.Search activated

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.

1

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:

enter image description here

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

1

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.

  • 2
    Just a word of caution: Moving the tree to the right of the content area changes the direction of the master-detail dependency. This might lead to accessibility issues as follows: Since we are reading from left to right and top to bottom, a change to the left of the current focus position is unexpected (e.g., will not be picked up by a screen reading program). – virtualnobi Oct 30 '14 at 10:28
  • good point @virtualnobi. I'd still keep that option in mind, because there are cases where (subjectively) "jumping controls" are way worse than an inverse reading order. – peterchen Nov 3 '14 at 8:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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