Colour Display

design & product developmentergonomics & stylingsteven casey, Ergonomic Systems Design, Inc

10 iVT InternatIonal 2007

colour blind?Does your hit-and-miss approach to display panels leave operators

of your vehicles snookered? Take a cue from our crash course in

colour theory and your next model will pass with flying colours

iVT InternatIonal 2007 11

ergonomics & styling

T he availability of high-quality, rugged, compact, and relatively low-cost colour displays – combined with digital control and onboard computer processing – has resulted in an

extraordinarily rapid proliferation of this technology in industrial vehicles. Not too many years ago, the simple LCD represented the ‘state of the art’ in display technology found in such equipment. Although there is still a place for a functional and reliable monochrome display, practical colour displays are here to stay. Agricultural tractors, combines, construction machines and even forklifts abound with durable displays that can show thousands of colours in an infinite variety of patterns and form.

In theory, this is a good thing. Human beings and other primates are blessed with a keen sense of colour to help us comprehend what we see. Colour in the natural world tells us if a piece of fruit is

ripe enough to eat, whether the lawn needs watering, or if the coals in the fireplace are still hot. Perceiving colour in the natural world is, well – so natural – that we seldom give it any thought at all. Colour perception provides an exceedingly rich conduit of information about our environment.

Then there is the matter of the colours chosen for use on an electronic display. In this case, it is the engineer or designer – not nature – who decides which colours will be used and what they will mean. In practice, the use of colour is not necessarily always ideal, especially when the resulting display is garish, confusing, or even distracting.

Knowledge about the science of colour and human colour perception can be of great help to the legions of engineers, designers, and programmers who are slaving away to create the next generation of beautiful, yet functional, colour displays for industrial vehicles. So let’s take a look at some key

ergonomic principles that, when followed, will make colour displays in vehicles more legible, easier to understand, and more attractive.

The pros and cons of using colour Before deciding on the use of colour in any part of the display, consider whether colour really is the most appropriate way of conveying the information. In particular, colour may be useful when it is necessary to: • Designate or emphasise a specific target in a crowded display; • Segment or distinguish one particular area of the display; • Provide warning signals or signify low probability events; • Group and chunk information; • Imply certain physical states; • Provide aesthetically pleasing displays.

Importantly, it may be disadvantageous to use colour on a display in certain circumstances, such as when colour might:

©iS

tock

phot

o.co

m

• Distract the operator from carrying out the primary task; • Contribute to information overload; • Not be perceived adequately by a colour-deficient viewer; • Conflict with cultural conventions; • Cause unintended visual effects.

Colour should be used to emphasise certain relationships, distinguish certain areas, enhance the aesthetic quality of a display, or provide supplemental information coding. As a general rule, it should not be used to provide the global structure for the display.

Other display elements, including overall format, graphics, and luminance contrast should be the ‘first resort’ for formatting and establishing the overall graphic format. In other words, do not use colour to provide the structure, but rather, to enhance an otherwise sound display design. Design the display in monochrome, then add colour.

The dimensions of colour and their use ‘Hue’ refers to the quality of redness, blueness, etc, of a colour. Do not rely solely on differences in hue for visual discrimination of objects, fields, or foreground objects against backgrounds. Provide for reliably perceptible differences in luminance (brightness) between foreground objects and their backgrounds, black or white borders around foreground objects, or, of course, differences in object shape and labelling.

The use of cues in addition to colour is especially important for colours in the red-green-brown spectrum which are most likely to be confused by those with defective colour vision. Degraded viewing conditions, high ambient light, screen glare, or a very low luminance-output display may also degrade the effectiveness of colour, especially in the aforementioned spectrum (Chart 1).

‘Saturation’ refers to the amount of white in a particular colour: the more saturated a colour, the less white there is. It may also be considered as a measure of colour purity. Pastel shades are desaturated; vivid, strong colours are saturated. Legibility of foreground text or symbols

grey scale in the luminance domain, thereby making hue a redundant code.

using colour in formattingColour can be used effectively to group related items or to call out different classes of items. Items located on different parts of the display but that are related in some way (such as petrol stations on a map) can often be grouped effectively with colour. Functional display elements such as touch-screen push buttons might be highlighted and contrasted from non-active surfaces through the use of colour.

Colour can be particularly useful for detecting an important signal within a visual field, especially if the background


iVT InternatIonal 2007 13

is greatly influenced by text saturation and the brightness, hue, and saturation of the background. Saturated foreground colours on dark backgrounds should be avoided, just like desaturated foreground colours on light backgrounds.

‘Brightness’ refers to how light or dark a colour appears. This can be affected by the brightness of adjacent colours, the level of ambient light, and the state of adaptation of the viewer. Brightness is a psychological measure of luminance. Luminance is an objective measure; one that does not change with visual adaptation by the user, or that can be influenced by the colour or brightness of an adjacent surface. Colours chosen for an application should represent a

a saturated colour, such as the red used above, can be used to highlight and draw attention to key information on the display

fIgure 1: the role of the colour circle in selecting colour pairs, triads and tetrads

above: a change in state, as when a ‘button’ is pushed, can be signalled with a change in brightness or saturation rIght: appropriate colour scales can serve as codes for elevation, among other things

design & product development

rectangle around the centre point. Common tetrads are green/orange/blue/red and green/yellow/red/violet.

Colour theorists also point out that logical combinations, progressions, and presentations of colour are more favourably received in most practical applications than random or disorganised colour presentations. A colour-coding scheme for elevation that systematically relates hue and/or saturation to height is clearly more logical – and more pleasing to the eye – than a random scheme (Figure 2).

Six principles of colour coding Distinguishable: Colours should be easily distinguishable from each other by the user. This includes individuals having common colour discrimination deficiencies in the red-green spectrum, which includes about 8% of all males and 0.4% of females. This can be achieved by having a large luminance contrast between foreground and background in addition to any colour differences between foreground and background. Use ‘true’ colours whenever absolute colour identification is required, such as when the user may need to specifically identify a colour independent of all other colours. In such circumstances, the colour yellow, for example, should be a true yellow, as opposed to a yellow-green or yellow-orange. Detectable: The selected colours should be detectable by the user under the ambient illumination and viewing conditions in which they will be viewed. High ambient illumination can greatly reduce the detectability of some colours. Perceptually equal steps: The steps of discrimination between the selected colours should appear to be approximately the same from the user’s subjective point of view. If, for example, five main colours were chosen for use in

field is drab and an appropriate colour for the signal item is selected.

Aesthetic dimensions It is possible to make a display look garish and unattractive with the use of only a handful of inappropriately chosen colours. A colour display is used, in part, to encourage user acceptance of the system. It is logical to conclude that use of an unattractive palette of colours would make a system less acceptable – and less successful – in the marketplace.

The aesthetic dimension of a display’s colour palette should complement the functional colour-coding scheme that has been chosen, rather than replace it. Like the multiple

notes in a musical chord, colour harmony theory holds that harmonious colour combinations are built around geometric progressions. Combinations are most easily understood and selected using the colour circle. According to colour harmony theory and the work of Itten, ‘two or more colours are mutually

harmonious if their mixture yields a neutral grey.’ For an emissive display, two such opposite colours would, when combined, produce white (Figure 1).

Itten’s colour circle contains 16 colours of the spectrum. Complementary colours, or dyads, are located 180° from one another on the colour circle. Complementary colours are also called opposites, and pairs can be identified by rotating the straight line around the circle. Commonly used dyads are yellow/ violet, green/red, and blue/orange.

Triads – combinations of three harmonious colours – are identified with either equilateral or isosceles triangles that can be rotated around the centre point of the circle. Commonly

seen triads are yellow/red/blue, green/orange/violet, and yellow-green/red-orange/blue-violet.

Tetrads – combinations of four harmonious colours – are formed with either squares or rectangles. As with pairs and triads, harmonious colours can be identified by rotating the square or

it is possible to make a display look garish and unattractive with only a handful of inappropriately chosen colours

above: consistent use of colour codes on screens as well as controls help link controls and displays far left: conventional colour codes can be used to good effect on flat panel displays as well as conventional displaysleft: colour can be used to highlight touch-screen areas or fields of ‘buttons’


a display and two were closer to one another than the others – such as green, blue, yellow, red and desaturated red (pink) – the user will tend to associate red and desaturated red with each other and perhaps conclude that they are related in some manner. Meaningful: If there is any basis at all for providing an association between colour and meaning, selected colours should have some relevance to the user. Associations with colour might be based on population stereotypes (for example, red for stop, yellow for caution, green for go); previous product experience (a colour-coding scheme from a currently marketed product), or naturalistic

reasons (blue for water, green for vegetation, for example). Consistent: Colour codes must be applied consistently within a screen and from screen to screen. If a colour has been designated a special meaning, it should not be used for any other purpose. Aesthetically pleasing: The colour palette – as well as codes – should be pleasing to the eye. As a general rule, the greater the number of colours, the higher the chance of having colours that clash or are of an overall garish appearance.

More advice on colour coding Make logical use of hue, saturation, and brightness in coding. For example,

fIgure 2: Hue and saturation progressions that are logical and relate to a continuous variable, such as elevation, are easier to use than random or disorganised presentations

a dark background is usually most appropriate for night, when screen brightness might be high


Logical progression of hue/saturation to elevation

Random progression of hue/saturation to elevation

turning something ‘off’ or showing that an option is not available under certain conditions might be done most logically by desaturating the item to imply that it is faded and, hence, unavailable. This would be more logical than having the item change in hue from, say, purple to orange. In summary, use a faded, transparent, or desaturated appearance

to indicate that an item, symbol, or text label is unavailable for selection.

It may be most logical to code a continuous variable, such as elevation, through changes in saturation as opposed to hue or brightness. If hue is to be used for coding interval information, the steps between successive hues should be small and logically related.

Elements or options that should be differentiated with colour, especially if these elements are nominal and do not represent a continuous function, should usually be coded with distinctly different hues, thereby not implying any continuous function or relationships among the elements.

Common colour codes on maps are: • Deep blue: deep sea; • Light blue: shallow sea; • Turquoise: shoreline;• Green: low land; • Yellow-green: hills; • Brown/purple: mountains; • White: snow caps.

Background colours for the most common terrain areas are usually very desaturated, thereby providing sufficient contrast for overlaying text or coloured symbology. There is also an understandable basis for naturalistic colour coding of geographic features. Background colours should also be selected in concert with the selection of foreground symbol colours – see Chart 2 for foreground and background colour combinations to avoid.

The magnificent seven How many colours should be used on a display when reliable colour discrimination is required? A maximum of seven is usually recommended when users must make strong and reliable associations with colours. This does not imply that a display should only use a maximum of seven colours when millions may be available. It does mean, however, that when colour is being used as a code that the user must reliably discriminate – such as a red symbol, yellow symbol,

blue line, or red line – the maximum number of colours that should be used for coding is seven. Use as few colours as possible to meet the needs of the task. If four colours meet the needs of the task, then use four colours and no more. This helps assure distinguishing of the colours and avoid screen clutter.

Taken together, these ergonomic principles and practices can be applied to colour displays used in all manner of industrial vehicles. Rather than making these displays garish, confusing or distracting, appropriate application of colour theory and perception can make these displays easier and more pleasurable to use. iVT

References: ISO 15008: Road vehicles – Ergonomic aspects of transport information and control systems – Specifications and compliance procedures for in-vehicle visual presentation Travis, D. (1991). Effective colour displays: theory and practice. London: Academic Press

chart 1: expected visual efficiency of different figure/ground colour combinations in different environments

colour is a very effective way to highlight an important feature within a field, as in this steering control display

unobtrusive and subtle colour fields can provide attractive as well as effective groupings of related screen elements


chart 2: sample colour combinations and contrasts to avoid

Where the illumination is

average or high

Where the illumination is poor

Where dark adaptation is

required and must be maintained

AVOID THESE!

Avoid combining light colours that are low in contrast or may not

be legible to a user with defective red-green colour vision

…AND THESE!

Avoid combining saturated colours that are low in contrast or may not be legible to a user with defective

red-green colour vision


Colour Display

Documents

Transcript of Colour Display