5

I was wondering how you would handle a multi level off-canvas navigation menu with split buttons. By split button I mean that the user needs to be able to click on the text (level 1) to access level 1, and the arrow to access level 2. I'm afraid that in my case, users won't understand that the arrow grants them access to the sub-levels. Here is what I build so far, when you click on the arrow you get an animation and the sub-menu slides on the top of the current one :

enter image description here

I've seen this pattern a lot lately, but in most case they "skip" level one, meaning that mobile user only get access to sub-levels to avoid the split button issue. You see this kind of behaviordiy.com

This issue here is the arrow I guess. I could use a 'down' arrow like mobify (below) but since the sub-menu comes from the left (and does not open under the main item), I guess it would feel strange.

enter image description here

Any idea of an elegant user friendly solution for this kind of off-canvas menu ?

  • It's not clear to me what you mean by "split button" or "skip level one". Do you mean the right arrow or the left arrow? Can you perhaps highlight on your sketch what you think the problem areas are? – tohster Feb 16 '15 at 17:13
  • Mobify uses accordion menus. That's a widely-accepted mobile navigation design practice. Why are you trying to implement Miller columns without the horizontal real estate? – dnbrv Feb 16 '15 at 19:03
  • @dnbrv It's not really Miller columns, it's more "adapting an horizontal dropdown navigation for mobile". I think Mobify accordions are a great pattern, but would it not be strange for a user to get a 1st level menu opening from the left (of-canvas) and the inside this menu, things opening in accordion? That's what I'm afraid of, but it might be a silly fear I admit. – Stéphanie W. Feb 17 '15 at 8:23
  • @tohster Sorry if it's not clear. I have just edited the picture. Basically when you click on "level 1" it opens one page, when you click on the arrow you drill down the navigation. On many site, once you are on mobile you can't access level one any more, so one those sites you can either click on the arrow or the text. This is not what I (well the client) needs, so I can't use this pattern and need to keep two separate actions. – Stéphanie W. Feb 17 '15 at 8:33
  • @StéphanieW. did you ever get an answer related to you actual question about having 2 different pieces of functionality within 1 element? – Owen Aug 2 '17 at 11:38
1

You basically have a two-level navigation hierarchy. That's not unusual.

Let's start with the Mobify approach:

  • The Mobify approach is reasonable if you want to constrain users to a single panel, or if you think users will want to jump around the hierarchy frequently so they won't have the patience for a slide-in animation.
  • It's also useful if you want users to retain a sense of orientation around where they are in the hierarchy, because the indentation and scrolling up/down will quickly reveal where they are in the order of things.
  • It has some drawbacks though. For long hierarchies, users can end up scrolling an awful lot. And for hierarchies where you want users to "zoom into" an area of focus (e.g. navigating an encyclopedia) then the accordion approach can be overwhelming for users.

That brings us to your sub-panel approach:

  • I think your approach is perfectly reasonable. However, some UX design may improve the affordance of the layout. A more contemporary version of your 2-stage menu might look like this:

illustration

Let's call the left menu the 'main menu' and the right menu the 'submenu'.

This improves (IMO!) on your sketch as follows:

  • Intentionally use asymmetrical icons for the back button and the drilldown button, so as not to confuse the two (although the navigation is symmetric, behavioral flow is NOT).
  • Use color to provide a sense of orientation in the submenu (it's clearer that the 'Birds' header is carried over from the main menu)
  • Use a header in the submenu that is clearly different from the selections, to provide a sense of orientation and also to lead-off the submenu with a sense of "arriving at a destination". Clicking on a menu and having another menu slide in can result in users feeling lost, so a nice colored header helps users feel like they've arrived at a destination and provides a place to pause behaviorally before making the next selection.
  • You may want to look at Google's material design for examples of even more colorful submenu headers.
  • Separate the back button from the header caption ('birds') in the submenu. They perform different functions (since 'Birds' now functions as a header, not as a selectable element).

It's subjective, but in the menu I would not put vertical dividers on the items because the semantics of the selection are in the words not the arrows. e.g. I want to select 'Mammals' rather than the arrow....so removing the vertical divider allows the entire row to be perceived as a clickable selection, and the arrow is just an affordance to indicate that a drill-down will occur.

Hope that helps

  • Thanks a lot for the answer. The sub-menu looks more usable like this indeed. Nevertheless I'm not quite sure, in your version can the user click on "Mammals" word to go to a sort of "landing page" on mammals, or is the whole row one button that will only send to sub-level ? The more I think about this and read all your answers, the more I think that not splitting and not giving access to the level 1 landing page might be a better idea. – Stéphanie W. Feb 17 '15 at 9:39
  • 1
    @StéphanieW. - It's not really a landing page, it's a slide-in menu. The header just provides some breathing space for the user to pause, so she doesn't feel like she's entering a labyrinth of submenus. Only clicking the back arrow would take the user back. The rest of the header is passive. This is increasingly common design nowadays: remember that "Mammals" in the submenu isn't really the same as "Eagles", because it is a header...semantically you shouldn't click on "Mammals" to go back to "Main Menu". That's why contemporary design separates the back arrow from the title in the submenu. – tohster Feb 17 '15 at 9:43
1

You're trying to create what's probably the single most common mobile design pattern, namely drilldown navigation :). You're saying that when you click the arrow, the submenu slides on top of the current one, and from your mockup it appears that the top item leads back to the original menu. In other words, when you click an item, you see the list of the deeper-level items, with a Back button at the top. That's the standard mobile navigation model, only the location of the Back button changes between platforms.

The way to split each items into two actions is also pretty standard, you just have to create a visual separation so it becomes clear that the arrow is a separate control.

enter image description here

  • Indeed, that what's I'm trying to create, I saw this a lot on native apps, but on most case when you can click either on the text, or the arrow and it brings you to the same page. I think that visually separating the arrows would indeed help. Thanks a lot. – Stéphanie W. Feb 17 '15 at 8:19

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.