Home > website design > Touchscreen interface for menu and dropdown menu ease of use

Touchscreen interface for menu and dropdown menu ease of use

March 5Hits:1
Advertisement

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.

Answers

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.

Touchscreen interface for menu and dropdown menu ease of use

Touchscreen interface for menu and dropdown menu ease of use

– Wireframes created with Balsamiq Mockups

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.

Touchscreen interface for menu and dropdown menu ease of use

Touchscreen interface for menu and dropdown menu ease of use

– Wireframes created with Balsamiq Mockups

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.

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.

Related Articles

  • Touchscreen interface for menu and dropdown menu ease of use

    Touchscreen interface for menu and dropdown menu ease of useMarch 5

    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 JSFidd

  • How to display context actions in dropdown menues ?

    How to display context actions in dropdown menues ?June 2

    I having little difficulties to display a context menu for dropdown menu actions: The picture shows the problem quite by-self: whilst the click on 'Google' does still its job, its pretty confusing as the context menu shows up. My only idea to fix thi

  • Toggle-item inside a Bootstrap dropdown-menu

    Toggle-item inside a Bootstrap dropdown-menuOctober 11

    I have this working code for a toggle-item inside a Bootstrap dropdown-menu. See demo here. I suspect that it should be possible to improve it : in order to have a shorter code and avoid all the (...).css('visibility','hidden'); code redudancy... Is

  • Add a Polymer paper-dropdown-menu to a page from javascript?January 15

    I'm trying to add a paper-dropdown-menu into my page from JavaScript. However, when I do it this way, it ends up malformed on the page - the list items display by default and do not collapse back into the list. This is the basic structure of a paper-

  • paper-dropdown-menu options are horizontally stacked instead of vertically stacked

    paper-dropdown-menu options are horizontally stacked instead of vertically stackedJanuary 29

    In the Polymer labs todo-list https://github.com/PolymerLabs/todo-list.git, i added a paper-dropdown menu like so in index.html <body unresolved class="fullbleed layout vertical"> <span id="browser-sync-binding"></span&g

  • Foundation 6 Dropdown menuFebruary 5

    The drop down menu in foundation is not working in mobile view. who solve this issue? <ul class="dropdown menu" data-dropdown-menu> <li> <a href="#">Item 1</a> <ul class="menu"> <li><a h

  • How to add top-right arrow in bootstrap navbar dropdown menu

    How to add top-right arrow in bootstrap navbar dropdown menuFebruary 10

    How do I make the arrow in the middle of dropdown menu go to the right exactly under the gear-icon ? Screenshot CSS .dropdown-menu > li > a { /* border-bottom: 1px solid #DDDDDD; */ padding: 8px 20px; color: #333333; } .dropdown-menu > li:first-c

  • Usability of multi-level tabs versus dropdown menu for navigation

    Usability of multi-level tabs versus dropdown menu for navigationMay 29

    We're in the middle of a redesign of our client portal, and there's been some discussion about whether to pursue a multi-level tab design or a dropdown menu (used on the current version of the application). Having read through questions like Elegant,

  • Can't remove Ubuntu Desktop from dropdown menu on logon screenMarch 3

    I'm running Ubuntu on an Eee PC with the Netbook interface. I installed Ubuntu Desktop via Aptitude to see how well it works on the Eee PC, and after a while I wanted to rid myself of it. So, I purged it using Aptitude, but it still shows up as an op

  • Webpart dropdown menu appearing elsewhere

    Webpart dropdown menu appearing elsewhereMarch 24

    As shown in the picture the dropdown menu is appearing elsewhere instead of appearing below the drop down arrow.This happens only when using in IE.. IE 8-11 all have this same issue. How can i solve this and make it appear normally. EDIT:The site wor

  • Mobile Filter Dropdown Menu

    Mobile Filter Dropdown MenuJune 29

    I have a web application that has been responsively designed for mobile. While in a parent container you can apply filters to sort children. I am debating between two design types. Option A: This is a typical dropdown menu overlaying on top of child

  • Should I include a search box in the dropdown menu or just go with one in the nagivation bar?

    Should I include a search box in the dropdown menu or just go with one in the nagivation bar?January 12

    So i'm designing the interface of an ecommerce website that acts as a platform for stores, and naturally, there's a search box in the navigation menu. For each of the elements in the navigation bar, there's a dropdown menu with the subcategories (e.g

  • Dropdown menu on blogspot is not workingJanuary 15

    I have a problem with the dropdown menu on my blogspot. it is header widget with java/css script that i downloaded on internet it works well on the homepage or on any post but not work on page of label. I divide posts into the diffirent label and whe

  • Dropdown menu in banner not working

    Dropdown menu in banner not workingJanuary 24

    So basically I saw a tutorial and wanted to use that dropdown menu in my banner for a school assignment. Here's the result of the tutorial: html <div class="menu-item"> <a href="#"><img src="icon.png"></a

  • How to get the dropdown menu open / close when i click on its parent or outsideFebruary 5

    I have created a drop down menu that opens and closes when i click on its parent li element. But when i put the code for closing it when ever the user clicked outside the menu, this makes clicking on the parent li no longer closes the menu, but only

  • The Right Way to Make a Dropdown Menu

    The Right Way to Make a Dropdown MenuApril 1

    There's been a lot talk on SitePoint recently about dropdown menus, and not all of it entirely accurate. So I felt the need to chip-in and set the record straight on matters of best-practice, when it comes to JavaScript menus in all their forms. Firs

  • Custom ECB dropdown menu API?September 17

    In 2010 (or 2007) is there a server control that is responsible for rendering of ECB menus? For example, if I wanted to create a custom UI for a Document Library (NOT using XSL/DataViewWebPart/etc), and wanted to still create the same "ECB dropdown m

  • Dropdown menu expanded on page loadApril 27

    I have a hierarchical dropdown menu created using Drupal Megamenu module. It works good for my needs, but there is a small issue: when the page loads the whole menu tree looks expanded, and covers the entire page for a while. It gives a hard look. I

  • widget dropdown menu codeJune 14

    I'm trying to put in a simple dropdown menu in my widget. I copied one out of a previous widget and trying to substitute my own values into it. The submenu shows, but when I click save, it saves only the first selection (design 1). Actually, I echoed

  • What is the best way to indicate required fields in a deep, category dropdown menu?

    What is the best way to indicate required fields in a deep, category dropdown menu?June 16

    We have a UX situation in an enterprise site for a very large customer that has a very deep product list for a support site. We need to indicate that the product field is required, but deeply nested. Some menus go as deep as six levels! The user is r

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.512 s.