The right colour
The layout and presentation of words and the appropriate use of colour is critical when trying to convey an accurate message. In everyday life, colours are generally associated with a particular meaning. When driving, a red octagon on the road means "stop" as does a red traffic light. A green traffic light means go, which is why modern exit signs are generally in green - a "green light" go this way. Orange flashing lights are a warning - a slow tractor, broken down vehicle, driver changing direction, road works and so on.
Within website design usability the use of colour is equally important - users expect certain items on a page to behave in a particular way. For example, web designers and programmers have historically used blue or purple underlined text to identify a hyperlink within a page so using blue or purple underlined text just to emphasise a word or group of words can be confusing to the user. Grouping similar functions or buttons with similar colours helps users to understand what the feature will achieve.
The incorrect use of colour in web designs may make the sites difficult to use and, in some cases, drive users away from the site. Three tables below are used to illustrate what is called the "Stroop Effect", named after John Ridley Stroop, who first published this effect in English in the 1930s. When the name of a colour and the actual colour are presented in an unexpected way, users can become confused and frustrated. The tasks below are fun and challenging as tasks, but would be frustrating if some of the effects we found on a website.
Have some fun and try out these three simple tests for yourself!
- The task: Work through each table, firstly saying (out loud) the word as printed, regardless of the colour of the text.
- Analysis: You will probably find that there was not much difference in how long it took to complete each table
- table 3 was the fastest
- table 2 the slowest with
- table 1 in the middle.
- The task: Read through each table again, but this time say the colour that the word is displayed in, regardless of the actual word (so table 1 will be black, black, black...).
- Analysis:This time you will find that
- if you read the words in table 1 it needs a little bit of thought - or you might have just said "black,black..." without actually reading the words
- table 2 is quite a challenge
- table 3 is simple.
- The task: To show how well presented use of colour can quickly attract the user’s attention, find the word "black" 3 times in each table. (note the tables are randomly generated so the word might not be in each table 3 times)
- Analysis:
- You will find that table 1 needs a second or so of searching and though to process the request
- in table 2 you probably looked at the words displayed in black firstly, realised that the text did not say "black" and looked again until you had found the word 3 times.
- Looking in table 3, you would have identified the word probably more than 3 times as it jumped at you with the word "black" displayed in black!
| red | blue | black | red |
| yellow | red | black | red |
| black | black | white | yellow |
| blue | black | white | blue |
| blue | yellow | red | red |
| black | yellow | yellow | black |
| black | black | blue | white |
| white | green | red | red |
| red | green | blue | black |
| red | red | green | red |
| white | blue | red | green |
| blue | red | white | blue |
| red | blue | black | blue |
| red | black | white | blue |
| red | yellow | black | red |
| blue | red | blue | black |
| green | red | blue | white |
| blue | green | green | white |
The exercises above are just a brief example of some of the challenges in using colour to add meaning to web pages when designing websites. We all want to have colourful, exciting web pages, but the web designer always needs to ensure the end user is not confused or frustrated by the designer's use of colour.
<Back to filtered article list
<back to complete article list
“User-friendly websites designed and programmed for accessibility and usability”
©2012 maweb.co.uk
24 Crooked Well, Kington, Herefordshire, HR5 3AF Tel: 01544 231336 contact us sitemap
Partners: Malcolm Allaway - Principal Developer, Yin-Fun Allaway
We are based in Kington, rural Herefordshire on the Herefordshire / Powys border - not Kingston or Hertfordshire!