4

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.

4 Answers 4

4

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

3
  • 1
    Hi Jon, thank you very much for your response. My team had a discussion over your suggested solution. We have one concern regarding the intuitiveness(this is a can of worms). When one clicks a dropdown box, I'm skeptical whether one would click a second time to go to a link. I'm not sure, but I think this dual functionality of one single element: click-open, then click-follow link may be too obscure to be known. Would you have some insights into this concern? Thanks again.
    – VKen
    Mar 5, 2012 at 18:18
  • 1
    @VKen I've expanded on the idea in my answer based on your feedback, and have provided a seperate suggestion mockup too. Should give you some more to thing about.
    – JonW
    Mar 5, 2012 at 18:51
  • Thank you very much for the suggestion, Jon. Love the link you listed, presents the arguments nicely. I think we'll go with this idea. One question though, how do you think it'll affect the consistency of the user interaction? I mean, 'Page A' block is a link, and 'Page B' block is a trigger.
    – VKen
    Mar 6, 2012 at 18:04
3

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

3
  • Yes, I think this is a better approach than my suggestion.
    – JonW
    Mar 6, 2012 at 11:56
  • Good addition to Jon W's answer above. This way you still communicate the concept that the first element is a parent to many children.
    – Sheff
    Mar 6, 2012 at 17:19
  • Good suggestion, we're discussing about how to make the indentation and the list-style integrate nicely.
    – VKen
    Mar 6, 2012 at 18:07
0

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.

0

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.

3

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.