The navigation of your website is a key component that directly impacts you from a business and marketing perspective. After all, a navigation is often what stands between the user and the user’s goal. And as a marketer, you should want to make that distance as short as possible.
That's why you need to ensure your website navigation offers a positive experience from a usability perspective. In other words, designing your navigation in a way that makes sense to website users. Don’t make your visitors do a lot of work to reach their goal -- if the user's goal is to locate your pricing page, for instance, help them get to it fast.
What Should a Website Navigation Do?
Navigation of information, as discussed in Alan Cooper’s book, About Face 3: The Essentials of Interaction Design, can be accomplished by three key methods: scrolling (panning), linking (jumping), and zooming. In order to develop a solid navigation system, designers need to enable the user to move smoothly from one place to another place, and promote flow.
Specifically, the navigation should:
- Enable users to choose from a small selection of pages to visit.
- Provide clear labels for the pages where navigation tabs take you.
- Adapt your website to match user needs.
- Tell people where they currently are and how to get back.
- Provide a search function.
Components of a Navigational System
In order to achieve the above-mentioned goals, a well-designed navigational system should include three main components:
- Current Locator: This is also known as a site ID and is a way for users to know where on the website they currently are. For instance, when you select a given tab in the website navigation, does the appearance of that tab change to reflect that it has been selected? Check out a screenshot from Apple's website: when a user selects a tab (in this case, the iPod tab), it becomes darker than the rest of the navigation.
- Navigation Method: For visitors, this is a way to find out where on a website you can go -- and how to get there. It gives you access to the primary content sections and utilities, then places you can get to that aren't part of the primary content hierarchy. For instance, when you visit the Apple website and click on the iPod tab, you will see that the information is organized in a hierarchical order: you can choose between iPod products or apps related to the iPod.
- Trace Route: This is a way for you to find where on the website you've been. This is also known as a home link and answers the question, "How can I get back to where I started?" In the case of the Apple website, you can simply click on the Apple icon to go back to the home page.
- Search: This is the search functionality visitors have access to. It's a way to quickly find specific information they might be looking for, and is often illustrated by the magnifying glass icon.
As you incorporate these components into your website navigation, ensure that you keep their look and feel consistent. Providing consistent navigation throughout your website allows users to feel confident that they know where they are and that they can find what they’re looking for.
Types of Navigation Systems
Now that we've covered the role of the website navigation and its components, let's explore what options for navigation systems you have. There are three main types of navigation systems.
- Global Navigation: Global navigation is a site-wide navigation that allows access to key areas or functions. It usually appears on every page and can contain multiple levels of hierarchy. The Apple screenshots above are good representations of a global navigation.
- Local Navigation: Local navigation enables the user to explore the immediate area or a subset of the site. If you visit Amazon.com, for instance, you will see a left-hand navigation that allows you to explore the specific section of the website you are currently in.
- Contextual Navigation: Contextual navigation provides navigation in line with content (e.g. hyperlinks). Gerry McGovern, the founder and CEO of Customer Carewords, explains, “The primary purpose of web navigation is to help people to move forward. It is not to tell them where they have been, or where they could have gone.”
Navigation Patterns
Depending on context, you might take several different approaches to organizing your website or application:
- Task-Based: Your navigation can be task-based. It’s sometimes useful to provide one or more task-based points of entry to your site.
- Content-Based: Navigation options appear consistently across all pages. It may represent flat or hierarchical structure.
- Menu-Driven: A main menu provides access to isolated sub-modules. Navigation across screens is not permitted. This is used mostly for device interfaces.
- Transactional: Provides feedback about where you are in a sequential process, and provides the option to back up to a prior step. Your design should start with thinking about how the user will move between pages or screens.
An Example of a Great Website Navigation
What other great examples of website navigation have you noticed? Share them with us in the comments below.
Photo Credit: olgaberrios
Inbound Marketing Blog Feed
jared 2:07 PM on August 30, 2012
When it comes to a website, the navigation is key as you want to make it as simple as possible to get to the inner pages of your site.
Denise Kilmer 2:20 PM on August 30, 2012
Great and timely blog, thank you! A new website for my company is in the works. Thank you!
chris 2:37 PM on August 30, 2012
with the increase of mobile and touch screens where is the talk of menus for responsive designed sites that will also function when scaled down to a smart phone and work when touched with a finger
Russ Turner 2:39 PM on August 30, 2012
I have WP sites and although I have navigation tabs at the top I really need a function that enables users to go back to the top of the page where ever they are on the page.
Or to somehow view the navigation tabs where ever they are on the site, even after scrolling down.
Any ideas please,
Regards
Russ
Chandler Turner 3:09 PM on August 30, 2012
The first and third bullet points are the ones most often overlooked. Unless it is a point, click, purchase site, you cannot finish the job on the web - only start it. That means you have to keep it short and succinct, making it adapt to user needs of simplicity and time constraints.
Juli D 3:30 PM on August 30, 2012
After a recent site redesign, we totally revamped our navigation to cut down on the number of choices we're offering. We thought about what our customers asked us for, like "A recording for my phone system", instead of what we call that recording (Message On Hold, Voice Prompts, Voicemail Greetings, etc).
Via Google Anayltics, I've been able to see more people looking at more pages of our website. Our homepage bounce rate decreased dramatically. Woohoo!
Alex Stuart 3:49 PM on August 30, 2012
Website navigation should be user friendy and it should not be confuse the visitor. It needs to be proper navigation like heading, subheading, call to action, etc.....Navigation getting fail, I am sure the visitor will leave the page immediately.
Moreover navigation should be topic related. I recommand eveyone to read this post, especially website designer.
Magdalena, one more nice article! Thanks
Rahman Mehraby 4:52 PM on August 30, 2012
Providing "breadcrumbs"are very helpful too. They help the site visitors understand how the current page is related to the entire website content in its content structure. Therefore, he can navigate tot he previous page and read something in line with what he's found interesting or go higher in the hierarchy and find out more about the site.
Rahman Mehraby
Travel Marketing Blog
Tony 4:54 PM on August 30, 2012
Thanks for the tip about the search function. I just realized that I'm missing a search bar on my blog. Going to install that right now :)
Ashish Bhagwat 5:06 PM on August 30, 2012
I think these guidelines are great starting points for a website navigation design and easy to remember, but what makes lives complicated for Marketers the most is the conflict of - "what I'd like the user to do" v/s "what the user would most likely want to do". Hubspot itself recommends limiting the options on a Landing Page so that the user "clicks" on the C2A "you" want "her" to. It is possible to create great landing pages, but the navigation is not always a straightforward thing. I sometimes think I'd want a combination of Task-based, content-based or manu-based navigation depending on the context... but easier said than done. :-)
Nigel Openshaw 8:31 PM on August 30, 2012
Thanks for the tip. I have implemented a top bar menu, but fas for a side bar, not yet. That seems a good area for contextual links.
thanks again
Nigel
Nader Mah 9:00 PM on August 30, 2012
Do we have any other example rather than the Apple?
What about a service based company's website? Does HubSpot have a good navigation on main domain? What about its blog?
Tarjinder Kailey 9:35 PM on August 30, 2012
Having a User-friendly website would be a great key to improve site traffic and visibility in SE. One must always understand the thought that you are creating a website for your customers or consumers not for SE.
Kamlesh 12:38 AM on August 31, 2012
Guidelines are super. Thanks for the tips.
Gus van der Walt 4:32 AM on August 31, 2012
Thank you for the awesome post! I seriously needed this for my site! Great Tips
SEO In Delhi 7:23 AM on August 31, 2012
Thanks for the useful tips.
Franck Frémont 10:48 AM on August 31, 2012
On our website: fremont.eu (Frémont Consultants, we are a french HubSpot customer and partner), using the HubSpot CMS alone, we have implemented:
- global navigation with the top menu and the bottom part of each page,
- local navigation on the right column of each page, completely different if you are, for instance, on a service page or if you are on a partner page,
- contextual navigation: when one of our two personas (sales director or marketing director) chooses on the home page to share a goal with us (you know the customer centric selling way...), then contextual links are proposed on the page he has selected.
We are fond of content marketing and, for us, all these kinds of navigations are part of the game to allow our visitors to find the content we have prepared for them!
Addie 11:36 AM on August 31, 2012
We're currently in the middle of a complete site redesign for just this reason. It's a little slow going (through no fault of the designer), but I hope the end result will be great.
Janjirarities 1:14 PM on September 01, 2012
Thank you for the information. My website still very new in the market. This information help a lot.
Mahalo,
Mohamed Thoufeeq 11:25 PM on September 01, 2012
Nice read: 3 essentials of interaction designing.
SEO for Dentists 4:18 AM on September 03, 2012
Nice to visit this post. I really the information of this article. Thanks for sharing.
puya 2:39 PM on September 03, 2012
incorporating a user friendly navigation with SEO in mind is no easy task. However, with thorough research on the company, keywords and users you can get it done.
Nick Stickle 4:40 AM on September 05, 2012
Great information! The hardest part is utilizing different forms of navigation on my website is differentiating between plugins in wordpress that might allow my site to use better navigation techniques. I just wish there was a simpler method of applying different navigation methods both for internal navigation on each page and globally.
Hudson Kotel 4:07 AM on September 06, 2012
Hello,
it's uses basically a Make User Friendly website , and it can take a server timestamp to start with. The css can also be easily modified to one's own likings.
http://www.phphunt.com/78/how-to-make-a-website-user-friendly