Latest thinking

Websites: more than just a pretty face?

Published: 24 January 2006

TagsTags: , ,

By: Amanda Albon (Ph.D.)

How important are you? When it comes to websites, your abilities are very important indeed! Research evidence shows that considering how a user processes information on a web page is more significant than it just looking pretty. Websites that are difficult to process and use are liable to be abandoned for more usable websites.

Psychologists have found that people’s grasp of the information on a website is much better when web pages are designed in tune with the way our cognitive processes operate than when web pages are designed without considering this 1. ‘Cognitive processes’ refer to the way we obtain and deal with information, such as how we attend to items on a page and our visual perception of the page.

The expanding research into this area has implications for what we should consider when designing web pages. For instance, psychologists at the University of Teesside 2 (UK) have investigated which combinations of text and background colour work best for hyperlinks in a navigation bar.

Visual search begins by processing all items of information simultaneously. It then refines processing to fewer items but at more detail.

To examine this, they took into account how people use their visual perception. When we look for any visual information, such as a word on a page, we do a ‘visual search’. Visual search begins by processing all items of information simultaneously. It then refines processing to fewer items but at more detail. How conspicuous an item is influences this visual search; we can find an item faster and more accurately the more conspicuous it is 3. An item of information can be conspicuous by its colour, shape, size, and so on.

In their research, they focused on colour and how this affects visual search for hyperlinks. The default colour of hyperlinks in web browsers tends to be blue on a white background, but does this colour combination enable people to find a hyperlink more quickly and accurately than other combinations?

Twenty-nine people voluntarily participated in an experiment in which the combination of text and background colour for hyperlinks was varied. The colour combinations were: black text on white background, blue on white (default), blue on yellow, yellow on blue, red on green and green on red. During the experiment, the person first saw a target word on a computer screen. The word was taken from common types of words, such as tools or birds. This was followed by a mock web page in which the target word was either present or absent in the navigation bar on the left of the screen. The person pressed one of two buttons on the computer keyboard depending on whether the target word was there or not. Each person did this 72 times. The experimenters recorded how fast (in milliseconds) and accurate participants were at detecting whether the word was there or not. The person then rated their preference for the colour combinations and the quality of the display.

Their results showed that colour combination did affect how well people could find a target word in the navigation bar. When it came to correctly detecting if a word was present, people were fastest and most accurate when the hyperlink was in yellow text on a black background. On the other hand, when correctly detecting if a word was not present, people were most accurate for black on white but fastest for blue on white (default) combinations. The blue on white combination came out best for ratings of the quality of the display and preference but had poor accuracy. Red on green was lowest for these ratings. They also found that how long the person had been using the web did not affect performance.

So, which colour combination is best? It clearly depends on what job you want the coloured item of information to do. For navigation purposes, it is more important to correctly detect if an item is present rather than absent; the difference being clicking on and following an appropriate link in a web page rather than having to go back and look for the information. In this case, it is yellow text on a black background. This colour combination is often used in high contrast layouts for accessibility, but maybe we should not restrict its use to just this?

If you just want to be aesthetically pleasing, then it appears to be blue on white as people rate it highest for quality of display and preference. However, bear in mind that people are less accurate at saying an item is not present using this colour combination so may waste time searching for the information. In addition, it may simply be that blue on white is preferred as people are most familiar with this combination.

This research demonstrates that our visual search for an item of information, and so our ability to use a web page, is better when an item is made more conspicuous by its colour. What does this suggest for web design? Primarily, it shows that our cognitive abilities are an important consideration in how well a web page can be used. In turn, this suggests that we really should incorporate such evidence into design. This does not mean that the aesthetic appeal should be ignored but that web page design should be not influenced only by subjective preferences of the designer but also by what users find easiest to use when searching.

Amanda Albon (Ph.D.) is a freelance writer specialising in psychology. Contact her to discuss prospective articles.

1. Dalal, N.P, Quible, A. & Wyatt, K. (2000). Cognitive design of home pages: an experimental study of comprehension on the World Wide Web. Information Processing and Management, 36 (4), 607 – 621.

2. Ling, J. & van Schaik, P. (2002). The effect of text and background colour on visual search of Web pages. Displays, 23, 223-230.

3. Nygren, E. (1996). From paper to computer screen: human information-processing and user interface design (Comprehensive Summaries of Uppsala Dissertations from the Faculty of Science and Technology), 188, Acta Univ. Ups. Stockholm: Almqvist and Weksell.