Do you know how your hover menu is affecting user navigation? Hover menus are a popular way to navigate. But the way they open causes usability problems that designers aren’t aware of. Before you settle on hover menus for your navigation, you should know how they affect users.
The Hover Myth
Many designers believe that when their menus open on hover, they’re faster and easier to use. It might seem this way at first, but when you look deeper, you’ll notice that the opposite is true. Menus that open on hover save users a click, but that click is necessary for confirming that the user wants to open a menu.
Without it, it’s easy for users to trigger a menu on accident when their mouse moves over the navigation area. This unexpected behavior can block users from accessing the information they want. Or worse, it can cover up important information the user can’t see.
When menus open without users asking for it, it can surprise and overwhelm them. There’s no benefit to getting something you don’t want a click faster if you don’t want it. This so-called convenience is more of an annoyance than a benefit. Hover menus present many other problems to users that make them harder and slower to use. Clicking a hover menu item is not as easy as it looks.
Forcing Users Through Hover Tunnels
One of the worse things about hover menus is that they force users to move their mouse through hover tunnels. Hover tunnels are passages that users have to move their mouse through to click an item. Older users who are less tech-savvy will often have trouble doing this. Even tech-savvy users can find it annoying that they have to move their mouse in a confined path.
Hover tunnels make it harder and slower for users to navigate. When a hover menu opens, users can’t move their mouse to the item they want in a straight line. If they do, their mouse will fall off the hover path and close the menu.
Instead, they have to move their mouse through the hover tunnel, or else the menu will close on them. There’s no reason users should have to work this hard to navigate a website.
Peripheral Items Are Harder to Click
Hover menus close when the mouse moves outside the menu. This behavior makes items closest to the menu edge harder to click. Users have to slow down their mouse movement when they try to click a peripheral menu item. If they don’t, it’s easy for them to miss the item and land outside the menu, resulting in a menu close.
Some menus add extra padding around the menu so if users miss the item, it’ll stay open. But extra padding doesn’t fix this problem because many users can still move their mouse too far without knowing. Users shouldn’t have to move their mouse in a certain way to click a menu item.
Hidden Index Pages
Many websites have index pages that give users an overview of content so that they navigate easier. But these index pages can’t help much if users can’t find them. Index pages often hide in the category name that users hover their mouse over.
Most users don’t know that the category name leads to the index page because it looks like it’s already selected. The highlighting on hover makes it unclear that the category name is a link. This behavior hurts new users who need index pages to get an overview of the navigational hierarchy.
Menus Should Open on Click
Menus that open on click instead of on hover solve all these problems. Click menus free users from hover tunnels, challenging peripheral items, and hidden index pages. Here are a couple of approaches to click menus you can use.
Standard Click Menu
The first approach is the straightforward way where the menu opens when the user clicks the main category item. It closes when the user clicks anywhere outside the menu. Unlike hover menus, this approach allows users to move their mouse however they want. Closing it is as easy as opening it.
Click menus force you to put the link to the index page inside the menu. A consistent and visible location is to place them at the end of the list. This approach makes it clear where all index pages are so users can’t miss them.
Collapsible Mega Menu
A collapsible mega menu is useful if you have a lot of items in your menu. The advantage of this approach is that it won’t cover up any page content. Instead, it’ll push the page down when the menu opens so that all content remains visible. Users can move their mouse anywhere and the menu won’t close on them.
Final Thoughts
The benefits of using click menus outweigh hover menus. Designers need to know the harm they’re doing to users when their menu opens on hover. Menus should open when the user has made a clear decision to open it. That clear decision is in the form of a click. When a site behaves the way users want it to, tasks are quicker and easier to complete.
Book
Affiliate
Exactly. Hover just doesn’t work for PCs because your mouse cursor has to be -somewhere-. Sometimes when I’m tabbing across pages or scrolling I don’t want things to be opening or ads to be making noises at me just because my mouse happened to be somewhere. It’s really annoying.
Was never really a fan of hover menus myself. The worst is when they’re not coded correctly and don’t close when they’re suppose to and then just sit there blocking other things on the page. I like your click menu solutions. I always find it helpful when there’s a little arrow telling me if there’s more to see. Menus can get complicated when there’s sub-menu upon sub-menu.
Anthony,
In principal this is a great idea and one that I have implemented on sites I have developed.
However the hover state and its mechanism are an inherent part of the browsing experience. Adding an additional action in between the user and a drop down is almost counter intuitive isn’t it? If you intone, through an arrow icon on a button for example, that there is a drop down not all users will understand that a click is required to open it and may overlook or miss a vital aspect of the interface.
I think there is a place for both and admittedly a click state is a much more robust and reliable implementation of drop down / panel menus, however I don’t see hover state menus ever disappearing completely.
It is up to us, as designers and developers to ensure that hover menus work as efficiently as possible, through a mix of ergonomic design and intelligent programming.
With the advent of things like jQuery and its delay function we can manipulate the hover state in such a way that things like running outside of a hover area are far less irritating than they used to be.
All that said I loathe the first example you cited! Those menus drive me mad!
Excellent article, got me thinking.
Great post, as usual, please keep it up! I keep all your posts in mind during my UI design projects.
Stuart
THANK YOU!!! Hover menus take what could be a nice layout and turn it into a steady hand maze game for users.
Jakob Nielsen already mentioned the “diagonal problem” two years ago (http://www.useit.com/alertbox/mega-dropdown-menus.html). It’s really sad that 90% of mega drop downs still have this problem.
But I think it’s not necessary to open it on click. You just need to implement a short delay before closing the menu. If the user hits the menu again in this short delay it will not disappear.
The delay solution he suggests won’t work for all users because not all users move their mouse at the same speed. Some move their mouse fast and some move it slow. His solution is a band-aid for a persisting problem.
I have been using jquery hoverintent, which resolves the delay & tunel issue.
http://cherne.net/brian/resources/jquery.hoverIntent.html
@Manuel The delay solution assumes I hovered over the menu intentionally. Unintentionally, the feature becomes a burden. I have to wait for the delay to click on the thing it just covered up.
You might say “so what, it’s 500 miliseconds” (or whatever it is). And while it’s not going to make me late for the movies, I still experience it, and it’s irritating.
That being said, in the case of accidental hover even without the delay, I have to run away from the dropdown and run back carefully to correct my behavior. With a click menu, the menu waits for me to ask it (click on it) to open.
While I agree with most of the points made in this article, the author does not discuss what I believe to be an advantage of hover menus. Also, I think that a lot of the “harm” can be taken away by adhering to a few restrictions.
The advantage of having menus open on hover is that it allows users to browse through the menu items, to get a feel of the structure of the menu.
A solution to the ‘unexpected open/close due to hover’ problem can be to require the user to click any top level menu item first. After that, hovering can be used to quickly change to other menus. Similarly, the user has to click outside the menu to close the currently opened menu. Basically, the way application menus work in Mac OS (and Windows too, I think).
Hover tunnels pose no problem for menus that are restricted to horizontally listed top level items that open menus of vertically listed subitems. (I think it is rarely a good idea to make the hierarchy any deeper anyway.)
Finally, one can use a disclosure indicator to go to the index page and use the label of the menu item for clicking and/or hovering. (Similar to the second solution in the article, but giving precedence to browsing the menu instead of navigating to the index page.)
Thanks for bringing up the comination click+hover functionality as you describe. We opted for this for a new menu on our website. It replaced a click-each-parent menu we had before.
Strongly disagree with this.
You can set hover menus to close a set amount of time after the cursor has left the hover area. This allows you to take the quickest path (you may have to test and adjust this time to find a good balance between not enough and stays too long but I by far prefer this method).
Additionally, I’d much rather be able to quickly browse through the menu options (by hovering over them) rather than having to click to open each one.
See response to @Manuel above.
Great post, Anthony – thank you.
I’d be interested to here what you think about hovers for tooltips and the like – times when you just want to show a little bit of contextual info/help. Hovers then? Or still require a click?
Thanks!
Jack
Showing tooltips on hover are fine for icons because icons don’t always tell users what they’re clicking. But you don’t need tooltips in a navigation menu because they have text labels already that do just that.
Good points, but I think you’re missing something – Yes hover menus are hard to *hover over*, but if the developer is worth his/her salt, they’ll have implemented something like hoverIntent and superFish, which detect when a user has accidentally left the hover menu and will give a delay before closing – this makes it less easy to close the menu by accidentally skipping outside its boundaries.
Also – the ‘hidden’ index pages thing is an issue, so I think devs implementing a hover menu should put the hovered menu item (the clickable index page) as the first item in the dropdown – that way users who don’t realise the top-level nav element is clickable can still see it’s an option in the drop menu.
I don’t think these are good enough reasons to write off hover menus entirely, but it’s definitely a good bunch of points to think about from a UX perspective..
A think a better solution is using JS such as Hover Intent.
I think the problem with this logic is that, although mildly unusable, hover menus have become expected on websites.
I am never surprised or put off when I hover over a menu and a drop down comes out to give more menu options. Granted some menus could be achieved better using onmouseout delays etc so the quickest path thing doesn’t happen, but people have come to expect drop downs on content heavy sites.
Great article.
In addition, hover menus simply don’t work on touch devices: a point that will become increasingly relevant as smartphones, and tablet devices proliferate – and more and more websites make use of ‘mega dropdowns’ (et al) as a key part of their navigation.
Away with hover menus. I’ve had too many times when I don’t know when a menu item has a hover flyout or not. I end up clicking the the menu item to find a hover submenu popped out a half second later as my browser thought about it, but it’s too late and it’s on to loading a page I didn’t intend to load. Nothing changes the fact that users expect to click to interact. Clicks are NOT a bad thing, and you aren’t helping much by saving the user the extra finger twitch. A click shows intent. Like others have said, you need to drag the cursor over certain elements to get from point A to point B – you can’t not have a cursor on the screen. Who is to say what should trigger a menu to appear? Sure, you could give it a delay so that you can pass over it without triggering it, but that is much more painful than just clicking it.
Strongly oppose to this viewpoint.
Our website shifted from Click to Hover without any issues. Not only did it result in speedier navigation time, it allowed our audience to view content categories at a glance rather than tediously clicking back and forth until they found the right section they were after.
I think your argument has more to do with poor design and development rather than the functionality itself. There are some poorly designed hover menus that do irritate but that could be easily remedied by intelligent IA and dev tweaks.
I think a combo click and hover solution as described by @Dennis_Stevense would have been a better solution for you.
When designing/developing a site, it’s hard to determine how the end user is going to work a website, because you’re constantly in front of it—anything you think makes perfect sense does, even if it doesn’t to everyone else. In this case, the only working version of a hover menu is one where it appears going straight down, minimizing user interaction issues. Otherwise, menu navigation should be re-investigated and pitched to the client with reasons.
A good rule of thumb when designing a site: Can your less-tech-savvy family members use this site easily?
Sounds like an argument in favor of the click menu. If designed correctly, it’s more consistent with dropdown menus in their native OS (that they’ve learned to use).
A little made up rule I use: 3 clicks without a homerun for a new visitor is the end of the conversation! Hey it’s a compromise client’s can get on board with in a realistic time frame.
As you say yourself: A lot, ( a whole lot) of users browse a site with their eyes and mouse simultaneously looking at/for where everything is and tend to skim your site structure by hovering through your main navigation. If you have ‘crap” flying everywhere that’s just bad design. There are other ways to indicate an element outside of the main navigation is click-able and that’s all they are really looking for at first blush, but the menu should be effortless.
I know bad hover design flies open and hogs the screen, flickers as it goes in and out, etc. Roll over effects causing users to have seizures as the try to read sub nav options. Hey, on top of that what’s more upsetting than visiting a new place and getting a “slap in the face” for saying hello. That’s what a user feels just as they try to read your menu while their mouse drifts, and just as they focus on reading the menu . . . SNAP the menu is gone.
Here are my 2 notes for saving the hover menu because I think wasted clicks are just another bounced visitor on the way back to Google search results:
1 Leave a place for them to pull down your nav without selecting something. I simply leave a blank at the bottom so they slide the mouse down the menu, and have a place to rest it while they read the list without the menu snapping shut. and make each menu wide enough so that a little mouse drift doesn’t result in a slap to your user’s face, eyes, brain, whatever.
2. Hover tunnel note: The real killer there is that Fly Outs are always bad design, even with a click. I have only seen a handful in the last 2 to 3 years that were acceptable and frankly it took genius to get them that far. Beyond 3 years ago and they were all crap. If you have horizontal fly outs I wish you the best but you have deep IA issue with your project and I can’t stare at a train wreck all day I have other things to do.
Bad design is inherent with any project involving clients. If there is not a bunch of stuff you hate when the site launches, then you built the site for yourself and not for the client.
Your article is a great swipe at bad design and I enjoyed it but the click bait title was misleading to say the least, and you could go much further than trying to contain this to just hover menus!
Just a quick note about the old “3 clicks to anything” rule of thumb. This has since been proven to actually be a bad idea to go by. Far more important is the information scent. Users are far more willing to make more clicks as long as each click makes them feel confident that it is taking them closer to what they are seeking.
http://uxmyths.com/post/654026581/myth-all-pages-should-be-accessible-in-3-clicks
http://www.suzeingram.com.au/2008/12/3-click-rule-obituary.html
http://mattlingard.wordpress.com/2011/02/02/information-scent/
http://www.useit.com/alertbox/20040802.html
http://www.uie.com/reports/scent_of_information/
I always thought:
hovering is used when information is on the same page.
clicking takes you to a separate page.
How about accessibility, is it possible to build a multi level menu click/hover without relying on JavaScript? JS may fail to load, not all mobile browser supports it etc.
Not only do I agree with the post, I think it comes at an important time in web-design. Mobile/touch screen platforms simply do not support a hover paradigm. It’s reassuring to see a rationale for doing away with content accessible only through hover gestures.
I think it depends on how menus are implemented and what is the result of NOT doing a hover compared with how far users will need to dig on the internal pages from that point on. For example, Apple used to have a horizontal subnav on their site. They removed it years ago and implemented a “better search” system instead. I still have a hard time finding things on their site now. Where do I got for movie trailers? How can I find software downloads? There is no place to look for these items in the navigation. Things that are pretty integral on the Apple site are now hidden from the average user. Very poor UI and I doubt they A/B tested it very well.
+1 hoverIntent… no problems.
Good Stuff. I normally give up as soon as the hover menu disappears when I accidentally moved out of the hoer path… hehe
Great article. I agree.
Anthony, thanks for a great article, some interesting points taken. But I do believe that on hover menus has their advantages when dealing with complex IAs, and like Michelle indicated a lot depends on the implementation and design.
Both approaches has their ins and outs, that is why we love usability testing 🙂
Too right. Menus that open on hover are usually a hindrance rather than a help, and you’ll find them on big buck designed websites. There will be a place for them in some applications of course, but I frequently encounter them being used innappropriately.
Proper consideration of User eXperience (UX) is lacking in many designers (or their employers, marketeers?). This is not just annoying their customers, but really bad for business!
Annoy a website visitor or make their task difficult and you WILL hurt your conversions and sales.
Mark (in London)
theWebalyst: Websites and Web Marketing for Freelancers, Practitioners & Therapists
I agree with a lot of this, hover menus are often a lazy cop out for developing a proper sitemap…. the extra pages you can’t fit anywhere can be ‘hidden’ in a hover.
I don’t, however, agree that users know to click and so a click menu is better than a hover one. If they need to click to open the menu, then you can’t of course have the index page on that menu item. You’d need to add an additional menu item (maybe ‘All Products’ to use the example above) and this doesn’t seem like a very clean semantic way of doing things.
The exception of course is that touch devices (iPads etc.) can’t really cope very well with hover, but due to media queries (etc. etc.) they could be served with different behavior than the more traditional desktop users.
So if I want a user to find a subcategory, I should be sure to have a proper sitemap and not use a dropdown menu in my main navigation?
Keep sippin’ that tea, mate
Great post. That is exactly correct. You hit it. I never have like trying to follow the tunnel! That was a great example. 🙂
Tunnel approach is a real headache. No user want to be menu explorer.
Focusing on increasing the hit area for Anchor, menu items is always a concern for me the while building the web for people.
Thanks for Lovely article 🙂
Kind of a silly article, it really depends on the use case, product the site is supporting, etc. There is no universal truth to this feature being good or bad.
Can you provide examples?
Thanks for pointing that out. Unfortunatelly no flatter button in your blog 😉
Great article. I am a huge fan of click menus vs. hover menus. Google knows what they’re doing when it comes to usability. So I’ll be happy to follow suite on my sites.
I’m strongly in favorite of click to open, certainly when the submenu has a lot of links. In response to Chad Holden, I believe that the expected hover behavior is easily countered by offering some kind of interface affordance like an arrow to click in order to unfold.
Good arguments and I agree with them. Even more so due to touch devices which effectivley dont have a “hover state” anymore.
However, I find the majority of users understand menues that appear on hover and just expect them to be that way. They dont expect to click and then see a menu.
Related with this, Nielsen post an interesting article about the case of Mega Drop-Down menus. He said that the size in some cases can reduce the impact of the Diagonal Effect. http://www.useit.com/alertbox/mega-dropdown-menus.html
Pingback: Quora
Tired of all the frivolous hover overs. I went to reply to a message on eBay. Spent 5-10 minutes on a long winded reply. Went to click the send button, I over shot it and a hover over appeared. Before I had a chance to change to realize it, my finger was clicking the send button…but it wasn’t the send button, it was the item in the hover menu above it. I got redirected to another page and MY WHOLE MESSAGE GOT DELETED. I was pi$$ed. Sure its bad design, but still, a menu shouldn’t even be covering up a very important button causing large amounts of frustration.
I feel your pain. That’s the ridiculous thing about hover menus. People think they’re convenient, but they’re actually not. How convenient is it to accidentally trigger a hover menu and open something you didn’t mean to open? That’s not user convenience, that’s user error. The principle here is to carry out an action only when the user asks for it. Moving your mouse over something is not a clear enough request from the user.
I hate hover menus. They have incorporated them onto our Website recently and I just hate them. Who ever thought they were a good idea anyway!
Came on the website for first time via search engine land and the site is just awesome. I was searching for similar website since long time as it will help me sharpen my user interface’s design skills.
It strikes me that there may be a more important reason click menus are not popular with developers: they are easily mistaken for hyperlinks, and hyperlinks disrupt mode. Users know that when they click a link, they will be blocked while a new page is loaded. We are all thus cautious about “testing” anything that looks like a link for fear we’ll invoke unintended navigation.
Because this is all so subtle, I’m strongly in favour of a subtle solution: be careful how you style any interface elements (menus, tabs, etc.) that are NOT hyperlinks, and choose :hover styles carefully. In particular, avoid the “pointer” cursor, and avoid manipulating text-decoration.
It depends on the situation and the implementation. If you want the primary navigation items to have landing pages and reveal to users the secondary pages available, the most intuitive and expititious approach is in fact hover.
If you have a rambling secondary and tertiary nav associated with the primary nav item, then yes, it could pose usability problems.
Like everything we do, when it comes to user experience design, decisions should be based upon the context and the use case – not a blanket approach.
Lisa L. Trager
Thank you. Great articles. I agree with you.
Nice article. Here’s a link that talks about solutions to the hover tunnel problem that’s mentioned, and distinguishes hover menus, click menus, and sticky menus.
http://thomaspark.me/2011/10/making-menus-escapable/
Whilst I agree in principle with this article and the issues that arise with hover menus, I still feel that they feel more natural and allow for more sophisticated design than click menus.
Big miss on this one. Drop-down menus generated by click without informing the visitor of what will happen on click is a HUGE mistake. When a user sees the word “Products” in the menu with no other notations, they expect to be taken to the products page when they click on that option. To instead display an additional menu does two things:
1) confuses the visitor
2) does not allow for a “main” products landing page without the use of an additional link in the products menu
Agree with this point. The evolution of user expectations over the years because of touch will be interesting though.
Thank you for the article, excelent. Is a good practice.
I think that with the increasing use of tablets thesedays, hover menus should be deprecated as you can’t hover on those devices anyway. Therefore any hover menu becomes useless then. Expandable on click areas have got to be the menu of choice surely!
I think a lot of people misunderstand the issue here. It’s not a drop-down menu that become the problem, but a hover menu. I myself prefer click-on/off drop-down menu instead of hover.
People just get used to hover, so many developer thinks that it’s okay for their visitor.
Somebody got to start doing a research about it …
I really honestly do not understand people having trouble with them. Especially the tunnel thing. Hover menu’s seem to cause me no hassle at all. Unless they are really badly coded, how are you all annoyed by them so much?
I’ve just discovered a major problem with mega drop down menu on a website that I maintain. Google reads everything in all the drop downs regardless of what page you are on. This makes it almost impossible to optimise each page for specific content, because all the pages on the site look almost the same to Google.
Has anyone else noticed this problem and figured out a way to hid the non relevant contents in the menu from Google?
Hover Menus are not good in mobile, if the web site doesn’t have a mobile version.
You raise some valid concerns, however none that haven’t been addressed.
Amazon.com has implemented a menu script which easily detects when a user is going for the ‘fast route’ on a menu. worth checking out.
Amazon has implemented a hover menu that is bar none. It’s really extraordinary. However, it should be noted that this is a hover menu with one big parent and opens up to an enormous dropdown. Just saying it’s not comparing apples and apples.
Disclosure menus have two problems that I’ve observed:
1. The down arrow icon is itself too small of a target in most designs.
2. Many people are not aware that the down arrow and index link are decoupled, so you can get a scenario where the user expects to see a menu when they click on “Books”, but is instead redirected to its index page, which either makes them confused or report the behavior as a bug.
My current favorite design is a variation of the third option: a sticky collapsible menu. Sticky in that it uses a cookie to remember the collapsed/expanded state and would give the user the same look the next time they visit the site.
HATE Hover menus!!! Never knew what they were called!!! The Shits!!!! advocated by simple-minded shits who don’t know shit!!! PV,NYC
Roll over and drop down menus are one of the worst things ever done with HTML. They are the hallmark of bad websights.
Many websights start out good and easy to navagate. Then for some unknown reason possibly realted to the Basic Laws of Human Stupidity….they devolve and become more useless over time.
The people that seemingly try to make them better more often than not make them much worse. The trend seems to have infected the whole web. Its yet another example of inept engineering by persons who just don’t get it.
Something that bugs me is that on Amazon.com, Is that I click in the search box, let go of the mouse (and the cursor moved an inch), start typing, and find out a hover menu popped up, taking the focus away from the search box, and everything I typed doesn’t show up.
Oh how I hate “hover tunnels”. I just never knew what the name of it was, but I sure think of a few names when I’m a having to take 4 stabs to navigate to a sub-menu item.
For web sites that don’t have large categories trees it is better to avoid mouse overs when they don’t have any sense.
For web sites with large category trees, huge mouse over menus is the must, because it gives quick access to different categories. Most of fashion sites do this.
I think this should be reexamined because all evidence today points to hover menus increasing conversions in ecommerce sites.
I’m glad I found this.
Activation on hover is an irritating feature. It wastes time and discourages a return visit after being taken down unwanted links – and thanks for describing the hover “tunnel”. I’ve often wondered why anyone would think cursoring two sides of a rectangle is better than the diagonal – and having to be “shoot” accurately !
But there are other navigation issues, the worst being a recent trend to having to guess what is active/clickable.
Too many sites seem to think that a rectangle of uniform colour is sufficient – yet often the same website has the same design for a header. For some reason these site have dropped traditional buttons that seem to say “click me”, i.e. rounded with shading, a colour gradient of bevel.
Then there is the active text – indistinguishable from inactive text.
Why should it be necessary to pass the cursor over every square inch of a page?
Menus that need a click to open may not always be obvious to the user. S/he my just hover over andgo away after nothing happens.
You can make a navigation menu, or any kind of menu that is both click and hover friendly (including touchscreen friendly). A little extra styling to show the user that the button is ready to respond, and some kind of extra effect (such as an arrow or three-dot option indicator) that shows that the button does more than just answer to a click, is generally all you need. A simple click on the button will do its expected action, while delayed hovering, holding down the mouse button/finger, clicking the option indicator, or sliding the mouse/finger in the direction of where the menu is expected to appear can trigger the menu.
Once the menu is triggered, it’s just a matter of understanding if the user intentionally opened the menu, or if it was an accident. Deliberate clicks should open the menu and leave it open, while hover or mouse/touch hold should disappear if the user doesn’t remain near the menu or the parent menu/button, and swipe/slide triggers should dismiss the menu if you swipe/slide the opposite direction from what triggered the menu.
In any case, priority should also be given to deliberate acts. This means if the user deliberately clicked and held the button or clicked the option indicator and then happened to move the mouse or swipe their finger over the indicator that would open the menu by swipe or hover, the menu will still open as usual, but dismissing the menu should be based on the fact that it was first triggered by the deliberate click or hold, and not the swipe/hover as the user was moving to the menu.
Great article. Those invisible Hover Tunnels are impossible to navigate because you don’t know which items on the page are Hover areas. It doesn’t take a UX genius to figure that out (no offense to any of you overpaid UX Designers). It just takes the web designer taking a little time testing his or her website. After one time, if they still don’t get it, they need to find a new career.
Its time for us all to get rid of hover menus, especially badly designed ones. These days there are much better ways to build website navigation. Hover menus offer a terrible experience for tablet users sometimes making it virtually impossible for them to navigate around the website.
For those of us with Tourette’s, sometimes that causes the mouse hand to have lots of tremors, and those idiotic hover ads take over the screen when you have NO interest in them whatsoever simply because you could not control the movement of the mouse.
Those arguing in favour of hover drop-downs might have had a point when this article was written in 2011 – but not today.
Too many recent website re-designs have gone minimalist (flat).
Aside from aesthetics (opinion?), these minimalist sites lack visual clues to aid navigation.
Active text links are indistinguishable from passive content.
Flat, montone icons are at best ambiguous, at worst meangingless.
HUGE photos and panels put content and navigation below the fold – forcing unnecessary scrolling – which may then hide upper navigation.
With navigation so uncertain, the visitor spends more time trawling the screen to see what “works”.
This probably includes triggering a hover drop-down – which obscures content and navigation – delaying further the discovery process -or more likely abandoning for another site.
If the drop-downs are utterly paired down with no bullets and borders, the uncertain navigation continues. Nothing stands out as a “call for action”.
So I’m outta here …..
Only if the website utilizes a mobile-like navigation, like a hamburger. And it’s BAD but that’s another topic. If the navigation doesn’t stand out (why talk about CTA in terms of navigation????), then something’s wrong generally.
Thank you for the article, I’m strongly in favor of this view.
I also don’t understand the pros of clickable top level menus. The users rather expect hovers plus the mobile versions work OK – touch devices ‘translate’ hover to sliding options (if built at least in a solid manner). Tunneling is bad but that’s something more into IA.
Both examples of menus that are better with top level clicks are really more like catalog areas, not typical content websites like a portfolio or a corporate website. That’s a little bit different story.
“I also don’t understand the pros of clickable top level menus.”
The Pros are simple:
– intent, i.e avoiding unintended menu trigger
– so preventing time-wasting waiting for that pesky menu to disappear
“users rather expect hovers”
Some user might now – because they are so common. That doesn’t mean they like them !
Surely most users suffer the experience of menus appearing without intent – obscuring content – and creating a delay – many times a day ?
i.e. unexpected behaviour wasting far more time than “saved” by not clicking.
Navigation generally has become harder, less clear.
Many Menus have become plain text on a plain background instead of distinct and separate.
Many Menus no longer have a distinct Menu Bar, differently coloured, shaded, with tabs or borders.
In short, many active screen areas are no longer distinct from the inactive areas – so making any action on hover annoying.
Thanks a lot for this article!
I was wondering why Twitter Bootstrap wasn’t using hovers on its dropdowns, and I suspected there was a good reason…
You clarified that very well 🙂
Great post and great objective explanations.
One major drawback which I miss are hover sub menus who go beyond the browsers viewport and forces the user to scroll down, which will close the menu either by scrolling to far or even worse no scroll wheel available and the user is forced to use scrollbars, which wil unhover the menu itself and close it before they can even scroll.
Aah yes, tiny sites with small UX budgets like Amazon, Walmart, Nordstrom, Etsy, Costco and Kohls user HOVER on their desktop menus. What do they know. Target uses Click.