The Dos and Donts of Website Navigation Usability

by Matt Jurmann

Having poor website usability is like driving your car without a map through an area that you've never visited before. Unless you have an incredible aptitude for finding your way around, you're going to get lost. In addition, the more that you drive around, the more frustrated you're going to become. The possibility that you'll never want to return to that area increases significantly as the frustration is compounded. The same holds true for a website that possesses poor usability. Not only is the visitor going to have a difficult time finding their way around, but they could become extremely frustrated and never want to return to your website again. A lot of websites have great usability - why settle for one that induces headaches and forces the visitor to think too hard?

Shocking (but not surprising) usability statistics

According to Usability.gov (an official U. S. Government Web site managed by the U. S. Department of Health & Human Services):

Research by User Interface Engineering, Inc., shows that people cannot find the information they seek on a Web site about 60 percent of the time.

Studies by Forrester Research estimate that approximately 50 percent of potential sales are lost because users can't find information and that 40 percent of users do not return to a site when their first visit is a negative experience.

A study by Zona Research found that 62 percent of Web shoppers give up looking for the item they want to buy online.

According to Elizabeth Millard, "The best sites we've found are usable only 42 percent of the time."

Although statistics are not always 100% accurate, these numbers illustrate the importance of having strong website usability. Whether you sell a product online or are trying to build a readership base around your blogging website, usability should be your number one priority.

The Many Parts to Website Navigation Usability

Implementing a successful navigational system on your website is not a hard thing to do. However, a few simple mistakes and your website usability will be severely compromised. Compromised usability will lead to higher bounce rates (visitors quickly exiting your website without visiting any additional pages besides the page that they arrived on (the landing page)), fewer sales, and generally unhappy and confused visitors. Avoiding navigational confusion is an extremely important part of website usability. Without navigation, it would be difficult for visitors to explore a website. There are many factors involved in creating successful, usable navigational menus. These include:

Universal Navigation - navigation appears on every web page

Placement Consistency - navigation appears in the same location on web pages

The Importance of Text - text for navigation - good, images for navigation - bad

Feedback on Location - breadcrumbs, hyperlink styles, colors, etc

Flash Navigation - a sensitive subject

If when a businessman speaks of minority employment, or air pollution, or poverty, he speaks in the language of a certified public accountant analyzing a corporate balance sheet, who is to know that he understands the human problems behind the statistical ones? If the businessman would stop talking like a computer printout or a page from the corporate annual report, other people would stop thinking he had a cash register for a heart. It is as simple as that—but that isn’t simple.
—Louis B. Lundborg (1906–1981)

Site maps - hyperlink hierarchical outline of website on one page

Universal Navigation

The simplest way to cut down on navigational confusion is to include your navigational hierarchy on every single page of your website (universal navigation). Not only is this good for Search Engine Optimization since it allows the search engine spiders to easily access most of the pages on your website no matter what page they are on, but it guarantees that your website will not have any "dead end pages". A dead end page is a web page that is reached by clicking on a hyperlink within a website, but which has no hyperlinks to other pages. The visitor is stuck on the web page with nowhere to go unless they use the browsers "Back" feature or close out of the window and website completely.

Placement Consistency

To further minimize navigational confusion, keep your navigation in the same location on every page of your website, preferably in the upper-left section of the website. By doing so, visitors will not have to guess where to look each time they visit a new page. Surprises (such as a random placement of the navigational menu) are bad and should be avoided at all costs. Some websites have two different navigational menus: one for the home page and one for the rest of the website. If possible, use the same navigational menu that is located on the home page on the entire website. This will cut down on confusion and the element of surprise.

The Importance of Text

Textual navigation can be basic and boring, but the point of navigation is to easily communicate the subject of each hyperlink. When someone uses strictly images (commonly referred to as " Mystery Meat Navigation "), they are forcing the visitor to translate what they think the image means. People interpret images differently and it is for this very reason that using images with no text for navigation is a terrible idea. Keep your hyperlink text short, descriptive, and to the point.

Feedback on Location

When creating a website, it is important to constantly provide feedback to the visitor regarding their current location. There are several ways to go about doing this:

Use "breadcrumbs"; breadcrumbs provide a path for the user to follow back to the starting/entry point of a website and are often displayed horizontally at the top of the content area on a web page

Match the hyperlink text to the destination page's heading

Create URLs that relate to the users location on the website

Change the color, style, size, etc. of the currently active hyperlink

Change the color of visited hyperlinks

Flash Navigation: Proceed with Caution

Flash navigation should generally be avoided since it is bad for search engine optimization. However, if you're going to use Flash navigation, then at least provide text links in a visible location for those visitors still using older computers and browsers which do not have Flash.

In addition, do not use Flash rollover effects that can confuse the visitors or make them wait for more than 2 seconds. There is nothing more frustrating than trying to navigate through a website with rollover transitions that last for 5 or 10 seconds.

Site maps

We're not talking about XML sitemaps for the search engines. Although its not a bad idea to regularly submit an XML site map to the search engines, an HTML site map should also be used as a navigational tool for visitors. Displayed in either a table of contents or a simple index, a site map should list all of the relevant hyperlinks of a website in an organized fashion.

Be sure to indent secondary hyperlinks if they appear under a primary navigational category, tertiary hyperlinks if they appear under a secondary category, and so on and so forth.

Battles, revolutions, pestilence, famine, and death, are never the effect of those natural causes, which we experience. Prodigies, omens, oracles, judgments, quite obscure the few natural events, that are intermingled with them. But as the former grow thinner every page ... we soon learn, that there is nothing mysterious or supernatural in the case, but that all proceeds from the usual propensity of mankind towards the marvellous, and that, though this inclination may at intervals receive a check from sense and learning, it can never be thoroughly extirpated.
—David Hume (1711–1776)

Finally, make sure that your anchor text on hyperlinks are descriptive so that visitors will find exactly what they're expecting to find when they click on a hyperlink. Site map anchor text should be longer than main navigational hyperlinks and is recommended in the chance that some of the web pages listed in the site map have similar topics (and chances are they will).

The Dos

the same navigational menu should appear on every web page of your website

the main navigational menu should have a consistent placement, preferably in the upper-left section of the website (for vertical navigational menus) or directly underneath the logo near the top of the page (for horizontal navigational menus)

provide location-based feedback by using breadcrumbs, matching the hyperlink text to the destination page's heading, etc.

provide a table of contents or simple index by creating a site map listing all relevant links on the website in an organized, hierarchical fashion

use descriptive keywords for the anchor text and page name so that visitors get what they expect when clicking on a hyperlink

if you're going to use Flash navigation, then provide the same navigational elements in text link form on your website for those who do not have Flash enabled on their computer

The Donts

don't use confusing or lengthy Flash transitions for your navigation; people hate to wait and people hate being confused

always use descriptive text for your anchor text or Flash navigation - don't rely on images to communicate your hyperlinks content

don't allow your visitors to arrive at dead end web pages or orphan pages; include your main navigation on every page of your website

don't position navigation in different areas on your website; keep the positioning consistent on all of the web pages

don't make navigation the same color, font, and size as your body text - navigational text should always stand out

don't play a sound clip each time an item in your navigation is rolled over with the mouse cursor; as mentioned above, people do not enjoy surprises. if you're going to use sound, then always include some sort of warning or indication so that the visitor can adjust their volume accordingly

A Piece of the Puzzle

Website navigation usability is only a part of the website usability puzzle. Factors such as accessibility, hardware and software, the homepage, page layout, scrolling and paging, headings, links, text appearance, and lists are all important factors that must be taken into consideration when designing a usable website. However, without usable navigation, your visitors will become confused, frustrated, and may eventually leave your website in the search of something more straight forward and usable.

For more on website usability, visit Professional Web Design company Chromatic Sites publishes website design tips for amateur and professional web designers. Long articles posted monthly, short articles posted weekly. Chromatic Sites offers professional web design services for those interested in having a high-quality company web image.

Website Info ...

It's A World Wide Web: Going International. ... A good first step in taking your website international is to offer links to translate it at a free machine translation service, such as Babelfish or Google's Page Translator...


Navigation Info ...

Web Usability: Left Navigation Or Right? ... Left-Brain, Right-Brain Without hesitation, I always begin the basic structure of Web page design with the primary navigation on the right sidebar... I jotted down the reasons why I think a right sided navigation is more intuitive on the backside of a Google Maps printout...

Overview Of Satellite Navigation Systems ... Sat nav systems are one of the biggest breakthroughs in navigation technology and after being used for years for military application, they have in the last few years become available for civilian drivers... GPS is a collection of over 2 dozen satellites which orbit the earth, sending exact timing signals by radio transmission whereby GPSr (Global Positioning System Receiver, ala you're Satellite Navigation System) will be able to determine its location within a few metres....

Is Gps Navigation For You? ... You can use GPS navigation in your vehicle to get specific directions from Point A to Point B, calculate mileage or find a local restaurant or gas station... Most GPS navigation systems are incredibly accurate by using multi-channel receivers to lock in on the satellites and maintain that connection even in highly populated areas or the most rugged of natural terrains....


Page Info ...

Clean Page Structure: Headings And Lists. ... What is CSS? CSS stands for Cascading Style Sheets – it is basically a way of saying once what you want your pages to look like, instead of having to repeat it in HTML all the way through the document. In old style HTML, for example, this kind of code was a relatively common sight:...

Keywords, Competition And Being Number One- Uncovering The Algorithm ... By following these steps you will see that most closely guarded secret-- the search algorithm. Remember the movie "The Matrix?" The Matrix is there, you just can't see it...

Get The Best Web Design From Thomasgarciastudio. Com ... Thus if you have the problem of less visitors then it is most likely due to poor design of the web page and more importantly because of bad SEO... If you want to avoid the above problems from your website and if you want to know the name of one such web page design Albuquerque Company that is simply second to none then TGS Web Design at ThomasGarciaStudio.com is the name you must opt for...