At this point we’ve discussed how to organize and structure an interface - but how do we define how to navigate through it? Think back to our architect designing a house. What would be the best way to move through the spaces of the house? Through hallways? Up a staircase? Just through open space? Imagine if the only way to get from the bedroom to the bathroom was up a windy staircase - going to the bathroom at 3am would be a lot more dangerous. The navigation of the house affects the functionality and aesthetic deeply.


The architect also takes into account the priority of each space and the relationship different rooms might share. For example, it’s important that a dining room is easily accessible from a kitchen. It’s less important that it’s easily accessible from a laundry room. We should do the same when we consider how users will navigate through different pages and what order or procedures they expect to access the content in.

All of these considerations fall under the interface navigation. Navigation outlines the user paths to each page on a website.

Navigation vs. Sitemaps

There is a common misunderstanding that a sitemap is website navigation. It’s essential to understand the roles of navigation and a sitemap. A site map shows what pages your website consists of. The primary purpose of a sitemap is to categorize the content. It answers the question, “What pages do I have on the website?” Navigation, on the other hand, explains how to get to each page.

There are multiple different types of navigations. Primarily, navigation through an interface is done either through some type of menu or through a search.

Navigation Best Practices

Generally, there are some tips and best practices to follow when developing the navigation of any interface.

Make the navigation tool easily accessible and in a place users expect it to be.

Remember, the navigation tool is usually the only obvious way a user can move through a site. If it is difficult to find, users may get frustrated and leave the site altogether.

Visually separate the navigation from the content.

This allows users to quickly find the navigation and makes sure they do not mistake it for content.

Use descriptive labels.

The label is the best indication to the user where information might be. Make sure that the label is descriptive, concise, and encapsulates the content that lies within that group or item.

Don’t hide important entry points to high trafficked pages or content.

Drop down menus can be effective when there are a lot of subpages, but they also increase the number of interactions needed to access pages. So if a page is important, make sure your user can get to it easily and quickly.

We will cover types of navigation and their use cases more deeply in the coming exercise - looking at specific desktop navigation methods.


What is the difference between a site map and site navigation?

Check Answer

The site map categorizes the content. It answers the question, “What pages do I have on the website?” Navigation explains the path to get to each page.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?