Navigation design is a critical component of your website. The way that you present your menu, as well as organize and link categories, defines how users experience your site and understand your company. This is their first impression of your site and will follow them throughout their journey as they learn more about you. Good navigation design makes finding content easy, while bad navigation can confuse and irritate users, possibly encouraging them to look to another website for answers to their problem.

Guidelines

Your website navigation design should hit on three major areas: visibility, orientation, and function.

Visibility:
the navigation should be simple and unobtrusive, while being obvious to the first time visitor where they can look to guide their trip around your website. This visibility should remain consistent throughout every page on your website so that visitors don’t have to worry about figuring out a new system – they can focus on why your company is so awesome.

Orientation:
you need to provide the visitor’s location at all times – where they in relation to the rest of the website. Using breadcrumbs and visual cues you can help them decide where they want to go next and how they can return to a previous page.

Function:
the function of the navigation system should be obvious and the categories should link to obvious visitor tasks or questions (e.g. About Us). By using clear and simple labels, visitors can easily scan the menu items and decide where they need to go.

Types of Navigation

The type of navigation you use depends on a variety of things, including the content, images, and design of both the page and the menu. The key is striking the balance between conventional and creative; give your existing and potential customers an easy-to-use system, but make sure you aren’t so run of the mill that you blend in. Impressive out-of-the-box navigation design will speak to fellow designers and hopefully entice visitors, but make sure your users can still get around your site easily.

Horizontal navigation is a very conventional approach and while it may not be groundbreaking, it is a popular choice for a reason. Using a horizontal navigation bar gives you a lot of freedom in your design of the rest of the page and as anyone has used the Internet is used to this style, every visitor will pick up on it immediately.

But before you plunk a menu at the top of your page, consider these creative options:

Vertical: this style is simple and just as effective as it’s perpendicular neighbor. The vertical menu is most commonly placed on the left, but shifting it to the right offers a great opportunity to make your site stand out. There are critics of this style, suggesting that this goes against how we actually read in real life (left to right) and will have a negative effect on usability. 

Scroll Down: the one page scrolling option, defined by a prompt – e.g. an arrow – is a great option for visual websites. You can provide a fluid visual narrative of your company, your projects, and anything else you want to showcase. It does, however, limit visitor freedom, as the navigation is strictly defined by you and doesn’t offer the flexibility for users to jump around.

Single Option: as an initial point of entry into your website, this navigation style lets you control your visitor’s first move (because they only have one choice). Acting essentially as a cover page for the rest of your site, this option lets you define your visitor’s first impression. Once they enter you can use secondary navigation system for the bulk of your content.

Mega Menu: if you have a lot of information to share, this one may be for you. With a large expandable menu you can showcase more categories and subcategories, which can make it easier for visitors to find their specific page quicker.

Image Based: this visual navigation system uses images and minimal text to guide visitors. Although this may not work for a website with a lot of pages or detail – visitors may get confused – it is a perfect option for image-heavy sites. You can draw attention to the visual component of your company: photos, products, etc.

Whatever navigation style you choose, remember the navigation is meant to make your website easy to navigate. A creative, but hard-to-understand system might confuse visitors so make sure you address visibility, orientation, and function first.