• Vinika

Create the Website Navigation like a PRO

Updated: Jan 15

Navigation is a handful of links placed at the top of the website which can be used to explore the site information. It is visible immediately when a user lands on a website and includes major CTA’s (Call to Action).

If you have no knowledge about crafting the navigation, or even if you are a beginner, the steps below would give you a handful of techniques to design useful website navigation. Let’s go with the first step in planning the navigation essentials.

1. Plan the Website Navigation

a. Plan the website content

If you are creating your website from scratch, take a paper and write down the kind of content you want to show to your users.

For example, if you are a florist, you would want to show information about your business, the flowers you keep at the store, the details and types of flowers, images of the flowers, return policies, payment methods, etc. Now, you can not show all the content on one page. A user who is interested in buying flowers might not be interested in reading about the business and the owner.

The idea is to keep one kind of information on one page.

b. Assign Name to the pages

By the end of the first step, you have the number of pages you have planned to show on your website. The only thing to do in this step is to Name the Pages. :). For example, the information about your company can be named as "About the Company" or "About us" or "About the XYZ"(Company Name itself ).

 The naming of pages should be very simple and easy to understand. They shall persuade the user to click on it. Avoid keeping technical jargons for the menu names.

c. Categorization

Now you have all the pages, so the very next step is to group them logically as one.

3-4 Pages – The best way is to keep a flat structure of the navigation 7 + Pages  - The best way is to group the related pages under a parent menu name.

The below example shows the organization and logically link of child menus to its parent menu.

Source: Klosterman Baking Company, INC; Copyright: Fairuse

d. Create a Sitemap

A sitemap is a visual representation of the hierarchy of the website structure that not only shows the organization of the pages but also the width and depth of the website.

Below shown is an example of how a sitemap looks like.

Sitemap created using GlooMaps


The types of navigation include the Primary, Secondary and Contextual Navigation

The primary navigation is the obvious one, which is globally visible throughout all the pages. Not forgetting the business goals and user goals, the navigation shows the menu items that are very critical for the users to know as well as the business to show. It should always serve the basic purpose of users.

However, there are pages which are not very critical, but they are somehow related to a parent menu. Those are known as secondary navigation items, which can be shown as horizontally, as a drop-down or embedded on the page itself. In the below example, the red box shows the primary navigation and the blue box shows the secondary navigation.

Source:, Copyright: Fairuse

This secondary navigation can be implemented in multiple ways on the website. The possible options could be shown vertically and as a separate category box on the page itself.

The core idea is always to facilitate the users to fulfill their tasks that they are intended to do.

The secondary navigation includes the menus at the second level of the hierarchy in the sitemap, which may or may not be visible globally.

Contextual Navigation items always appear in some context to a specific item. In an example below, you can see the links in the content. This facilitates the user to read the information in context to the content added.

In the below example, the yellow box shows the related articles to a specific topic facilitates the user to read the topics which can be further beneficial in context to the current topic you are reading.

So now you can understand how the initial planning is crucial to set up useful navigation that just not only fulfills your business purposes but also taking care of your audiences.

Additionally, the number of pages will make your website to scale in small, medium and large categories. The small websites and medium can be very well designed using the steps mentioned. For the very large websites where the goal is not just to read the content or perform one or two actions, but to perform the actions in your profiles while exploring the websites, the navigation must be planned very carefully.

In the next steps, I have mentioned additional points to enhance the user experience of the website navigation not limiting to just top menus and secondary menus. I have included the points of how navigation can be improved for an optimal conversion for your business goals.

There are other ways to smoothly transition the user from one page to another keeping in mind that there should be no distractions and errors while the user is doing his current task.

3. Enhancing the Website Navigation Experience

The criticality of the navigation bar could be understood in terms of the roads that a traveler can take to reach the destination. So, smooth road with destination signs and boards on it guides well  the rider and creates a relaxing experience for the driver itself.

In a similar manner, the navigation bar works like the same. At the business end, there are 2 stories. The first is to create obvious menu elements and second the placement of the navigation. Well there is always one story that matters at the user end, and that is easy to locate the goal, the user is trying to achieve. I have listed a few techniques that can enhance the usability and experience to navigate throughout the website as well as on the same page.

a. Create Easy to Guess Menus

To begin with, it is very crucial to know what is your business about and what actions the user would perform while landing on the page.

For example, a carpet cleaning company would want users to book or schedule their appointments for the service through their website. For that, the menu names must be quite easy to guess. It could be “Book an Appointment” or “Book our Carpet Cleaning Service” or anything that triggers and sync the user understanding and interaction with that word in the real world immediately.

We certainly do not want the user to get confused by using difficult vocabulary words and ultimately forcing the user leaving the website. While creating menus, the vocabulary shall be quite simple that anyone from low to high vocabulary skills could understand.

In the below example, the menu “eBusiness” at Sunmarine Shipping Services website would not be obvious to most of its users, as a result, it can skip from a user’s eye at first. A simple name of “Shipment and Tracking” or “Ship and Track” would feel quite obvious to the user, and thus enhancing the user engagement with the features. A normal user would keep looking for the relevant word and in frustration leaves the website.

Source: Sunmarine Shipping Services LLC; Copyright: Fair use

The best possible way to locate the "Track and Trace" button/link could be at the right corner of the top screen, just in right of the logo. Another point I see is the "Portal Login" link which is under eBusiness might confuse their new users to locate this. It can also be placed at the position adjacent to the "Track and Trace" suggested location.

b. Search Box

To enhance the navigating experience, create a solid search system for your website. It is essential for the user to locate the search box, input the keywords and getting the results from it. From the search results, the user can land directly on a page of his interest.

The auto-suggestion feature of the search box increases the chances of the user selecting the right option they are looking for, and landing on the right page. It really helps the user to carry out their goals avoiding distractions.

c. Breadcrumbs

Source: Flipkart; Copyright: Fair Use

Use of breadcrumbs gives emotional support to the user, as they know where they are exactly. The use of breadcrumbs becomes highly significant if the website contains too many pages with multiple hierarchies within.

To execute breadcrumbs efficiently, it must show the proper order of links or the hierarchy of the pages.

The breadcrumbs can be of high usability when the active page on which the user is present currently, shows the color red/blue to indicate the current location of the user.

d. Inline Links

On the pages with the heavy dose of content, appropriate words can be hyperlink with its related pages. This encourages the user to jump to the related content page to extract more information they are looking for.

The best way to implement is to highlight the hyperlinked word with a different color and maybe underlined. The visited links can be shown with different colors to know that these links are already visited by the user.

The other effective strategy can be implemented here by opening those links in a new tab of the browser or the window. The user would not be forced to remember where it was initially when triggered by the inline links navigation.

e. Bookmarks

If the content on the page is too long, the best way to increase the readability of the page is to organize it. To increase the usability of it, one can create an inline table of content and link the sections with it. This encourages the user to immediately read the content of the interest. This will prevent the complete scan of the content and saving the time of users.

f. Text Vs Images

Using the principle of recall and recognition in designing the websites, the images contribute very effectively in directing the users to the desired goal accomplishment. For example, the use of social icons is pretty much enough to direct users either to share the content or follow the brand on social sites.

Another better example I can provide is the use of the CART icon on e-commerce sites. Now most of the sites use the general CART icon as not only the user has learned about it due to common use among sites but in real life too a similar tool is used when you go shopping. Since the icons are recognized easily, the user is not burdened to learn the use of it again.

Source: Amazon; Copyright: Fair use

But, trends are changing so different brands have sometimes their own flows and creative icons. The use of icons and words on brand site AJIO explains it in detail.

Source: AJIO; Copyright: Fair use

From the above two examples, there is a transition in the learning of the icon from CART to BAG.

Thus, planning the actions for why you are using the images(icons) and second, use the quite predictive images, are two major considerations to ease out the navigating experience of the user.

 g. Footer Menu

The idea is to go through the website without any interruption. So, when a user reaches the end of the page and there is no further way to go ahead, eventually user has to scroll all the way to top to find links from menus.

To avoid this, it is best to implement menus in the footer that give access to a user to navigate further even if they are at the end of the page. Those important links and contacts which are not included in the main top navigation can be placed there.

Source: General Assembly NYC; Copyright: Fair Use

Thus, considering all these points in your mind and during design planning, you can create efficient navigation for your website as well as the end-user.

4. Quick Website Navigation Testing

So far, we have explored the different aspects of navigation as well as how to implement them and how it will give you benefits. The success of this implementation lies in how successful the user is completing his goals.

Does he find the information properly? Is there any problem he encountered while moving the pages? Is there any point where the user got stuck? And so on.

This is a very basic test you can do. Take the printout of your webpages. Ask any of your friends to help you with answering these questions. For example, take the homepage printout, and ask questions

What do you know about the company when you see the homepage?

Where do you go if you have to contact the company? On the basis of the answer provide that print of the page and gradually ask the questions.

Take a random print, and ask if he knows on which page he is currently at?

This was just a quick overview of what you can do offline to test the navigation system of your website. Depending upon the size of the website, it is advisable to use online usability tools and online interviewing to recruit many users and what they think of the website.

Apart from this, I have compiled a checklist that can help you quickly go through and fix the issues if you find any.

Basic checklist

  1. Do the menu names clearly indicate the purpose of the page?

  2. Avoid using technical jargons for menu names

  3. Do the child pages of a specific menu item are logically linking to the parent item?

  4. Do the primary navigation is visible and consistent throughout the website from all pages?

  5. At any point of time on any webpage, does the user knows his location?

  6. Do the critical pages of the website are accessible through primary navigation?

  7. Are the menu items prioritized and organized according to your business goals?

  8. Is the use of colors and layout in prioritizing and organizing the navigation effective?

  9. If all the navigation links are clickable and working properly?

  10. If any of the menu items are repetitively used somewhere?

  11. In the content, are the inline links highlighted with an underline and a color?

  12. Are the inline links, linked to their appropriate respective pages?

  13. Do the visited links show a different color from a non-visited link?

  14. Have you designed the alternate mechanisms to let the user reach a point of goal?

Conclusion: This is the best time to go back to your website and check if your website follows all the navigation fundamentals I have shared above. If this helps, I would be happy to know and share your success stories.

Please feel free to contact me for any queries or discussions. Happy to Help! :)

#usability #ux #navigationdesign


Recent Posts

See All
  • LinkedIn Social Icon
  • Twitter

©2018 by VinikaWinks