UI Design Newsletter – October, 2000

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