Making an awesome navigation menu

header

Designing your website’s navigation is arguably one of the most important things that could make or break success with your website. People are surprisingly able to put up with a fair bit if it is easy for them to get to what they want. So today, we are going to discuss some best practices for a common, but often overlooked element – the navigation menu.

1. Content should drive the design

Visitors to different types of websites have to accomplish vastly different tasks. Website content is thus to a great extent dependent on these tasks. Navigation menus, on the other hand, help place road markers for users, quickly pointing them to the right sections to accomplish their task. And so, there is no silver bullet when it comes to designing a navigation menu. What works for one website simply wouldn’t work on everything.

For example, it might be sufficient for a services company to have their entire site navigation on the top-level menu. However, the same would be a cluttered mess for an eCommerce site, where the top product categories would help to guide the user through looking for what they want.

Samsung does a good job of this. Despite the very different products they are involved in, their navigation bar just whittles it down to their top four product categories on the left, and other common tasks on the right.

samsung

2. Thanks, Captain Obvious

While there are many places you can be creative on your website, the navigation menu probably isn’t the place to do it. Using a icons like the magnifying glass for searching or a heart/thumbs up for ‘liking’ something is something so common that most internet users don’t have to think about what they mean. The same goes for text – ‘Store’ and ‘About’ is fine, you really don’t have to innovate on those things.

 

3. Use links, not button images

In the past, where CSS was still in its infancy, many sites used button images to help links stand out on the page. However, these button images no longer make the grade. Not only are they unsemantic, making them less search-engine friendly, but they are also harder to update and load more slowly. On top of that, they are less accessible for the visually impaired too. With the wide availability of customizations through CSS and custom fonts, there really is no reason to use button images these days.

4. Hide the search input field until required

A recent trend that has emerged to reduce visual complexity on the navigation menu is to hide the search input field until it is needed. For sites that are not heavily dependent on search, this is a great idea so much so that many from Apple to the Washington Post has embraced this idea.

apple

5. Use a sticky navigation menu for long sites

If you have a lot of content on each page of content, it is often useful to have a navigation menu that sticks to the top as your user scrolls down. This lets them quickly hop to different sections of your website without having to scroll up. If you’re not a fan of having the navigation bar cover part of the screen at all times, some websites use a fixed ‘jump to top’ link instead.

Fields marked with an * are required

Want to see more of posts like these? Subscribe to be updated with occasional highlights. Don't worry, we hate spam as much as you do - we will not share your email with third parties.


Comments