Fundamentally navigable

Bad website navigation leads to user confusion. As a designer it is your job to work with Information Architects to eliminate this confusion. However, adding a few coats of paint is not going to work. CSS tricks won’t get you far if you don’t understand the fundamentals of creating website navigation. Fundamentals will help you [...]

Bad website navigation leads to user confusion. As a designer it is your job to work with Information Architects to eliminate this confusion. However, adding a few coats of paint is not going to work. CSS tricks won’t get you far if you don’t understand the fundamentals of creating website navigation. Fundamentals will help you recognize user needs and present a design that they can trust.

Use Semantic Code

Your most important users are search engines, like Google. Google needs semantic code to index your content properly. If your code adds no value to the content you limit the access of search engines. However, accessible code is not just Google’s problem.

Disabled users also need semantic code. Programs like Jaws aid blind users on the web and looks for semantic code. If your code is not structured correctly these programs can’t do what they were made to.

To create semantic navigation use unordered lists and id’s that describe the content properly.

<ul id="navigation">
<li>
<a href="#">Home Page</a>
</li>
</ul>

This is a fundamental that is often overlooked. However, it’s still very important. We need to recognize user needs, like Google’s for semantic code, and design our navigation to meet those needs.

Be Consistent

Consistency is a big part of Information Architecture. Users are more likely to accomplish tasks when you’re consistent. Keep the main navigation in the same place though as much of the site as possible. This consistency will increase the user’s ability to reach their goals and meet yours while they’re at it.

The trouble is consistency is not just important on a site to site basis. User’s expectations need to come into account as well. The main navigation of a site needs to be at the top, left or right hand side. Users expect navigation to appear in these locations. If they are not you decrease the amount of tolerance users have for your site.

Elliot Jay Stocks, a freelance web designer, understands this concept and keeps his navigation in a prominent location.

Mark the Current Page

You can reduce the amount confusion on your site by visually marking the current page. By marking the home page users can visually indicate where they are in the sites architecture.

45royale Inc. visually indicates the current page to the user as the home page. This increases user tolerance and usability at the same time.

Use Bread Crumbs

Bread Crumbs are perfect for sites with nested pages. Smashing Magazine voices the many benefits in their post saying.

In terms of usability, breadcrumbs reduce the number of actions a website visitor needs to take in order to get to a higher-level page, and they improve the findability of website sections and pages. They are also an effective visual aid that indicates the location of the user within the website’s hierarchy, making it a great source of contextual information for landing pages.

Clearleft uses bread crumbs on their site to do just that, while keeping to the best practices in navigation.

Located on the left hand side, the bread crumbs enable users a back track through a site without using the back button.

Summery

Eliminating user confusion is the primary goal of good navigation. When you are able to do that, users can experience a more enjoyable visit to your site. While design plays a major role in this enjoyment bad navigation can destroy it.