home> articles > Designing Navigation Elements Part 3 of Designing Effective Navigation
Designing Navigation Elements - the rest of the story part 3 of 3 in the Navigation Design Series
By Todd Follansbee July, 2009 First published in Web Marketing Today the largest, oldest internet marketing newsletter on the web - and still free. This originally appeared in Web Marketing Today here.
In parts 1 and 2 of this series we explained how to improve Information Architecture and a Nav Bar which delivers a good User Experience. This article explains how to insure that the remaining navigation elements such as hyperlinks, graphic links, video links, calls to action, and offsite links, provide the correct visual cues and behaviors.
also consider reading
Designing Effective Navigation - an introduction and three part series by Todd Follansbee April 2009 A great User Experience starts with good navigation and good navigation begins with a good Nav Bar. Carefully follow these four guidelines and conversions should improve. Existing sites may have a hard time complying with all four but a new site should have little trouble. Any improvement will help so gather your information here and plan your redesign strategy. Intro to our Designing effective navigation Series Part 1 -Designing effective navigation Series - Navigation Part 2 -Designing effective navigation Series - Information Architecture Part 3 Designing effective navigation Series - the rest of the story
Successful sites recognize the importance of following accepted navigation guidelines and you can comply with these recommendations with basic HTML skills or minimal developer time. The return on this investment, like most UX 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 your site works compared to what they “know”. Most visitors for example, recognize that blue underlined text indicate a hyperlink. The more your site demonstrates professionalism with recognizable cues and behaviors, the more comfortable they will be exploring and ultimately shopping. The Stanford Web Credibility study ( http://credibility.stanford.edu/ ) shows 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 thru 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 PDF's 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 below, Amazon uses two basic button styles. Although it is not 100% clear what each button's will do, it is clear that the yellow buttons represent a move towards a buy decision and the gray buttons cue editing or various other behaviors.
Also Amazon uses form behaviors and/or the “update” button to recalculate or revise an order as shown below.
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 following cart example 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. User's 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 below 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”.
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 and improving the UX translates directly to an improved bottom line.
Please feel free to contact Todd directly with your comments, questions or suggestions.
To watch a short video of a usability test please visit the download page.
services | facilities | testimonials | resources | site map | about us | glossary | How to articles | One hour site review
© 2008 Web Marketing Resources LLC Norwalk, CT & West Tisbury MA