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:
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:
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:
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?
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:
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.
