Better position to place slide in/out icon for a horizontal slide menu in responsive theme?

Question

As my attached screenshot, I have a primary menu set at the top that scrolls horizontally even in smaller device-width. The items in secondary menu set at the left sidebar will change according to the primary menu selection.

So here i am looking to implement a slide-in menu for the secondary menu-set in small devices. The other images shows a common usage of the same, but here too much of space is taken at the left side for icon itself, that i don't want.

So which will be the right place to position the in/out toggle icon so that it will not take any extra space and still be apparent to the user that these menus are the sub menus of the primary set. That is, it should not have as much priority as the primary, and that the user should select the secondary menus only after selecting the primary one.

Answer 1

I'm sorry for not answering your question directly, but would like to raise an alarm regarding the proposed design.

Consider someone is after an item as such:

Menu7 > Secondary Menu4 > Sub4

On a desktop (based on your screen shot) it will take them 3 clicks.

On a mobile device, it will take them:

• 1: Move to Menu 3+4
• 2: Move to menu 5+6
• 3: Move to menu 7+8
• 4: Click on 7
• 5: Click on Hamburger Icon
• 6: Click on Secondary Menu4
• 7: Click on Sub4.

Since the display of a mobile device is small, mobile devices tend to involve more interaction gestures. Thus, the popular recommendation is to try and reduce the number of interactions as much as possible (the number will be high regardless).

I don't think 7 clicks is to be considered usable.

I do understand that a similar interface on both desktop and mobile yields higher consistency, but while the debate is ongoing, many will prioritise usability over consistency. Further, research has shown that designers are much more sensitive to consistency issue compared to real users.

One key concept in interaction design is to try and provide the required content, yet allowing users to perform their tasks with the least amount of (interaction) effort.

The problem with the scrolling menu is that it increases interaction effort, and it is not ideal for learnability - users don't see what other options are there without having to put effort into finding out.

Given we take it for granted users typically want to get on with their task, such a behaviour is not ideal.

If it is a top priority to keep the various interfaces consistent, I would suggest just providing an hamburger icon on both - and upon click big (or the whole) navigation will be revealed. But as in design, proper solutions come from weighted diversities - not a single proposal.

Answer 2

I think there is one problem with your solution.

• It's more important to reach the menu items in the local menu than it is to reach the main menu since the local menu usually contains short cuts to similar content as the page that I'm looking at. You are hiding the most relevant menu behind the hamburger icon.

I would smash both the horsontal main menu and the vertical local menu into a slide in accordion menu and leave the current local menu opened. That will save precious space, declutter the interface and use a design solution a lot of people are familiar with on the mobile web right now. Like this: