Hover vs. Click

By Andrew White \ October 15, 2024

Why your website should use click navigation

One of the most crucial UX decisions you’ll make when designing your website is how users interact with the header navigation. This navigation can take many forms, influenced by your target audiences, available content, and organizational goals. Typically, it will include links to the main sections and drop-down menus with links to pages within those sections.
When deciding how the navigation works, you have a choice: show the drop-down menu by hovering over the main section label or by clicking. Although hovering may seem intuitive, a click-based approach offers a better user experience.
Here’s why.

You can’t hover on a touch device

While Steve Jobs didn’t invent the touchscreen, Apple’s release of the iPhone in 2007 set the standard for the smartphone industry. Initially, designing for touchscreens was focused on small devices of similar size. However, touchscreens are now found in a wide range of products with larger displays, including tablets like the iPad Pro, Chromebook, Microsoft Surface devices, and more.
It’s tempting to think about designing for two different web experiences: desktops with large screens operated by a mouse, and mobile devices with small screens operated by touch. However, this binary view no longer reflects our technology landscape. We now have a variety of devices with different screen sizes and input methods, making true responsive design essential. This includes accommodating a third category: “large touch devices”—desktop-sized screens operated by touch.

What does this mean for your website? It means core capabilities and content cannot rely solely on hover interactions. Users on touch devices may not see the mobile hamburger menu but instead encounter the fully expanded desktop navigation. Since hovering isn’t possible on touch devices, implementing a hover-based navigation system would prevent some users from accessing drop-down menus.
Our quick, informal survey of the Best Buy website showed that 29% of new laptops include a touchscreen. This indicates that nearly 1 in 3 laptops for sale have screens that will display the “clicky” desktop navigation but can be operated like a “touchy” mobile device.
In summary, a click-based navigation system is not only device-agnostic but also provides a consistent experience across all devices, adhering to the ten commandments of website usability.

Click navigation is accessible

Beyond click and touch, we must also consider keyboard users. The Web Content Accessibility Guidelines (WCAG) state that “all functionality of the content is operable through a keyboard interface,” even at the lowest success criterion. Keyboard users typically navigate a site using the Tab key to move between elements and Enter to activate a component or click a link.
A click-based navigation system best accommodates these users. They can tab across each top-level menu item, use Enter to open the menu, tab to the desired child link or sub-menu item, and use Enter to access that page. Hover navigation, on the other hand, complicates keyboard browsing. To reach a child link or sub-menu in the fourth section of a hover navigation, a keyboard user must first tab through every item in the preceding actions, which is cumbersome and inefficient.

Hover navigation can be annoying

Some may argue that hover navigation offers a better user experience, but does it really? One of the biggest usability issues with hover menus is the creation of a “hover tunnel” where users must carefully move their mouse to avoid accidentally triggering another menu. This problem is particularly pronounced on sites with large drop-down menus, like ESPN, especially for users with trackpads, which are less precise than mice. These issues are easily resolved by adopting a click-based navigation system. Smashing Magazine discusses why hover drop-down menus can be frustrating, specifically in the context of “mega menus,” but the challenges apply to simpler drop-down menus as well.

Click navigation is more common than you might think

Many major institutions, including those in higher education and health care, use click navigation for their websites. Click is also the standard for navigating main menus in MacOS and Windows, performing functions in applications like Adobe Photoshop, and using core features in web apps like Google Docs. Keep an eye out for click navigation as you traverse the internet. You might be surprised how often you’ll be clicking. At this moment, the following websites all use a click navigation:

Websites designed by idfive

• Iowa State University
• Carroll Community College
• University of Washington College of Arts and Sciences
• Carroll College
• University of Maryland Extension

Other websites in the wild

• Duke
• Gonzaga
• Rochester Institute of Technology
• Cal Berkeley
• Northeastern Admissions
• Savannah College of Art and Design
• Amplify Change
• National Parks Conservation Association

Click Navigation Design Best Practices

At idfive, we are particularly passionate about this topic. To ensure this blog is constructive, here are some tips for designing an effective click navigation system. Carroll College serves as an excellent example of these best practices in action.

 

• Include a link to the top-level page: When clicking on a main section label opens a drop-down menu, you need a separate link to the top-level page. This ensures users can still access the main section page easily.
• Differentiate top-level links from child links: Style the top-level links differently from the child page links to visually communicate the hierarchy of your site. The top-level page acts as an umbrella for the child pages, and this should be clear at a glance.
• Label links clearly and appropriately: Avoid vague terms like “overview.” Use descriptive labels that clearly indicate the content. You can repeat the label at the bottom of the drop-down menu or use action-oriented labels like “Browse All Programs” for an Academic Programs page. Ensure labels are straightforward to avoid user confusion.
• Use downward carets to indicate child pages. In some cases, you don’t want a section to include a drop-down menu at all, but instead, link users directly to a page. If your menu has labels that link directly to a page and others that open a drop-down menu, the caret is a nice visual indicator to distinguish the difference in behavior.