Navigation bars are what many would call, essential. They’re the tour guide for your website, and users depend on them. And, like a tour guide, your navigation bar affects their experience, impression, and review of your website design.
It Anchors Visitors to Your Site
Navigation bars are familiar to web users. And web users like what’s familiar, especially on unfamiliar sites. Which is why navigation bars almost always take shape as a vertical menu on the left-hand side or as a horizontal menu at the top.
Smart web designers, such as yourself, also know that these two layouts appeal to how users read web pages.
To help users find your navigation bar even faster, you can make it stand out. Use a different font type, size or color to pull a user’s attention. Keep your navigation bar’s style within your website’s theme, though. Don’t make it outlandish or you may turn off users.
Another tactic that emphasizes your navigation bar is making it fixed. A fixed navigation bar is easily accessible for users and promises them a hassle-free journey in scrolling through your website.
An example of a fixed or sticky navigation bar is Measponte’s website.
“But their navigation bar isn’t on the left! And they won an Awwwards for it!”
Yes, Measponte’s vertical navigation bar isn’t on the left and it’s an award-winning site.
The site, however, does follow techniques for grabbing audiences. Their navigation bar’s color contrasts to the site’s background. The font style also contrasts, with a serif font for headings and descriptions, and a sans-serif font for the navigation bar.
The biggest influence is the site’s minimalist design. Few elements are competing for the user’s attention, which helps the navigation bar stand out.
While it’s fine to deviate from web design standards, you need to make sure audiences respond to your design.
It Guides Visitors Around Your Site
Once users find your navigation bar, it’s their guide to your website.
Don’t be overzealous in guiding users, though. If you overwhelm them with options, they’ll leave. Which is why it’s important to make your navigation bar intuitive, effective and easy-to-use.
And how do you do that?
Limit your navigation bar to seven items, for one. Humans can do a lot with their minds, but seven is the brain’s cutoff for short-term memory.
Place your most important content at the beginning and end of your navigation bar. Courtesy of the serial position effect, whatever is first or last in your navigation bar will receive the most attention. It’ll also be remembered the most, which is why contact pages are often listed last on a navigation bar.
Avoid drop-down menus. They’re difficult for search engines to crawl and they’re like a fly to users — annoying. Studies have also found that they make websites inefficient.
Ready for another example? This one doesn’t break any of the above suggestions, promise.
Villes and Paysages’ navigation bar commands the audience’s attention by displaying six headings across the homepage. Drop-down menus are non-existent. It’s a navigation bar with a layout that’s efficient to use and caters to viewer behavior.
Again, you’re appealing to your visitors. Appeal to them enough and you can convert them to customers.
It Informs Visitors About Your Site
Or don’t, and your site can contribute to the 50 percent of potential sales that are lost because visitors can’t find what they want.
Users visit your website because they want something. And an inept navigation bar isn’t going to help them. Which is why, as a web designer, you’re their only hope.
Striking text, pictures and white space can anchor a visitor to your website. Pictures, especially, can tell visitors about your site and your products, as its easier and faster to process images in comparison to text.
A site that incorporates all three of these techniques is not a Star Wars site. Oh, you missed that reference? Never mind then.
Moving forward, A-dam Underwear’s demonstrates how photos, text and white space can inform and satisfy users’ wants.
Sure, the site name suggests its products, but the home page confirms that A-dam Underwear sells underwear for men. The photographs, complemented by a colored text box, also show readers the various prints available. An additional bonus is that users can click these images to view the product’s page.
Which leads to the next benefit of a well-designed navigation bar: it converts visitors to customers.
It Persuades Visitors to Stay at Your Site
Yes, you can break the, “Location of the Navigation Bar Rule,” on occasion. But, don’t break the “Three Click Rule.” If you have a page that’s more than three clicks away from your homepage, then, please, take a moment and think about the error of your ways.
If you make it difficult for users to reach a page, they’ll find another website. And they’re judging your site from the first click. In fact, if their first-page selection is incorrect, 54 percent of users will abandon their search. In comparison, 87 percent will complete their search if their initial choice is right.
So, plan your website hierarchy, starting with the navigation bar. Think about what arrangements are intuitive to web users, and how those arrangements will direct the user to what they want.
Beoplay is an example of a website that’s done just that.
While the site has a full catalog of products, its navigation bar is committed to its newest product. The company’s assumption is that visitors want to purchase the latest item. Notice how the site also informs users through photographs and text.
It Directs Visitors to Your Site
Your navigation bar also impacts your traffic and search engine rankings.
Because your homepage has a high amount of link juice, or authority power, you need a navigation bar that’s concise and has appropriate headings. A navigation bar with concise and simple wording is more effective than one with complex or vague words.
Don’t take simple wording to mean generic though. Yes, headings like, “Products” or “Services” are familiar, but users aren’t searching for those keywords. You need to find labels, like through Google’s Keyword Tool, that are popular.
Thieb website is a good example of a site that’s deviated from generic wording.
Note the navigation bar heading, “Reel.” A similar term would be “Portfolio,” but it risks more competition in search results. “Reel” is simple, but specific, and focuses on a keyword in the film industry.
Always remember to pay an excessive amount of attention to your navigation bar. It’s the backbone of your website and you want a strong foundation.
Author:
Lexie Lu is a designer and writer. She loves researching trends in the web and graphic design industry. She writes weekly on Design Roast and can be followed on Twitter @lexieludesigner.
