Post Featured Image

Smarter Than the Average Navigation Bar: Tips, Tricks and Advice

Navigation, at least when it comes to UI and UX, is the cornerstone of your website. Even if your audience lands on a specific page you painstakingly designed, it’s the navigation bar or menu that’s going to be used to move elsewhere.

Simply put, there is no limit to how good, optimized and engaging your navigation can be. If there’s one element of your site you’re always striving to improve, it should be the nav bar.

In light of that, here are some tips, tricks and best practices you can use to spruce up your own nav bar or nav menu.

  1. Hide the Search Field

Instead of having a full search field that spans the width of your page or sits directly above your nav bar, save a little space by hiding it.You can do this easily by making it interactive. When you click on the field, it opens up and allows you to type in content. When you’re not using it, have it collapse into a smaller icon or section.

Obviously, testing its functionality will be necessary to improve the customer experience. If it takes too long to open or use, it’s only going to frustrate your visitors. That said, it’s not a necessary element that needs to remain visible at all times, especially considering the nav bar, by nature, will have links to all the most important sections and pages of your site.

  1. Sticky Navigation Compliments Scrolling

Thanks to mobile browsing and the standard design of social media sites, long-scrolling and single-page infinite scrolling sites are quite popular. It makes sense from a UX standpoint too, because your audience can just keep scrolling down without needing to navigate elsewhere.

The issue, however, is dealing with nav bars or nav menus with this sort of design. If you place them near the top of the page —which is the standard for web design —your users will have to scroll all the way back up to the top before going anywhere.

If you use sticky navigation, it will follow the user down the page.This puts the control in their hands, which improves their satisfaction and journey.

  1. The Nav Menu Structure Should Be Based on Content

If you only have a small handful of pages, there’s no reason to utilize an extensive drop down menu. The same is true if you have a lot of different pages and content —you don’t want a single drop down menu that’s seemingly endless.

You’ll want to structure the nav menu and choose a design and type based on the amount of content you’ll be hosting on your site. Sites with about six pages or less should stick with a single nav bar. 

Anything greater than that should be structured differently so as to be more convenient.

Look at how Newegg has structured its nav menu. Obviously, being a dealer of consumer electronics in many forms, it couldn’t opt for a single drop down bar. It’s extensive and includes a variety of categories and options, but it’s also easy to use and navigate, which is important. It doesn’t take away from the experience, but instead adds to it.

  1. Use Animation Wisely

Animation can make or break your design. If it’s too flashy or hinders performance, then it’s a waste. However, if you use tasteful animation elements, you’ll boost user engagement.

Check out how Formula Boats structured its nav menu on the models page. When you hover over each option you get a subset of selections, along with a visual representation of each boat model. It all works well and complements the site design very nicely.

  1. Stick With Industry Standards

This one is relatively simple, but you’ll want to stick with all the industry standards for icons, naming conventions and visual elements. For example, the search field or search bar should always be denoted by a magnifying glass icon. Why? This keeps things remarkably simple for your audience, and seamless across the web.

In other words, the nav bar or nav menu is no place to be creative or innovative. Stick with what everyone knows just to keep things easy and straightforward.

  1. Allow Navigation Backward, Too

Implementing a backward or back system to your nav menu can help customers immensely, especially on an e-commerce site where they’re browsing multiple product pages. You can do this easily with a Recent History section or by using a breadcrumb system. This is when you add a link-able list near the top of the page that shows the current hierarchy. 

Amazon does this well when you’re visiting product pages. Right at the top you can see the category, sub-categories and more.

  1. Offer Intelligent Recommendations

Somewhere on the page, you’ll want to offer recommendations or suggestions on where to go next. This helps build a successful funnel, but it also directs confused or lost customers.

For example, after explaining who or what your business is on an about page, you could direct visitors to reach out to the sales or marketing team for more information on your products and services.

The front page of Wal-Mart’s website has a small section for every user, showing off items or products that pertain to them. It’s the ideal solution for personalizing the experience to your audience.

Be sure to make your website’s navigation bar as effective as possible, and site visitors are more likely to get the information they need.

Lexie Lu is a designer and writer. She enjoys researching trends in the web and graphic design industry. She writes weekly on DesignRoast and can be followed on Twitter @lexieludesigner.

No comments (Add your own)

Add a New Comment


Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.