The Navigation Bar Is an Affordance, Stop Removing It

by on 01/12/16 at 9:51 am

background-img-nav

What do you notice about the website above? It doesn’t have a navigation bar. The text links are floating in space and obscured by the background image. Navigation is there for users to find what they want. That’s hard for them to do without the navigation bar.

The navigation bar is an affordance. Users rely on it like a safety net. When they see it, they know to go there if they get lost. When they can’t see it, they resort to page scrolling and link hunting. What’s the point of having a navigation if you’re not going to make it easy for users to see?

Background Image Is Not More Important Than Navigation

Many sites are removing the navigation bar in favor of an expansive background image. While this might have aesthetic appeal, you’re sacrificing an important usability function. Navigation are the legs of a site. Users will have trouble moving from page to page without it. They can’t use what they can’t see.

background-img-nav-2

Sometimes the background image can lower the text contrast in the navigation. This makes the button labels hard to read. Users won’t click what they can’t read.

Stop removing the affordance that users need to navigate your site. Your background image is not more important than your navigation bar. Leave it in so that users can use it to find what they want quicker.

Links Blend in With Page Text Without the Bar

A navigation that isn’t obscured by a background image is better, but still not ideal. It’s easy for users to mistake the navigation links for page text without the bar.

links-blend-text

The function of page text and navigation links are different. Separating them avoids confusion. The bar is what separates links and text, so that users know what they can click versus what they can only read. Without the bar, the links get lost in the page text.

links-blend-text-2

The Bar

There’s no clearer affordance for navigation than the bar. When they can see it, they’ll use it. When they can’t, they won’t. Getting lost without a map makes you feel helpless. Users feel the same way getting lost on your site without a navigation bar. A thin, modest bar is all it takes to make that feeling go away.

modest-nav-bar


Our Products

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

Affiliates

Elegant Themes UX T-Shirts

Author and founder of UX Movement. Founded this site to help you learn user experience design for a more user-friendly world.

7 Responses to “The Navigation Bar Is an Affordance, Stop Removing It”

  1. James

    Jan 14th, 2016

    Along with the navigation bar don’t forget to implement a skip to main content link for keyboard-only.

  2. Lucas

    Jan 20th, 2016

    An affordance is the property that allows action, so a graphical element that acts as a differentiator is not an affordance.

    You’re presenting a matter of taste here as if it’s a hard and fast rule. The Airbnb example has its accessibility issues with legibility. Outside of that there is no direct demonstration of a problem, but just some wild guessing about the emotional state and action of users.

    • anthony

      Jan 24th, 2016

      A navigation bar is an affordance because it’s a “graphical element” that tells users that there are links in this area for you to click, therefore “allowing action” as you described.

      I didn’t know making navigation links easier to find and click was a matter of taste. I think most UX designers would disagree with you on that.

      • Brian McCann

        Jan 29th, 2016

        Good article. I am sick and tired of having to explain to designers why removing the nav bar in favour of the hamburger menu icon, on desktop websites, is bad for users and generally lazy design. I will use this article instead. Thank you.

      • Jay

        May 19th, 2016

        Actually, Lucas is right.
        Affordance is something you can do with something. And clearly, you can use navigation links in sites that have no actual “bar” for navigation.
        Signifiers is word you should use, as “bar” signifies there is menu.
        I agree with the rest. We, designers, should implement signifiers that are ready and fast to read, just as navigation bar.

  3. Ky

    Jul 5th, 2016

    “Background Image Is Not More Important Than Navigation”

    Depends on the site’s objectives. Some sites have pages (and thus, nav) as a courtesy, but does not add to the achievement of objectives.

    If your objective is to brand build, or present a hero product/service – then the background image could be much more important than the nav.

    There’s so many possible outcomes here, it’s a very long bow to draw to just wrap every UX opinion up in a single statement like that.

    • Jules

      Jun 20th, 2017

      “Background Image Is Not More Important Than Navigation”

      Well said.

      I have never found a screen-filling picture helpful.
      It just signifies “work” – that this site is going to take a lot of scrolling – for very little pay-off.

      Compounded by hidden/unclear navigation (e.g. plain text floating in the clouds…..), such sites are an instant turn-off – time better spent on another site with clear, easy navigation.

      Pictures rarely “tell a thousand words”.
      Mostly they get in the way.

      Upon landing, I want maximum info in one view – and that means Content, Contents list and full Menu bar navigation.

Leave a Comment