upa - home page JUS - Journal of usability studies
An international peer-reviewed journal

An Empirical Investigation of Color Temperature and Gender Effects on Web Aesthetics

Constantinos K. Coursaris, Sarah J. Sweirenga, and Ethan Watrall

Journal of Usability Studies, Volume 3, Issue 3, May 2008, pp. 103-117

Article Contents


Methods

The following sections present the experiment design and procedure, the subjects, and the instrument scales and validity.

Experiment Design and Procedure

This study employs a four-group between-subject research design, where color temperature is manipulated at four levels, each representing an increased level of overall color temperature for the Web site. To assist in operationalizing color temperature increases, a Web site's design elements (e.g., logo, navigation bar) were placed in two groups, herein referred to as primary and secondary. Primary layout elements refer to areas of the site which are specifically designed (by the site designer) to immediately attract the focus or attention of the user upon visiting the site or to contain primary information or content (such as body text relating to the site's intended purpose). These include, but are no means limited to, primary branding (i.e., logos, etc.), top level navigational elements (i.e., horizontal navigation bars), or primary content bearing columns or containers. Secondary layout elements refer to areas of the site which are not designed to convey vital information and include, but are no means limited to, hyperlinks, secondary or tertiary level text, form styling, and secondary navigational elements. Then, by assigning different colors to the primary (more dominant) elements, the secondary elements, or both, the Web site's overall color temperature would either increase or decrease. It is important to note that the terms primary and secondary do not refer to primary and secondary colors. Instead, the terms primary and secondary refer to design or layout elements of the site to which the specific color is applied.

Regarding color temperature levels, two sets of colors are selected from the color wheel, each being categorized as either warm or cool. A warm color refers to colors ranging between yellow to red-violet on the chromatic wheel. It is important to note that interaction between colors may cause a hue such as red-violet to appear warmer if it is placed next to a cold color, such as green, or colder if it is placed next to a warm color, such as orange. A cool or cold color refers to colors ranging between blue-violet and yellow-green on the chromatic circle. As with warm colors, interaction between colors may cause a hue such as yellow-green to appear colder if it is placed next to a warm color, such as red, or warmer if it is placed next to a cold color, such as blue.

A Web site was developed by the authors for the purpose of this study and represented the digital storefront of a fictional hotel. Four versions of the identical Web site design were produced with color (temperature) combination being the only varying design element (see Figure 2 for corresponding screenshots). All other design elements (e.g., text, images, background) were held constant across the four designs. Implementation of this design resulted in the following four split-complementary treatments or color combinations for the test Web site: (a) Warm Primary-Warm Secondary (i.e., #FF0000/#FF7F02 or 255.0.0/ 255.127.2 or Red/Orange), (b) Warm Primary-Cool Secondary (i.e., #FF0000/879ADC or 255.0.0/135.154.220 or Red/Light Blue), (c) Cool Primary-Warm Secondary (i.e., #3C4360/#FF7F02 or 60.67.96/255.127.2 or Blue/Orange), and (d) Cool Primary-Cool Secondary (i.e., #3C4360/#879ADC or 60.67.96/135.154.220 or Blue/Light Blue). For the purposes of the study, the logo and main navigation bar were designated as primary elements, while the form styling, secondary navigation (hyperlinks), and image borders were designated as secondary elements. All other design elements (e.g., text, images, background) were held constant across the four designs. This research design allowed for any differences found among the four groups of subjects to be attributed to the decreased levels of color warmth as a result of color choices for the primary and secondary colors of the Web site.

Tasks invoked participants to browse through a Web site developed for the purpose of this study in search of specific information. Participants were informed that the tasks were only meant to offer them an opportunity to explore the Web site and its design, instead of measuring their performance with it. Having evaluated the Web site design randomly assigned to them, participants were then asked to rank four different Web site designs in terms of their respectively perceived aesthetics.

A Structural Equations Modeling (SEM) technique, Partial Least Squares (PLS), is used in testing the validity of both the structural and measurement model. Data analysis will speak to the four aforementioned hypotheses.

Figure 2. Screenshots of the Web site's designs from coolest to warmest (clockwise, from top left)

Previous | Next