Tips for Crafting Simple and Usable Website Navigation Menus

Sunday, February 23, 2014

Most designers would agree that it’s crucial to understand the purpose of navigation. Understanding what a typical visitor is looking for can influence the design itself. But you also need to construct layouts in an easy-to-use fashion that serves a greater purpose.

In this article I’d like to share a few design tips for building usable website navigation. There are many differing styles like vertical/horizontal lists, dropdowns, sliding menus, and other related features. This guide covers more general ideas which you should be able to implement regardless of design style. Try to keep these ideas in mind whenever you’re creating a new website.

Organizing Links

Before sketching or designing anything you should try making a complete list of the website’s pages. Think about tiered links and which menu items should be seen first. There are lots of sub-navigation designs like collapsible menus, breadcrumbs, accordions, etc. Make your design style fit the proper context.

Some websites may only need 4-8 top-tier links because they only have 4-8 pages. Other sites might use 200+ different pages linked under parents and grandparents. It isn’t uncommon to find websites using sub-sub-links with expanded nav menus.

Make this step the planning ground for your initial design concept. How would your idea come off to any typical visitor? Is it easy to understand from a distance? Once you have a detailed list of links in the proper order you can try out different styles and see what fits best.

Distinguishing Importance

Ensure that your primary menu is within close proximity to the top of the page. Any other menus should be scattered throughout as needed. But navigation is almost the central piece to any website – without links people can’t browse!

When finding a menu location you want to stay as consistent as possible. Make sure the primary navigation appears roughly in the same spot on every page. If a visitor already knows where to look then you’ve made their job a lot easier. It’s worth designing a unique color scheme or texture for the primary navigation so that it stands out from other links on the page.

Show Navigation Paths

When using sub-navigation it’s often a good idea to keep the parent link in a permanently selected CSS style. This way users know which navigation item is currently being viewed. This might not be necessary if the menu is very small. But this feature is beneficial to users in most circumstances.

If the project needs a lot of different pages then you might find value highlighting the current navigation link going down multiple sub-menus. You might also try breadcrumbs which may be coupled with the nav, or separately placed elsewhere on the page.

These are perfect to display a connection between parent and sibling pages. With some websites and eCommerce shops like Newegg visitors are allowed to search in different categories of merchandise. This can lead to a long breadcrumb trail of related links.

But you may not need to use breadcrumbs or selected navigation items. The most important thing to remember is to somehow show the path and let visitors know how they got onto to the current page. Not always pertinent but good to keep in mind nonetheless.

Snazzy Designs

Don’t be afraid of trying new ideas. Creative page elements, including navigation, keep people interested and show off your true skill level. This is why it’s best to list your pages first and then design the menu to fit your exact page structure.

The Mouse to Minx website uses a highlighted hover effect which makes the text almost look handwritten. It’s cute and very simple to pull off, yet to anyone who doesn’t build websites it may come across as flashy or complicated(in a good way). You don’t see this highlighter effect on many websites and this gives more unique definition to the overall layout.

Those tiny little effects go a long way towards building respect from visitors. It doesn’t seem like much, but the challenge of rising from good to great is in the details. Study traditional navigation first and try throwing your ideas into the mix. Somewhere in the middle of practicality and creativity is a harmonious solution.

Handling Mobile Users

One of the best pre-planning decisions you can make is building a fully-responsive website. This means constructing a layout which is fluid to expand or contract based on the browser’s width. Responsive navigation UI trends are always changing and you can learn a lot from examples.

If your responsive website uses a top heading bar you might toggle the navigation with a hamburger icon. But this link could also just read “Menu” and visitors will have the same reaction. Mobile phones are smaller than a monitor so you need to convey ideas quickly without much extra detail. Your extra design features should appear in the wider screen displays.

I like the example from You Know Who although it’s not perfect for every website. In fact it’s a very distinct example creating the iOS-styled tabbar within HTML/CSS. Thinking of your responsive website as if it were a mobile application might help you solve complicated interface problems.

Live Examples

To wrap up the article I’ve put together a gallery of website nav menus. If you need some cool ideas for new website layouts this article should get you started on the right track. Also if you know any other brilliant menu designs feel free to share links in the post discussion area.