Web mistakes to avoid: What I learned judging the 2016 Webbies, part 1
Since 2009, I've had the privilege of being a judge for the International Webby Awards. It's been a great opportunity to spot trends, see new ideas in action, and identify techniques that do and don't work.
The web is well over 20 years old, and yet navigation is still the principal challenge for site architects and users. Users have notoriously short attention spans and little patience for obstacles that impede their browsing. In those 20+ years, certain conventions have emerged that users depend on to streamline their experience. Mess with them at your peril.
For desktop sites (anything not viewed on a smartphone), the top menu or top nav is the gold standard for site navigation. It's where users look first to see essentially a summary outline of your site content and where they might find what they're looking for if they are on a specific mission. But yet, in reviewing scores of sites for the Webbies and in my everyday experience, I see two ways that top nav is being eliminated, much to the detriment of desktop sites:
Hamburger menus: You've seen them, the three stacked horizontal lines that you can imagine look like a skinny hamburger on a bun. These have been a marvelous innovation to help users jump from section to section on smartphone sites where usable top nav is just not feasible.
However, I recommend avoiding them entirely on desktop sites. As "hidden" navigation, they can reduce discoverability by as much as a third compared to visible or hybrid nav. Nielsen-Norman Group offers some solid user research on this topic.
Above: Content is nearly twice as discoverable with visible vs. hidden navigation. Conversely, average task time is 50 percent higher with hidden navigation. Source: Nielsen-Norman Group.
Even when approaching web design with a "mobile first" philosophy, which often makes a lot of sense, or when using responsive design, there's absolutely no need to port hamburger menus to the desktop site. The site you're looking at now has top nav on desktop, which is automatically converted to a hamburger on mobile. Easy.
Single-page sites or SPS: Some of my graphic designer friends cringed when these sites first started appearing a few years ago, and I did a bit, too. These are the sites that stack varied content on a single page, creating an experience (or different experiences) as you scroll down. They've come a long way and for certain applications they're perfect. Many web marketers have adopted them simply because they're "the thing" or to create an out-front impression, and that's fine, too.
But please don't let your web designer tell you you can't have persistent top nav on a single-page site. You can, and should. If you make users scroll back to the top to look for a menu, or click through various links to find what they want, you're setting the stage for frustration and annoyance. Unnecessarily. (There are exceptions to this rule — next post.)
Neilsen-Norman Group has a wonderful way to describe one of the issues with hidden or obscured navigation: "low information scent," which feeds a phenomenon I've always referred to as "click aversion." Users want to have some idea where they're going to be taken if they click. They don't want to find themselves at a dead end or trapped in a rabbit hole. Make it easy, make it direct, give them a hint. Again, NN/g data support this conclusion.
The top navigation menu is a fundamental building block of your website (and it's come a long, long way; more on that another time). Make sure to use it to maximum advantage. And make sure to have rock-solid reasons to even consider not including it.