Website Navigation: Best Practices, Tips and Examples
Imagine the scene: You’ve been wanting to treat yourself to a new laptop bag for a while. Finally, you get the time to sit down, browse different designs online and pick your favorite. After many deliberations, you’ve found the perfect bag and want to make your purchase. But then - horror of horrors - you can’t locate the “Buy Me” button, the shopping cart icon has disappeared, and the return policy is nowhere to be seen. It all seems far too complicated, and eventually, you give up in favor of another brand.
This is a classic example of how website navigation can make or break a user experience, ultimately affecting traffic, conversion and bounce rates. When creating a website, take into account that many different aspects go into forming a good user experience - from the visual appeal of your site, to its layout, your use of text and more - but ease of navigation is a key factor.
A website with good UX design and navigation can help users find the content they’re looking for, and offer them a positive experience that will encourage them to return.
Here are 11 tips for improving your website navigation and ensuring happy, returning visitors:
Plan your navigation
Prioritize your pages
Stick to conventions
Consider creating a sticky menu
Limit the number of items in your menu
Create mega dropdown menus if necessary
Add a search bar
Label your menu clearly
Link the logo back to the homepage
Indicate what page the user is on
Ensure visitors can reach any page from any page
Types of website navigation
First things first. While websites differ in their content, design and structure, there are a few standard types of website navigation menus that you know and can recognize throughout the online world. These widespread norms, while open for interpretation, help users find their way around the website with ease:
Navigation menu in the website’s header: This is a classic menu that appears at the very top of each page of your website, generally running horizontally across the screen.
Sidebar menus on the left or right of a website: This is a list that is located on the side of your page. It can be minimal, or can take center stage and become an integral part of the design, like on graphic designer Beeple’s Wix website.
Split up menu: This relatively new web design trend breaks the standard website menu by placing links to each page in the corners or sides of the screen.
Hamburger menu: While this is often seen on mobile navigation, this simple three line icon is now being seen on many desktop versions of websites, too. The hamburger menu offers a minimal icon that doesn’t interfere with the website’s design and is especially useful when real estate is limited (like on mobile devices).
Footers: Your website footer is a great place to add your social media links, and any other important links that site visitors may find useful. It can also repeat the navigation menu at the top of your page.
01. Plan your navigation
Some things are best done spontaneously. But when it comes to creating a website, a little forward-thinking is definitely a necessity. Before you delve right in, clarify which features and pages your website requires, and what their hierarchy should be. Do you need an ‘About Us’ page, a blog or an FAQ section? Which of these pages is most important or valuable for your site visitors?
To plan your menu according to your needs, create a ‘sitemap’. A sitemap is a list of all the main pages of your site and all the sub-categories within them. It should clearly indicate which pages are more important and which less so. Your sitemap will form the base of your navigation menu. To create one, you can use any method you find most comfortable - you can write it by hand, present it as a flowchart or diagram, or type it out on a spreadsheet.
For example, if you’re creating a website for a cosmetics brand, your main pages could be your homepage, ‘About’ section and online store. However, within your online store section, you may break it up into separate categories, such as skincare, hair products, and best sellers. This hierarchy should be presented in your sitemap.
02. Prioritize your pages
When deciding on your hierarchy, consider where you want to lead visitors to and how you can best direct them through your funnel, eventually converting them to customers or fans. In addition, think about what information your visitors are most interested in. This is called your ‘primary navigation’ and it should be as easily accessible as possible. All the pages that make up your primary navigation should appear in your site’s main menu.
Even within your menu, you’ll have pages that are higher and lower priority. Once you’ve prioritized your pages, it’s time to convey this in the navigation menu design, making the most crucial pages stand out. A good method for doing this, and a general rule, is that the items that appear first or last on a menu attract more attention, so that is where you should place your high priority pages.
If your website holds a lot of information, you may also need an additional menu for your secondary navigation pages. These pages are less important, but of course still require clear navigation. This secondary menu should attract a little less attention, using smaller type and perhaps a less contrasting color.
03. Stick to conventions
While it’s tempting to try to break the mold and create a never-before-seen design, there are times when it’s best to stick to what people already know. After all, there’s a reason why hyperlinks generally appear blue and underlined, or why a logo will usually be placed in one of the top corners of a website. These familiar nuances, or ‘design conventions’, exist because they work - it’s as simple as that.
When it comes to navigation, you want users to be able to seamlessly glide through your website with as much ease as possible. Even if the content, the products or the design are completely new to them, they’ll still expect the website menu design to be pretty standard - in the top corner, or in the header of a website.
Of course, there are times when you can break away from the norm. Try to only do this if it serves your purpose or message. See how illustrator and artist Rose Blake combines a standard menu at the top of her Wix website with a menu in the form of illustrations that you can click on to discover more of her works.
04. Consider creating a sticky menu
A sticky menu (also referred to as a ‘fixed’ or ‘floating’ menu) is a menu that stays put even as visitors scroll down your site. This is especially important for long-scrolling pages, as you don’t want visitors to have to scroll all the way back up just to get to another page. However, there is also the option of adding a ‘Back to Top’ button that will help users save time. Whichever solution you go for depends on your website’s design and layout, so take into account the different options when considering the most convenient form of navigation for your site.
To create a floating menu on Wix, you can simply go to ‘Add’ on the left-hand side of the Editor, then ‘Menu’ to choose which menu style you want to go for. Next, right-click on your menu and choose ‘Pin to Screen’.
05. Limit the number of items in your menu
No one likes to be bombarded with information. It’s hard enough trying to stay focused when browsing the web with all the distractions that pop up. Keep your menu minimal, with a maximum of six or seven categories. This way, users will be able to process the information better and reach their desired pages faster.
If your site contains lots of information, you can break it down into sections using a dropdown menu. This means that when visitors hover over one item on your menu, a list of sub-categories will come up that they can choose from. However, try to avoid dropdown menus where possible, as when users click on an item in your menu, they expect to go straight to another page. The extra step can be a slight “hiccup” in the user experience.
06. Create mega dropdown menus if necessary
While we do recommend limiting your menu items, if a website contains a lot of content, that’s not always possible. In such cases, you can create a mega menu. Mega menus are large lists or panels that are a type of classic drop down menu, offering you a whole array of options.
A classic example is eCommerce websites that sell many different products. You don’t want to include all of your products in the menu, as this will look cluttered. Instead, you can separate your products into categories, allowing for a more orderly browsing experience. If, for example, you have a website for a fitness center, your main menu may include an item that says ‘Classes’, with a mega dropdown split into sub-categories, like ‘Aerobics’, ‘Stretching’ and ‘Pregnancy Classes’. Under each of these sub-categories would be all of the specific classes.
To avoid any confusion or information overload, you can use design tools to create hierarchy within the potential chaos. Play around with typography styles to make the sub-categories stand out - you can make them bold, slightly larger, or a different color than the text beneath them. You can also add some extra space around them so that visitors understand the separation.
07. Add a search bar
Another option for content-heavy sites is adding a search bar. It can do wonders in helping users find what they want faster. Remember that your web design needs to serve an audience with a decreasing attention span that expects everything to work seamlessly, without having to wait around too long. A search bar can also be useful for visitors who have less experience surfing the web, as it’s a familiar concept that they can instantly understand.
In terms of the placement of your search bar, keep it more or less in line with your menu. It should be in your website’s header and, like the menu, can stay fixed in place when visitors scroll down your site.
08. Label your menu clearly
Now that you know which items will appear in your menu, it’s time to decide on the exact wording and labelling for each one. Being creative with your microcopy (the little bits of text throughout a website or app) is great, but you also need to make sure that your user will quickly understand what you’re talking about. Your menu is not the place to get wild with your wording or to use industry jargon. Rather, the text should be descriptive, to-the-point and above all, clear.
If you’re not completely sure which wording will work better, you can try out two different versions and test them out by performing A/B tests on your site.
09. Link the logo back to the homepage
Not linking your logo back to the homepage is a common web design mistake that can be easily avoided. Your menu does not need to include the word ‘Homepage’ in it. Instead, add your business’s logo at the top of each of your website’s pages and link it to the homepage. This will be highly intuitive for most of your users, as it sticks to web design conventions.
Often, logos appear on the left-hand side of a website’s header, but the exact placement varies. The most important thing is that your logo will appear at the top of your site, in fairly close proximity to your menu. If you don’t have a logo, you can use one of the recommended online logo makers.
10. Indicate what page the user is on
People generally don’t like to be disoriented, and the same goes for your website. You can improve your user experience by making it clear to the user where they are on your website. There are a number of different methods for this.
You can either include a big title that can’t be missed, add breadcrumbs (a textual list containing all the pages you visited in order to get to where you are right now), or simply highlight the page you’re on in the menu. This last option is subtle and doesn’t cause any clutter to the page, like breadcrumbs could potentially do.
You could indicate the page in the menu by making that item a different color, bolding the text, underlining it, or any other creative option you can come up with that doesn’t grab too much attention.
11. Ensure visitors can reach any page from any page
A final tip and rule of thumb is that visitors should be able to navigate to any page they desire, from any page. Remember that not everyone will necessarily reach your site from the homepage. This means that any other page they land on should connect to the rest of your website.
An easy solution is simply to ensure that all pages are accessible from the menu. And if every page includes a menu - well, you’re sorted. To make things even easier and more intuitive, keep the website menu design consistent on every page, placing it in exactly the same spot so as to avoid confusion.
By Dana Meir
Design Expert & Writer