Hover vs. Dropdown Menus: Which One is Better?

How to Write a Financial Advisor Biography

Read Now

We get asked on a weekly basis if we can implement a hover function to the Main Menu links as opposed to clicking to open dropdown menus. Some clients suggest that clicking on the menu to expand isn’t as intuitive as it should be, which we agree and offer solutions to that problem, but here’s why hovering wouldn’t work.

From the very beginning we’ve been mislead about the future.

I blame no one other than the creators of Back to the Future and one very clear item: Hoverboards. To be fair, the boards can’t take all the credit. There’s also always been talking of Hover cars, hover boats, hover worlds. I also attribute some of this blame to The Jetsons. Hover anything was the future that our parents thought would be here by 2000.

   hover example hover jetson

Touch Screens that Aren't That Smart

But you know where hovering lead us astray? Any where and any place that involves interaction with a smartphone.  Why? Because with the creation of smartphones came the creation of touch. And know what doesn’t love to interact? Hovering and touch screens. 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 in letting the website know that the user wants to open a menu.

bad menus

First of all, the act of hovering nowadays, as the title to this series suggest, it’s considered old technology. Sure hovering is a really useful UI element for desktop users, it just doesn’t work with touch devices. Which happens to be where the future of technology is heading. Be it by smartphone or tablet,  even computers nowadays are starting to launch touch screens for every application.  Hover is great for when there's the intended purpose, but  what happens when menus open without users asking for it? It can surprise and overwhelm them. There's nothing more annoying than trying to see one thing and having another one blocking your path.

Unwanted Hover Tunnel Vision

Another reason hover has become outdated for menus is because users want to click on an item as soon as they see it, this leads to them moving their mouse in that direction. When it comes to hovering, if the mouse veers off track, the menu closes again, which means that instead of doing a straight line to your destination, you end up having to do weird and awkward 90 degrees shapes.

hover menu

This is dubbed Hover Tunnels, in which users have to go through a very specific set of directions to get to their desired location. Not to mention, they end up having to slow down as well. Hover menus close when the mouse moves outside the menu. This makes items closest to the menu edge harder to click, peripheral menus are the number one offenders of this. And last but not least is that a lot can be missed with hover. It becomes a game trying to discover if there's anything else your website can offer. And at the end of the day?

no time

The Conclusion on Hover vs. Dropdown Menus

So where does that leave the poor hover? It gets put on the back burner, being discarded and substituted by the click. To be fair, it seems like even the hover boards understood where the future leads. Despite the hover name, they've realized in the end that it's about contact that gets you where you want to go. The reality is that the benefits of using click dropdown menus outweigh hover menus, not only for the touch reasons, as well as all the other reasons we mentioned.

menu types can vary like boards

Menus should open when the user has made a clear decision, through the form of a click or a tap, to open it. This way, tasks becomes quicker and easier to complete. We have no doubt that future Menus will be able to survive just fine, they just require a special….touch.

menu special touch

For more website design and marketing tips, subscribe to our blog! We'll deliver fresh content right into your hands.

Want to try out our product? Build your own website for free, quick and easy, by clicking here. 

Topics: Design