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.

Do users find it easy to use headers/menus like the one displayed below?

http://learn.linkedin.com/wp-content/uploads/2008/06/Company-Pages-266x300.jpg

share|improve this question
    
That, of course, depends on the users. You should do a small prototype and test with your kind of users. Our kind of users where I work hate the hover menus. –  Martin Christensen Aug 23 '11 at 14:00
    
My target users are mainly eshop owners and users with experience in facebook and linkedin. –  Xalloumokkelos Aug 23 '11 at 14:43
    
Saying that it "depends on the users" would work as an answer for most of the questions on this site. Could you edit your post to include any empirical evidence as to why using hover menus would be be a good or bad choice? –  3nafish Apr 30 '13 at 21:06

7 Answers 7

up vote 34 down vote accepted

You get better performance if users click the menu bar to open a menu rather than simply hold the mouse pointer over it. Hover-menus were demonstrated to be a bad idea long before they appeared on the web:

Chaparro BS, Minnaert G, & Phipps C (2000). Limitations of using mouse-over with menu item selection. Proceedings of the Human Factors and Ergonomics Society Annual Meeting, July 44(2), p361. (nearly full text at Mouse-Over vs. Point-and-Click: It Depends! )

They're also inconsistent with the tried and true DOD Design Criteria Standard - Human Engineering (aka MIL-STD 1472):

5.14.2.1.8.4 Explicit actuation. A separate, explicit action, distinct from cursor position, shall be required for the actual entry (e.g., enabling, actuation) of a designated position

However, once a menu is opened, it is preferred that additional menus open on hover. For more details, see Make web menu bars more usable.

Part of the issue is that to get accuracy as good as click-to-open, you have to put in a delay that’s so long that any speed advantage of opening on hovering is negated.

Hover-menus are a textbook case of an intuitively appealing idea that fails in practice. They're also a textbook case that just because something is common on the web doesn't mean it's a best practice.

share|improve this answer
1  
Are you sure about the Bohan, Chaparro, and Scarlett reference? Having found the actual paper the abstract states that "Results showed that target-acquisition times were significantly shorter for the mouse-over technique..Overall, the results suggest that the mouse-over technique can be an effective alternative to selelcting targets via button press". –  JonW Apr 5 '12 at 16:26
3  
@Jon W: Good catch. I’ve corrected the cite to the study I meant, a follow-up to Bohan et al. that reports higher error rates for mouse-over menus despite increasing the delay so much it loses its potential speed advantage. Bohan et al. looked at acquiring a single button on the screen rather than menu use and could not measure errors. Now where else have I been citing it wrong? –  Michael Zuschlag Apr 9 '12 at 12:31
1  
Also, as touch interfaces become more prevalent, hover has little or no meaning. If you want your site to work out of the box on an iPad (or other tablet), use click/press for all the interactions... in addition to the reasons cited for doing it even on the desktop. –  Jim Jarrett Apr 9 '12 at 16:56

Drop down on click is easier to use. In addition, touch screen devices don't have hover.

I would recommend going for click, not hover. Do not forget to add a visual clue (triangle pointing down) to help with discoverability.

Here's some helpful information about possible usability issues with dropdowns.

share|improve this answer
2  
It may not be possible literally to hover on mobile, but it's straightforward to get hover menus to work on it just by adding an ontouchstart attribute to the relevant elements. Then clicking on the menus will trigger the hover effects. –  3nafish Apr 30 '13 at 21:00

I highly suggest you read the following article from smashing magazine.

Designing Drop-Down Menus: Examples and Best Practices

We found that our users hated traditional skinny drop down menus like the one in your screen shot. However, when we went to wider drop downs with multiple columns, larger margins, better styling, and no sub menus, then they seemed pleased.

share|improve this answer

With the prevalence of tablets and mobile devices I feel that we should move away from hover-centric designs. Touchscreens don't have a "hover" state.

My approach is simple:

  1. Don't try so hard to fit every conceivable link into your header. Instead, design a simple navigation structure with a few broad topics or categories.
  2. Each link leads to a landing page that allows you to drill down into more specific topics.

Last of all, the site needs to be very fast so that this multi-page design doesn't slow down or annoy the user while browsing your site. So use tools like YSlow and http://www.webpagetest.org to optimize your site. A fast website is always welcome of course, but this is especially important for mobile users.

share|improve this answer
    
Of course, hover is on it's way to touch too. Thank you very much, Samsung! –  plainclothes May 1 '13 at 0:13

Almost all users will be familiar with the concept as they are omnipresent in Windows and Apple applications (and even though it was redesigned in The Ribbon, it's still a similar concept.)

Wether they like it or not is something you need to find out - it depends on the user, also on how well the menu works. For example, you need a delay to prevent menus hiding when a user moves in a straight line from the top to the menu item. Menus that are difficult to navigate will confuse or irritate the user, even if they are familiar with the concept.

(A difference to note is that the menus on Windows only dropdown on click, not on hover. Dropping down on hover will make it more discoverable - but also more invasive. Dropping down only on hover (and not on click) can come with problems when visiting the page with a tablet because those have no way of hovering.)

share|improve this answer

Hover menus are extremely hard to use with touch devices
(try browsing through LinkedIn without using a smart phones built in browser)

... and often get closed if the user moves the mouse inaccurately over the menu
(e.g. the start menu in older versions of Windows - the "All Programs" in Windows 7's start menu does not use hover menus).

share|improve this answer

My experience is that hover menus and megamenus are hard to use. This comes from personal experience and watching other users. This is especially significant if the user has limited dexterity or poor motor skills.

I also agree that they don't seem to work well with touch interfaces.

share|improve this answer

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

2  
You say "As previously mentioned." Do you have anything to add that wasn't previously mentioned? –  3nafish Apr 30 '13 at 20:19
    
Yes. Limited dexterity and poor motor skills wasn't previously mentioned. I probably should have worded it differently. Touch interfaces was mentioned previously. –  kevinbpcls May 7 '13 at 19:07
    
You can edit your answer to explain that more clearly if you'd like. –  3nafish May 7 '13 at 19:11
    
Sorry for the late response. I just saw this. I did edit it, but I don't think the downvotes went away. –  kevinbpcls Jun 25 '13 at 20:14

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.