Hover vs. Click Navigation
Continued poll adventures
I’ve had a great deal of fun doing polls on various small UI preferences. Check out the one on Styling Accordions.
I have several thoughts around desktop navigation, but as I was working on a new Drupal theme my curiosity came to the forefront.
The theme was based on Bootstrap, so to get to any children items you have to click on the parent item to see the dropdown. This is done to be mobile-friendly, since phones don’t offer a “hover” interaction, but removes the option to visit the parent.
All of our current sites use the hover pattern though — hover over the parent and the children appear. This preserves the option of the parent item still being clickable to visit.
There’s tons of backlash over drop downs in general. Hiding content, poor labeling, and whatnot. So, out of curiosity, I asked 3 communities what their thoughts were: Designer Hangout, Facebook, and I did a poll through a new service called BetterDesign. I figured I would get a good mix of audience this way, Professionals, my friends, and I have no idea what the audience on BetterDesign is.
The results were more mixed than I had expected.
Designer Hangout, as typical, went a little deeper into the question than was probably necessary (we started running off into IA land), but I think the conclusion was generally anti-dropdown and there was an interesting discussion on the Priority + Navigation pattern, which avoids dropdowns by using a pathway page pattern.
On Facebook, no one was anti-dropdown, and the few that responded were fairly in favor of the Hover pattern (with the caveat that the mobile menu worked fine without hover)
Yet, on BetterDesign, the poll has a definitive winner in the Click pattern.
Additional Thoughts
I didn’t come to a good conclusion based on these data points, so I’m throwing out my own opinion.
NOTE: I am assuming a good Information Architecture structure is in place. These patterns don’t fix bad IA.
Hover Pattern
- When I was the web designer for my college department website (which used a hover pattern), all Google analytics showed that the parent pages never got clicked on — so anything important we had there was never being seen. The children needed to handle that content as well, which I updated the site to do.
- Forces you to build a completely separate mobile menu.
Click pattern
- The nice thing about a Click pattern, is that you’re forced to remember that content problem, so you do a better job of handling where your content lives.
- But you still need to account for the parent page — can’t leave it empty, because SEO/people manually editing URLs. I’ve made these pathway pages in the past.
- But you run into the problem of someone who is expecting a menu to open on hover not clicking the item and never sees the child items.
Dropdowns in General
Dropdowns can be tricky to use — your mouse strays just a pixel wrong, and poof it disappears, leaving you to open it and try again. (Except Amazon who does some crazy math stuff to not make you annoyed)
Pathway Pages (with or without Priority Navigation)
- Rank high on usability, but having to do a page load each time you want to drill deeper doesn’t work when you’re building a College website, for example.
- Not to mention, even a though a dropdown hides content, it’s more readily accessible than it is through a pathway page.
- Works best for informational sites that have only 2 tiers of navigation.
Priority Navigation
- I wanted to really like this and I think it’s a decent concept. Where I struggle is that it tends to hide things behind the hamburger icon plus the label ‘All’ or ‘More’. That button is still greatly ignored, especially on desktop.
- Categories can be so helpful if they’re done right, but Priority navigation doesn’t allow for that.
- But, I do think that it works quite well for the news site examples that I looked at.
Conclusion
I should have seen this coming.
It depends.
- Are you building a smaller, informational site; you’re not expecting a lot of clicking around? Then you may be fine with Pathway pages or Priority + depending on how wide your IA is.
- Are you building a large, multi-tier site with categories, maybe your users already know where they’re going? I’d suggest a click dropdown and proper parent page handling.
And as always, put what you ended up with in front of someone and ask them to use it :)
But let’s be real — I’d love it if the whole world would use Full Screen Navigation.
Ashley Crutcher is a Digital Designer at InterVarsity located in Madison, WI. She tweets at @ashleyspixels and enjoys cuddling with her cat, crafting, working out, and thinking too much about everything.
