Welcome to the CHROMATIC blog. We discuss topics related to Drupal web development, responsive web design, web strategy, small business, and last but not least, our company and projects.

The Dos and Don'ts of Website Navigation Usability

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 significantly increases 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
  • 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.

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 http://usability.gov/.

Need a new web strategy or website?

As demonstrated in this blog post, we know our stuff when it comes to building websites. If you have a project that you need help with or are looking for a solid Drupal company to partner with, we’d love to hear from you. Contact Us and let’s talk.
  • "31% of current mobile internet users mostly go online using their phone. That’s 17% of all mobile phone owners." - Pew Internet
  • "When people use different devices to complete a single task, they want the same content and navigation." - A List Apart
  • "46% of shoppers reported they exclusively use their mobile device to conduct pre-purchase research for local products and services." - Mobile Path-to-Purchase Study
  • "Only 16% of consumer brands have a mobile strategy, so it’s no surprise that only 14% are happy with the results." - Digiday
  • "Blacks, Hispanics, low-income Americans, high school educated are more likely to be mobile-only users." - Pew Internet
  • "Google recommends following the industry best practice of using responsive web design to decide the rendering on each device." - Google
  • "77% of mobile searches take place at home or work, only 17% on-the-go, according to Google." - Google
  • "55% of mobile phone owners say they use their phone to access the internet." - Pew Internet