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 have a web application that currently has menus that drop down 'on hover'. This is obviously an issue on tablets, etc. where there is no hover equivalent.

So, I need to add an 'on click' capability to have the menus drop down, but I'm not sure if I should also leave in the on hover ability, or remove it.

My question is: Should the menus be 'on click' only for consistency or support both on hover/on click to drop down?

edit: the menu is very clearly not the navigation menu at the top of the page, it's more of a control menu for filtering/sorting results on tabular data.

The idea is that hovering over 'Filter by' or 'Columns' drops down a menu that allows you to select which columns are visible, or add filters to the list of results shown.

(come to think of it, maybe it's not as clear as I think)

Menu with filters/columns

share|improve this question
1  
Is there any expectation from the user on your site that clicking on the menu would go directly to a page (as many do) rather than drop down the menu? –  Roger Attrill Aug 16 '11 at 15:07
    
Unless "Filter by..." brings up a dialog window, you should use "Filter by:". An ellipsis is used signify more options, in the form of another window. –  Matt Rockwell Aug 16 '11 at 15:44
add comment

4 Answers 4

up vote 9 down vote accepted

Seems to me you need dropdowns like those below that open up on click not hover - with the down arrow acting as the affordance.

enter image description here

share|improve this answer
    
+1 You hit it on this one! –  Matt Rockwell Aug 16 '11 at 16:02
    
Thanks. That does look a lot clearer. –  Shawn D. Aug 16 '11 at 18:24
add comment

I have conducted a study recently to ascertain whether a click menu or hover menu is more suitable for one of our larger financial client sites... these are my findings. I hope they are of some use or help to you:

In summary:

  • In general, hover menus are indeed expected behaviour on most sites, however it should be duly noted that on sites that are frequented often, such as a share trading platform (such as our clients') which is frequented on a daily basis by their customers, and for the most part users log in and stay on the site for up to 10 hours a day, every day, then behaviour on the site is 'learned' and users prefer to make an informed click to initiate or action something, as opposed to what could become a very annoying hover action every time the user moved their mouse over an area they didn't mean to hover over.
  • If the site is an infrequent site, such as an occasional retail/eCommerce site then the hover action is acceptable as users will want to learn quickly how to navigate and what their options are, but this is the opposite for highly frequented sites such as online banking, eBay, Google (e.g. Gmail), etc (Who all use click menus as opposed to Hover menus).
  • You need to always consider the technical output and accessibility of either the click or hover menus. The mega drop down gained momentum after Nielsen published his findings on how to implement them well - http://www.useit.com/alertbox/mega-dropdown-menus.html but in the past, hover menus and fly out menus were notoriously badly coded with awful MouseOut functions and 'tunnel' travel to get to desired links, which made them unpopular and cumbersome (Amazon.com's left side fly out menu is a perfect example of what NOT to do... )
  • Context is king! Older users for example prefer to action links by clicking on them. Minesweeping and hover menus tend to elude them to some extent.
  • And definitely include a cue of sorts to signal that there is a menu below. A down arrow or plus sign. This visual cue will signify that the user should click/hover for a sub menu.

An extract from UX Movement, from a UX chap called Anthony:

Many designers seem to believe that when their menus open on hover, they’re faster and easier for most users to use. It certainly might seem this way at first, but when you look deeper you’ll notice that the opposite is true. Hover menus are actually slower and harder for most users to use. Menus that open on hover do save users a click, but that first click is necessary in letting the website know that the user wants a menu to open and is ready for it. It also confirms to the user that something is happening as a result of their click. This behavior matches the user’s mental model of how most websites work. Clicking for something you want has never been an issue for users. What’s an issue for users is getting something you don’t want or don’t expect simply on hover.

On a website, users will often hover their mouse over many things. This is something that most users do to see what’s clickable. When hovering tells users if something is clickable, that’s when its most effective. But when it opens something before the user has even asked for it, that’s when it can surprise and overwhelm users. There’s no benefit to getting something you don’t want extra fast, if you don’t want it. When this happens, it becomes more of an annoyance than a benefit.

share|improve this answer
1  
Roger had a good answer for this specific user's case, but this is a GREAT answer for those of us who have this question more generally! –  Daniel Newman Aug 17 '11 at 15:59
add comment

You should most likely need to make a mobile version that is more catered towards mobile/tablet users. Take Home Depot's site for example. When on a PC, the drop downs appear on hover, whereas on the mobile version it does not have drop downs at all: enter image description here

If they had made the navigation drop downs and fly outs click only, it would still not fix the issue that the site really does need its own mobile version. Viewing the normal web version on a mobile device would be a very poor experience.

Also, many users expect to navigate to another page when making any click on navigation.

share|improve this answer
    
+1 Design for mobile first. –  Roger Attrill Aug 16 '11 at 15:32
add comment

2013... I came across this post researching the same issue for a navigation menu. I am designing a UI framework for my company and I am seeking to make a decision on the default behavior for site navigation.

In this case as presented, the users are not "on the hunt" for things to do. menus are a possible actions rolled up to save space. The assumption is they click to reveal the one they want to do. I would suggest the same. That click is the right choice here.

This is also informing my own decision. Navigation drawer style menus roll up choices in relevant categories and keep them out of view until needed. Users may want to peek in each drawer to see it's contents before committing to any choice.

Thanks to this post I am going with hover for my navigation menus.

share|improve this answer
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.