by anthony 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.