Chances are your company puts a lot of effort into driving customers
and prospects to your Web site. The last thing you want is for them to
be lost or confused once they get there, but that may be the case if
your Web site navigation isn’t consistent, clear and easy to use. The
fact is, anything that’s hard to use doesn’t get used very often. Busy
engineers will quickly abandon a site that’s difficult to navigate for
one where they can find what they are looking for.

How Good Navigation Helps
A good navigation structure allows visitors to find useful content and get around your Web site without getting lost. They will have a positive experience and this will increase your opportunities to generate leads and gain new customers.

Most Web sites make use of a navigation bar that runs horizontally across the top of Web pages or vertically down the left or right side. Some sites with multiple levels of content might have both horizontal and vertical navigation bars.

A navigation bar should have the following characteristics:

  • Appear in the same place on every page — don’t move the navigation bar around from top to side to bottom. Consistency is the key. Also, every page should have at least basic navigation.
  • Always have the same links — don’t switch the links on the navigation bar or change the order in which they appear.
  • Have clear labels on links — the meaning of the link text should be clear and unique. Don’t use clever names that are not descriptive.
  • Indicate the current page — one of the best ways to orient users on your Web site is to change the appearance of a navigation button or text to show what page the user is on. For instance, bold, underline or change the color of a navigation link to indicate the current page.

Primary and Secondary Navigation
Web sites with a lot of content often use both primary and secondary navigation. Primary navigation is the main navigation bar on your Web site. It allows users to move between the main content categories of your Web site, such as Products, Services, About Us, etc. Secondary navigation allows users to get to related information within a primary content category, not between categories. For example, a list of product categories might be the secondary navigation under a primary navigation link called Products.

The Web site shown below, from MicroMo Electronics (www.micromo.com), demonstrates a good example of primary and secondary navigation working together. When a user clicks on “Products & Technologies” on the main navigation bar on the left, they go to the products page. Now the navigation bar highlights “Products & Technologies” and expands to show a secondary navigation for that section. All primary navigation links are still available to the user.

Nav

(click image to enlarge)

This type of primary and secondary navigation is especially useful because not all visitors to your site will enter through your home page. Many will arrive deeper in your site; good navigation will clue them to exactly where they are.

Primary and secondary navigation typically work together in one of two ways:

  • Secondary navigation menus appear only when the visitor rolls his mouse over a primary navigation element. The benefit of this approach is it allows users to see the structure and get deeper into your Web site faster. The downside is that the user must have some agility with their mouse to follow the menus that suddenly appear on the page.
  • Primary navigation expands to show secondary navigation when a primary navigation element is clicked. A secondary navigation menu is always visible in its category, but hidden when the user is in another category, such as in the example above. This method may be easier for users to navigate, but it takes up more space on the page.

Both of these options are prevalent in Web site design today.  Follow the guidelines below to determine the best choice for your Web site.

Tips to Improve Navigation
If you have the resources to make major changes to your Web site, follow these tips to build an effective navigation scheme.

  • Start by analyzing your site’s content and organizing it by how your target audience thinks about and searches for content. Most visitors come to your Web site with a task in mind. Most engineers are seeking technical product information. Your navigation should be designed to help visitors complete tasks.
  • Develop a content “org chart” that shows the hierarchy of content, with main categories at the top and sub-categories below them until you account for all content. This will give you an idea of how many levels of navigation you need and will ensure that all content fits logically into a category.
  • Don’t move to the design stage until you’re satisfied with how the content is organized and you’ve established a navigation approach. In other words, let content and navigation drive the design rather than trying to force content hierarch into an already chosen design.

Even if you’re not ready or don’t have the resources for a major navigation overhaul, you can use some of these tips to improve navigation and your users’ experience.

  • Work with your Web master to add visual cues to navigation. Change the appearance of navigation elements when the user clicks on them, by underlining, bolding or changing their color. This gives the user cues as to where they are in your site.
  • Repeat the text used on a navigation link on the headline of a page. This provides additional reinforcement letting the visitor know where they are.
  • Add a “breadcrumb” trail. This is a horizontally oriented, hierarchical trail of linked text that shows users where they are and how to get back. Here’s an example of a breadcrumb from GlobalSpec’s site:

Breadcrumb_3

(click image to enlarge)

 

  • Repeat main navigation links as text links at the bottom of pages. This helps users who have scrolled down your page to link to another section without having to scroll back.
  • Add a site map if you don’t already have one. A site map lists all categories and the pages that appear under them on your site, with links to each page.

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s