How to Create Navigation that Guide Your User

Navigation is the map and directions of a website and are usually what gets users deeper into the site experience. It should help users find the information that they’re seeking from an app or website. UX design should guide a user through the process in a certain way. And you as UX designer should help to direct it.

Types of Navigation

Let’s look at a few executions for navigation out there and some of their pros and cons.

1. Standard

Usually it’s a text link navigation, which consists of a few text links that take users to the main sections of the site. This type of navigation often takes the form of a horizontal bar across the top or a vertical stack. A primary navigation bar often supported by sub-navigation.

Pros: Most users are familiar with this type of navigation.

Cons: May not be suitable for the mega-sites (sites owned by a large organization that encompasses a broad range of services or products and cater to many audiences).

BBC Sport as a Mega-Site example

Solutions: One practical solution would be to implement a smart search bar that allows users to meet their specific needs. Second is Mega menus. Mega menus are a great idea for navigation, especially if the site you’re designing for your client has a lot of content and categories. Such menus improve the user experience by including benefits like:

  • Elimination of scrolling;
  • Tooltips;
  • Orderly structuring of content by icons, layout or typography.
Food Network’s site is a solid example of a mega menu usage

An easy-to-see format that lets users immediately choose where they want to go instead of scrolling or pagination for more options.

2. Hamburger

Since this form of navigation is convenient to use on mobile devices, now we see hamburgers all over the place.

Squarespace ( provides creative tools that power the web sites)

Pros: Hamburger saves a ton of screen real-estate

Cons: Hamburger is a very controversial type of menu. First problem — it hides actual navigation and users’ options. From a UX point of view, users shouldn’t have to take an action in order to find out what actions they can take. Second is a problem of clarity — while users universally recognize the magnifying glass to indicate a search, other icons like the hamburger icon still require additional labels.

Solution: There is no universal right solution. But one practical thing — we need to simplify our site’s structure together with mobile-first approach.

3. Icons

Icon navigation is like the standard text navigation, but it use images instead of plain text. This type of navigation can be great for product promotion and back-end design (e.g. company finance dashboard).

Icons paired with titles — this brings clarity

Pros: Icons bring empathy. And empathy arguably underpins user experience design more than anything else. Also icon often represents an action or state rather than an object : Send mail, Paste text, Toggle Edit-mode, Delete items, etc.

Cons: Should be a direct correlation between labels and icons. Because icons separated from a descriptor can be confusing for a user.

Solution: Icons set should be selected very carefully and you should make sure the icon actually helps and not hurts. Avoid having redundant and repetitive terms and shapes in your labels and icons that affects users. This Smashing Magazine article proposes a good solutions.

4. Original

This type of navigation is a experimental and non-conformist experience.

200miles is a promotional site for The Revenant

Pros: Such kind of navigation could be an another layer of engagement for experiencing.

Cons: If navigation will be too weird, users may get lost.

Sticky navigation, Sub-navigation and Footers

Sticky navigation is an essential component of navigation since it empowers your users to instantly access the menu and easily find what they want on your site. It stays locked in place as users scroll down a page. You can spot the sticky navigation right here, on Medium. Speed is very important thing during browsing (loading pages, finding desired content, etc.) so allowing users to access the navigation menu more quickly is a definitely good choice.

Medium site is an example of solid Sticky Navigation

Sub-navigation direct users to the pages that are considered less prominent than their parent pages in the main navigation. A sub-navigation often becomes necessary for sites with quite a few pages, like mega-sites.

Apple site is an example of well constructed Subnavigation

Footers are always paired top navigation. The footer can also repeat the navigation at the top of the page, which reminds the user of the rest of the site’s content (if they scroll to the page bottom). when designing a footer you might ask two good questions: “Is it necessary?” and “How can I make it relevant?”

CNN website footer

Navigation Design Guidelines

After reading all of the above, you should have a good foundation about navigation patterns. And now here are four navigation design guidelines for you to consider as you embark the journey of designing the navigation of your upcoming project:

Simplicity

Your navigation should be well-structured and simple. Speak the language of the user rather than using complex terms and form factors unfamiliar to your users.

Clarity

Make sure that your navigation has a linguistic and semantic clarity that communicates to your users in an direct.

Consistency

In pursuit of consistency you should create standards for labels and iconography used in the context that you are designing for.Colors, typography and form heavily affect the way your audience conceive and interprets the information.

Correlation

Avoid creating distracting stimulus. Reduce uncertainty and make sure that menu items clearly communicates one message as they are put together. Always think about your user’s personal experience, think about the goals they have when visiting your site, and use your navigation to help them meet those goals.

Great Navigation is Great UX

A huge part of a great user experience is your site’s navigation. It is the foundation on which the entire user experience rests, if you really think about it. Excellent navigation should make it easy for people to use any site you create; that’s the benchmark of a fine user experience.