3

I'm trying to understand the best way to communicate to users via website navigation menus and, in particular, multi-level menus.

  • As the world is going more mobile, so goes the web.
  • Websites are going to be 'responsive'. A website is coded once to work on the largest desktop and a mobile phone's browser. Developers use tools to manage Cascading Style Sheets to accommodate the display device automatically.
  • One thing mobile devices don't have is a mouse for input. As a result, there is no mouse hover capability. Mobile devices only have a 'touch' capability.
  • Yes on small mobile devices, the top browser menu bar is normally hidden behind a menu display button, and when that button is pushed, the menu is visible to the user. While it's possible to show the ENTIRE menu structure (with a indented spacing to display a subtiered items) that can overwhelm a mobile device pretty quickly. The hidden subtiered model can save on display space.
  • On a large tablet device there is still no mouse hover available. Think iPad in landscape mode.

As a result, multilevel dropdown menus have a somewhat odd performance. A user uses a touch (or mouse click on desktop) to display hidden submenu items. A second touch/click is required to select a submenu.

My question involves feedback to the user on which menu item is currently displayed. A top tiered menu item is easy. You change color/font/background to identify that its different. Here's an example:

Website top level menu with selected page

The problem involves the current display for a submenu selection. There seems to be no good way to feedback that a submenu item is selected. Here's a menu with the multi-level menu item selected via a touch/mouseclick. The 'touch' displays the choices available in the submenu:

Website Touch on Parent Menu Item

We can easily display the selected item when on the new page AND after a touch to the top tiered menu item. In this case a simple font change (bold/italic) works fine:

Website Touch top, child menu item

And here's the final dilemma. The website is currently displaying "Resource 2". This is the normal state displayed after the website navigates to the new page. So how do you communicate to the user that a sub-tiered item is selected when just the top tiered menu is displayed?

Website, Child Menu item selected.  Not good.

And here is same page on a mobile phone, right after the menu button is pushed (Note: I'm not finished styling the mobile. That top logo is way too large. It should be ¼th that size etc.) I do want you to see the same tiered menu system:

enter image description here

What's a best practice here, to display a submenu item on the current page?

  • Add a text breadcrumb trail just below the menu ("you are currently on the HOME page")
  • Style the top level menu item same as a stand alone selected menu item, even though you can't directly see which particular sub-menu item you are looking at?
  • Leave the pulldown open and visible when visiting that particular page? Again, that is the entire tier2 menu is pulled down and displayed. Always. Ouch.
  • Add an additional subtle styling cue to the top level menu item (additional icon, enlarged down V caret symbol, underline the text, italic text etc.)
  • Leave it hidden, who cares anyway? (Certainly a choice, ouch again.)

There must be some systemic styling guidance out there on best practices for this stuff. Anybody know the results of recent customer surveys? Many thanks for your feedback.

  • I'm having trouble understanding your screenshot. What do the blank green-orange-green rectangles represent? It's weird that they appear above the navbar – tohster Apr 27 '15 at 12:31
  • Thats a logo. Nothing more. Its actually a fake logo, but still a logo. Check the notes above the mobile image. – zipzit Apr 27 '15 at 16:26
2

Smashing Magazine published an article on mobile wayfinding that I think is pretty helpful: http://www.smashingmagazine.com/2014/10/13/wayfinding-for-the-mobile-web/

None of those solutions are wrong, but given the choice, I'd probably use the "nested doll" approach as my starting point. It's a familiar pattern on both iOS and Android and would eliminate the cognitive burden of learning a new pattern.

enter image description here

  • Brian: That is an awesome article. It's now part of my support library. Many thanks for bringing it to my attention. I wasn't so much asking about a navigation technique.. I'm pretty set on a traditional menu that works consistently between mobile and desktop. My questions relate to the indicator... where are you now? – zipzit Apr 27 '15 at 22:17

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.