Navigation

Whitespace vs. Vertical Bars for Separating Links

Many websites have a common habit of using vertical bars in their link navigations. The purpose of using vertical bars is to visually separate each navigation link. However, a closer look at using vertical bars tells us that there’s a cleaner and more efficient way to visually separate links.

A better approach to separate links is to use whitespace. This is because it allows the link text to have a stronger signal in the user’s eye. Unnecessary vertical bars degrade the text signal and adds visual 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 scan. Users shouldn’t fixate at all on the vertical bars. The navigation text should demand their full focus and attention. When you remove the vertical bars and use whitespace, the visual signal of the text is stronger.

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 are used at the end of a link 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 link separation. Using anything more than what you need creates visual noise that can affect how users view your website.


Book

Affiliate

elegant wordpress themes

This Post Has 16 Comments

  1. jordisan Reply

    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 Reply

      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 Reply

        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 Reply

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

      • John Dvorak Reply

        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 Reply

          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

            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 Reply

    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 Reply

    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 Reply

    “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 Reply

      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 Reply

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

  5. Thomas Reply

    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 Reply

    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 Reply

Your email address will not be published. Required fields are marked *