The key elements of website design - #3 navigation

Tuesday 21st February 2023 by Paddy

As we discussed in our last post, visitors to your website are unlikely to hang around for long if their site experience is poor. Not being able to find the information they are looking for quickly would be a major cause of frustration for visitors. The ability to navigate effectively through your site information is therefore imperative for any successful site design.

Firstly it should be acknowledged that there are no set rules for designing your navigation – the navigation systems you use will differ depending on the information you believe your visitors are looking for and how you wish to guide them through your site. If you design with clear goals in mind (e.g. what information will visitors be looking for/do you want to promote) and ensure that your navigation systems provide access to that information in an easy, obvious and consistent way then you won't go far wrong.

That said, there are some general navigation options and these are detailed below along with guidelines for how to use them.

Top/Main Menu

This is the main navigation area which is usually placed on the top right hand side of website designs. This would usually contain the major categories of information that your visitors would be looking for (e.g. About Us, Products, Pricing, Contact, Sign Up/Register etc.). You might wish to style one of these in a different way to act as a call to action for your visitor. For example, you might wish the style a “Sign Up” option as a button to make it stand out. For consistency, the main menu usually remains the same regardless of where the visitor is on the website.

Secondary/Side Menus

Sub-category pages of the main menu items are often included either as a drop down list from the main menu, as a side menu to the left hand edge of the design or both. For example, under an About Us menu, you might have the following sub-category pages as a drop down/side menu – Our Journey, Meet The Team, Why Choose Us.

A number of sites use third and even fourth levels of sub-category. For example, About Us (main menu) > Meet The Team (second level) > Meet Our Directors (third level). However, adding extra levels of navigation increases complexity and the possibility that the visitor might get lost in the site. Therefore I would urge caution before using more than two levels of navigation.

Footer Menu

As per its name, this navigation menu most often appears in the footer area of the site. Typically it will contain legal information (privacy policy, terms, registered address etc.) but, for sites with lots of content, it may also include links to some of the key pages on the site.

Breadcrumb Menu

This is usually contained on one line at the top of the main content area of your site page. The idea is that the visitor can see a visual representation of where they are on the website and give them the ability to jump up a level of navigation. This is easiest to explain using an example:-

If the visitor has reached a “Meet The Team” second level page in the “About Us” main menu section, then the breadcrumb would show:-

Home > About Us > Meet The Team

The visitor could click on the “Home” or “About Us” links to jump to those pages.

Burger/Mobile Menu

This is the push button that you see in the top right hand side of many sites when viewed on mobile screens (often represented by three short horizontal lines). When you click on this button, the main menu items will appear to allow for easy navigation on smaller screens.

Some sites will show both the main menu items and the second level options as soon as the buger menu button has been pressed. Other sites choose to hide the second level options until the main menu option has been selected. If you have a small number of total pages on your site you may want to show both the main menu and secondary menu options once the burger menu is pressed. Otherwise, just show the main menu options and hide the secondary pages until the main option has been selected.

Search Facility

This is an option which allows the user to search your site content quickly and easily, by-passing your menu structure altogether. It is a very important tool for improving the site experience for vistors and, as such, we will discuss this feature in its own right in our next blog.