Mobile Multi level navigation with "split" button (access to sub-levels)

Question

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 :

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.

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

Answer 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:

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

Answer 2

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.