Subject: link colors and usability
Mon Apr 20 19:38:40 1998


> I think standards make it easier for a user to find out just
> what is a link and what is not.  However, I think the underline
> is more of a give-away than the actual colour.  I cringe when I
> see underlines that are not links, but I don't have any
> difficulty figuring out that clickable is "burgundy" on one page
> and "yellow" on another.


IMHO, it's aceptable to change the colors of links as long as
you stick to the basic principle behind using link colors in the
first place.   there are only three possible states for the text
to be in:

    "this text is one color"     == "plain text"
    "this is a different color"  == "this is a link"
    "this is yet another color"  == "i've clicked this link"


so according to information theory, you only have to store
log2(3) == 1.585 bits of data in your head to understand what's
going on.

the acquisition process for that model is fairly simple, even if
you change the colors from the standard.   assuming that the
user already knows:

    "black text"  == "plain text"
    "blue text"   == "link"
    "purple text" == "clicked link"

when they come to a site that uses the default colors, they
already know how the mapping works.

if the site designer changes the colors, but sticks to the
three-color model we're talking about, the user learns which
colors have which meanings in roughly the following way
(assuming she only sees unclicked links on the opening page):

   "okay.. we have two colors of text, and i haven't clicked any of
    these links.   one must be the text color and the other the
    link color.   all i have to do is click one of the colors and
    see what it does.. if i get another page, that's the link
    color.   if nothing happens, that's the text color.   either
    way, i'll know what each of these two colors means.   then i
    click the link color, come back, and see what the third (clicked
    link) color is.   that will be easy, because all i have to do is
    compare it to look for a link which is a different color than
    anything else on the page."


the essential point is that with no information other than the
colors, the user can learn the whole color map with (at most)
two clicks.   even more important, the user isn't under a strong
burden to memorize the colors themselves.. she can rely on other
visual cues which will point her to the right answers:
underlining on the links being one such cue, and the relative
amount of text in each color being another.   as easy as the
model is, those are usually quite enough to let the user choose
the right answer first time, every time.


if you add one more color, the acquisition process becomes more
complex:

    "most of the text is this color" == "plain text"
    "this is a different color"      == "more plain text"
    "this is yet another color"      == "this is a link"
    "this is yet another color"      == "i've clicked this link"

because the user has to reduce each page mentally to the
three-color model:

    "this is the link color"         == "link"
    "this is the clicked link color" == "clicked link"
    "this is neither the link color
     nor the clicked link color"     == "plain text"


finding out which color signifies a link takes one more click on
average ("okay, color #1 didn't do anything.. now for the
tie-breaker beteen #2 and #3"), then the user has to memorize
that color to work out the rest of the model.

then, each time the user looks at a color, they have to run
through the checklist above to decide what it does.   that means
a four-color model requires the user to memorize two colors
explicitly, and go through a 1.585-bit decision process every
time they look at a pieces of text with a new color.   the more
colors you use on your page, the more times you force them to go
through the list.


now, two side-considerations to keep in mind:

first, the average human can hold 5-7 things in mind
simultaneously.   forcing users to re-map your page burns just
under half their mental carrying capacity just trying to
remember your color scheme.

second, your site isn't the only one the user is going to see
today.   *you* might think green is a good color for links, but
the last page the user saw may have used that as an accent
color.   that means you're fighting with the color mapping
they've just learned elsewhere.


sure, the designer knows which colors they've mapped for the
various purposes.. but then, the designer has spent a *lot* more
time getting used to that mapping in a nice, uncomplicated
environment.   one of the oldest saws of developing work for
public consumption is, "know your audience", and in this case,
that means somebody who's already had to wade through a ghoulash
of other color schemes for half an hour before coming to your
site.