Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
add comment

4 Answers 4

up vote 4 down vote accepted

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

share|improve this answer
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 '12 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 '12 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 '12 at 18:04
add comment

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

share|improve this answer
    
Yes, I think this is a better approach than my suggestion. –  JonW Mar 6 '12 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 '12 at 17:19
    
Good suggestion, we're discussing about how to make the indentation and the list-style integrate nicely. –  VKen Mar 6 '12 at 18:07
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
1  
Hi Mike, thanks for responding. Would you elaborate a little bit more please? –  VKen Mar 6 '12 at 18:09
1  
Absolutely! I was referring to references in the iOS Human Interface Guidelines: developer.apple.com/library/ios/#documentation/UserExperience/… –  Mike Hill Mar 13 '12 at 19:20
1  
that might not have been the right section, but there is definitely a section on use and reuse of the nav bar, I guess Apple knows that menus can get tricky/complex, so they gave guidance accordingly. developer.apple.com/library/ios/#documentation/UserExperience/… –  Mike Hill Mar 13 '12 at 19:26
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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