Making Navigation Invisible

Building an elegant navigation scheme for a client’s site is a critical part of any web redesign, and one of the most difficult. My colleague Pete (whose anecdote I have shamelessly stolen borrowed to inspire this post) explains to our clients that good navigation should be like electricity: it’s invisible, it “just works,” and you only notice it when it’s not working. It’s more difficult than it looks to build something like this, but there are reliable principles that you can apply.

Everything comes down to cognitive load.

An amateur psychology lesson for you: cognitive load refers to how much space something takes up in your working memory. Your working memory is where you store brand new information, and then combine it with what you already know in order to make decisions, complete a task, or understand a concept. Literally, your working memory is the amount of information that you can hold in your head at once.

If you already know something, you’ll barely notice the effort it takes to recognize it. But if your brain has never encountered a piece of information before, it’s going to take more effort for your working memory to process it. Each new piece that gets added to your load will steadily build up — and if you’re not feeling like it’s worth it, you’re going to get frustrated!

How does this apply to navigation?

The web is not a physical space. A user needs navigation to be able to understand where they are (much like they might use signs and maps in a department store), especially if they’re coming into your site “sideways” through a search engine. Your navigation should use clear vocabulary, have a manageable and easy-to-understand structure, and provide users with a rewarding payoff.

Clear Vocabulary

If there is a simple and obvious label for something, go for it. When a site uses a branded label instead of a more obvious term, usually in an effort to feel warmer or more distinctive, the user needs more time to comprehend what might be behind it. This also means that it will require more space in their working memory to recall what it means the next time they see it.

This isn’t always bad, but remember what we talked about: cognitive load accumulates, and for better or for worse each additional instance of extra thought will color the user’s experience.

Easy-to-Understand Structure

You may have heard rules like “nothing should be more than three clicks away,” but having a hard-and-fast numeric rule is not only impractical, it’s impossible. It’s not the number of clicks or steps, it’s the productivity of each click or step that matters.

If your site is small, a three-click rule might work just fine. But if you have a large site, adhering to this rule can result in dense lists of links — the clicks are fewer, but now the user’s cognitive load has increased because they have to expend more effort to read.

Rewarding Payoff

Adhering to good conventions whenever you can means a better payoff when you don’t. Users are more amenable to expending effort if they feel it’s worthwhile and they aren’t already frustrated. BREAK THE RULES. Architectural anarchy is our mantra.

Let’s bring it all together.

Here’s a project that applies all of the above principles.

We collaborated with Framingham State University to overhaul their site from scratch. A key driver of the redesign was demonstrating just what differentiates FSU within the higher education landscape, and providing prospective students with an engaging view of the lively campus culture. This required a momentous content creation effort on the part of the FSU team, and it was paramount that we create a navigation scheme that stayed out of the way of their new work.

Quickly understood top-level labels (About FSU, Academics, Admissions & Aid, and Student Life) are complemented by carefully considered secondary navigation treatments. Take a look at the Admissions & Aid landing page, which includes a collapsible section navigation (filled with short, familiar labels) and a simple interactive feature for identifying your ideal starting point (productive clicks). All of our choices were confirmed through thorough usability testing.

We titled our remaining top-level section “The FSU Difference.” This title does not immediately suggest what content it contains the way “Admissions & Aid” does, but the immediately familiar navigation and naming conventions throughout the rest of the site mean that users explore this section without friction. Our rule-breaking name rewards users with the best, most unique aspects of FSU.

Go forth and make good web.

Ultimately, users are at your site for your content, not your navigation. And ensuring that the navigation supports their goals gives your story space to shine through!

(Because electricity makes light shine and your navigation is electricity. Concluding rimshot.)