Why hover menus SUCK

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.

Hover menus?

Oh right, let’s first explain what hover menus are. Let’s use a real-world example.

pearle.nl

Pearle is a Dutch chain of eye-wear stores. Their website looks beautiful, but they use hover menus:

pearle

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.

So what?

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:

archimedes

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:

dont_make_me_think

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.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s