0

If we have the classical vertical side menu (on the left) for desktop:

enter image description here

then, what is the best practice for displaying it responsively, especially when there's quite a few menu buttons?


To hint you at possible directions of thought, I have researched several options myself:

dismissed methods:

a) all buttons listed vertically:

![enter image description here

- with numerous buttons this could take up the entire phone display area and by clicking a button you'd hardly notice that content has changed in the content pane;

b) all buttons wrapped:

enter image description here

- with too many buttons this might still take up too much of the phone display area; on top of that, if the button text is too long (as it is likely to be in some languages such as German) no wrapping could occur at all;

c) drop-down menu displaying all buttons on click

enter image description here

- this would seem as the ultimate solution at first, but it poses a great problem with the wording inside the drop-down - whatever you put, e.g. "Page menu", "Page tabs", "Click to see page contents", etc, there is a risk that users would ignore it and proceed to reading the content below (that is content corresponding to the default button, usually the first one), instead;

Making the menu fixed, would probably make it more visible for the user, but then having this menu fixed + most probably, having the header (above it) fixed, as well, would take up plenty of precious display space.


methods in consideration:

d) variation of "c)" - showing the first two buttons

enter image description here

e) variation of "b"

enter image description here

- in this case the buttons are displayed as simple text links; this would take up less space, but would still not be feasible with too many buttons with long names

f) drawer style left menu - when clicked it would slide the vertical menu on the right, over the content area

(idea taken from Responsive design for sidemenus)

![enter image description here

1

To know what's the common approach to responsive menus, simply look at how it's usually done in mobile apps. I see two main strategies used in Android that are also the most common in mobile websites: the overflow menu - for all the actions that don't fit in the site header, and the sidebar menu - accessed via menu button or swiping, although swiping is not so practical in browsers.

Menus that slide from the top are not common or expected. Also, they are hard to reach with your thumb and awkward to use.

Sidebar menu in Translate app Overflow menu in Firefox app

0

In your situation, without knowing the context, it is hard to say what exactly suited to your design. In common, use hamburger menu as your option (c). Below the menu, you could indicate which button (section/heading) you are in. Then the user knows which button has been clicked.

  • They key point in my question is the number of buttons on the left side menu - the more they are, the more difficult it is to accommodate them on mobile devices, without losing the content pane out of sight. So, other than this, there's no special context, I am asking in general. – drabsv Feb 12 '18 at 9:35
  • The problem with "c" is that whatever you put for a drop-down button - text, hamburger button, etc, there's a high probability that users would skip it, attracted by the content below first. – drabsv Feb 12 '18 at 9:43
  • If the content topics of the buttons are such important, make the landing page filled with the action buttons, and let them navigate to the different page and provide menu (hamburger) button on that (second) screen. Drawback, Whenever user in the second screen, the issue you mentioned will be there. – NPN Feb 12 '18 at 23:10
  • @drabsv Just accept the fact that you have limited screen estate. Why is scrolling through the menu items unacceptable? – ecc Feb 14 '18 at 8:09
  • @ ecc - you are referring to variation a), aren't you? – drabsv Feb 14 '18 at 9:29

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.