13

We have a responsive menu that on mobile just shows the top-level menu items (x8), but on desktop also shows hover dropdowns with service areas within the parent menu item.

The problem is we need the ability to show another level of navigation with the actual services within that area.

Here is the link: http://www.irwinmitchell.com

An example scenario would be:

Personal Legal Services
  >  Administrative & Public Law
       -  Disability Law
       -  Education Litigation
       -  Prison Law
       -  Professional Regulation and Discipline
       -  Social & Healthcare Law

So a structure like that needs to be shown for all the service areas within the main navigation.

Has anyone been presented with this problem before, or have any ideas what the most usable way would be to present further sub category's into the navigation?

7
  • Is it not practical to show each top level category at once, each being a drop down to specific categories?
    – Ben Brocka
    Feb 6, 2013 at 16:33
  • Can you give an example of what you mean ben?
    – Roy Barber
    Feb 6, 2013 at 16:39
  • Something like how Next do it? next.co.uk
    – JonW
    Feb 6, 2013 at 16:43
  • I suggest viewing intel's website. Feb 7, 2013 at 4:33
  • 2
    I think you're trying to offer too many choices up front. See my answer to this question ux.stackexchange.com/questions/30833/… that shows that offering people too much choice is likely to lead to reduced user satisfaction.
    – JonW
    Feb 7, 2013 at 9:48

5 Answers 5

7

As others have pointed out, you have a huge menu, and no matter how you style it you're probably losing customers who don't want the hassle of reading through 20 menu items to work out which one is best suited for them.

Assuming you have to have a 3 level menu though:

On mobile you can have a Menu link which opens up a scrollable menu list. When an option is clicked, you slide that set of menu options off the screen to the left and show the sub menu options in another scrollable list. You can repeat the same for a third level. Scrolling lists like this is very common on mobile, and this experience is probably better and more familiar than any desktop experience you can create.

enter image description here

On desktop, 3 level navigation is uncommon. If sites like Amazon, eBay, Microsoft and Apple can create sites with only 2 levels of navigation, you have to ask yourself why can't you. I would keep "Administrative and Public law" as it is (as a link to a new page) and include the children of that on the new page. When you click "Mac" on Apple.com, you're led to a new page and presented with what are essentially sub-categories but as large thumbnail images and text at the top. This is easier and less fiddly to navigate than hovering over menu items and then sub menu items:

enter image description here

If you really need to do 3 levels of navigation on desktop though, you could do something like Amazon, where you have multiple instances of their 'Shop by department' for 'Home, Personal legal Services, Business Legal Services, Our People, etc'. So, click a main menu item and see a single column list with small line-height for quick scanning, then hover over one of those to explode another sub-menu on the right.

enter image description here

2
  • Thanks @mattdempseycom , Really like the mobile version. I've come up with a solution for desktop, what are your thoughts on this? !Desktop Version - Menu.
    – Roy Barber
    Feb 7, 2013 at 14:21
  • 3
    You've successfully fit all the info in there, but it's overwhelming. Users will see the normal black menu and think, "Ah yes, I do need Personal legal Services, I'll just go to click th... Holy crap that's a lot of options". You're going to lose a lot of users who don't have time to read all of that. Also, in my comment I said reduce the line-height, but in this example, especially in the 'Personal Injury Compensation' area, it's not clear where one line stops and the next one begins in some cases, e.g. 'Road Traffic Accident Compensation Support Services' - one line or two? Feb 7, 2013 at 14:31
3

Multi-level dropdowns are an engineered solution to the problem of having too many menu items. The best solution to the problem is in fact to simplify the menu structure in the first place. If you really do require so many menu items then it's probably better to split them using sub-menus.

I like to think of complex nav as being like the guide in a department store; they don't hit you with a list of every item in the store. When you walk in you get the top-level of navigation only; menswear, home appliances, furnishings, etc. Upon navigation to that section, you receive further intra-category navigation; shirts, suits, trousers, etc.

Such a pattern allows a user to very quickly make correct decisions and to subsequently refine those, relieving them of the need to process every option before selecting the appropriate one. Make it easy on the site visitor, don't make them think (too much).

1
  • The short answer: A large number of menu items is never a great UX, whatever the screen size. It simply becomes a UI problem as well on small screens. Feb 7, 2013 at 10:55
1

I would view this similarly to traversing a tree. On each node, you can view the children or go back to the parent to view the siblings. Presenting your navigation like this would mean you don't need to show a second level of depth on any one page. It might necessitate more user clicks, since the overall navigation space will be progressively revealed, but it should work well for small form factors. I guess my short answer is that you shouldn't present a hierarchical menu when you don't have the space to support it.

BTW, I'm hoping someone else responds to this question and proves me wrong by showing a really elegant way to do this.

1
  • I think i agree @ericm there simply isnt enough room to display the parent, child and sibling items in on menu, especially as some of the child pages have more that 10 siblings.
    – Roy Barber
    Feb 7, 2013 at 9:28
0

I've created responsive solutions for dropdowns and mega-menus for an upcoming UI framework that I'm going to be releasing. Having looked at your implementation, here's what I would suggest based on my own work:

  • Move the mobile menu bar to the top of the page. It doesn't need to be fixed, but it should be the very topmost UI element. If it is fixed, allow scrolling on menu expansion, but revert to fixed when it is closed.
  • Move the menu button to the right and add a small version of your logo to the left of the menu bar. Either get rid of search, integrate it into the menu, or give it its own expandable area triggered by a button in the menu bar.
  • The initial view of the expanded menu can be similar to what you have, but I would make it 100% width and rotate the arrows 90 degrees so that they are pointing down. Only menu items with sub menus should have arrows.
  • Add a click event to the parent menu item to toggle the sub menu. The sub menu should at least be visibly indented and it may help to make a different color.
  • I would not recommend have more than one sub menu level for either desktop or mobile.
  • Only allow 1 sub menu to be displayed at a time.

Here's an example of what I did, with an explanation below:

responsive dropdown showcase

  1. The normal desktop functionality.
  2. The menu is collapsed on mobile and replaced with a menu button.
  3. When the menu button is clicked or touched, it expands the menu. (The menu button isn't shown because there are a lot more menu items above these three.)
  4. When the dropdown menu item is clicked or touched, it also expands.
2
  • Thanks :) I think the above is a great suggestion, the only problem i see would be the menu would be huge on mobile and not have the ability to still navigate through to the parent and child pages, not just the siblings. Ive done similar before but not quite as far down
    – Roy Barber
    Feb 7, 2013 at 9:24
  • @RoyBarber - A couple strategies for that that I forgot to mention: 1) Only one sub menu can be open at a time; 2) Add a link to the top of each mobile sub menu to the parent page, i.e. "All Business Services"; 3) As an alternative action, the sub menu or whole menu could appear to the side like (github.com/tegansnyder/JQuery-Mobile-Slide-Menu). I wouldn't be super concerned about the user having a long menu. You would still only have 8 items appearing initially and only when they want more would it get longer. Scrolling isn't hard on mobile. Feb 7, 2013 at 9:56
0

If you look at the 'browse' menu on the link below, you will notice at the bottom of each list a 'view more' link. When clicked, all the links for the given section are displayed.

http://artsy.net/

I wonder if you could display the child links with a similar approach, maybe a drawer toggle?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.