You may have noticed that many websites utilizing a hover navigation system—this is when you “hover” over a navigation link with your mouse and this will usually result in some sort of animated transition or a drop-down list of subcategory links to appear. The question is: “Does using a hover-based navigation system do more harm than good?”
You’ll find that this a pretty divisive topic; some designers will swear that hover navigation is terrible and it’s use is on the decline, while others will defend its usefulness in high-content websites. Here are the pros and cons I see for using hover navigation in your website:
- Hover navigation menus with drop-down subcategory links creates better website organization. Sometimes it’s very hard to narrow down the number of links in your main navigation, but you don’t want to have fifty links all vying for a spot at the top of your website. A great way to handle this is to have your main links on display while your subcategory links are hidden, discoverable with the user hover over the main category links. This allows you to keep all the links that you want, but display them in a more digestible and organized manner.
- Another way to handle the organization issue is to have your main navigation link to a page with a list of your subcategory links. The drawback of this approach is that users are forced to load a new page, and this may increase time spent trying to find information in a not very positive way. Utilizing hover navigation reduces the amount of clicks a user has to do, allowing for quicker navigation to desired content.
- It’s very easy to accidentally hover over your navigation, resulting in users opening up drop-down menus that may cover your content. This can surprise or disorient your visitor, confused as to why this navigation suddenly opened when they were trying to do something else.
- Using hover navigation can force users into what is sometimes called a “hover tunnel”; this is the issue that is created when a user must navigate through a small space in order to reach a desired link. Accidentally moving away from the hover navigation can close up the drop-down menu, causing users to lose what they were looking for and having to repeat the process over again. Some drop-down menus are so small and tight that this is a very real issue, making clicking on a link a chore.
- While hover navigation works well for desktop computers, it is nearly impossible to use for mobile devices. Tablets and smartphones rely on user touches and gestures; they don’t recognize “hovering”. Therefore, you’re forced to design an entirely new navigation for these mobile devices, which may mean you need to rework how you categorize your links.
So what do you think, which one is better? The best way to decide if hover navigation is right for your website is to test your website with real users before launching. When your website contains a large amount of information you may find that hover navigation is more beneficial, but never implement it at the cost of user satisfaction.