Whitespace over Vertical Bars for a Minimalist Navigation

by on 11/16/10 at 7:44 pm

Around the web there’s a common habit of websites using vertical bars in text navigations. The purpose of using the vertical bars is to visually separate each navigation link. However, a close and detailed look at vertical bars in text navigations tells us that there’s a cleaner and simpler way to visually separate each link.

An adequate amount of whitespace does the job better. It’s a minimalist approach that allows the text to have a stronger signal. Unnecessary vertical bars degrade the text signal and adds noise to the navigation. The vertical bars get in the users way when they’re scanning. They act as a visual impediment that not only looks messy, but creates more elements for users to look at. Users shouldn’t visually fixate on the vertical bars. The navigation text should demand their full focus and attention. When you remove the vertical bars, and instead only use whitespace, the visual signal of the text is stronger. This keeps users focused on what matters most.

When should you use vertical bars? Vertical bars are useful for separating unrelated groups of links. The example below uses vertical bars correctly because it’s used to show the related groups. The vertical bars make their mark at the end of a grouping, making it easy for users to visually process the navigation.

Designer’s should never overlook whitespace. Whitespace itself is a design element. Most of the time, it’s all you need for visual separation. Using anything more than what you need creates visual noise that can affect the performance and look of your website.

16 Responses to “Whitespace over Vertical Bars for a Minimalist Navigation”

  1. jordisan

    Nov 17th, 2010

    I’m not sure about this; is there any study supporting that conclusion?

    I mean… vertical lines help users to identify this line of words as a me, snupecially when there’s no other visual clue. Moreover, what happens when any of the options has more than two words?

    Maybe this should be studied more in detail…

    • anthony

      Nov 17th, 2010

      Why do you need a study to tell you how to think? Simply use your own mind. Reading the entire article and thinking about it will help you understand it better. As to your question: “…what hap­pens when any of the options has more than two words?”

      When a link has two words how many spaces are in between them? 1 character space. So, when you space each your links out you should use more than 1 character space (like the example shows). You’ll need an adequate amount of whitespace so that users can distinguish each link. Remember, whitespace itself is a visual element.

      • Mark

        Nov 18th, 2010

        Judging from your other responses on this website, you really seem to be against testing your ideas to see if they’re applicable.

        I’ve seen some downright terrible ideas perform way, way better than my ideal design-friendly options in A/B testing. I go with the metrics over my personal taste when it comes down to it.

        • anthony

          Nov 18th, 2010

          If you want to test it, go for it. What you call personal taste is what I call reason.

      • John Dvorak

        Nov 18th, 2010

        I can’t believe that anyone claiming to represent UX or usability could possibly discount the relevance or importance of testing and evidence-based decision-making. There is a good reason why professionals have, for decades, been reiterating the importance of not assuming that all users share the designer’s preferences or use patterns.

        • anthony

          Nov 18th, 2010

          Testing has it’s time and place. What you get from testing is quantitative data. What you don’t get is qualitative data. For this, you have to have good taste and good reasoning abilities. I think this article meets both of those.

          • Lance

            Aug 30th, 2011

            Sorry. I have to go to bat for Mark. This article is not stating things as an opinion. It is declarative. A large part of a UX specialist’s job is convincing designers, developers, and PMs to do something different because it will benefit the user. We need solid grounds when making these recommendations.

            A friend of mine who is remaking herself into a designer sent me this article since I often post UXmovement articles to facebook. She said she looked all over for documentation backing up the article and found none. She writes to say, “I read several articles and noticed a complete lack of references or mention of any studies or testing. Nothing at all to back up their statements of what is most useable. I don’t think I’ll be spending a lot more time at this site.”

            And sadly neither will I. My recommendations are based on research. I can’t afford to accidentally make the wrong recommendation based on something I read on this site.

  2. ruymanfm

    Nov 17th, 2010

    So, what about that accesibility principle (WCAG 1.0) wich explained that two words with different links mut have a character between them? Do you think that´s not necessary anymore?

  3. Sarah Bourne

    Nov 21st, 2010

    Current accessibility best practice is to do as Anthony suggests here, with two caveats. First, be sure to markup each menu link as a list item and use CSS to position them in a horizontal line. For the example with a dividing mark, you would put the menu items in two separate lists. This means they are not adjacent for the purposes of WCAG. Second, if you need to use a dividing mark (i.e., can’t provide sufficient white space or to separate two adjacent lists) use a background image or character so screen readers don’t verbalize it.

  4. Will Quick

    Nov 22nd, 2010

    “Testing has it’s time and place. What you get from testing is quantitative data. What you don’t get is qualitative data. For this, you have to have good taste and good reasoning abilities. I think this article meets both of those.”

    Yes, but without access to qualitative data to draw conclusions from, you’re basically pulling ideas out of your arse (to use an English colloquialism).

    I personally agree with what you’re saying about the whitespace being better than the horizontal bars. Nor do I agree with the suggestion that you’re discounting testing as a necessary part of design.

    Testing is pointless if you haven’t first of all used logical reasoning to come up with different variations to test… good post, nice food for thought!

    • Cliff Tyllick

      Nov 25th, 2010

      Will, I actually have tested this a number of times over the years.

      In tests of home-page redesigns and in a number of online applications, I have observed participants get to information faster when negative space (the background isn’t always white) and not a character is used to separate items in a menu displayed horizontally. Replacing pipe characters with adequate negative space has an effect comparable to that of replacing a table grid that overwhelms the data with a grid that recedes and allows the data to stand out.

      Can I give you numbers? Unfortunately not. Much to my chagrin, we process data only to the point needed to make a specific design decision. But I can tell you that the difference is real, because, largely due to the fact that we don’t write up full reports, we’ve done this same study under different scenarios many times.

      Sarah, thanks for pointing out the accessibility issues associated with extra characters used essentially for formatting. I am going to look through our site and make sure we actually have rooted out that bad practice wherever it was once used.

      • anthony

        Dec 1st, 2010

        Cliff, thank you for supporting my article with your real-world experience. I completely agree with your approach on testing.

  5. Thomas

    Nov 24th, 2010

    Great article and good, simple advice.

    I do not believe anyone here is denying testing as such, but hey, take it easy and give the guy a break. There is nothing to support a claim that this is NOT good sense – how about prooving that instead? Maybe the ones jumping all up and down defending “professional UX” use these vertical bars all the time and don’t like hearing that they are noisy and can be avoided.

  6. Andrew

    Dec 2nd, 2010

    Like all design decisions, it depends on the specific site and placement, there isn’t one over-arching rule. I think that if a list of links is in a header and LOOKS like a navigation bar, like the navigation on this very site, then lines are less necessary.

    However, If a navigation bar can’t have other design elements to hold its links together as a group, such as a background tone, pipe separators can be very beneficial in accomplishing that, like the footer links on this page. Otherwise, the links could float awkwardly.

    Also, if the navigation bar is crowded, and you can’t have sufficient space between links, lines are essential. I just really think it depends on the context.

Leave a Comment