How Important Is To Have Always Visible Navigation?

Posted: 09 Dec 2013 05:30 AM PST

Site navigation is typically among the first things you think about when designing a website. Once you know what content the site will contain you start thinking how to organize that content and you also think how to provide access to it through the site’s navigation.

Responsive design adds a twist in that navigation that works well in a widescreen browser may not work so well on a small screen and vice versa. Solutions for the small screen typically call for fewer navigational items and favor a vertical layout. Wider screens can hold more links and are often set up as horizontal navigation bars. Responsive sites will usually have the navigation change between two patterns at some point.

I’ve written about responsive navigation patterns before, when to use them and what pros and cons they have. I’ve even showed how to code many of these patterns for Tuts+ Today I want to address the topic of navigation in a different way and ask whether or not our navigation always needs to be visible.

Current Practice

Common wisdom suggests fewer links in global navigation. Six or seven are often given as an upper limit. My current practice tries to stay under this limit with a half dozen or so global links pointing to different sections of the site. Each section will then include a submenus to allow deeper exploration of the section.

There always seems to be a few outlier links (contact, login, etc.) that want a permanent seat in the global navigation and there’s often a group of links hidden globally that want more prominence. On some sites it’s a challenge to reduce all the information to a half dozen or so links.

It only gets more difficult when mobile enters the picture and there’s less space to work with. The earliest responsive navigation pattern was to do nothing more than reduce the amount of links and collapse the space between them on the smallest devices. Soon patterns were created to include more links. Converting menus to a drop down list, hiding some links, and moving navigation to the footer were the first attempts to allow for an increased number of menu items.

Before long patterns emerged that could display even more links. They moved navigation off screen and made it accessible through a button or link. A single tap or click and the menu could be displayed on request.

Whichever pattern you choose, odds are you use one pattern on smaller devices and when space allows you switch to an always visible horizontal navigation bar or vertical menu.

Do we really need to make that switch?

Navigation is Only a Tap Away

A few years ago I bought an iPad and not too long after bought my first book through iBooks. I can still remember how excited I was when I realized I could tap away navigation and chrome and bring it back with another tap. Yes I get excited by strange things sometimes.

I have no idea if iBooks was the first place this pattern appeared, but it’s where I first noticed it. It’s been influencing me every since.

Most of the time whether reading an ebook or accessing a web page, our focus should be on the content and nothing else. Global navigation isn’t really needed all the time. It’s needed once we decide we’re done with the content on one page and want to decide where to go next.

Think about a common form of offline navigation, maps. Maps help us navigate the real world. Do we need them to always be in our face? Do you walk around holding a map in front of you before taking a step or driving down the road?

Would you find it helpful if a virtual map was superimposed over the real world? Sure, it might help you get to where you want to go, but you’d miss out on everything along the way. You’d miss the content of real life. Isn’t it better to have quick access to the map only when you need it and to experience your surroundings the rest of the time?

Sadly, I think some would prefer the always on virtual map and ignore everything along the journey, but hopefully most would be with me in thinking we’re better off with maps on request. Should it be any different with the navigation of a website? Is it really necessary to be there all the time or is quick access to it when requested all we require?

Take a Cue From Responsive Navigation Patterns

Of all the responsive navigation patterns, my favorites are those that hide navigation completely by default and present it only after tapping or clicking an icon. I also enjoy interfaces where the chrome disappears as you consume the content and only reappear after you stop.

Other than sites with only a few pages, we can’t present a link to every part of the site on every page. We’re hiding most navigation globally as it is, so why not take that last step and hide the rest of it until it’s requested?

At the moment I can only think of 3 downsides.

It’s an extra click or tap to get somewhere on a site
A mouse click is more effort than a tap
People aren’t familiar enough with the pattern and could be confused.

I don’t think the extra click is that big of a deal. Sure it’s an extra click and we generally want to reduce clicks to make wayfinding easier, but it seems a reasonable compromise to help people focus on content. It’s also just the main few links that require the extra click. Deeper pages in the site can be set up to be accessed in the same number of clicks they are now.

The added effort for the mouse click is something to consider, but I’m not sure the effort will be a deal breaker. It’s effort to move the mouse from one side of the screen to another, but visitors shouldn’t be doing that a lot. When someone isn’t sure where to go next and is spending more time with the menu, the mouse would stay in the same general area.

Confusing visitors is something of a deal. In time people will be familiar enough with the pattern and I’d suggest more already are than we might think. Off screen navigation is becoming the most popular responsive pattern and it’s commonly used in native apps as well.

To help avoid confusion you can use the word “Menu” in big letters as a link or on a button to make it clear how to call up the menu. Breadcrumb trails could still be provided and we always have in-content links to help people explore.

We might also lead people toward menus by request, by first making visible navigation the default as they are now, and providing a close button so people can choose to hide it. It shouldn’t take too long for people to become used to hiding and showing the menu and then we change the default to hidden and people show/hide instead of hide/show.

I’m not trying to suggest we should always hide global navigation, but I am wondering if the time is right to do so more often.

Closing Thoughts

We assume navigation on a website needs to always be visible. Is that really the case? Perhaps in the past when people weren’t used to navigating websites it was necessary to show links all the time. Haven’t we moved beyond that past though?

Mobile devices are quickly becoming the de facto way to access the web if they aren’t already there. When people are visiting our sites they’re more commonly visiting on a smartphone or tablet where we’ve chosen a responsive pattern that hides navigation by default. Is there any reason to think we can’t or shouldn’t do this on the widescreen version of the site as well.

Every time I’ve designed and developed a navigation bar the last few years, I’ve thought back to my experience in iBooks and being able to hide the menu and associated chrome when reading. I can’t help but think this is the pattern we’re moving toward and that we can probably take a few more steps closer to it now.

What do you think? Are there downsides I’m missing? Would it confuse people too much not to see an always on global menu?

If you liked this post, consider buying my book Design Fundamentals

The post How Important Is To Have Always Visible Navigation? appeared first on Vanseo Design.