Menu navigation exists to help us find content and it should be simple and intuitive.

When looking at a website, our expectation is to navigate with ease and have a great experience but unfortunately, not every site is designed as well as it should be. Part of my role as a senior web designer is to ensure that the user knows where they are, where they have been and where they are going! Designing a solid navigation system is without question one of the most important aspects of designing a website. Hopefully the below will shed some light on the fundamentals of navigation, popular styles and why it's important to follow web conventions.

1. Navigation planning

When beginning any project think of Maria from the Sound of Music and the line – "let's start at the very beginning, a very good place to start". In the case of web-design and particularly menu navigation, the starting point is figuring out what kind of features the website offers and the hierarchy in which information should be displayed. A website menu in its early stages is typically referred to as a 'sitemap' and this is usually put together as a diagram or spread sheet to show the different levels of information. There's no right or wrong when it comes to creating a sitemap, in fact we encourage our clients to work with whatever format they feel comfortable using. Typically, we see sitemaps come through looking like the examples below:

Google doc or Excel spread sheet:

1.1-Sitemap-excel

Diagram style:

1.2-Sitemap-diagram

Word doc list:

1.3-Sitemap-word

2. User friendly language

It is also important to consider menu navigation language and labelling. With so much competition on the web, it's no surprise that we try to get creative with our copywriting but sometimes this is at the expense of clarity. Your site may be industry-specific however, it's important not to forget about the user and how they would interpret or understand what you do. For instance if you were to label a shop area 'Marketplace' this is not a term that users are familiar with and hence it leaves an opening for interpretation. Any link that takes more than a second to figure out or language that forces the user to click in order to discover what's available compromises user experience. If you're keen to see which wording will perform better for your primary navigation you can put some A/B testing into place. More often than not, it's best to keep your primary navigation simple and easy to understand and if you're wanting to add personalisation then why not try this with pop-ups and notifications? The example below from Spread Shirt exemplifies clever copywriting to encourage users to provide feedback.

Spread Shirt

2. User-friendly-language

3. Don't re-invent the wheel (use web conventions)

The reason why conventions exist is because they are based off ideas that work. Once an idea is known to work this usually results in such a large following that it then becomes a common language. Design conventions work so well that you can look at a website in a completely different language and still partially navigate your way around. The only time you should ever break from conventions is if you have a better way of doing something, for example if you have a campaign site, it might be more appropriate to do something non-conventional with the menu. Take a look at this example below and click on the menu icon. This works because it encourages users to play and interact with the campaign.

Flat or Not

3.1-Dont-reinventthewheel

Here's another example of some non-conventional navigation whereby the hamburger menu is used in the footer for an alternative function. Personally, I think this works well for this particular site due to the condensed sitemap – it creates an unusual way to navigate through the projects. The experience across devices is particularly nice – as you scroll down the colour of the menu bar changes with the colour of each project.

Build Amsterdam

3.2-Dont-reinvent-the-wheel

4. Primary navigation

Primary navigation should stand out and be consistent throughout the site. Typically, a main menu will sit along the top of the page in the centre or aligned to the left or right of the page. Another way of identifying a main menu is the way it is treated: the main menu is usually designed to contrast against everything else so that your eye is easily drawn to it. Here are some great examples of primary navigation design:

Zeis Excelsa

Simple in style and centred along the top works perfectly for this gorgeous site that utilises bold and vibrant imagery.

4.1-primary-navigation

Los Angeles Times

Interesting left-hand navigation with a scroll bar and a second level that slides out to the right.

4.2-primary-navigation

Cadbury Fundraiser

Cadbury are known for their purple brand colour so it's nice to see this swatch applied to the primary top navigation. Simplicity works well for this campaign site and when you scroll down the page the menu converts to a slim, sticky menu.

4.3-primary-navigation

Auberge Handfield Country Inn

What makes this left-hand menu design so striking is the custom font treatment and the overall size allocation. The bold typography and strokes capture your attention with high contrast against the navy blue side panel.

4.4-primary-navigation

City of Melbourne

Top and centred navigation contrasts well with charcoal as the base colour and bright green for the active states.

4.5-primary-navigation

The Gify's

A solid left-hand navigation design that stands out well on a black background (The content on this site is also highly entertaining so enjoy the gifs!).

4.6-primary-navigation

5. Link the logo back to the home page

This might seem obvious, however it's not uncommon to find sites that fail to implement this function.
The common convention for logo placement is the top left hand corner or centred along the top and the logo is also known as a link back to the homepage. This is a convention that is best followed as it is so widely implemented.

5.link-logo

6. Responsive navigation

Responsive design is considered to be one of the best ways to make your website look great on any device and part of this trend is using a compact navigation style called the 'hamburger menu'. This icon is made up of three slightly separated horizontal lines and has been likened to a hamburger because when you deconstruct the main elements, you're left with two slices of bun and the meat in the middle. Admittedly this is quite abstract symbolism so if you don't work in the digital space then you probably wouldn't be familiar with this term but you would be familiar with the icon itself.

The whole reason the hamburger menu came to be was because there needed to be a way to navigate on mobile without taking up too much space. The hamburger icon became the solution thanks to its compact size and ability to be tucked away in the top right or left hand corner. The functionality of a hamburger menu can vary from site to site, but essentially it functions by sliding in, sliding down or popping up. As the hamburger icon has become a well-known convention you may start to notice some sites that don't bother to change this style on desktop. You wouldn't find this on content heavy sites but you may start to notice this across boutique agencies or campaign sites. Below are some examples of sites that use the hamburger menu across all screen sizes:

When designing a hamburger menu it's important to design the menu levels clearly so that the user doesn't get confused on how to navigate. This is not such an issue on desktop however once you're viewing a menu like this on mobile the navigation can become a little confusing. Our recommendation for a menu that drills down up to four levels is to use arrows that look like buttons so that the user can tap on the menu item or tap on the arrow button to expand.. Colour and indenting text can also be used to distinguish the level of navigation. Below are a few recent examples of menu navigation design for mobile that use this style:

Blue Cross mobile

With the desktop site recently launched, the next phase of the project is an adaptive mobile design and here is a preview of how the navigation is coming along.

6.5-responsive-navigation

 

Children of Parents with a Mental Illness

Another site we are currently working on is Children of Parents with a mental Illness (COPMI) and here's how the navigation is looking for mobile.

6.6-responsive-navigation

 

7. Fat footers

Generally this space is reserved for privacy and legal links however it has also become quite standard to display email sign up fields, address details and social links. Most people want to know whether having a full sitemap on display in the footer is a good idea or not. If the user has to scan through the footer links to find what they're looking for then perhaps the AI is not working the way that it should. That being said, the footer is typically the last port of call for many visitors. Plenty of websites still use this method and in my humble opinion it tends to be used for sites that are quite content heavy or retail sites where displaying the security icons and methods of payment is quite crucial. Not only can a large footer serve up helpful links for those who like to navigate at the bottom but it can also work as a design element to frame your layout. Butterfly has designed a few sites that utilise large footers and this approach was appropriate mainly because of the amount of content and also the large footer complimented the design layout. Here are some examples of larger footers below:

YMCA NSW

7.1-footer-navigation

8. Sticky navigation

Sticky or fixed navigation is essentially a website menu that is locked into place so that it does not disappear when the user scrolls down the page. You can implement a sticky menu for any website, it just comes down to whether or not it's suitable for both the design and navigation purposes. Personally I quite like when sites with small sitemaps use sticky menus - however I'm also quite impressed with the way ING Direct integrated a sticky menu into their website design. Below are some great examples of sticky menu designs to be inspired by:

Huge

8.1-sticky-menu

9. Indicate where you are

It's always a good experience if you can see where you are within a site whether the menu is highlighted, breadcrumbs are visible or the main banner image displays the page title. I'm quite a fan of the highlighted menu treatment; it's simple and obvious leaving no room for confusion. Here are some examples below of sites that clearly show where you are:

Melbourne Emporium

9.1-indicate-where-you-are

Artspace

9.2-indicate-where-you-are

Chifley

A beautiful looking website that shows you where you are with a simple underline stroke on the primary navigation.

9.3-indicate-where-you-are

IWSML

This content heavy site shows you where you are at all times using a few different methods such as breadcrumbs, banner images and a tertiary navigation module displaying the page title.

IWSML2

Bluecross

This site also uses a range of techniques to show you where you are and the visual banners are a striking feature that really draw you into the page.

9.5-indicate-where-you-are

Below is an example of a website that uses some lovely mega menus however once you get to an internal page it's not immediately obvious where you are:

9.6-indicate-where-you-are

10. When to use mega menus

Mega menus are large navigation panels that typically drop down or fly out from a global nav bar. While they're not appropriate for every site, mega menus can create a great navigation experience for a user when done well. The main benefit of a mega menu is that they facilitate the display of many options at once. Mega menus can use icons and pictures as well as typographical hierarchy to make scanning easier. So when are they useful? In my opinion I think mega menus work well for retail sites where the category lists are quite large and would not look great in a standard dropdown menu. They also work well for sites that have a large list of services like Virgin Australia or ING for example. Butterfly has designed a couple of sites that utilise mega menus however this approach has only been carried out when deemed appropriate. Below are some examples of some striking mega menu designs.

Conclusion

Menu navigation is an integral part of web design and it's important to create well-thought-out solutions based on your clients' needs. To summarise the hot tips, here is a checklist to take away for your next web design:

  • Plan your sitemap thoroughly at the start of a project
  • Over-arching rule - users should know where they are, where they are going and where they have been!
  • Provide a variety of navigation options
  • Follow web conventions
  • Don't be afraid to keep a hamburger menu display on desktop sites if appropriate
  • Use simple user friendly terms

Blog sources and inspiration

http://blog.htc.ca/2013/09/03/web-design-conventions/
http://designbit.co.uk/2009/02/27/design-with-web-conventions/
http://www.bkmediagroup.com/blog/item/116-web-conventions-creating-a-user-friendly-navigation
http://netaccountant.net/website-design-for-accountants/web-design-conventions/
http://blog.teamtreehouse.com/popular-web-design-trends-for-responsive-navigation
http://bradfrostweb.com/blog/web/responsive-nav-patterns/#top
http://frankchimero.com/talks/what-screens-want/transcript/
http://www.smashingmagazine.com/web-design-navigation-showcases/

Go back to Design