7

I was looking for some elegant solutions to display a sidebar menu, and I found a few sites that use the same pattern: instead of moving the whole sidebar menu under the main content on smaller screens (like many sites do), they kind of transform if into an accordion hidden near the page title:

Example of the described navigation on uchicago.edu

A few examples:

I was wondering if this is a good idea. I can see one big issue which is will the user understand the "burger icon" and find the hidden sidebar navigation here? On the other hand, it helps gain some space AND the user does not have to scroll through the whole content if he need to goo deeper and look for sub pages nested in this sidebar menu.

So I'm curious, what's your take on that one? Could it be improved?

5

Using the hamburger icon for lower navigation components it's not a good idea since most people already associate it with high level navigation. You could try using a different icon for the lower level navigation components like Wikipedia does:

Closed Closed

Open Open

Additional suggestion : Placing a "Menu" label next to the hamburger icon improves its recognition and clearly differentiates it from other navigation components.

  • 1
    Exactly. The downwards arrow is a commonly used icon to indicate there's more content that can be shown. It doesn't even matter whether it's used for lists or just plain text. For certain more detailed lists you can opt for a more specific icon. For that 'breakthrough' list on the Uni of Chicago's mobile page, you could just as well use a calendar or a filter icon. Definitely depends on the context. – Vince Caregnato Apr 28 '15 at 6:45
1

This is actually something I did on a recent website I designed. It's not a sidebar menu on desktop, rather a secondary menu (that doesn't show up in the main nav, only in the concerned pages, just like University of Chicago in your example.) but I think the challenge on mobile is the same.

As you said, there is a usability challenge in stacking up hamburger icons. That's why I used a + to show this is how to reach extra infomation rather than the main nav. And I also made the whole title a button to show it's related to this page: the page title double itself as the secondary menu.

As long as the affordance of this pattern is sufficient (here: grey box and + icon), I think it's a nice solution. I've tested mine on a few users and it works quite good.

You can see it live there: http://www.espace-sante-bellevue.ch/fitness-sante/

Espace Santé Menu

I hope this answers your question. :-)

  • I disagree, the plus icon is mostly tied with the action of 'adding' content, not opening menus. An arrow pointing down would be the better choice. Also, in your design, why didn't you opt for the regular hamburger icon? – Vince Caregnato Apr 27 '15 at 8:38
  • I was actually wondering about changing the second buger for either a + or an arrow, but then I'm affraid the user won't get it like : why is one button a burger and the other one an arrow. – Stéphanie W. Apr 27 '15 at 13:56
  • @VinceCgto good point. The arrow icon could be an interesting variation. As for the "regular" hamburger icon. It's both a graphical choice and a way to make it stand a bit more: the "three lines icon" is still not very well understood. I was expecting that it could be a bit more clear this way. – Loris Grillet Apr 27 '15 at 15:00
  • @StéphanieW. Well, people are quite familiar with the hamburger icon (I like to call it navicon though) as a menu icon. That is, if it's somewhere at the top and if there aren't any icons that look alike. Placing the text 'MENU' next to it certainly helps, if you have some extra space. – Vince Caregnato Apr 28 '15 at 6:34
1

I have never seen in any web site some one use two hamburger icons.

please find the following sample. it is BBC homepage which has a drop down menu and humbugger icon for different section , you could use the drop down menu instead of top menu and for your sidebar menu you could use the hamburger!

enter image description here

0

This is a tricky one - I really dislike stacked hamburger menus. Also - Note: Colleges are not always known for having the best UX so be careful at looking at them for examples(always relevant XKCD comic: https://xkcd.com/773/.)

First, do you have access to your site's analytics? Are you able to change nav priorities and redo the information architecture? If so - that will be a lot easier for you in the long run - see what people click on and make those a priority.

If you aren't, then I would consider making the main navigation tab based and the secondary navigation the hambuger menu. If that wouldn't work, I would look into other navigation ideas like hub and spoke, or an expanding hambuger side-drawer. Good Luck!

  • in a perfect world I would. But in this case, no, no analytics they already reworked the information architecture from 6 sub levels to 4 (yeah !!). Tab based menus work when you have 4 or 5 items in English, here we have French (aka longer words) and they have 6 then 4 items in the navigation level 1 (I tried). Regarding the hub, the issue is that we have here a responsive site (and not mdot): I can't rework the whole design for the small version, I have to be carreful with HTML and can't from a technical point of view have something this different for smaller screens :/ – Stéphanie W. Apr 28 '15 at 6:54

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.