How you design the navigation labels and the structure of your website are incredibly important.
These small things impact the usability of the site, which in turn will affect whether or not the site will achieve its goals.
Navigability of a site affects the amount of traffic it sees. The easier the site is to use, the higher it will rank in search engine listings, and the more people will see it. It will also effect conversions, helping turn site visitors into customers and leads, the holy grail of commerce sites.
We have created a list of website navigation best practices to help you figure out the best way to design your website navigation.
These site design tips and tricks highlight not just what to do, but also common mistakes, and will help you design a site that will draw visitors in and help you achieve your goals for the website.
Avoid Using Format Based Navigation
Using extremely simplified navigation labels like ‘photos’, ‘videos’, and ‘whitepapers’ will tell site visitors what kind of format the content of those pages are in, but it won’t tell them the topic of that content.
Most people are not just going to a website for whitepapers or videos alone. They’re looking for information or answers to particular questions.
Use more descriptive labels, like ‘Meet our Team’ instead of the simpler ‘Team’. This will be more personable and will allow search engines to better understand your page.
Avoid Using Drop-down Menus
Drop down menus are hard for search engines to crawl through, depending on how they are programmed. Many visitors also find drop-down menus annoying. People move their eyes faster than they move their mouse cursors.
Once people mouse over an item, they’ve likely already decided that they are going to click on, but with a drop-down menu, they suddenly have more options to choose from. It causes a kind of mental hiccup.
Limit the number of menu items to a maximum of seven.
Having hundreds of links on a home page is overwhelming. Having fewer is good for your search engine results. More sites will link to your homepage than anything else, granting it more “authority”.
It flows downward to other pages on the site via navigation design. If there are too many links, this authority gets diluted and your interior pages are less likely to rank.
More concise navigation design means that your pages are more likely to rank in a search engine listing.
Keep Body Hypertext Obvious
Hyperlinks in the body of your page—that is the part of the page that is not the header, sidebars, navigation bars, or footer– should stand out.
You should make sure these hyperlinks are a distinctive color. Blue is the most common, but you can use any color as long as it stands out. You need to avoid using that color in any other text to make sure that visitors don’t get confused.
The hyperlinks should also be underlined, another common and expected website design practice meant to catch a viewer’s eye. Because of this, you should avoid underlining another kind of text, using italics and bold for emphasis instead.
Streamline The Navigation Bar
The site’s navigation bar is essentially a map of the site. You should only have one navigation bar to avoid confusion. It should be a horizontal or a vertical navigation bar.
Even if you have a lot of links and a very complex website, it needs to be organized so it can be navigated with one bar.
Use Readable Fonts
Put yourself in your users’ shoes. You enter a website which has a weird font in its nav bar. The immediate action that follows is to exit the site.
Pick only readable fonts. There’s no point in using a fancy font just because you thought it was cool.
Keep The Sidebars Separate
A sidebar is not a navigation bar, but it can easily be confused for one. Sidebars should only be used for external links and other extra features. Never use it for links for primary site navigation.
The best location or a sidebar is on the right side of the page. This has been the universal location for a sidebar and what users are more accustomed to. Most languages are read from left to right, so primary info like your navigation bar should be kept on the left, with other information like your sidebar on the right.
Save Space by Hiding Away the Search Input Field
Since the primary navigation bar can become full very quickly, you should try to streamline it by hiding the search field. The most common way to do this is to tuck it away behind a magnifying glass icon.
Most users automatically know what this image means so don’t worry about it confusing anyone. If the site is easy to navigate or doesn’t have a lot of content, most users won’t need this feature, but it’s always smart to include in case they do or you plan on your site growing.
The amount of content should determine the type of navigation menu
There is no set format for the navigation menu of a website. Every site is different, and the navigation menu should be tailored to the specific website design.
A website with a smaller amount of content (around 6 pages at max) can be fine with a single simple navigation bar that displays all the page text links at the same time.
Sites with more content, however, will need a more complex navigation bar. E-commerce sites typically fall into this category. These sites should use a mega menu.
These menus are not traditional dropdowns, but rather have large menu items with subcategories linked under them. These more specific options are hidden unless a user needs them so that the user is not overwhelmed. Unneeded options are simply not displayed.
The Brand Logo Should Navigate Right to The Homepage
The logo on your header or navigation menu should not simply be an image. It should be a quick, easy way for a site visitor to get back to your homepage with just a click.
This will be very helpful to navigation, allowing visitors to be able to easily restart their search into the deeper parts of your site if they want.
Use Visitor’s Flow reports
Google Analytics provides Visitors’ Flow reports to help site owners get a sense of which pages are the most important on their website.
It’s not a highly differentiated report, not distinguishing regular traffic from customer traffic, but it is a very helpful tool that can help you figure out how to streamline and structure your navigation options.
Site navigation is a vital element of website design. Pay close attention to it as you create your site. You should also remember that there is an exception to every rule. Remain flexible as you design your site and modify it over time.