Navigation bars are one of the most important features of a website because it's how users move around.
For this reason, navigations bars (often referred to simply as "navbars") should function well and be usable without site visitors having to think about it.
However, not all navbars are created equal when it comes to the user experience. To understand what makes a great navbar, it's best to first look at what makes a bad navbar.
I've come across many poorly designed navbars, and this includes on popular websites such as CNN and 9to5Mac.
One of the most common mistakes I see with navbars has to do with the amount of content squeeze into a small space (a.k.a. a cramped navbar).
Take a look at the navbar for CNN below. The text navigation links are spaced closely together, making them almost appear as if they're one sentence.
Similarly, the navbar on the tech website 9to5Mac has a navbar that includes too much content within a small area. To access some of the text links, you'll need to scroll horizontally by clicking the arrow on the right-hand side. This is annoying for anyone to have to do, and for this reason, I'm sure most people just don't bother.
Of course, the navbars we see at CNN and 9to5Mac may be more spread out and function well on larger screens since both sites are responsive, meaning they adjust based on screen size.
But that's still an issue because navbars should look good and be usable on any size screen. (This includes mobile, but I am focusing on desktop for this article).
Now that we've seen a few examples of poorly design navbars, let's look at some that feature a nearly perfect user experience design.
A good navbar means users won't have to think about how to move through a site's navigation. Links will be easy to select and actions will be clear.
A great example of a navbar that offers a positive user experience is found on the Vice website.
The Vice navbar features a stacked navigation section, with account sign-up and sign-in links, along with language selection, at the top. The second and main tier includes the Vice logo, along with a handful of main links and social media icons.
Vice was able to reduce the amount of content within the navbar by moving less frequently clicked navigation to a hamburger (or sub) menu. This can easily be found next to the site's logo.
As a result, the Vice navbar is clean and generously spaced, and this makes it easy for users to navigate through the site.
Another example of a great navbar comes from The Guardian. As a site with a large amount of news content, keeping The Guardian's navbar clean is essential in improving usability.
Similar to how Vice implemented a submenu, The Guardian focuses on the most prominent page links within its main navigation section, while a submenu expands to include additional page links.
The Guardian also utilizes stacked navigation with its logo, search, sign-in and sign-up links, and country selection all located at the top. Page links are within the bottom section of the navbar and are spaced out, allowing for a great user interface.
Designing a great navbar comes down to a few key features—limited content and generous spacing.
No one should have to spend time searching for the right place to click. A great user experience means visitors are more easily able to make their way around a site without having to think.
On the web, navbars are on every page. This means designing a navbar that allows for a smooth user experience is essential.