No element affects usability as much as
website navigation design. If visitors can’t figure out what to do when they
land on your page, they’ll leave and find a more user-friendly alternative. On
the contrary, when visitors have a clear, well-defined navigation that helps
them find what they want and need, they are more likely to convert.
The structure and labels of your navigation
can have a significant impact on results. In this article, I will review a few
common navigation patterns for websites and provide practical tips on how to
design excellent navigation.
Types of web navigation
Top menu
When people think of website navigation, most picture the menu located at the top of the page. This type of navigation is aligned with the way we scan web pages—from top to bottom, from left to right. This navigation is great for global navigation options such as global categories.
Top navigation menu at Medium.com. Image by Medium.Drop-down menu design and sticky navigation are two of the most popular design techniques of top menu navigations. The first technique uses a principle of progressive disclosure—it shows only a limited number of options and discloses additional options on demand (when a user hovers the mouse over the top-level option).
Ted uses seven high-level navigation options and reveals additional options on hover. Image by Ted.The second technique allows you to keep the
top-level navigation options always a visible area of the screen. The menu
stays at the top of the screen, no matter how deep the user scrolled down.
An example of sticky top navigation. Image by Elementor.Sidebar
The sidebar is a navigation pattern that
usually supports for the top navigation. The sidebar is positioned to the left
or right of the primary content. When the user navigates to the top-level
category, they see a sidebar with subcategories. Sidebar can be a great choice
for information-heavy website. It can contain subcategories or provide options
for content filtering and sorting.
Forbes provides sidebar with Editor’s Picks and Latest to help visitors navigate the content.Footer
Footer navigation is commonly used on large
websites with longer pages. Footers often contain links to the site’s main
pages. The key idea of using this pattern is to minimize the interaction
cost—the number of actions required to use the product. When visitors reach the
end of a page, they can navigate to other parts of the website in one
click/tap. Footer is also good for information heavy websites such as news
portals and eCommerce websites.
Bottom navigation bar at Apple.com in their footer.Breadcrumbs
Breadcrumbs are hierarchical navigation
links that appear at the top of a page. Breadcrumbs are a typical element for
eCommerce websites and large content hubs. They tell you how that page is
nested within other pages.
Walmart uses breadcrumbs to simplify navigation between product categories.What’s the difference between a sitemap and navigation?
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.
Essential design tips for creating great web navigation
It’s important to understand that designing navigation comes only after establishing a clear information architecture (IA). IA will create a solid foundation for your navigation system and all you need to focus on is to make it more usable.
The tips mentioned below are strongly
focused on creating familiar and predictable navigation. That’s why they are
applicable both for web navigation and app navigation.
Don’t hide the navigation
When it comes to website navigation design, designers should always display the things that are most important to visitors prominently. This rule works both for the content and navigation options. In order to save space, some designers use patterns like the hamburger menu that hides navigation by default and makes it available on demand. It’s better to avoid using the hamburger menu because some visitors won’t click/tap on the hamburger icon to see the options. The Nielsen Norman Group warns us that hidden navigation increases task completion time for visitors. Remember the old saying, out of sight, out of mind. It still works today and can be applied to user experience.
The problem of saving screen real estate is less important for desktops and more important for mobile screens. But even for mobile devices, it’s possible to use more usable patterns such as priority+. This pattern utilizes all available space for navigation options. Thus, the more space you have, the more options you can show.
Priority+ pattern in action. The number of options depends on the screen estate.
Image by Guardian via Brad FrostPut navigation in places where users expect to see it
When we design a sitemap using information architecture, we consider user expectations about the content. We distribute both the pages and the content on the page and create a hierarchy that is aligned with user expectations. The same rules work for other design decisions, like placing individual elements such as the menu on the page. Users should be able to predict a place where they can find navigation. Put navigation in places where people expect to see it – the page’s header, sidebar, and footer.
Visually separate navigation from content
A navigation section shouldn’t look like
the rest of the content on the webpage. It should stand out. Use whitespace
(negative space) to visually separate content and navigation options.
Stripe uses whitespace to separate navigation from the content.Avoid styling navigation options as buttons
Some websites use buttons for header
navigation. This can introduce more visual clutter to the layout and make the
page look heavy. It’s recommended to use buttons only for the calls to action
(Download, Sign Up, Vote, etc.). But doing that, you will emphasize this
option.
Dribbble uses a button-like design for the “Sign up” option.Write descriptive labels
Any website navigation design should be
predictable. The visitor should be able to predict the meaning of every option
before interacting with it. Descriptive labels in your navigation are good for
site visitors because they communicate meaning instantly. Descriptive labels
also help search engines understand what your website is all about.
Avoid generic labels such as “Articles” or “Videos.” Such labels aren’t descriptive because they tell visitors the format of the content, but not the topic. People visit websites to get the answers to the questions they have, and they rarely care about what format the information will be delivered to them. So it’s better to use the phrases that are relevant to the goals of your target audience. Google Keyword Planner is a very helpful tool for finding descriptive labels according to the site’s domain.
Limit the number of top-level options to seven
Website navigation design should minimize interaction cost—the sum of effort (mental and physical) – that users must deploy in interacting with a site. Limiting the number of links in your top-level navigation is good for two reasons.
- Help users better comprehend UI. In the research The Magical Number Seven, Plus or Minus Two, George A. Miller states that short-term memory holds only seven items, plus or minus two. The more options you have in your navigation, the more difficult the information is to remember and process for your visitors.
- Help search engines analyze your website. Fewer items in your navigation are good for search engines. The more concise your navigation, the more ‘weight’ every option gets.
But what to do when you have dozens of
pages? The answer is simple—you need to prioritize and group them into
categories. Every group should have five to seven items. Don’t forget to remove
user options that are not valuable (rarely get clicked) and those that have low
business value (not important for business).
Mind the order
Not only does the number of items matter but also the order of those items. When you work on website navigation design, you might want to sort the options by priority—start with top priority and end with the least important option. While it’s a correct approach, it’s also essential to consider the Serial-position effect. According to this effect, items at the beginning and the end are most effective, because our brain recalls them much easier than the items in the middle. For this reason, the options we put at the beginning or end of our navigation becomes more prominent.
If you
design navigation for a website of a product, you might want to show a link to
the product details page first, and “Contact us” or “Purchase” as the last
option in the website navigation.
Add search to simplify web navigation
Search can act as a shortcut—visitors can
rely on search to find what they are looking for without the need to navigate
through categories. At the same time, search cannot be used as a replacement
for a menu. Visitors who use search clearly know what they’re looking for.
Thus, it’s less about exploration and more about finding a particular piece of
content faster.
Avoid drop-down menus
Drop-down menus work equally bad in mobile and website navigation design. Drop-downs are problematic because they hide options (out of sight is out of mind works in this context), and they increase interaction cost (especially if you have 2+ levels of options). This pattern also doesn’t work well for search engines—drop-down menus can be difficult for search engines to crawl.
Dropdown list at Amazon.com. Scanning the list of categories is tedious and time-consuming.Don’t optimize web navigation design only for the homepage
Believing that the homepage is the first
page visitors start their journey is a common mistake among product designers.
The homepage may not be the entry point for many visitors since many of them
come to a website directly from search engine results, or links from social
media and other websites. That’s why you must pay attention to website
navigation and make sure it’s intuitive on every page of the website.
To make it happen, you need to identify
your target audience and design a navigation structure that matches their
expectations. Also, identify the most popular places on your website using
tools like Google Analytics and ensure that navigation design on those pages
are crystal clear for your visitors.
Test your website navigation design on mobile
3.7 billion people access the internet from mobile devices. If your website navigation doesn’t render properly on mobile, you’re in trouble.
Make sure that
your website navigation is 100% mobile-friendly.
- Navigation labels should be easy to read on a mobile screen. 16px (CSS pixels) font size is a good default for most cases
- Navigation options should be large enough to be easily tapped. A touch target of a physical size of about 9mm works well for most groups of users.
Analyze how people use your navigation system
The website navigation design process
doesn’t end with introducing changes in your website. It’s also essential to
see whether the visitors can navigate successfully using your menu. That’s why
you need to invest time in finding out how your audience is navigating on your
website. You can rely on Analytics to track the visitor’s behaviour by using
tools like tree testing.
Check the “Behavior Flow” view in Google
Analytics Behavior report. Google Analytics will show red boxes next to each of
your navigation items, indicating the dropoff percentage. This report will
provide ideas about general flows users follow when they navigate your website
and what you need to do to optimize such flows.
An example of Google Analytics behavior report.Conclusion
Helping users navigate should be a high priority for every site. Website navigation design should work equally well for both human visitors and search engine robots. The navigation you crease should feel like an invisible hand that guides visitors along their journey. Learn more about optimize your website through various tools and tricks like sitemaps and card sorting.