I see many websites that employ hover menus. And I’ve read many posts on why you should not use them in your designs. Most of these tend to focus on things like accessibility. They talk about how, for example, hover is not supported on touch devices. But I feel there is a much more fundamental reason why you should never use hover menus that somehow does not get covered often. So let’s talk about that today.
Oh right, let’s first explain what hover menus are. Let’s use a real-world example.
Pearle is a Dutch chain of eye-wear stores. Their website looks beautiful, but they use hover menus:
Notice how a big menu opens as soon as the mouse cursor hovers above the ‘CONTACTLENZEN‘ (contact lenses) menu option? That’s a hover menu.
It’s a big deal actually, because it breaks a rule that has been known for over thousands of years:
The shortest distance between two points is a straight line
This rule has widely been attributed to Archimedes, but we don’t really know who formulated it first. But we all understand instinctively that to get from point A to point B, we should follow a straight line between the two points.
Hover menus break this rule!
To understand how so, have a look at the animated gif of the Pearle website again. Do you see that big call-to-action button marked ‘Vind jouw winkel‘ (find your store)? Imagine you want to press it. You start at the top of the screen, just like in the animated gif. You start to move the mouse cursor along the straight line between your starting position and the target button. But, along the way, you hover over the ‘CONTACTLENZEN‘ menu option and BAM! A big pesky menu appears, obstructing your destination. You can no longer press the button because a big menu is now hovering above it. After this happens for a few times, you start to realize there is a sort of virtual wall there… invisible, but very real and very annoying. It is blocking you from taking the shortest path to your destination. You should go around it…
Just DON’T do it!
If a website is breaking this rule, it is becoming completely counter-intuitive. Here is what Archimedes looks like when trying to figure out how to navigate the Pearle website:
Don’t make me think
This website is making even Archimedes think. And our websites should not make people think! If you want to know why not, have a look at this book from Steve Krug that I highly recommend:
What do you think about hover menus?
Do you like hover menus? Or do you hate them? Do you have some more good examples of websites Doing It Wrong™ ? Leave a comment below.