Design / Usability

Email this article Printer friendly page

Navigation. Part 3. The Rest of the Story Todd Follansbee - WebMarketingResources.net - Jul 7, 2009

Earlier in this series we explained how to design a Nav Bar which delivers a good user experience and how to improve Information Architecture. This article explains how to insure that the remaining navigation elements, such as hyperlinks, graphic links, video links, calls to action, and offsite links that provide the correct visual cues and behaviors.

Successful sites recognize the importance of following accepted navigation guidelines. You can comply with these recommendations with basic HTML skills or minimal developer time. The return on this investment, like most user experience improvements, will be several times the cost.

Why are we concerned about these fixes?

Each site represents a learning challenge for the new visitor. In their first seconds on the site, they look for recognizable cues to understand how that particular site works compared to what they "know" about previous website operations. Most visitors for example, recognize that blue underlined text indicates a hyperlink. The more your site demonstrates professionalism with recognizable cues and behaviors, the more comfortable your visitors will be exploring and ultimately shopping. The Stanford Web Credibility Study (credibility.stanford.edu) indicates that 47% of users make buy decisions based solely upon the professionalism of the site appearance. Clear visual cues will support a great impression in the crucial first 10 seconds of a shopper's visit.

You have to "teach" new visitors how your navigation elements work. If your cues are confusing or inconsistent, most visitors will exit. Since the majority of customers are frustrated in their product searches on the web, expectations are often low when viewing a new site. Your job is to convey the impression that your site will deliver.

Text and graphic links, including buttons and "calls to action" should be consistently designed with each style tied to a behavior.

If a text link on one page looks and behaves differently than a text link on another either in color, font or text characteristics, you immediately confuse visitors by undermining what you "taught" them the first time you showed your text links. They will question all text links from that point on.

If your "buttons" and calls to action are not consistent, visitors will hesitate to click. If your "buy" button uses confusing terms (checkout vs. proceed to checkout) as well as inconsistent cues, you will lose sales. New shoppers want to explore and compare products by adding or removing them so make it easy to revise orders and make clear what the navigation is for customers who placing an order. Even the smallest inconsistency can cause cart abandonments and/or mistaken orders.

Types of navigation elements

Start by insuring that your site offers different but consistent types of visual cues for each of these behaviors:

• Take me to another page
• Take me to another site
• Download content (i.e., PDFs, videos, coupons)
• Recalculate or redisplay a page
• Step through an order
• Finalize or submit an order, subscription or other commitment

How successful sites comply with these guidelines

Specify the cues which you want visitors to identify with each behavior using font, size, color, and text characteristics such as "bold" or "italics." Also define the link cues for mouseover effects, visited links, and visual cues for graphics, buttons, and form fields.

Here are the navigation cues which CNN.com follows. Text links on CNN's site are blue bolded Arial text regardless of whether they are body text, headlines or bulleted text (as shown below).

The cue that you will leave the CNN site to visit iReport.com is 50% blue/bold (shown above). Small icons cue videos and T-Shirts (as shown) or other elements such as PDFs which are not shown. All text links on the site also exhibit the mouseover behavior changing text from blue to red text as shown below.

CNN requires you to "learn" their link cues for nav behaviors but once these are learned, users will instantly recognize all links and what to expect when they click. Do not underestimate the impact of this on the user experience.

Graphic elements also need to follow specific styles

Buttons with 3D graphics and mouseover cues can demonstrate that a particular graphic may be a link. Though many sites use much more basic 2D or "flat" button designs, we recommend a 3D look with mouseover display over basic flat button designs.

In the example to the right, Amazon uses two basic button styles. Although it is not 100% clear what each button will do, it is clear that the yellow buttons represent a move towards a buy decision while the gray buttons allow editing or various other behaviors.

Amazon also uses form behaviors and/or the "update" button to recalculate or revise an order as shown to the right.

Visitors who understand all order elements are more likely to order and more likely to order more items. Visitors who are uncertain about site/cart nav behaviors often fear that entering a quantity and hitting "enter" may "submit" an order.

The cart example below shows confusing graphics, which do not follow a style guide.

Graphics links for illustrations

The examples below are of graphic images which link to other pages. Users browser preferences control the cursor style when it hovers over a link. In the example below the cursor becomes a hand pointer. We recommend including captions which follow text link styles to provide visual cues that an image will link to another page

In this example we see two photos. It should be clear that one is a link to another product page and the other illustrates a product in use.

The example of the Amazon.com credit card to the right shows how a lack of visual cues can hurt sales. A possible caption might be: "Sign up for the Amazon Visa card and get $30 back". Our browser did not display an Alt Tag which would also help.

A note about Alt Tags

Alt tags should describe all graphics for the visually impaired and where possible, also describe behaviors, such as, "visit XXX page."

In Conclusion

Ensure that:

• Links are obvious at first sight.
• You use link text captions to provide visual cues for important graphics.
• You have 100% consistency for all cue styles throughout the site so visitors can easily learn to identify what to expect from a click.

Text and graphic navigation elements are an important part of persuasion and information architecture. A clear, easy to understand and consistent site will reduce anxiety, demonstrate professionalism and increase customer engagement. After directly observing user behaviors on shopping sites for over 10 years we are more convinced then ever that fixing these small navigational elements will improve your visitors' user experience which will translate directly to an improved bottom line.

Todd Follansbee is founder of WebMarketingResources.net. He is a usability and persuasion consultant who has been testing user behaviors on web sites for over 10 years. His methodology for improving conversions recently won a top ten award in Entrepreneur Magazine. For a limited time, Todd is offering a special small business one hour site review and consult for only $125. Improve your user experience and your bottom line. For more details visit here.