Do users find it easy to use headers/menus like the one displayed below?
-
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 ChristensenCommented Aug 23, 2011 at 14:00
-
My target users are mainly eshop owners and users with experience in facebook and linkedin.– EnexoOnomaCommented Aug 23, 2011 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?– Graham HerrliCommented Apr 30, 2013 at 21:06
Add a comment
|
7 Answers
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.
answered Aug 23, 2011 at 21:09
-
2Are 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 ♦Commented Apr 5, 2012 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? Commented Apr 9, 2012 at 12:31
-
1Also, 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. Commented Apr 9, 2012 at 16:56
-
I think it depends. I've tested alternative interfaces with click and hover and some user preferred hove over click; it felt to them that they had to do less work. Hover also allows faster exploration of what is in the menus if you don't know where to look. Commented Aug 3, 2016 at 18:49
-
@Rouben: Using hover after opening the first menu allows fast exploration giving the best of both design options (see Miksovsky link above for details). Otherwise, it indeed depends on what you care about. Users may feel hover is easier and thus prefer it, but the evidence I’ve seen is that click is truly easier –better speed/accuracy. I believe users will ultimately be happier with more free time and less frustration in their lives, than with living a pleasant illusion. Commented Aug 8, 2016 at 11:55
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.
-
2It 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
ontouchstartattribute to the relevant elements. Then clicking on the menus will trigger the hover effects. Commented Apr 30, 2013 at 21:00
I highly suggest you read the following article from smashing magazine.
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.
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:
- 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.
- 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.
-
Of course, hover is on it's way to touch too. Thank you very much, Samsung! Commented May 1, 2013 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.)
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).
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.
-
2You say "As previously mentioned." Do you have anything to add that wasn't previously mentioned? Commented Apr 30, 2013 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. Commented May 7, 2013 at 19:07
-
You can edit your answer to explain that more clearly if you'd like. Commented May 7, 2013 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. Commented Jun 25, 2013 at 20:14