Your website navigation is essentially a map that guides the user around your website. In the simplest terms, it should clearly label information included in your website and provide links to this information.
Therefore it’s important to display this very key part of your website correctly! Here are eight top tips on how to design your website’s navigation:
1) Keep it simple
Since the navigation is the user’s ‘map’ to your website, you want to make sure you keep this as simple as possible. Clear fonts, simple design and as little text as possible will make your website’s navigation accessible and user friendly.
2) Choose the right menu type
The content of your navigation may well determine the type of menu you use for your website’s design. For example, if your menu doesn’t include that many items (fewer than 7), it may only be necessary to have the standard single navigation bar, where all page text links can be seen at the top of the page. However, if your website requires a lot of menu items, it may be best to put these in a vertical menu, which allows for more menu items without looking cluttered or taking up too much space.
3) Stick to what works
Although it’s always good to be innovative in your website designs, it’s probably best not to mess about with the standardised design of the menu too much. Web users have came to expect the website’s navigation to be found at the top of the page, with a list of text links to other pages of the website. Try not to play with these ideas too much by putting the navigation somewhere unexpected or using some unusual form of displaying menu items e.g. symbols or images. This will confuse users and probably cause them to become frustrated with the functionality (or lack of) with your website. If it ain’t broke, don’t fix it!
4) Make it obvious
As well as ensuring the navigation is in the usual expected place on your website, it’s also important to differentiate it from other content on your web pages. An easy way to do this is to put it in a box of a different colour or simply ensuring your nav’s content is in a contrasting colour. Another way to ensure it doesn’t get confused with your content is to use a different font/a different variant or weight of our website’s chosen font, or even just caps for the text in your nav. The last thing you want is for your users to get lost trying to find the map to your website!
5) Don’t over clutter it
It’s important to make sure you only include important links in your navigation. If possible try to limit it to 7 items. If your website has a lot of content and a lot of different pages and this isn’t possible, you may want to consider a drop down menu. Johnson Tucker is a good example of a website where the nav is a little cluttered. This website has not one but TWO different menus, which could become confusing for the user and dominates a lot of space in the design. A solution to this could be either dropping some unnecessary items from the menu(s) and compressing it into one menu, or putting all the menu content into either drop down, mega drop down (the more user friendly option) or hamburger menu (the more aesthetically pleasing option).
6) Sticky or not sticky?
That is the question. A sticky menu (or fixed scrolling menu) is a menu that ‘sticks’ to the top of the page as the user scrolls down. This is especially useful if the web page is very long or even infinitely scrolling, as it means the user always has quick and easy access to the website’s navigation without having to scroll all the way back to the top. However a sticky menu may be unnecessary or even a hinderance if you want the web content to take centre stage.
7) Think about the order
This isn’t so much a design feature, but still important. You want the most important items to appear either first or last on your navigation, as these are the items that will stick in your user’s mind the most. For example if yours is an eccommerce website, you’ll most likely want your users to navigate to your products, so it would make sense to put ‘Products’ as the first item on your menu. Similarly, often ‘Contact’ is last on most website’s navigation, as this a key page for most websites and putting it last on the menu items will make it easy to find for users as it isn’t lost within the other items.
8) Hamburger
No, not that kind! The hamburger is a menu design that has been taking the internet by storm in recent years, mainly due to the rise of mobile friendly and responsive design. Most users instantly recognise the 3 lines making the ‘hamburger’ shape as a menu. When clicked the hamburger expands out, revealing the website’s menu. This is a great space saver, which is what makes it particularly popular with mobile friendly design where space is limited.
