Website Navigation: 4 Tips for Maximum Usability

by 5 08/27/2013

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.

Underline hyperlinks

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 top nav bar then consider a dropdown feature to reduce clutter. Microsoft and Chik-Fil-A both do this especially well on their websites.

chikfila-top-nav-bar

microsoft-nav-bar-top

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.

sidebar

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.

Moving Forward

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:

  1. The User is King (or, Queen!)
  2. Organic, Genuine Sites Succeed
  3. 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?

About 

Cody Ray Miller is a young entrepreneur and the founder of Freedom Online Team, an internet business making money online. He also provides free MLM training to networkers.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

5 COMMENTS

Liudas

So, much great info to take action on :) though sadly my WordPress theme doesn’t allow to do all the changes that I would want…

August 27, 2013 Reply

Sarah Bauer

Great overview, thanks! I’ve got something to add to your guidelines for body hypertext:

To increase user trust and encourage click-throughs on hyperlinks, I would recommend making the hypertext as descriptive as possible for what the user can expect to see when he/she clicks it. Savvy users could otherwise judge the text as leading to spammy, unhelpful pages.

August 27, 2013 Reply

    Cody Ray Miller

    Sarah, this is so true! Hyperlinks should always lead somewhere genuine. I visited a blog recently that had a bunch of hyperlinks with key anchor text that merely led back to their homepage. The problem was that their homepage did not offer what the hyperlinks claimed. This is a lose-lose strategy. The user does not get what they want, which means they will not be utilizing your site in the future. So, the user misses out on whatever they are looking for and you lose out on traffic.

    Blessings,
    Cody

    August 27, 2013 Reply

Josh Miller

Thorough, informative, and well written article, Cody. One lesson I’ve learned over and over again is “Less is More”. A minimalist design is not only aesthetically pleasing but also allows the designer to clearly direct a visitor’s attention to a desired goal (such as clicking on the “Contact” button). And it’s great for analytics and site performance, too!

August 30, 2013 Reply


Leave comment

Some HTML allowed

Get conversion optimization, design and copywriting articles FREE >>>