2

A designer I work with often creates a navigation for websites that looks like this on different screen sizes (mobile, tablet, desktop):

enter image description here

On small screen sizes (mobile):

  • there's a burger menu holding all menu items

On medium screen sizes (tablet):

  • there are some items that should be displayed as the main navigation
  • there's also a burger menu that holds the remaining items

On large screen sizes (desktop):

  • there's only the main navigation, no burger menu

Somehow I don't feel that the approach for medium screen sizes is very good. To me it suggests that there are no more main pages but only meta pages (like data privacy, imprint etc.) hidden in the burger menu. So the user might miss important things. It also leads to duplicate content in the HTML – but then again I'm more a programmer than a designer.

Can somebody elaborate whether this is a useful approach or not?

5

Hamburger menus aren't typically used as overflows for existing navigation - they're usually either used to contain the entire navigation (or sometimes to contain non-navigation actions).

I think how you are abbreviating the navigation options as the screen gets smaller is a good approach, but I agree with your concern that for the medium screen, the user might think that the displayed navigation items are the entirety of the (useful!) navigation available to them. One way you could get around this is by replacing the hamburger icon with the word "More" or similar (maybe in conjunction with some kind of dropdown menu to reveal the extra items), to make it explicit that there are more navigation options available.

  • 1
    I find the addition of using "More" rather confusing here. More what? Hamburger menu icons already indicate that there are more navigation items, which would leave the word redundant and it'll still not adequately address the issue. – Levano May 23 '18 at 14:57
  • 3
    I actually disagree that hamburger = "more" menu items, especially a the top level of a website. In my experience they either contain ALL of the navigation or something else, not partial nav. The combination more + some kind signifier could make it clearer (e.g. a dropdown arrow). – Warren Payne May 23 '18 at 15:01
0

Just to be clear - Hamburgers navigation menus are definitely not suitable for the web. this is strictly designed to be used on mobile apps since the screen size is too small to hold all menu items at once. Now, in your case, i would think about a way to horizontally design ALL items at once or simply change the menu structure to fit smaller screens (like moving it to the footer on smaller screens, etc.).

  • A lot of companies use a hamburger or gear icon to tuck away information. It's become very common on websites. (For better or worse.) – Mayo May 23 '18 at 18:14

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.