Website navigation design: What you need to know (plus 5 best practices)

Navigation design is the cornerstone for your website. It determines crucial metrics like conversion and bounce rates, time on page, traffic, and it can often be the deciding factor between your visitors having a good experience and exiting your website faster than you can say “user flow.”

But what does a good design look like? And how can you improve it once you have it in place? Let’s dive into exactly what website navigation design is, as well as the best tips for optimizing it:

What is website navigation design?

Website navigation design is the architecture of all navigational elements—it’s how your users find what they’re looking for when they get to your website.

To understand its importance, let’s use a metaphor: Imagine there are two clothing stores. The first one is in complete disarray. There are men’s pants sitting next to women’s shoes, children’s swimwear next to men’s ties. And worst of all, there don’t seem to be any signs or store clerks to help you find what you’re looking for.

The second store, on the other hand, is very straightforward. All clothing is organized by gender and size, there is plenty of signage directing customers, and clerks are standing by to answer any questions. Deciding which one to spend time at is an easy choice, right?

Good navigation is the difference between the disorganized clothing store and the organized one. To keep your site closer to the latter, here are some best practices to keep in mind:

5 best practices for good website navigation design

Website navigation is all about helping your users find what they need. When you address that, other benefits like SEO rankings and discoverability will follow. Below are five things to keep in mind when you’re approaching your website navigation design:

Tip #1: Plan out your website navigation design

Planning is essential. In fact, it’s probably the most important part of this process. You don’t just want to jump in creating navigational buttons willy nilly.

Therefore, be intentional about the process. That means sitting down, mapping out all of your website’s content assets, and deciding how you want to link to them.

Card sorting:

One of the best ways to go about this is to take a look at your website’s information architecture—or how all of the content on your website is arranged and structured. You can do this through a card sorting exercise. To do this, write down all of your content elements onto cards, give them to target users, and have users arrange the cards into groups that make sense.

There are two types of card sorting you may want to employ:

• Open card sorting: You create your cards, give them to your research participants, and then ask them to group the cards. They then label the groups.

• Closed card sorting: You create your cards and give them to your research participants along with a list of groups you’ve created. Then you ask the participants to place the cards into groups.

Remember: It’s important to actually work with your target users for card sorting. After all, you might have biases when it comes to your site navigation.

[Read more: Four research techniques for website redesigns]

Tip #2: Map out your user flow

Before you decide on how to arrange your website navigation, it’s important to find out exactly what elements you’ll need to include in your layout. To figure this out, you’ll need to understand how your users will interact with and ultimately receive your website. Here’s where user flow comes into play.

A user flow is the steps in which tasks are completed on your website. Think of it like a traditional flowchart with arrows pointing from one decision to another until you ultimately arrive at your destination. They’re typically used to map out a singular intended result a user takes on a digital product.

Spend some time then mapping out your flow to make sure that it makes sense to your users. This allows you to design a “happy path” (or the best way to complete a task without errors or exceptions) for the most common goals to be accomplished on your site.

Overall, the user flow is intended to serve as a North Star for your design decisions. Once you have it, you can start to focus on what best serves the users’ needs—and ignore all of the rest.

Tip #3: Employ user-friendly text

All of your navigational copy needs to be clear and easy-to-grasp for your users—that means avoiding words that are vague or overly simplistic. Not only will the clarity help your readers navigate your site, it can also help your SEO.

For example, imagine that you have a website for your dog walking business. You wouldn’t want your navigation buttons to read things like “services,” because that’s not the term people search when they’re looking for your services. Instead, they’d search “dog walking,” “pet sitting,” or even “dog care rates.” See the difference? Where the first example is vague, the other examples are clear and defined.

[If you’d like more information on how to write winning UX copy, we’d like to help. Check out our resources on the topic below:

• 10 UX copywriting tips for designers
• Copywriting principles that’ll make new users love you
• 6 writing techniques to use in your web copy (and why they work)]

Tip #4: Use the hamburger (sparingly)

Perhaps there’s no navigation element more controversial than the hamburger menu.

While it’s useful for secondary navigational elements, you don’t want to completely rely on it because it hinders discoverability—and thus, your content.

Think about it: Here’s the process of a user interacting with a hamburger menu:

1. Look for a desired navigation element
2. Realize it’s not immediately available
3. Notice there’s a menu
4. Identify that it’s a hamburger menu AND that it’s clickable
5. Click that hamburger
6. Scan the list of additional menu items
7. Find the one they are looking for
8. Click it

That’s a lot—eight whole steps—for your users to do. And in the world of design, simplicity is king.

Now that’s not to say the hamburger menu should never be used. Instead, use it intentionally when you have elements to include that don’t directly serve the primary goals of your website.

Let’s look to an app, for example. Here’s a great one from Uber:

Uber knows that their users just want to order a car when they get to the app. Instead of burdening their users with things like “Past Orders” or “Legal” they put all those secondary elements in the hamburger menu.

[For more, check out our article on the 10 pros and cons of the hamburger menu.]

Tip #5: Follow the best practices for website navigation bars

Here are a few of the most common website navigation layouts:

Horizontal layout

A tried-and-true layout that works with a lot of different screens. This is especially good if you have a smaller number of web pages you want to link to—though you can employ it just as well if you have a massive website (like The New York Times above) as long as you have a good way to sort all of your pages.

Horizontal site navigation layouts also work well when combined with a drop-down menu option, for instance, when you have subsections for different topics. Check out a good example of that here from The Verge. 

Vertical layout

Vertical layouts are a fantastic, mobile-friendly alternative. They’re great when a website has lots of navigational elements.

Hamburger layout

We covered this in the last tip but it’s worth mentioning again here. The hamburger menu is a navigation layout for when you have secondary navigation elements that can’t fit on the screen.

Here’s a great example from Google Drive’s mobile site:

Fixed navigation layout

Fixed navigation has elements that follow the user as they scroll down the page. It’s a great way to keep your user oriented while making other parts of your website always accessible. But be careful: A fixed navigation can eat up a lot of a website’s real estate. Use it when you have only a few navigation elements so it doesn’t distract from your other content.

(And speaking of other content: Check out our great stories featuring design leads from some of the most innovative companies.)