Ten tips for building a good website menu and navigation
There are some well-established principles you can follow to make your website navigation successful and meet your visitors’ expectations.
Successful website navigation gets your visitors to the information they seek as quickly and easily as possible. You have a website for a reason. You want your visitors to do something for you: read your blog, buy your widget, or join your movement. The last thing you want to do is get in the way of that conversion path.
Ask yourself what’s more important. Though it might feel exhilarating and avant-garde to break the rules and play with people’s expectations, there’s good business sense in attracting and keeping your visitors’ attention, not losing it or frustrating them. Getting lost is never fun.
Through the years, conventions have arisen around what goes where on websites. Other best practices are defined by the most difficult of customers: human psychology
1. Think of your website as an information hierarchy
From the first page, building a website is an exercise in prioritizing information. While the first websites were exercises in politeness, welcoming you to the site and thanking you for visiting, site owners soon discovered that visitors are much more interested in whatever brought them to you in the first place.
The homepage tells the user what the site is about, and does it quickly. The other pages on your site elaborate on the same theme and answer the visitor’s follow-up questions.
Your visitor will likely have a preconceived goal when visiting your site. By portioning out the information, you help the visitor on their way. On each page they visit, they ask themselves whether they’re closer to their goal. Your job is to give them the information they need to make that decision.
The path into your site is a path into more and more detail. Imagine your website is a tree, and your visitors start on the trunk, then move out onto a branch, find a twig, and then exactly the leaf they were looking for!
2. Remember the oldies — but never forget the newbies
Oldies and newbies are not elderly and young. They are people of any age, but with different levels of experience using your site.
The oldies know your website already. Oldies won't be your focus when building a good navigation system unless it is to save them time (though that’s a good reason, too!). They already know your site’s menus and information hierarchy. They can use the website's main menu to quickly navigate where they want to be.
The newbies are the ones you have to focus on. They don’t know your site, and if they don’t find what they’re looking for on their first visit, they’re unlikely to return. That means your navigation’s primary function must be to help them find their way.
3. Don’t let the menu replace content
It’s easy to mistake the navigation as a self-explanatory map of your website. If it’s a map, it’s one you must carefully unfold. This is especially true on mobile devices, where space constraints hide away your menu — unseen — behind a hamburger icon (yes, the three horizontal lines, usually in a top corner are called “the hamburger”).
Link to pages with more information throughout the page’s content. Visitors use the page content to determine if they are heading in the right direction. If they read about something that catches their attention, clicking a link in the text there and then is much quicker than having to look up the right page in the menu!
Make sure that the content of every page summarizes and links to all the page’s subpages, as well as relevant pages elsewhere in your tree of information. That’s also true for the homepage, which is the place where you introduce your website’s overarching topics.
4. Carefully select the main navigation items
Your website’s main menu should be short, concise, and unambiguous. Make sure you think carefully about which items you will put there. Since it’s usually found at the top of the page and often stays visible when scrolling, it is a crucial entry point for navigating your site.
To start, try to answer the questions Who?, What?, and Where?. Here are some answers you might recognize as the same (or similar to) terms used on websites you visit regularly:
- Who is About us
- What is Products (manufacturing), Courses/Study (education), etc.
- Where is Stores, Campuses, etc.
There might even be an answer to How?, such as Register, Getting Started, or Support.
5. Strike a balance between generic and specific
To help new visitors, your menu items have to be generic enough to be understood without prior knowledge and still specific enough to be useful when choosing where to go. This can be very hard to perfect.
Though you might never find the perfect balance, it’s a good idea to test your assumptions and ask friends and family to be guinea pigs. People with limited knowledge of what you do are perfect for simulating a real user’s experience on a site.
For example, if you have the navigation items “Library” and “Resources,” what are they? A library is full of resources, so — even if it’s clear to you — most people won’t have the context to be able to differentiate. Better not to use those words for different pages on the same menu level or near each other. Menu items that are difficult to differentiate are confusing and work against your goals (get your visitors where they want to go — or where you want them to go).
6. Limit the number of items in a menu
An old rule of thumb is to limit a choice to a maximum of five items. Apply this guideline to your main menu and on every submenu below that.
This limit is not a law of nature or anything close to the whole truth. However, it does represent the number of items we humans can comfortably hold in our heads and compare at any one time. If you end up with one or more menus with many more than seven items, stop and consider if your navigation structure needs more tweaking. Are there better ways to organize the pages?
When you use longer menus, ensure you organize them in a way your visitors can recognize and make use of. Long alphabetical lists, for example, are clearly preferable to disorganized randomness. Another good tip is placing the important keyword first in each item’s label text.
7. Don’t play snakes and ladders with dropdowns and submenus
Helping or leading your visitors to their goal quickly and effortlessly, does not mean presenting all the information at once.
Sacrifice completeness for presenting your users the most important, most commonly sought, or most useful information first. Link to more detailed information, as we said, from your main pages.
Dropdown menus and layered submenus allow for quick navigation but can also lead visitors astray. This is especially true if you require your users to go through some kind of process to arrive at the right choice.
Large, comprehensive menu systems, obscuring important information, can prevent your visitors from making the right choices.
8. Present a way back
What do you do if you’ve come to the wrong place? You search for a way back. Maybe not all the way back, but back to a place where you think you might have made the wrong turn. A good website helps its visitors get both there and back.
Here are three common aids for finding the way back on track:
- Breadcrumbs are built into most modern websites. They are a horizontal list of links placed close to and below the website’s main menu. It shows the path back to the homepage by listing the current page’s hierarchical descendant pages.
- A Home button at the left side of the main menu leads the visitor back to the homepage if you don’t have breadcrumbs. Otherwise using the website’s logo as an unstated “Home” link is fine.
- Listing alternative or related pages at the end of the page content can be a powerful way to lead people on if they haven’t found what they’re looking for on the current page — or if they want to learn more. It’s usually a heading and a short text, sometimes in combination with an illustration. They can also be secondary menus or lists of linked pages or article titles.
9. Prime your secondary menus
Many websites have more menus than the visually prominent main menu. These other ones are called secondary or utility menus. They can serve a specific purpose, such as choosing a language, logging in, or accessing your user profile.
But secondary menus can also be a way to access frequently used pages quickly or to show alternatives and related pages. They can even appear in the middle of a page. Using secondary menus can improve the user experience — especially on larger sites.
Most websites also have menus in the footer, at the bottom of each page. Frankly, the footer is so important that it deserves its own tip!
10. The footer is the beginning of the next step
When you’ve reached the bottom, is there nowhere else to go than up? No, there is more! The bottom of the page is a place of opportunity! Prime real estate at the bottom of every page on your website, brimming with opportunity.
Reading the footer is what visitors do when they have looked at the entire page. That’s either because they think they’re on the right path, but they didn’t find exactly what they were looking for, or because they found the page interesting enough to take it all in.
Use the footer as the place for good advice of your website: Where to go next. Important calls to action. Subscribing to your newsletter. Make your footer a place that drives new business your way.