Website navigation is one of - if not the most - important things your website/business needs. If your customer cannot figure out how to navigate your site to get to your product/service and purchase it, then how do you expect to make money? Also - if it seems overly complicated to your customer they will just give up in favor of another brand.
Here are 11 tips for improving your website navigation and ensuring happy, returning visitors:
1. Plan your navigation
2. Prioritize your pages
3. Stick to conventions
4. Consider creating a sticky menu
5. Limit the number of items in your menu
6. Create mega dropdown menus if necessary
7. Add a search bar
8. Label your menu clearly
9. Link the logo back to the homepage
10. Indicate what page the user is on
11. Ensure visitors can reach any page from any page
First things first. While websites differ in their content, design, and structure, there are a few standard types of 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.
Sidebars 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, it all depends on the feel of your website.
Split up menu: This relatively new web site trend breaks the standard menu by placing links to each page in the corners or sides of the screen.
Hamburger menu: While this is often seen on mobile web design, 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 screens). If you have a high-quality image for your landing page that you would like to show off, this design will help you see as much of it as possible without being too invasive.
Footers: The footer of your website 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.
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 a 'Home', ‘About’ and 'Online Store'. However, within your online store section, you may break it up into separate categories, such as skin care, hair products, and best sellers. This hierarchy should be presented in your sitemap.
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.
While it’s tempting to try to break the mould 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 menu to be located in one of the standard places - 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.
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 of 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.
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.
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 drop down from a classic navigation menu, offering you a whole array of options.
A classic example is E-Commerce 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.
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.
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.
Not linking your logo back to the homepage is a common website 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.
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.
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 good to go. 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.