Your website navigation plays a critical role in keeping visitors on your site. When you look at statistics like bounce rate, consider your navigation as playing a key part in this number. After all, visitors are quick to give up and leave your site if they can’t find what they are looking for within a couple of seconds.
In a recent HubSpot survey, 76% of respondents said the most important factor in a website’s design is the ability to find information easily.
Think of the last time you landed on a site and couldn’t find the company address, phone number or other piece of information critical to forward movement. Did you leave the site? Go to a competitor? Did your frustration create a small tarnish on your impression of that company? If you said yes to any of these, look at your company from your customer’s perspective and start to identify these pain points. A good starting place is the navigation and how information is prioritized.
Before moving on to our website navigation examples, we want to provide you with a few key questions to ask about yourself about your site’s navigation.
Ask Questions and Answer Questions About Your Own Site Navigation
- Who are the main (priority) audiences coming to our site? And from where?
- What are the main questions they have about our company or products? How and where are we providing that information?
- What are the different stages in their purchase process? How is our content meeting those stages and moving them to the next?
Navigation comes in all forms (not just the main navigation bar) but in supporting content and contextual links, graphics/images throughout each page of your site.
Let’s take a look at a couple of website navigation examples to review what works and what doesn’t.
Bad Website Navigation Example
Argren.net sells all kinds of products from ice makers to cars and everything in between. Almost every single piece of text and image on the homepage directs visitors to another page which is as poorly designed as the homepage. There is no organization whatsoever in the use of on-screen elements such as navigation, text and pictures. This website experience is like Alice falling down the rabbit hole – scary and unsettling.
If you want more examples of poor customer experiences, check out our post: Shocking Amazon Cart Fail: Learning from Big Brand Customer Experience.
Good Website Navigation Example
WPengine.com is a fantastic example of a site with clear and effective navigation. The top nav has links to all the main pages about the company, and the right side nav includes real testimonials from customers talking about the different features they enjoy about the product.
You’ll find the social buttons in the top right as well as a search feature where visitors can search by keywords. Additionally, you can see options to chat with someone at the company in the lower right. They even spell out what you can expect when you scroll down the page. Finally, the navigation is responsive to the screen resolution, so if you make your window smaller (or are viewing on a difference device) it adapts to keep a clean, organized look.
Here are a few key tips to creating clear website navigation schemas for your visitors:
- Keep the structure of your primary navigation simple and near the top of your page.
- Include navigation in the footer of your site.
- Use breadcrumbs on every page (except for the homepage) so people are aware of their navigation trail.
- Include a Search box near the top of your site so visitors can search by keywords.
- Don’t offer too many navigation options on a page.
- Keep your navigation to no more than three levels deep.
- Include links within your page copy and make it clear where those links go to.
In summary, you want to keep your website navigation as clear and simple as possible so that visitors don’t have to think about how to get around your site.