laptop on a desk surrounded by a potted plant, some small figurines and a colourful abstract picture

Conquer website navigation with these 19 best practices

Good website navigation is an important part of web design. When in doubt, follow proven website navigation best practices for a better user experience.

A solid website navigation system is one of the most important parts of website design. You need to spend the right amount of time to plan it and not just put a few links and buttons on your website as an afterthought. Whenever in doubt, follow proven best practices and you can’t go wrong.

What is a navigation menu?

The navigation menu is a list of content categories or features, that usually appears as text link or maybe as icon or a combination of both. The menu items are grouped together and are visually separated from the rest of the webpage.

One of the most important elements of website design is the planning and creation of the user flow. Even if your website offers excellent content and functionalities, if your visitors

  • cannot find them or
  • having a hard time to find them, they will leave your page.

 

You could try to mitigate this by adding a search bar, but you shouldn’t rely only on that as a navigation tool.

Navigation menus are such an integral part of websites that with a few exceptions you’ll find them on all websites. And you’re somewhat surprised, even confused if you land on a page that seemingly has no menus. The fact that they are present on almost every web page doesn’t mean however that they are always easy to use. It seems so simple, but you can often find navigation menus that are confusing for visitors, and aren’t intuitive to use.

And a frustrated visitor rarely converts. You’re lucky if they come back.

As with many things on the internet, the new technologies, devices and trends provide challenges and bring new solutions. You can see this also in the menu designs. 

It’s important to note that there’s no one for all method when it comes to the perfect navigation menu design. But if you

  • look at your statistics, A/B tests, and you
  • analyze conversion data, that will bring you closer to the best website navigation menu for your own business and customers.

 

I collected 19 website navigation best practices that can help you bring your website navigation to its best level.

1) Put your navigation in a standard place

When you visit a website, your expectation is to navigate it effortlessly and to have a great experience. Putting your navigation in places where people expect to find it, makes your site easier to use.

Navigation menus typically appear in the header navigation bar, sidebar, and footer. So make use of them when you plan your page layout. Remember that you don’t need to put a navigation menu to all three places. But you can if that suits your business needs best.

Also make sure that you don’t just repeat the same navigation menu items over and over again.

2) Make primary navigation stand out

Once you’ve decided on the standard places you’ll put your navigation menu, choose a design that ensures that your primary navigation menu stands out from the rest of the page. It should capture the attention of your visitors right away.

Consider

  • font choice,
  • font size,
  • font colours and
  • the background design.

 

The most common way to achieve this is when you place the primary navigation menu in the top header bar of your web pages. You can have it center aligned or to the sides. It depends on how many menu items you’ll have.

The below example from DCM Studio’s website shows a main navigation menu that is placed in the sidebar. Clearly an uncommon placement, but it works superbly. It’s clearly distinguishable from the rest of the page due to its dark background and it complements the overall design.

screenshot from DCM studio's sidebar main navigation menu

3) Use clear and descriptive label text

For your menu labels stick with a user friendly and descriptive language. The advantage is that this way both your visitors and search engines know what you mean.

If you’re offering products or services, instead of using generic terms on your navigation label (like Services, Products), try to go deeper and be more specific. Know your target audience and ideal client and use terms that are easy for them to understand:

Instead of Services you could use something like Website Design Services or Website Maintenance Services. That makes it clear for the visitor right away what sort of services they can expect from you. And they don’t need to click on a generic “Services” menu first to find this out.

Other examples could be: Products >> Hair Products & Nail Products. Or Formal wear & Office wear & Leisure wear.

If you want to introduce some creative copywriting on your web pages do it elsewhere. Your sales page sounds as a good place for that! Do not experiment with it on your menu labels.

4) Avoid format-based navigation labels

When writing your navigation labels avoid phrases like “videos,” “photos”, “e-books”. They tell visitors the format of the content, but not the topic they are about.

People visit business websites looking for answers and information how their paint points can be solved. And they rarely look on small business website for videos or e-books. Note that I’m not talking here about giant firms like YouTube or Amazon and similar companies.

5) Keep navigation menu items to a minimum

One of the hard decisions will be what exactly to put into your navigation menu. You have so many pages and content you want to draw attention to.

Keep in mind that fewer items in your navigation are actually good for your website visitors. As short term memory holds seven items, plus/minus two, that could be a good starting point for your menu design.

A further advantage of a short and concise navigation menu is that when downsizing your menu options, the fewer items you end up with, the remaining elements become more prominent. And the likelihood that they get clicked on increases.

You see this approach on the Jessica Haines Design website featuring a center aligned navigation menu that only lists four menu items:

  1. Portfolio – as her client would want to check her work experience;
  2. About – as they want to get to know her;
  3. Work with me – so that they can contact her for new project work; and last but not least
  4. Blog – where she gives free tips and advice for fellow Squarespace users.
screenshot from Jessica Haines design's minimal navigation menu

6) Plan the menu order strategically

When you work on the ideal size of your navigation menu in terms of number of links, also define a clear strategy for the order of your navigation labels.

I mentioned short term memory as an example above. And the next memory clue is that if we hear about or read a list of items – and what else is your navigation menu as a list of items – we usually remember and retain better the beginning and the end.

Use this to your advantage. Think about what could be the most important for your visitors when they come to your page and put those links to these places. 

7) Connect the navigation with your business’s priorities

While it’s key to please your visitors, also consider your own business goals. You want to direct your customers, clients to certain pages to drive conversions and boost sales.

Thrive for a balance between what interests your visitors and what would serve your business goals.

8) Avoid dropdown menus

For the average small business website you don’t necessarily need dropdown menus.

Usability studies show that dropdown menus are annoying for your website visitors. Imagine the following scenario.

Your visitor moves the mouse over a menu item. They probably have decided to click on it. And then it opens down as a dropdown menu and prompts them to make second choice. It interrupts their decision flow and you make them to decide again.

Also by using dropdown menus your visitors may not click on the top-level page or not as often as you’d like it. Because they go directly one level below.

Analyze your top level page that opens up a dropdown and if it contains important information make sure to link back up to it from your other pages. Otherwise it won’t get the necessary attention.

If you have a big, complex site with lot of content, or an e-commerce shop then mega menus can work to your favour. These are not like the average dropdown menu I was talking about above. But a more detailed, and more complex structure that facilitates the display of many options at once. They often use icons, pictures and a typographical hierarchy to make it easier to scan the content.

A very good example for such a mega menu design using all these elements is the Asos navigation menu.

screenshot of Asos' mega menu design

9) Link back to the home page with your logo

Placing your business logo to a prominent place in your website layout is an obvious step. So why not hit two birds with one stone and make that logo link back to your home page

Unless you have a less tech-savvy senior audience and target market, everyone knows and expects that your logo acts as a direct homepage link.

The advantage of using your logo as link to your homepage is that you can save valuable real estate in your menu bar. And you don’t need to add a HOME, or START HERE link there. You can use that space to link to any of your sales pages instead.

10) Add a search bar

Even if you seem to be sure you’ve done your best to create a flawless and easy to understand navigation menu on the top of your page, do not underestimate the power of a search bar.

It costs you virtually nothing and it can assist your website visitors to find a page or piece of content on your website. You can place a search bar to several places: on the top, in the side bar, to your footer. Pick what’s best for your business.

11) Add a fat footer

Footers usually contained legal links and some means to contact the website owner. Nowadays with the popularity of fat footers, the bottom part of your web page gains more and more importance. Fat footers became a feature heavy section that can contain not only secondary links, but e.g.:

  • email signup field,
  • address details,
  • map with driving directions,
  • social media links,
  • social media previews, like that of your IG field,
  • some sort of a human readable sitemap,
  • featured blog posts’
  • lead magnet, freebie offers.

 

Think about how a fat footer could serve your business. You can also put here links that you couldn’t find space for in your top navigation.

The Elementor website uses a fat footer that features:

  • a newsletter sign-up option,
  • social media icons,
  • copyright disclaimer, and
  • a detailed secondary navigation menu with a typographical hierarchy.

The dark background sets the whole section visually apart from the rest of the web page.

screenshot of Elementor's fat footer design

12) Separate sidebars visually

While a few years back it was kind of the norm, you find a lot of websites today without a sidebar. If you decide to use a sidebar on your website, make sure that it visually stands out from the rest of the page. Like your top or footer navigation. 

You can achieve this with various formatting options that would complement your brand’s theme and colour choice.

13) Consider sticky navigation

A sticky navigation menu is one that is locked into place and doesn’t move or disappear when your visitors scroll down the page.

Look at your business and website strategy and evaluate carefully if it would suit your goals.

The advantage is that the navigation menu is always visible. On the other hand it will always take up a fixed space on your page, thus less content will be visible on the screen without scrolling further down. Especially on smaller screen sizes a fixed top menu could impact user experience.

14) Show where they are in the navigation

A good navigation menu not only enables visitors to discover a website with ease, but it always gives visible clues to them where they are.

You can do this by

  • highlighting the active menu item with a different colour, font weight, etc.
  • using breadcrumbs, or by
  • displaying the page title in or above the hero section.

On my website when a menu item is clicked on, it’s

  • displayed in a different, light blue colour and
  • gets underlined with a bright yellow.

This indicates which web page you are reading at the moment. Also when you hover over any of the secondary navigation items under e.g. the blog section, that menu item gets highlighted as well.

screenshot of ARRA design studio's highlighted navigation menu

15) Use responsive navigation design

Mobile responsiveness is a must if you have a website. Always test and check that your website navigation renders well on mobile. It should be really easy with the abundance of website themes and templates available. Make it a priority to invest into one.

A mobile navigation menu can have different forms. Maybe it just gets tightened together compared to the desktop version. Or it transforms into a hamburger menu. The important thing is that your mobile navigation menu should be large enough so that it’s comfortable to tap on them on the touch screen.

16) Avoid buttons, use text links for navigation

When designing your header navigation avoid using buttons and use text links. Reserve the button design for Call-to-actions throughout your pages. If you use buttons for simple navigation purposes, the CTA buttons will loose their uniqueness and importance.

17) Add related content to recirculate traffic

If you have a big, complex website with lots of content, it’s a mission impossible to link out to every page you deem important from your navigation bars. On such big websites add related content to your key, top level pages, that give the visitor the opportunity to discover your lower level web pages.

Your aim should be to keep them long enough on your website, so that they can find useful information. And then they may be interested in coming back later, too. And to buy from you.

18) Make hypertext obvious

When someone visits your website, they won’t only use the navigation menu links to explore it. They will be directed to other pages by clicking on text anchor links as well. That is if you made those hyperlinks visually stand out clearly identifying them as links to other pages. 

You can use plenty of design techniques to make them prominent. Whatever you choose, make sure that all your text anchor links appear the same way throughout your website, and that you don’t use that design feature on anything else. Otherwise it’ll get confusing.

19) Analyze and optimize your website’s navigation

Lastly, remember to analyze and to optimize your website’s navigation over time. It’s not carved into stone that the first version of your navigation should remain the same for eternity.

Once your website is up and running, after a few weeks or months, take a look at your Analytics. Check which pages are the most visited ones. Check which pages serve as entry points and where do visitors drop off from your website.

Evaluate the Behavior Flow and User Flow reports to see which navigation items your visitors are actually using, and optimize accordingly. You could:

  • remove menu items,
  • include new ones,
  • move the order of the menu links, or
  • rename the menu links.

 

Just make sure to check again the impact of your changes after some time again.

Sources: CrazyEgg, Orbit Media Studios, Forge and Smith, Neil Patel, Butterfly, Weblium.

infographic listing 19 website navigation best practices

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email

Leave a Reply

Your email address will not be published. Required fields are marked *

You may also enjoy these articles: