Navigation drop-downs. Should they be hover or click?
Navigation drop-downs, or mega menus as they are sometimes dubbed, are becoming more and more common on the web. A drop-down menu is a navigation block which appears when a link is clicked (or hovered) - a good example of this can be found on the Plumpton College website.
Navigation drop-downs are often used to help the user get to lower pages on the site without having to click a trail of links. There are articles on the web detailing usability issues with drop-down menus, however, having a drop-down sometimes makes sense, for example, mega menus perform well. In that case, the next question to ask is - do you have it appear on hover, or do you require the user to click to open the menu?
Our preference at Liquid Light is to have the menu open on click of the navigation link. There are several reasons behind this, ranging from accessibility to user experience. There is an alternative line of thinking for the drop-down to appear when the main navigation link is hovered over - this would allow the navigation link to still be navigated to by clicking and although a simple solution initially, this can cause many problems with accessibility.
Hover does not imply intent
Just because a user is hovering over something, it doesn’t necessarily mean they are intending to actually interact with it. There is nothing more annoying than sweeping your mouse across the screen to access a sidebar, CTA or even the close button and having several menus and drop-downs appearing unexpectedly in your wake.
Continuity between devices
Using hover menus would mean you would need to have a different experience on touch devices (such as tablets). Identifying these devices is not 100% accurate, which means some users on touch devices might not be able to access the mega menus. You may initially think the solution would be small screens having click, but Microsoft released a 28 inch touch screen device - that is nearly as big as the average 33 inch tv in the home.
Accessibility
Hover menus do not allow much room for error. If the drop-down requires you to constantly keep your mouse over the navigation item and its children, then there is more room for error. Being able to click to open a menu and not have that menu disappear until another action is taken allows users to take their time and move the mouse in any direction without the menu disappearing.
Interaction confusion
Many users of the web are used to clicking to interact with something. Clicking links to go to a new page, clicking buttons to submit a form, clicking tabs to reveal more content, clicking stars to submit reviews etc. The natural instinct is to click the link to reveal a drop-down menu (if indicated). If the menu is on hover, this is a break in the interaction flow and expecting the user to use and understand a different motion to use your website. Clicking will also navigate to the page, which can break the users train of thought. This can become confusing and disorientating.
We at Liquid Light are very much in favour of drop-downs being on click. What do you think? If you would like to read more on the topic of drop-down navigation, we’ve collated a few links below.
Further Reading
-
Mike Street
Mike is our front-end developer who spends his days buried in CSS and Gulp. His evenings and weekends are spent tinkering with electronics and riding bikes. mikestreety.co.uk
