Navigation has crucial significance for any website. If the navigation of your site is sophisticated and not user-friendly enough, your content has no chances to be read by the users. As a rule, navigation menus are located in the most visible website sections, where visitors can immediately notice them. So, your navigation may be the first thing the users interact with entering your site.

As you know, a good first impression can work wonders, so, you’d better take good care of your navigation. We’d dare say even more: the development of web navigation interface that maximizes usability is still one of the central web design issues. Major requirements to navigation are easiness of use and intuitiveness. Its main goal is to help the users find the information they are looking for quickly and almost without thinking.

Frankly speaking, with such restrictions it’s rather difficult to invent something completely new, that’s why most of the designers prefer to place navigation links at the most expected places – either in the header on top of the site or in the left sidebar. This way it won’t take the visitors long to understand menu structure and find out how it works. There is nothing bad in using the time-tested methods, but menu shouldn’t be too predictable and boring.

By the way, if we’ve mentioned standard navigation design techniques, it would be logical to revise them here in order to make sure that all of us think about the same things.

We are not going to diminish the importance of quality content and welcoming design, but easy navigation is like oxygen for our lungs, absolutely vital for efficient browsing.

How many clicks does it take a visitor to get to any page of your site? If their number is more than three – it’s too many; your layout needs a good in-depth rearrangement. Below we compiled some simple tips that will lead you to really efficient navigation.

1. First of all keep it as simple as possible, remember, people don’t come to your website to solve difficult tasks. They just want to get what they want and leave – the faster it happens – the better.
2. Use terms associated with your business. It’s obvious that menu items of a legal company and a restaurant will be quite different. Using the terminology relevant to your business (but familiar to the users) makes the navigation more explanatory and lets to avoid confusion when visitors are maneuvering all over your website.
3. Some navigation tabs are necessary. Yes, there are certain tabs that should be present in every navigation bar. Why? Because they provide users with essential information searching for which they came to your website. For instance: the users should be able to interact with information about your company, know how they can benefit from your products and services as well as contact you.
4. Including additional features makes navigation more user-friendly. Here we mean breadcrumbs if there are no back buttons on your site, a search bar and site map. As you understand these are supplementary features that come apart from header and footer menus.
5. Navigation should blend into main design concept. You may use corporate colors, fonts and style to make the navigation an integral part of the whole site.
6. If your website is responsive, it’s utterly important to create a mobile friendly navigation that will allow the users to view the web pages on any device they prefer. Here are a few popular options designers frequently use today: block-level menu links, condensed navigation, shift from horizontal to vertical navigation, select options, hidden dropdown menu bars, sliding navigation options, etc.
7. Distinguish your hypertext with color and underlining. This may sound somewhat old-fashioned, but hyperlinks that change their color and become underlined on hovering draw users’ attention and clearly show their functional designation.
8. Style your navigation bar. It’s a good idea to make it of contrast color. The visitors use the navigation bar to find out where to go, so it should stand out, all links should be hierarchically structured. It’s better to have one and only main navigation bar either horizontal or vertical. (It’s recommended to locate your main navigation horizontally, near the top of the page). More than one navigation bar makes your site messy and puzzles the users. You may use drop down or fly out features to reduce clutter on the page (although the usage of drop down menus is a controversial question, which requires individual approach).
9. Side and navigation bars are similar, but not the same. Keep them separate. Sidebars should contain external links or complementary features, but no primary site navigation. Place sidebar right, left is the wrong place for it. Most all of us read from left to right, so we intuitively look for primary information on the left. (Eye-scan research by the Nielsen Norman Group found out that: web users spend 69% of their time viewing the left half of the page and 30% viewing the right half. Only 1% of viewing time was spent on content to the right beyond the initially-visible 1,024 pixels on a standard monitor.)
10. Search box is a must have for every site. The opportunity to search the site saves users’ time onsite if they can’t find the information they need quickly. Besides, a search bar gives visitors the illusion of total control over your website content.
11. Don’t pull users’ nose. Never use ads or promo links that trick the user into clicking on your sidebar or they won’t come back again. We don’t say that there is something wrong with promotional links or banner ads placed in a sidebar. Nevertheless, they should be stylish, fit the design and don’t mislead (look like buttons or fake interactive icons) the users. Of course, you can easily do without a sidebar at all; however, many users find it helpful and informative.
12. Footer should be a mixture of primary navigation links and a limited amount of alternate information. It’s a well-known rule that you should be able to use footer to navigate through primary pathways of your website. But don’t overdo this, too many links in the footer deteriorate website design and can cause penalizing your site by major search engines due to link limit excess. Keep the information in the footer short and simple and you’ll be OK.
13. Give your visitors a possibility to navigate your site from any page. Don’t make them return to the homepage to find the way further.
14. Don’t forget that clicking to website logo, a user should get to the home page.
15. Don’t show broken links or content-free pages to the visitors, it’s frustrating.
16. Enhance category pages by banners, images and powerful text. Visual aids help to promote sales, special offers and tell the customers about related products or services.
17. Avoid horizontal scrolling. Keep the type big enough to read (at least 14 pixels high) and not more than 980 pixels wide.

In general, today’s web design tends towards clean, minimal layouts which couldn’t help affecting website navigation. Plus total responsiveness of all websites to provide their perfect rendering over a wide range of mobile devices also influenced navigation solutions. Developers are inclined to stick and hidden menus. The first case is great because it keeps the necessary links before customers’ eyes all the time. The second variant lets to save the space on the page, which is a crucial moment for devices with smaller screens.

Yet, creative approach is always preferential. Everything that stands out from the crowd is better remembered by the users, making them share their exciting experience with friends and come back to your website again and again. Under this text, you will find the examples of uncommon navigation solutions implemented into live, operating websites. Their aim is to prove you that there always is space for creativity even under the most restricted conditions.

Picturegr.am

This website has extremely simple, user-friendly navigation. Do you see the search bar in the center of your screen? Just type in hashtags or username here or you can search for photos clicking the popular tags in the bottom of the page.

Swansea University Prifysgol Abertawe

When you enter this website, main navigation bar is in the bottom of the page right under the large photo of young, pretty, smiling girl sitting on the beach. But when you start to scroll down it moves to the very top of the page and takes a fixed position to be constantly before the readers’ eyes. As you move lower, you get more navigation possibilities: you can open and close text blocks, watch videos, zoom photos in and out and even take virtual tours.

Trippeo

Do you see any signs of usual navigation on this site? We don’t see them either. To read the content you just scroll down, that’s all, even a child can cope.

Akaru

The website is very interactive. Every time you hover or click something that looks like navigation menu, arrows, icons and so on you discover new information encouraging you to explore further.

CtrlZak

So, what is so special about this website? Firstly, you have the possibility to hide main menu bar if you are not going to use it. And please note these small triangles on your right. We believe that this can be considered a rather creative way of navigating a website.

Vimeo

This website offers you multiple navigation opportunities. You can move up and down, right and left, click the combs to watch videos or read the information or just use hidden vertical sidebar navigation on your left.

Swan Design Studio

Try to scroll through the pages of this site, you will be surprised by smooth, nontrivial navigation.

Weecom Digital Agency

Just look at this square menu icon appearing here and there on top and in the bottom of the page. Hover over it and main menu will fly out immediately.

Pollen Brands

Have you ever seen the navigation looking like plumed dandelion seeds, partially blown off by the slight breeze? Sound very poetically and looks not less impressive.

Prospek

Here when you click the menu icon, you get to the menu page where there is nothing except the items to focus at.

Rod McLean

This website uses photos as menu items. Looks very appealing, isn’t it?

Soppo

Here, apart from the possibility to access main menu clicking the icon in the right top corner of the page, its points are scattered among the other blocks in the content area.

Red Bullet

One more variation of menu taking the whole page, this time its horizontal version.

Drexler

Bright yellow block with menu icon and company name in the center of page bottom draws users’ attention especially when it becomes bigger on click.

Arnaud Perrillat

Shake virtual hands to enter the website! A smart move isn’t it?

Obaby

Nice try, the navigation links are placed right beside the artworks presentation.

Museekly

The authors of this site thoroughly approached to navigation. Actually each element on the page leads somewhere. If footer menu and images occupying all content area are not enough for you, click the yellow triangle on your left and access sidebar menu together with search bar.

Balazs-Hegedus Jozef

It’s a great idea to tell the story of each project in your portfolio instead of just featuring images. This speaking examples have all necessary links and buttons for the viewers ready for deeper research.

Loren Wright Design

Sticky menu containing only simple, intuitive icons looks clean and current.

100 Years of Design

You can use the arrows and navigate up and down, right and left, but what was really unexpected on this rather minimalistic black and white website is its rainbow menu appearing on click to the relevant icon.

Team Geek

This icon-based sticky menu done in soft colors is so lovable, we are sure that site visitors have the same opinion.

Web Craftsman

Rather fairy website with not less magic navigation. Click the “Find out more” circle and see what will happen.

Parabolic Playground

Sidebar navigation of this website is simple, yet rather stylish. Menu items are crossed out on hovering.

MDW

We couldn’t help featuring this website, just look at these framed green blocks. You can navigate through Matthew’s portfolio with their help.

The Gilder

Scroll down and you’ll see how fixed position footer menu items slide apart giving the space to page numbers. Looks very creative.

We hope you liked our inspiring examples of unusual navigation. Now it’s time to make a long story short. If you are thinking about your website’s navigation optimization, here are main pieces of advice to memorize.

The users are VIP persons in cyber space and everything is done for their comfort.

Intuitive design is overriding.

Unique, harmonious sites succeed.

Main theses of this post are as follows: we just listed some working, standard suggestions here. Yes, they are tested, but you should not be afraid to experiment and our examples vividly demonstrate that very often the most daring trial-trips end up with wonderful discoveries. So, step away from common guides, but keep in mind that good navigation should address visitors’ questions and concerns and do this quickly and easily. Maybe you will find the new way of lowering websites abandonment rating. As usually, you are welcome to share all your thoughts on the topic in the comment section.