Day: May 24, 2020

Navigation is an incredibly important aspect of web design. Navigation refers to how visitors move around your site, whether this is through links or a menu. If the navigation on your website is too complicated visitors can be put off exploring further around your website. If you need more convincing check out our blog on why navigation is so important.

There are a few different options when choosing the type of navigation you want. Often this is a choice between menu styles, but there are other ways in which good navigation can improve your website. With such a range of templates and layouts that come with many website builders, it can be difficult to choose the right one. With Go Sitebuilder we want this choice to be easy, so read on to find out the best navigation style for you. 

Header Menu

The first, and most popular, style of navigation is using a header menu. As you can see on our website this is the style we opted for. A header menu gives the visitor a clear range of options as soon as they enter the website. This means that there is no additional searching for a menu option, making this style the most simplistic. A recent study found that header menus are 22% quicker to navigate than other menus. 

Some header menus are static (meaning that they stay at the top of your page as you scroll), whereas others move off the page as you scroll. Neither option is better or worse, but having a static menu means visitors can change pages easier. Often these headers have between 5-7 options to click on, more than that and the web design starts to look cluttered.

Pros of a header menu: 

• Visitors can easily find your menu
• Easy to organise your website into specific categories 
• Gives structure to your website 
• Allows visitors to quickly move between web pages 
• A very popular web design trend – for more web design tips read our blog on the latest web design trends

Cons of a header menu:

• Takes up space on your website
• Can be difficult to translate into a mobile format 
• Some prefer a more minimalist homepage with a smaller menu

‘Hamburger’ Menu

The ‘hamburger’ menu is often represented by 2 or 3 lines. When the lines are clicked on, the menu opens into the website, as you can see above with the Circles Conference website. Although this option is used less, there are still positive aspects to this design. 

The main reason this is chosen over a header menu is that this design is more minimalist and takes up less room on the homepage, which leaves more room for a bold header, as seen in the images above. Also, as this menu opens out there is more space and there can be more sections of the website. If you have lots of navigation options, a header menu can look cluttered, so a hamburger menu could make your web design look more streamlined. 

Pros of a hamburger menu: 

• A more minimalistic look
• A larger range of menu links 
• Easily transferable to mobile websites 

Cons of a hamburger menu:

• May be harder for a visitor to find the menu if they don’t know what the symbol means
• Visitors have to spend more time finding your menu

Drop Down Menus

Source: Asos

This option is often used for online shops as visitors may want to find a specific item. This example of the Asos website essentially has three menus. The first is the option between Women and Men, then they categorise the product by general product type such as clothing, then more specific fits or clothing types. This allows for multiple options when organising your website. 

However, unless you need lots of options an overly organised menu may distract from the content of your website. For example an accounting firm would not need as many options as a site such as Asos. 

Pros of a drop down menu:

• Site content can be organised into more specific categories
• A good way to organise for e-commerce sites
• Gives structure to your website 
• Visitors can easily find the menu and navigate through your website 

Cons of a drop down menu: 

• You may be tempted to make too make categories and over complicate your website navigation
• Not every website needs this many categories 

Whichever type of navigation you choose, remember these 5 assets of good navigation:

• How quickly can visitors change pages? 
• How easy is your menu to use?
• Does the style fit with your web design?
• Is it too complicated?
• Can your navigation be translated to a mobile site?

If you are ready to start building your website, then look no further than Go Sitebuilder. We offer a wide range of features including a range of design templates, which give you multiple navigation options. Our simple website builder design means you can have a professional looking website up and running in minutes. Try our 14-day free trial today!