The navigation is a crucial part of your website’s design. It’s not only the way for users to get around your site, but it immediately lets a user know what you do, what products or services you offer, or just generally what they can expect to find within the site.
A poorly planned or executed navigation can be the cause of a bad user experience. In this post, I’m going to cover best practices and a variety of options for modern navigation design. A good navigation can be key in creating a positive user experience and could ultimately lead to a lower bounce rate and higher conversion rate.
Best Practices
Let’s cover some best practices for website navigation:
- Keep it concise. When you design a site’s navigation, you want it to be easy and painless for the user. You want to avoid a cluttered navigation that offers too many choices. Limit the number of menu items and guide them in a logical way. If your site has a lot of pages that you need to cover, we’ll cover some solutions for that later in the post.
- Keep it clear. Avoid any elaborate or sales-y language in your navigation. You want to keep it familiar for your users so they can easily decide where they are going. If you have an unclear title for one of your menu items, that may lead to confusion for the user and they will have a harder time getting to where they need to go.
- Keep it out of the way. With some exceptions, the navigation should be a small part of the overall design. Your site’s focus should be on the content. Keep horizontal navigation’s height to a minimum. Screen real estate is valuable and shouldn’t be taken up by a giant navigation bar.
- No, you don’t need your logo bigger. Your logo is an important part of your site and branding. It lets people know that they’ve landed at the right place, and it reinforces your brand awareness. However, you should keep it minimal in size. After a user’s initial visit to the site, the logo doesn’t have much of a function. You’d be wasting screen real estate by having this large logo and subsequently increasing the size of your navigation bar.
- Don’t have a “Home” menu item. Link it to your logo image. This is common knowledge nowadays and people will easily know how to navigate back to your homepage. Having “Home” as a menu item really just causes clutter and takes up space that could be used by a more important menu item.
- Consider a “Sticky” navigation. A sticky navigation is one that remains fixed at the top of a user’s window as they scroll. This allows the user to easily navigate to another page without scrolling all the way back to the top of the page.
- Put less important links in the footer. Things like Careers, Blog, and Terms of Service menu items might be better placed in the footer. The top navigation is valuable real estate, so make sure not to clutter it up with menu items that don’t need to be there. You may consider things like careers important, but people who are interested will be willing to work and find those links. The footer is a common place to put items like that, so don’t worry too much about sticking them down there.
Navigation Styles
There are a number of ways you can design your website’s navigation. I’ll cover a variety of the most effective and common website navigation designs.
1. Standard Top Navigation
This is the most commonly seen layout. The logo is aligned to the left and the menu items to the right. You can’t really go wrong with this. As with any design, keep it clear and concise. It’s common to have the call-to-action menu item (such as contact, free trial, etc.) in the far-right corner so doesn’t get lost within the other items. Many sites turn that menu item into a button or design it in such a way to make it stand out and seem more important. This layout also keeps the navigation unobtrusive and creates less distraction from the content of the site.
2. Standard Top Navigation with Top Bar
A variation of this layout allows you to have more menu items in the navigation and call out certain menu items. It’s a great option for making a call to action more obvious while clearing up some space for other menu items. It’s also a useful place to put log-in, account, or shopping cart links for e-commerce sites.
3. Centered Navigation
This layout has the logo centered, with the menu items on either side. This one is a bit more stylistic and places more emphasis on your logo. This can be interesting layout visually, but won’t work for every site. It requires an even number of menu items, otherwise the design will be unbalanced and look bad. You can create some segmentation with the menu items as well (which can be good or bad depending on the situation).
4. Centered Logo with Split Navigation
This works well for minimal sites with a strong emphasize on a call-to-action. What this layout does is isolate the menu items from the call to action. It’s great for product or simple software sites with only a couple of pages, whose goal is to get you to take an action (buy a product, start a trial).
5. Logo with Hamburger Only
This is a very modern trend and won’t work for every site. A “hamburger” menu is the loving nickname for the three-lined symbol that users can click on to reveal a site’s navigation menu. Typically, a hamburger menu is utilized only for the mobile version of the site (since there isn’t much room to list the menu items horizontally). Some sites choose to use the hamburger menu at desktop sizes as well, showing only the logo and the hamburger icon. This makes for a slick, incredibly minimal navigation that puts all the focus on your content. The downside to this is that it’s still a relatively unfamiliar trend, so it might confuse the user. It also requires the user to do an extra click every time they need to navigate to a new page (unless the pages have links to each other within them).
A well-designed hamburger menu can function as its own page essentially. They often take over a large part of the user’s screen (or often the whole screen) to fit contact information, messaging, as well as navigation links.
I really like this style and I think we’ll see more of it in the future, but for a site focused on conversions or a site that isn’t minimalistic, this navigation style may be too unclear and trendy.
6. Dropdowns and Mega Menus
Dropdowns have been around for a while, and are a great way to handle a site navigation with a lot of menu items. When you hover over the initial menu item, a sub-menu will appear below it. This works great for things like a list of services, products, or anything that can be grouped under a single menu item.
A mega menu is essentially a glorified version of a dropdown. You most commonly see this on e-commerce sites where there are too many menu items to fit under a simple, vertical dropdown. Mega menus can be designed to fit multiple columns, messaging, or pictures. If designed well, a mega menu can function as a tiny landing page, giving the user some context for the options within the mega menu.
7. Side Menus
Another layout option is a left-aligned side menu. This menu takes up the entire height of the screen, with vertically stacked menu items. This layout can be tricky, and you’ll have to weigh the pros and cons to see if it’s right for your site.
Pros. With the side menu layout, the content of your site is vertically uninterrupted. This works great with large, portrait-oriented imagery. I’ve seen this layout used on many condo building or real-estate sites that need to feature taller/more square-shaped imagery. I’ve also seen it work really well on restaurant sites, allowing the height of a food/drink menu to fit comfortably. It can also become more of a design element in your site.
Cons. This layout does take up more space than the typical horizontal navigation. You really have to be mindful of how long the titles of your menu items are and how large the font size is. Otherwise, your menu will take up a disproportionate amount of space (unless you intentionally make it part of your design). Dropdowns and mega menus are a little harder to execute. You also won’t be able to design with full-width imagery/sections.
With all these choices to consider, designing a navigation can be an involved process. I hope these tips help you design a site that provides a great user experience.
