Touchscreen interface for menu and dropdown menu ease of use

Question

I'm doing webpage design using Twitter Bootstrap's dropdown menu.

Problem: Suppose I have a horizontal menu as shown in the Twitter Bootstrap documentation. That menu bar that list pages I want to go, and one of the pages contains sub pages.

A JSFiddle example here.

If I were to normally cater to a desktop machine or anyone with a mouse/touchpad, user will hover mouse cursor over the Page B, to find out there are sub pages, B-1 and B-2.

If he wants to go to Page B, he can just click on the link. If he wants to go to sub pages, he'll hover on page B, and then hover down on any of the sub pages to click on it.

However, on a touchscreen device, we are not afforded such luxury of a hover.

Solution A: As with Bootstrap's implementation, by default the user will have to click on one of the dropdown menu trigger to open the menu. That makes the "Page B" link useless as a link, because it is being used as a trigger to open a menu instead. This breaks the logical grouping of the elements in the layout.

Solution B: The other solution is "split button dropdowns", where user has to click on the button or the half the button to trigger that menu's appearance. And make Page-B link in the sub menu. This is solution makes the main horizontal menu's visual complexity much higher.

I would like to know, to design for touchscreen devices, if there are any ways to model it after desktop user's experience of clicking on Page-B directly? If not, are there solutions better than Solution B with less visual complexity?

Less clicks is always good.

Answer 1

Hopefully I'm understanding this question correctly. A third solution could be to make a slight update to your 'solution A'; yes, a click will open the menu but then once opened if the user clicks the 'Page B' link again that will take them to the link, rather than closing the dropdown.

I'm not 100% convinced that all users fully understand how dropdown hover menus work anyway, so allowing these menus to be navigatable by clicks too (even on desktops) should help these users too.

You would need to show that this menu item is now a link rather than just a button - have it underlined on hover to give this more emphasis.

If the idea of clicking the top-level menu once it's open doesn't sit well (probably one for some AB testing perhaps) then you could always move the 'Page B' option to be it's own link within the dropdown menu itself, the top menu option being the first item in the list, differentiated from the sublevels in style to show that it is a selectable headline item in addition to the selectable lower-level items below.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

I like Jon W's suggestion too. Maybe indentation and bullets would help in emphasizing the hierarchical nature of the navigation.

And if you make the menu-bar and the drop-down look visually distinct enough, I think the repetition of the menu item "Three" would be less confusing.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

When the user taps B, the menu expands.

If they tap B again while the menu is open, they go to B.

If that's not intuitive enough, change the appearance of B when expanded to match the "Tap here to go" cues the sub nav items have.

Answer 4

Have you considered using a sliding horizontal nav bar? ala iOS?

This sounds (slightly) more elegant than having to mouse/click, see the expanded menu, then process.

The iOS interface is a little more elegant in terms of presenting a consistent movement metaphor.