Website Navigation: 4 Tips for Maximum Usability
Here’s a conversion optimization metaphor for you…
If your website were a building, hyperlinks would be the doors.
What does that mean? You don’t want people to get stuck anywhere on your website. So you should always make sure they know how to get from place to place easily and efficiently.
This article will discuss the four primary pathways by which users get places on your site… and tell you how to optimize these pathways for maximum impact.
Tweak #1: Make Body Hypertext Obvious
Hyperlinks contained in the body of your page (not your navigation bars, sidebars, or footers) should be obvious to any user. Here’s how to do it:
Make hyperlinks a distinct color
The best color to use is blue because most web users’ minds have been trained to associate the color blue with hyperlinks when surfing the web. However, you can use any color so long as it is unique and draws the user’s attention.
Avoid using that color on other text
Using the same color as your hyperlinks on other (non-hyperlink) text confounds the natural flow of your website by causing the user to consciously question where the real “doors” (hyperlinks) are.
It may seem “old-school” but underlining your hyperlinks is a great way to subtly direct users to your website’s major pathways. Remember: Most users expect hyperlinks to be underlined. This has been subconsciously engrained in their minds from years of web-surfing.
Avoid underlining any other text
Use italics for stress and bold for emphasis, but never underline.
Why it Works
The human mind uses “schemata” in processing familiar data. Schemata are frameworks by which we understand the world around us.
For example, a car is made of many individual parts (engine, transmission, seats, wheels), but when we think of a car we think of the whole package.
Links should be designed with schemata in mind. The user should see a hyperlink and know, without question, what it is and how it works.
Tweak #2: Streamline Your Navigation Bar
Have you ever walked into a building with a directory in the lobby? That’s what a navigation bar is. Users look to the nav bar to find where to go.
When designing your navigation bar keep the following things in mind:
You should have one—and only one—nav bar
Choose a horizontal top nav bar, or a vertical nav bar if you have a lot of links and cannot consolidate them, but never have more than one nav bar. It confuses the user and makes your site look chaotic and messy.
Organize links in a hierarchical structure
If you are using a vertical nav bar, you may want to take advantage of this same feature (in which case additional links would likely pop out to the side), or use slight indentations, even bullet points, to denote subpages.
Utilize a Contrasting Color Scheme
You want your navigation bar to stand apart from the rest of the page, so choose a highly contrasted color. If your normal page background is white, try black. If your page background is black, try white.
You get the idea. Whatever color you choose make sure your nav bar stands out!
Why it Works
Users need to be able to find what they are looking for on your site with speed and precision.
Dropdown menus and hierarchies allow the mind to process large amounts of information quickly by breaking it down into smaller “chunks” of data, while a contrasting color scheme draws the user’s eye to the nav bar.
Tweak #3: Keep Sidebars Separate
Sidebars should never be confused with navigation bars, although they are similar. Sidebars should contain external links or extra features, but never links for primary site navigation.
The following tips will help your sidebar shine:
Left is Wrong, Right is Right
The best location for a sidebar is on the right side of your webpage. This is another one of those “universal” things to which most users will be accustomed.
Also, most languages are read from left to right, so most users will be looking for primary information on the left.
Remember, sidebars are not primary pathways for site navigation; they supply the user with extra or secondary site functionality only, and that’s why they belong on the right.
Search Comes First
The very first feature every sidebar needs is a search box (assuming your search box is not contained in the header section of your site).
It puts the user in control and lets them know that your site is an open book. It also reduces user frustration if they are having trouble quickly finding exactly what they are looking for.
No Promotional Tomfoolery
Never use ads or promotional links that trick the user into clicking on your sidebar. This creates frustration for the user, which means they won’t be coming back.
There is nothing wrong with promotional links or banner ads placed on a site sidebar. However, you want to be sure that they are tasteful, fitting, and never deceptive.
For example, avoid banner ads that look like buttons or have fake interactive icons.
Why it Works
Well-organized and focused sidebars lead users to supplemental material that will further engage them with your website.
Think of a sidebar as one big and interactive parenthetical statement.
Your site could survive without it, but it adds information that many users will find helpful. A good sidebar is non-intrusive and yet immediately accessible to those who may be interested in what she has to offer.
Tweak #4: Don’t Forget the Footer
Your website’s footer should contain a mixture of primary navigation links and a limited amount of extra information. As a general rule, you ought to be able to use your site’s footer to navigate the primary pathways of your website.
However, keep in mind that search engines like Yahoo! and Google look at footers with a skeptical eye. That’s because footers have, historically, been the location of abundant link spam.
Here’s my advice on footers:
Design Your Footer for Humans
Your site’s footer is not the place for an abundance of keyword-rich anchor texts. Instead, design your footer with real (human!) users in mind. This organic approach to footer design will please search engines more than you may suspect.
Consolidate the Number of Links
Keep your footer links strong but few; it reduces clutter and user confusion.
Keep Things Neat and Tidy
All too often I see websites that use their footer as a dumping ground for reciprocal links. This is unpleasant to the eye and it degrades the user’s perception of your site as being reputable and well-established. There is nothing wrong with copyright or contact information placed on the footer, but keep it short and simple.
Why it Works
Search engines don’t like sites with over a hundred links, and neither do users. Footers, if cluttered with links, can set your page over the one hundred link limit, penalizing you on Google (and potentially other major search engines) and clouding the user’s ability to make an appropriate selection for navigation.
As you think about ways to optimize the navigation of your website consider the advice presented here. And remember, every website is unique. So, don’t be afraid to deviate from these suggestions significantly.
The most important thing is that you grasp a few key concepts. In summary:
- The User is King (or, Queen!)
- Organic, Genuine Sites Succeed
- Intuitive Design is Paramount
Considering these three key concepts, is there anything you would add to the list?
Have you had any experiences with site navigation (whether good or bad) that you would like to share?