In praise of off-screen menus

It’s fairly accepted that keeping navigation visible is best practice for menu design, right? At least when it comes to designing for desktop viewports. Nielsen Norman Group goes as far as saying that off-screen menus are “not appropriate for desktop websites and apps”.

Like a lot of black and white thinking, I’m not so sure the truth is so cut and dry, so I’m going to make a case for the off-screen menu being a better experience in the right context.

Moving beyond task-oriented thinkingpermalink

A lot of User Experience (UX) research looks at interface design through a task-oriented lens. Testers may be asked to “find the newsletter subscribe form and sign up” or “look for information relating to this company’s returns policy”. UX insights like these work really well in a task-oriented context. When your users are in task mode it’s easy to see why it makes sense to keep navigation front and centre — the easier you can make it to find your way around, the faster and smoother the path to task completion. But while information gathering and task completion is one of the primary modes of engagement online, not everyone who visits a website has a specific task in mind.

A lot of the time we’re in exploration mode rather than task mode when we’re online — quite literally “browsing” the web. Maybe we’re getting an idea of a brand, poking around for inspiration, or checking out a link someone sent us. In this mode, we’re much more likely to dig around out of curiosity, or because something catches our eye. In this context, providing visible navigation might actually detract from the experience, aiding decision fatigue, and adding subtle layers of distraction from the content of the page.

Keeping the focus on the contentpermalink

I’m a big advocate of designing for sustained, focused attention, especially where storytelling or long-form reading plays a key role in what you’re designing. Distraction is kryptonite to modern humans. If you’ve clicked a link on social media to read an article or check out a landing page, the last thing you need is a list of other pages tempting you away before you start reading.

Presenting a nav is presenting a list of decisions. In the quest for great UX, we should never forget that the decision that may prove the most valuable for someone landing on a web page is to stay a while and actually read the thing. To my mind, we can spend a lot of time debating UI choices, but if you nail your information architecture and serve up great content, the biggest thing you can do to help your audience is to focus on designing a great reading/browsing experience. The fewer choices you present throughout the design, the less likely it is that decision fatigue is going to eat away at your content’s ability to hold your reader’s attention.

Off-screen menus can be easy to accesspermalink

With a fixed position trigger button, the off-screen menu can always be a click/tap away, no matter how deep you’ve scrolled. I find this approach works great for a lot of service-based brand websites, where brand storytelling and does the heavy lifting from a sales perspective. In that context, you want to maintain focus while on key landing pages, but users may want easy access to key pages to get a sense of a company’s services, products and previous work. Conversion focused landing pages are another example of where there’s a clear benefit to getting the menu out of the way to keep user’s focus on the in-page content, while allowing those not ready to commit yet to access other pages and have a poke around.

Making use of the extra real estatepermalink

Sometimes navigation doesn’t call for anything more than a simple list of links at the top of the page, but off-screen navigation can open up the opportunity to experiment with different visual weightings and groupings for these links — making the most of the extra space in the menu canvas.

The Becolourful website keeps the focus on the larger primary links, while giving links to secondary landing pages a different treatment, with a much lower visual weighting and clear separation through lower proximity and vertical orientation. This keeps the focus on the pages that play the most important role in building trust with prospective new clients.

Quarterre’s website takes a similar approach of using scale to add hierarchy to the navigation links, while also using the additional space in the menu canvas to include contact details, which serve to highlight that the studio has offices in London and Denmark.

Another plus point for the off-screen menu is the ability to design a list of links with a vertical orientation. This removes the risk of nav items wrapping to multiple lines, or having to reduce menu item font size if the ideal nav architecture takes up a lot of horizontal space. Instead, with a vertical list we can take advantage of automatic scroll overflow and give the whole menu a bit more breathing room. For sites where navigation is CMS controlled, it’s also nice to know that new pages won’t break the menu design!

Aesthetics and brand expressionpermalink

There’s another way that the extra screen real estate can help the effectiveness of the website too, and that’s by providing a canvas for visual interest. People buy with their eyes. On a cognitive level, we process images 60,000 times faster than text. The visual choices we make in a design are a tool we can use to harness cognitive processing and enhance focus and concentration when executed well.

The decorative type and bold colours in Sister Mary’s menu design serves not only to enhance the brand’s visual identity but provides visual stimuli that engage on a sensory level, making the experience more memorable. Visual stimuli also influence our ability to concentrate. It’s a careful balance, where adding a little visual interest can aid cognitive processing, command attention and really make an experience memorable. Adding too much can be distracting and add to our cognitive overload.

Perhaps the Sister Mary example treads a little over the wrong side of the line with its level of motion. On the one hand I could see the theoretical argument in favour of this level of motion — for a simple site with five pages, most people will probably interact with the off-screen menu very little in the course of a visit. The off-screen menu shows off their creative skillset and fits the brand, which feels crafted, heavyweight and creative. But with the motion toned down a little, I think they’d be in the sweet spot for their context.

This off-screen menu from the Eislab website is a great example of using interaction design to showcase the brand personality and add some fun to the experience. The way they use scale to emphasise their product page is a really smart piece of design.

All too often discussions around user experience focus on usability, under the premise that usability trumps aesthetics when it comes to creating an effective interface. The brilliant UX Myths does a great job of debunking this bias. Attractive things are perceived as more functional, more trustworthy, and more desirable. It’s why cheap wine tastes better in a nice glass, and why the iPod dominated the MP3 player market, despite it not being the first, or arguably the best on the market. Check out Don Norman’s book Emotional Design for a deep dive on this subject.

Context is everythingpermalink

Going back to the UX research, the most critical thing you can do is establish connections between the data and your context. For example, in this Nielsen study, the researchers noted that “If people use hidden navigation, they do so later in the task than if it were visible”, and that “people were significantly more likely to use the navigation (whether hidden or partially visible) on mobile than on desktop”. If we’re designing a site with a primarily mobile audience, and we’re using on-page storytelling to guide people through the experience, then the data supports the idea of using an off-screen menu to minimise distraction until navigation is needed.

The underlying message I’m putting forward here is that making design and UX decisions should always be based on your project context. There is no right or wrong when it comes to UX, only context and compromise. You know your context and you can consider the UX decisions you make as a series of judgement calls that balance different configurations of compromise within that context.

It may be that an off-screen menu is perfect for the project you’re working on right now. It may not be. That’s not really the point. What I’m really saying here is don’t be afraid of going against the common best practice if that feels right in your context. See how it performs, and iterate on it.