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.

Toolkits