Docstoc

Color Schemes of Popular Sites

Document Sample
Color Schemes of Popular Sites Powered By Docstoc
					Atlas NetConversions Benchmark Studies #2:


Color Schemes of Popular Sites
Steve Kangas, Ph.D., Chief Technology Officer
Atlas NetConversions
September 2001

Abstract

Eighty-seven of the most popular home pages on the web were surveyed to
gather data about their use of color. This study presents conclusions about the
color schemes of these pages (background, text, and link colors) in comparison
with well-known usability guidelines.

Contents

•       Motivation
•       Methodology
•       Results
•       Data
•       About Atlas NetConversions

Motivation

This paper presents the results of a study of 87 popular web sites with the aim of
characterizing the color schemes used in the design of their home pages.

The study was motivated by an interest in comparing published usability
guidelines with current common practice. In particular, published guidelines
relating to the use of color on web pages include the following:

    •   Nielsen [1] recommends that all web pages make all links blue to keep
        with the traditional default color of web browsers.
    •   Numerous authors [1, 2] recommend distinguishing between link color
        (the BODY "link" attribute), the color when a link is clicked (the "active
        link color", or BODY "alink" attribute), and the color of a link that has
        already been visited (the BODY "vlink" attribute).
    •   Several authors [3, 4] have suggested that the overall color variety of a
        web page should be minimized, or at least kept to within 6-8 different
        colors per page.
    •   There is an ongoing controversy about background colors. Traditional
        printed paper featured black text on white paper and there are arguments
        [4, 5] which favor carrying this scheme onto the web (mainly having to
        do with the familiarity of the scheme and its ease of printing). There are
        also arguments [6] which favor the opposite approach of having light text
        on a dark background (one argument has to do with the need to reduce
        glare from light emitting sources such as computer monitors).
Methodology

A total of 87 web sites were surveyed using a combination of manual checks and
automated page measures. The web sites were chosen from a list of 99 most
popular web sites provided by top9.com. Twelve sites were excluded because
either they used frames (4 out of 99), had unusual internal scripting which
interfered with our software (6/99), or had gone out of business (2/99) between
the publication of the list (Mar. 2001) and the time of our study (July 2001) - any
of these conditions being sufficient to interfere with the accuracy of our
automated page measures.

Our automation consists of client-side (JavaScript) scripts that pull data about
the page from its document object model. The scripts ran in an Internet Explorer
5 browser window with external dimensions 800x600.

Results

A. Link Color - The default link color (the "link" attribute of the BODY) was
unspecified for about half (44 out of 87) of the sites. Where it was specified, 17
used some shade of blue, 9 used purple, 5 used white, 5 used black/gray, 3 used
some shade of red, 2 used yellow/gold, and 2 used green.

So about 70% of the sites (61/ 87) follow the "blue links" guideline mentioned
above (assuming that an unspecified link color will default to blue in the user's
browser).

Note that there is some subjectivity in judgement when distinguishing between
blue and purple, so the actual percentage might be considered to be slightly
higher. But note also that the default link color can be overridden by style sheets
or FONT tags, so some links within the page may have different colors than the
specified default, so the actual percentage is really slightly lower.

B. Visited and Active Link Colors - Of the 43 sites that did specify colors for
visited (vlink) or active (alink) links, all 43 chose the same color for the link and
the visited link. This is in startling contrast to the usual recommendation, but it is
understandable; designers wish to keep the same color scheme for links,
regardless of how they have been used. However, since most of these popular
sites have many links on their home pages, this design choice is guaranteed to
affect navigability.

Fourteen sites took this further, setting the active link (alink) color to be the
same, or very similar to, the link color. This means that the user receives no
immediate confirmation when clicking a link that it has been clicked (since it can
take several seconds for the new page to displace the old one, immediate
confirmation is desirable to avoid multiple clicks on the same link).

C. Background Color - The most popular background color, by far, is white.
White was used by about 69% (60/87) of the sites as the default background
color (BODY bgColor attribute) or left unspecified (in which case it defaults to
white for most browsers). Background colors used:

 60 white
 9 blue
 8 yellow
 7 gray/black
 3 green

D. Text Color - The universal color for text is black.

Black, dark gray, or dark blue was used by every single site that specified a
default text color (BODY text attribute). Again, the default text color can be
overridden by using style sheets or FONT tags; looking at the variability of FONT
tags we see that the norm is black text punctuated with multicolored accents.

E. Color Variety - We took into account the distinct colors assigned to the
background, tables, table rows, table cells, text, font, and link types and found
that the average number of distinct colors used by the home page is eight.

This is in keeping with the aforementioned guideline, but there is tremendous
deviation from the average.




The chart above shows that the tendency is for the variety to be skewed toward a
smaller number of colors.

It should be noted that for the purposes of this study, style sheets were ignored.
Some colors on some sites were defined by style sheets, so the actual color
variety for a given site may be slightly different. However, we do not expect this
to significantly alter the average number of colors across all sites considered (see
below).

F. Style Sheets - Style sheets were used by 58 of the sites. Since colors can be
set by style sheets, and since the information in style sheets was ignored by our
automated measures, it was necessary to manually examine the impact this
could have on our results. After checking the sites involved, our conclusion was
that style sheets are used mainly to set font faces and sizes, to remove link
underlining, and create link hover (mouseover) behavior. This does not affect the
color scheme. In a few cases, style sheets were used to set the color of some
links to be dramatically different from the BODY link attribute (the cases were
flowgo, cnet, digitalimpact, flipside, ivillage, fortunecity, windowsmedia,
jobsonline, and mtv) or to set the color of a table cell area (the cases were cnn,
ivillage, and directhit). In those cases our counts of color variety will be slightly
inaccurate. But in all these cases the color change was fairly minor (a light use of
style sheets), and our overall conclusions about the aggregate of all the sites are
not significantly affected. The light use of style sheets can be explained by the
fact that style sheet implementations were fairly wobbly until the most recent
browsers, so currently sites are using style sheets sparingly.

More precisely, the average document height (document.body.scrollHeight) was
1127 pixels. With a browser window at 800x600, the internal height of the
window (minus browser chrome) was 510 pixels, so the average is slightly more
than two screens worth of information.

General Conclusions

General statements about color schemes are hard to make on a quantitative
basis since they involve qualitative judgments about when one color is similar to
another. But looking at the data (see Table 1), it is not hard to make some
general qualitative statements about color schemes.

Table 1 has been organized from left to right by area. That is, the page elements
that usually contribute the largest area to the page (e.g. background - bgColor -
color and table colors) are on the left, and those with smaller areas (page
foreground elements - text, font, and link colors) are on the right. Sweeping our
eyes from left to right across the table we see that pages tend to progress from a
light background through blue/gray or yellow areas to a foreground color that is
darker but more vibrant. Red is often used a foreground color; examination of
the sites which do so reveals that, not surprisingly, it tends to be used as an
accent, to draw attention to particular text or links. White is also used as a
foreground color fairly frequently, but again, examination of the sites in question
reveals that it is typically used to create white heading text against a dark
background.
Table 1 - Color Schemes of Popular Sites

       location         bgColor       TABLE       TR          TD    text           FONT    link alink vlink style variety

yahoo.com                         11          -        114          -      11              -   -     -     -     5

aol.com                           121222      -        2113111      -      434             -   -     -     1     13

msn.com                           136241      2        9141142             811781352                       5     13

microsoft.com                     1           152      1142                102             -   -     -     3     8

passport.com                      1           -        1783         -      391111          -   -     -     1     7

geocities.yahoo.com               111         111      1121         -      1               -   -     -     -     6

ebay.com                          -           -        13           -      2               -   -     -     -     3

lycos.com                         221         1221     1621         -      62221348111     -   -     -     1     14

amazon.com                        481721      1        15                  2172                            -     13

angelfire.lycos.com               41          221      232                 11292           -   -     -     -     7

netscape.com                      11          433      1012692      -      2710702219111   -   -     -     1     11

bluemountain.com                  42          1232     121227              7121                            -     10

nbci.com                          113         112      5712                388                 -           1     9

tripod.lycos.com                  11          2213     22182               11218231329                     -     15

ask.com                           5263        -        81           -      -               -   -     -     1     5

excite.com                        13111211 1           31212118            22101223211                     1     16

about.com                         6231        106      4284                122931                          1     8

home.iwon.com                     2015        1934     11222121222 -       2515154929312                   -     18

americangreetings.com             11          -        14115               1211                            -     9

altavista.com                     1           -        -            -      11              -   -     -     1     4

google.com                        -           -        -                   -                               1     4

flowgo.com                        -           -        3213221211   -      -               -   -     -     1     9

zdnet.com                         4411        2        12151481827 -       -                               4     14

cnet.com                          521151      -        15631311     -      7217            -   -     -     3     13

real.com                          272         -        16126126     -      1               -   -     -     1     9

homestead.com                     -           -        1012                7                               1     4

iwin.com                          41          -        2151444             1164318                         1     11

cnn.com                           11          12121 4133113         -      -               -   -     -     2     9

exitfuel.com                      -           -        -            -      61              -   -     -     -     3

msnbc.com                         1           -        -            -      -               -   -     -     1     1

goto.com                          141         -        44           -      113                             1     9

mypoints.com                      1           1212     11911        -      221                             1     6

looksmart.com                     3           -        6            -      -               -   -     -     2     2
infospace.com        61       12    53264            1110121                        -   9

digitalimpact.com    -        -     -            -   -                  -   -   -   1   1

weather.com          2        -     2111216      -   216                    -       1   8

napster.com          6        -     1310126411   -   5                      -       2   10

flipside.com         11321    -     682              2311                           2   10

ivillage.com         11112221 -     3112133211   -   1191113601311112               6   30

classmates.com       11331    -     11           -   1112               -   -   -   1   8

focalex.com          -        -     -            -   -                  -   -   -   -   1

mapquest.com         124      1     71           -   3                  -   -   -   1   4

digitalcity.com      -        111   22           -   1                  -   -   -   1   4

freelotto.com        -        -     17           -   -                  -   -   -   -   2

travelocity.com      1        -     361          -   1                  -   -   -   3   5

colonize.com         1131     1     16221        -   142                -   -   -   1   9

twistedhumor.com     12       -     3            -   112                    -       1   3

women.com            121      -     4421263828       4761724696128411               -   20

internetfuel.com     -        -     -                -                  -   -   -   -   2

cyberrebate.com      21       -     111              1                              1   9

valupage.com         12       -     2                1327               -   -   -   1   5

netflip.com          73114    12    56421        -   1                              2   10

irs.gov              -        -     1                51                             -   5

earthlink.com        11       -     21           -   21                     -       1   8

youwinit.com         211      -     35211141     -   260912111          -   -   -   -   12

preferences.com      1        -     -            -   -                  -   -   -   -   1

expedia.com          31       1     53121        -   46123                          1   10

disney.go.com        1        -     -                8                      -       1   3

mailbits.com         -        -     -                1                              -   4

bizrate.com          1        -     1012         -   23                             2   8

ticketmaster.com     41241    -     10332            53328                  -       1   7

monster.com          11       -     41613            437                            -   7

windowsmedia.com     242      -     117651       -   -                  -   -   -   5   7

fastfreefun.com      -        -     -            -   1141                           -   5

fortunecity.com      355111   1     73151        -   -                  -   -   -   1   7

misc.webstakes.com   3        -     2539211          2519                           -   8

webmd.com            1        -     261          -   1                  -   -   -   1   3

grouplotto.com       -        -     1511         -   8523                           1   7

paypal.com           12211    1     1                3                              -   8

jobsonline.com       31       144   3332211310   -   -                  -   -   -   1   8
fastclick.net             -       -     -           -   12              -   -    -    -   3

netzero.net               -       -     1112        -   636111225           -         -   12

luckysurf.com             -       -     -           -   1                             1   4

eonline.com               14111   -     4146313     -   1194331         -   -    -    -   12

go2net.com                2       412   442             6                             5   8

barnesandnoble.com        4112    22    1151441         413122                        1   12

jackpot.com               1       -     -           -   -               -   -    -    1   2

nextcard.com              -       -     -           -   2               -   -    -    -   2

aria.com                  -       -     -               231             -   -    -    1   5

americanexpress.com       -       9     11118441    -   -               -   -    -    1   9

egreetings.com            3       -     23842432    -   1               -   -    -    1   10

ea.com                    262     -     261555      -   -               -   -    -    6   6

netbroadcaster.com        -       -     51064414533 -   2828                          2   7

speedyclick.com           -       -     -               -                   -         -   3

cjb.net                   -       -     411             -                             -   6

directhit.com             -       -     -           -   -               -   -    -    2   1

mtv.com                   21      2     13381492    -   3               -   -    -    1   8



The columns are the global background color (BODY bgColor) table background
color (TABLE bgColor), the background colors for table rows (TR) and table cells
(TD), the global text color (BODY text attribute), font colors, and global link
colors (BODY link, alink, and vlink attributes). Some browsers allow specification
of background colors for table headers (TH) and table body (TBODY), but these
were found to occur insufficiently frequently to be of interest. The numbers inside
the colors indicate the number of occurrences of a specification of that color on
the page.

The data was collected on July 24, 2001.

About Atlas NetConversions

Atlas NetConversions focuses on customer experience management and was
founded on the belief that businesses need to intelligently turn data into actions
that improve service and performance. Atlas NetConversions has pioneered the
use of event logging and client-side hill climbing in the web usability space to
provide clients with fact-based recommendations that improves user experience
and increases bottom-line results. To date, clients have been impressed with the
ability to increase their sales and decrease their abandonment rates and
acquisition costs: "After evaluating several products and services, Atlas
NetConversions True Usability™ stood above the others because of its ability to
not only track our actual user keystroke level behavior but also test data-driven
hypotheses of what will work before we make any redesign investments."
(Director of Marketing of a Leading Retailer Specializing in Fine Cooking and
Kitchen Products). To learn how Atlas NetConversions can help your business,
please contact netconversions@atlassolutions.com.

References



1
  Nielsen, J. "Top Ten Mistakes in Web Design"
[http://www.useit.com/alertbox/9605.html]
2
  Usability.gov. [http://usability.gov/guidelines/links.html#nine]
3
  Matthews, K. "Aesthetics and Usability"
[http://home.att.net/~kiana.matthews/independent_study/Aesthetics_Paper.htm
]
4
  Gatlin, C. "8 tips for choosing effective web color schemes" ZDNet
[http://www.zdnet.com/ecommerce/stories/main/0,10475,2782892-6,00.html]
5
  Tognazzini, B. "First Principles"
[http://www.asktog.com/basics/firstPrinciples.html]
6
  Gillespie, J. "Alien Typography" [http://www.digital-
web.com/features/feature_2001-7.shtml]

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:4
posted:6/10/2011
language:English
pages:8