 |
|
|
|
|
|
|
Insights from Human Factors International
|
 |
|
In This Issue Bob Bailey reviews:
|
|
Link Affordance
|
How can designers improve the "link affordance" of their Web
pages? What is the link affordance rate of your Web pages?
|
| |
|
| |
|
|
Introduction
|
Over the past few months in this year's "User Interface Update -
2000" course, we conducted a study on how well Web pages were designed
to show their links. We refer to this as determining a page's "link
affordance" rate.
We compared the link affordances of two home pages, AT&T and L.L.
Bean. All participants tried to correctly identify the links on black-and-white
paper printouts of the pages.
|
|
|
Results
|
The findings showed clearly that the L.L. Bean site had a much better
link affordance. Both home pages had exactly the same number of links
(29). The participants reliably identified an average of 28.2 of the L.L.
Bean links, but only 21.9 of the AT&T links (p<.0001). This means
that they missed an average of only one L.L. Bean link, but they missed
seven of the AT&T links. The link affordance rate for Bean was 97%,
while the link affordance rate for AT&T was only 76%. In the latter
case, almost one out of every four links would not be clicked without
users reverting to slow "mine sweeping" behaviors.
Some argue that using the mouse in a top-to-bottom, left-to-right, mine
sweeping motion looking for links is acceptable performance for Web users.
I suggest that it is slow, tedious, and frustrating for users.
|
|
|
Deriving "Do's and Don'ts"
|
From this activity we identified many of the cues that were being used
to suggest to users that an area of the page was "clickable."
|
|
|
Text-Based Links
|
- Do use blue underlined text for most links
- Do use underlined headers as links
- Do use words in a left-justified list as individual links
- Do use bullets, arrows or some other indicator in front of certain
text links
- Do use "mouse-overs" appropriately and with care
- Do use page location to help communicate that an item is clickable
- Left or right margins
- Top or bottom of the page
- Do use the term "click here" when appropriate
- Do specifically refer to nearby graphical links in the text ("click
on the Lion")
|
|
|
Graphical Links
|
- Do use meaningful words inside graphical links
- Target locations (Home, Back to Top, Next
- Common actions (Go, Login, Submit, Register)
- Do use graphical "tabs" that look like real-world tabs
- Do use graphical buttons that look like real-world pushbuttons
- Do use clear, descriptive labels inside tabs and pushbuttons
- Do put clickable graphics close to descriptive, blue underlined text
- Do use a frame (border) around certain graphical links
- Do make all company logos clickable (to the home page)
- Don't require users to do "mine sweeping" to find links
- Don't use stand-alone graphics that are not close to, or do not contain,
text as links
|
|
|
|
Past Issues
|
|
 |
|
