The Effects of Contrast and Density on Visual Web Search

by Donnelle Weller

Summary: This study evaluated the effects of white space on visual search time. Participants were required to search for a target word on a web page with different levels of white space, measured by level of text density. Screens were formatted with one of four types of graphical manipulation, including: no graphics, contrast, borders and contrast with borders under two levels of overall density and three levels of local density. Results show that search times were longer with increased overall density but significant differences were not found between levels of local density. Only the use of contrast was found to be significant, resulting in an increase in search time.

INTRODUCTION

Early interface design studies were conducted on achromatic alphanumeric displays (Tullis, 1984; 1997). However, web design graphics pose new formatting possibilities to investigate. Since the multi-functionality of web design often increases the overall density of the display, spatial layout is an important design component and empirical research should evaluate the effects of alternative layouts on user performance.

Display information can be grouped in a variety of formats and the format will affect the extracted information and the interpretation of those elements (Tullis, 1997). Grouping can provide aesthetic appeal, structure and meaning to a screen format and can be achieved by white space, color, graphical boundaries, highlighting and contrasting display features. For example, Thacker (1987) found that displayed information with a border around it was reported to be easier to read, better in appearance, and preferable. However, too many lines and borders on a screen also create clutter and can be distracting (Galitz, 1997).

Another variable affecting the efficiency of a visual search is the overall density of the displayed material. Overall density is a percentage of the characters present in relation to overall space available. When a display size is held constant, adding more characters will increase the overall density. As a site contains an increasing amount of information, there is often an increase in overall density per page. The literature from visual search tasks and the use of simple and complex displays indicates that increasing display items will increase time and errors for target location (Tullis, 1984).

Another similar variable affecting visual search is the local density of the material. Local density represents the number of other characters in proximity to a character and is a measure of how tightly packed the information is on the screen. Local density and overall density are positively correlated. CRT research examined the difference between single spaced and double spaced text. It was discovered that single spacing of text requires more eye fixations per line and therefore fewer words are read per fixation, which increases reading time (Kohler, Duchnicky & Ferguson, 1981). The empirical research indicates that there is a level of local density that is optimal and densities above or below that level would degrade performance.

Many design guidelines do not discuss the difference between local density and overall density. What is commonly discussed is the use of white space. White space is the term often used to refer to blank space on a screen that does not contain text, graphics or other objects; however, it may contain color depending on the background of the screen (Mayhew, 1992). It is common for graphic design recommendations to suggest that sufficient white space should be used. It is suggested that white space helps to structure a screen, group information and guide the eye (Nielsen, 2000). It is further recommended that white space be used for spatial separation of information even if boundary delimiters are employed (Mullet & Sano, 1995).

However, research teams studying web usability have found that white space may not be beneficial and have noted when there was more white space that users were less successful at finding information, and that they rated sites lower for the ability to find things easily, for ease of searching, overall appearance, ease of use and productivity (Spool et al., 1997).

This study investigates the effects of visual grouping (none, contrast background, border, and border with contrast) and density (low, medium and high local density and medium and high overall density) on search time, error rate and subjective preference.

Method

Participants

Ten participants (6 females and 4 males) were recruited through an online university recruiting program. Participants ranged in age from 18-40, with an average age of 26. Undergraduates received course extra credit for their participation and only experienced computer and internet users were selected. Experience was defined as computer and Internet usage on a weekly basis for a minimum of one year.

Materials

A Dell Optiplex computer was used with a 17” monitor set at a 1024 X 768 resolution. Participants were seated at a desk at a viewing distance of 60 cm from the monitor. The displays were presented in a simulated a web browser which recorded user clicks and time.

Four conditions of grouping (none, contrast background, border, and border with contrast) and density (low, medium and high local density and medium and high overall density) were manipulated to produce 24 different web pages, each containing a series of textual links. For each of the 24 display conditions, 10 examples containing different text links were created. Therefore, a total of 240 displays were created for the experiment, each with a different order of link presentation.

The medium overall density condition contained a 4 X 4 configuration of blocks for a total of 16 blocks. The high overall density condition contained a 6 X 4 configuration of blocks for a total of 24 blocks. Altering the amount of space between each block varied the local density. Due to the complexity of the screen layout combined with the number of trials, a range of densities were defined for each density condition. The ranges were chosen based on previous studies. Medium overall density screens ranged from 14-16%. High overall density screens ranged from 21-22%. Figures 1-4 show examples of four of the conditions. Each link was assigned a number and a random number generator was used to determine the target for each screen.

Figure 1. High overall density, medium local density screens contained 6 rows by 4 columns.

Figure 1. High overall density, medium local density screens contained 6 rows by 4 columns.

Figure 2. Condition for High Overall Density, High Local Density, No graphics

Figure 2. Condition for High Overall Density, High Local Density, No graphics

Figure 3. Condition for Medium Overall Density, Medium Local Density, and Background Contrast

Figure 3. Condition for Medium Overall Density, Medium Local Density, and Background Contrast

Figure 4. Condition for Medium Overall Density, Low Local Density, and Border

Figure 4. Condition for Medium Overall Density, Low Local Density, and Border

Procedure

Participants were instructed to find target words on a series of web pages. Upon detecting the target, participants clicked on the target. A new screen then appeared which displayed the words “correct,” or “incorrect” based on performance. Participants who responded incorrectly then returned to the previous screen to search for the correct target. Upon detecting the correct target the participants returned to a beginning page and selected the next trial until all trials had been completed.

After all trials were completed participants were shown a page listing the different conditions and were allowed to look at online examples of each condition. They then listed their top 3 condition preferences as well as their least preferred condition. Participants were also asked to explain any search strategies they employed.

Results

A 4 x 3 x 2 repeated measures ANOVA was used to analyze the effects of grouping type, local density and overall density on search times. Results revealed a main effect for overall density and for grouping type. Overall high density screens (M = 1.100, S.D. = .391) had higher search times than the medium overall density screens (M = .933, S.D. = .360) p < .01). No significant effects were found for local density.

For the grouping variable, only contrast background was found to be significantly different from the other grouping variables, resulting in a longer search time (See Figure 5). No significant effects were found for any of the interactions.

Figure 5. Search times for by type of grouping

Figure 5. Search times for by type of grouping

At the end of the experiment, participants were asked to indicate the layouts they liked the best and which they liked the least. Preference data showed that the high overall density was the least preferred screen presentation in that 9 of the 10 participants selected this as their least preferred condition. There was not a consensus on the most preferred layout.

Discussion

The purpose of this study was to investigate the effects of density and grouping on the user performance as measured by search time. This information is important in order to design effective graphical user interfaces and is particularly relevant as interfaces becomes smaller with the trend toward mobile computing devices; and, as applications are required to provide large amounts of data to numerous users as in the instance of portals.

As the overall density increased, so did the search time, which is consistent with previous findings (Tullis, 1997). Preference data showed that the high overall density was subjectively the least preferred screen presentation. This is consistent with research that subjective ratings relate to alignment and the closeness of the display arrangement (Tullis, 1997).

Displays with a background contrast had longer search times than for screens which used 1) no graphic 2) only border or 3) both border and contrast combination. It is interesting to note that the search times for the contrast condition and the border and contrast were not similar. In both the border condition and the contrast and border condition, all text was included in a blocked space. However, in the contrast condition, every other block contained the color (see Figure 3). Participants reported that locating the target was difficult in the contrast display when the target was both (1) not in a colored grouping, or, in other words had the appearance of being in a “white box,” and (2) was located in the uppermost right hand corner. Participants noted that they would tend to see the word when located in the blue area but not as quickly when located in the white corner. These findings support the guideline that suggests color is a poor delineator of screen elements and a border should be used to set off adjacent areas of different colors (Galitz, 1997).

These findings are relevant to the design of displays with a large amount of data relative to the display size. Because it is often recommended that white space be used, less data can be presented. However, these results demonstrate that there is no difference between using white space and using a contrast background or border to group information.

References

Galitz, W.O. (1997). The essential guide to user interface design. NY: John Wiley & Sons.

Kohler, P.A., Duchnicky, R.L. & Ferguson, D.C. (1981). Eye movement measurement of readability of CRT displays. Human Factors, 23 , 517-527.

Mayhew, D.J. (1992). Principles and guidelines in software user interface design. NJ: Prentice Hall.

Mullet, K. & Sano, D. (1995). Designing visual interfaces: Communication oriented techniques. Mountain View, CA: Prentice Hall.

Nielsen, J. (2000). Designing web usability. Indianapolis, IN: New Riders Publishing. Spool, J.M., Scanlon, T., Schroeder, W., Snyder, C. & DeAngelo, T. (1997). Web site usability: A designer’s guide. North Andover, MA: User Interface Engineering.

Thacker (1987). Tabular displays: A human factors study. Doctoral dissertation, University of South Florida.

Tullis, T.S. (1984). Predicting the Usability of Alphanumeric Displays. Doctoral dissertation, Rice University, Houston, TX. 172 pages.

Tullis, T.S. (1997). Screen design. In M. Helander, T.K. Landauer, & P. Prabhu. (Eds.), Handbook of human computer interaction (2nd ed., pp.503-531). NY: Elsevier.