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".
NAVIGATION PLANNING
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.
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?
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
