SlideShare a Scribd company logo
design & product developmentergonomics & styling
steven 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:
©iStockphoto.com
• 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 formatting
Colour 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
ergonomics & styling
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 displays
left: Colour can be used to highlight touch-
screen areas or fields of ‘buttons’
14 iVT International 2007
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
ergonomics & styling
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
ergonomics & styling
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
16 iVT International 2007

More Related Content

Viewers also liked

Elcometer 500 coating thickness gauge english (1)
Elcometer 500 coating thickness gauge  english (1)Elcometer 500 coating thickness gauge  english (1)
Elcometer 500 coating thickness gauge english (1)
Fakhruddin Gandhi
 
Ergonomic workplace design
Ergonomic workplace designErgonomic workplace design
Ergonomic workplace design
Manoj Shukla
 
Mining Shovel Cab
Mining Shovel CabMining Shovel Cab
Mining Shovel Cab
Steven Casey
 
Final reseach paper
Final reseach paperFinal reseach paper
Final reseach paper
Chintan Trivedi
 
Principles of Machine Design Aesthetic & Ergonomic Consideration In Design .
Principles of Machine Design  Aesthetic & Ergonomic Consideration In Design .Principles of Machine Design  Aesthetic & Ergonomic Consideration In Design .
Principles of Machine Design Aesthetic & Ergonomic Consideration In Design .
Mech-4u
 
Design review of any product/system for Aethetic and ergonomic considerations
Design review of any product/system for Aethetic and ergonomic considerationsDesign review of any product/system for Aethetic and ergonomic considerations
Design review of any product/system for Aethetic and ergonomic considerations
shrikant jadhav
 
Ergonomics of Early christian schools
Ergonomics of Early christian schoolsErgonomics of Early christian schools
Ergonomics of Early christian schools
Datu jhed
 
Forklift Design
Forklift DesignForklift Design
Forklift Design
Steven Casey
 

Viewers also liked (8)

Elcometer 500 coating thickness gauge english (1)
Elcometer 500 coating thickness gauge  english (1)Elcometer 500 coating thickness gauge  english (1)
Elcometer 500 coating thickness gauge english (1)
 
Ergonomic workplace design
Ergonomic workplace designErgonomic workplace design
Ergonomic workplace design
 
Mining Shovel Cab
Mining Shovel CabMining Shovel Cab
Mining Shovel Cab
 
Final reseach paper
Final reseach paperFinal reseach paper
Final reseach paper
 
Principles of Machine Design Aesthetic & Ergonomic Consideration In Design .
Principles of Machine Design  Aesthetic & Ergonomic Consideration In Design .Principles of Machine Design  Aesthetic & Ergonomic Consideration In Design .
Principles of Machine Design Aesthetic & Ergonomic Consideration In Design .
 
Design review of any product/system for Aethetic and ergonomic considerations
Design review of any product/system for Aethetic and ergonomic considerationsDesign review of any product/system for Aethetic and ergonomic considerations
Design review of any product/system for Aethetic and ergonomic considerations
 
Ergonomics of Early christian schools
Ergonomics of Early christian schoolsErgonomics of Early christian schools
Ergonomics of Early christian schools
 
Forklift Design
Forklift DesignForklift Design
Forklift Design
 

Similar to Colour Display

Effective visual communication for GUI
Effective visual communication for GUIEffective visual communication for GUI
Effective visual communication for GUI
ananda gunadharma
 
Design UI.pdf
Design UI.pdfDesign UI.pdf
Design UI.pdf
jack frost
 
Computer graphics color models
Computer graphics    color modelsComputer graphics    color models
Computer graphics color models
Prof. A.Balasubramanian
 
Emotional Impact of Colors Using Web-Design
Emotional Impact of Colors Using Web-DesignEmotional Impact of Colors Using Web-Design
Emotional Impact of Colors Using Web-Design
IRJET Journal
 
Critical color-not-all-color-is-created-equal-brochure
Critical color-not-all-color-is-created-equal-brochureCritical color-not-all-color-is-created-equal-brochure
Critical color-not-all-color-is-created-equal-brochure
retteram
 
MultimediaLecture5.pptx
MultimediaLecture5.pptxMultimediaLecture5.pptx
MultimediaLecture5.pptx
vishal choudhary
 
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptxUNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
GOWSIKRAJA PALANISAMY
 
Process Magazine-monitors and calibration
Process Magazine-monitors and calibrationProcess Magazine-monitors and calibration
Process Magazine-monitors and calibration
Tom Gadbois, DSCE, DSNE
 
Engl317 project3 slidedoc1_graphic_designprinciplesfornondesigners
Engl317 project3 slidedoc1_graphic_designprinciplesfornondesignersEngl317 project3 slidedoc1_graphic_designprinciplesfornondesigners
Engl317 project3 slidedoc1_graphic_designprinciplesfornondesigners
Zachary Williamson
 
Lecture 1 Advance concept in Visual Graphics
Lecture 1 Advance concept in Visual GraphicsLecture 1 Advance concept in Visual Graphics
Lecture 1 Advance concept in Visual Graphics
lucita cabral
 
Chap12
Chap12Chap12
Chap12
meltem7798
 
OfficeTech Jun04
OfficeTech Jun04OfficeTech Jun04
OfficeTech Jun04
Weslie Powell
 
Pentachrome Article
 Pentachrome Article Pentachrome Article
Pentachrome Article
Antonio de Llamas
 
Method for Creating Uniqness of a Brand Color
Method for Creating Uniqness of a Brand ColorMethod for Creating Uniqness of a Brand Color
Method for Creating Uniqness of a Brand Color
rahulmonikasharma
 
Powerpoint presentation-simplified
Powerpoint presentation-simplifiedPowerpoint presentation-simplified
Powerpoint presentation-simplified
mohamedaslamh
 
Principles Of Good Screen Design
Principles Of Good Screen DesignPrinciples Of Good Screen Design
Principles Of Good Screen Design
guest7af47
 
Importance of colors in a presentation
Importance of colors in a presentationImportance of colors in a presentation
Importance of colors in a presentation
Rana Usman Sattar
 
graphics lecture 1.pptx
graphics lecture 1.pptxgraphics lecture 1.pptx
graphics lecture 1.pptx
KNOWLEDGEHUB38
 
graphics lecture 1.pptx
graphics lecture 1.pptxgraphics lecture 1.pptx
graphics lecture 1.pptx
KNOWLEDGEHUB38
 
Be4201384387
Be4201384387Be4201384387
Be4201384387
IJERA Editor
 

Similar to Colour Display (20)

Effective visual communication for GUI
Effective visual communication for GUIEffective visual communication for GUI
Effective visual communication for GUI
 
Design UI.pdf
Design UI.pdfDesign UI.pdf
Design UI.pdf
 
Computer graphics color models
Computer graphics    color modelsComputer graphics    color models
Computer graphics color models
 
Emotional Impact of Colors Using Web-Design
Emotional Impact of Colors Using Web-DesignEmotional Impact of Colors Using Web-Design
Emotional Impact of Colors Using Web-Design
 
Critical color-not-all-color-is-created-equal-brochure
Critical color-not-all-color-is-created-equal-brochureCritical color-not-all-color-is-created-equal-brochure
Critical color-not-all-color-is-created-equal-brochure
 
MultimediaLecture5.pptx
MultimediaLecture5.pptxMultimediaLecture5.pptx
MultimediaLecture5.pptx
 
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptxUNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
 
Process Magazine-monitors and calibration
Process Magazine-monitors and calibrationProcess Magazine-monitors and calibration
Process Magazine-monitors and calibration
 
Engl317 project3 slidedoc1_graphic_designprinciplesfornondesigners
Engl317 project3 slidedoc1_graphic_designprinciplesfornondesignersEngl317 project3 slidedoc1_graphic_designprinciplesfornondesigners
Engl317 project3 slidedoc1_graphic_designprinciplesfornondesigners
 
Lecture 1 Advance concept in Visual Graphics
Lecture 1 Advance concept in Visual GraphicsLecture 1 Advance concept in Visual Graphics
Lecture 1 Advance concept in Visual Graphics
 
Chap12
Chap12Chap12
Chap12
 
OfficeTech Jun04
OfficeTech Jun04OfficeTech Jun04
OfficeTech Jun04
 
Pentachrome Article
 Pentachrome Article Pentachrome Article
Pentachrome Article
 
Method for Creating Uniqness of a Brand Color
Method for Creating Uniqness of a Brand ColorMethod for Creating Uniqness of a Brand Color
Method for Creating Uniqness of a Brand Color
 
Powerpoint presentation-simplified
Powerpoint presentation-simplifiedPowerpoint presentation-simplified
Powerpoint presentation-simplified
 
Principles Of Good Screen Design
Principles Of Good Screen DesignPrinciples Of Good Screen Design
Principles Of Good Screen Design
 
Importance of colors in a presentation
Importance of colors in a presentationImportance of colors in a presentation
Importance of colors in a presentation
 
graphics lecture 1.pptx
graphics lecture 1.pptxgraphics lecture 1.pptx
graphics lecture 1.pptx
 
graphics lecture 1.pptx
graphics lecture 1.pptxgraphics lecture 1.pptx
graphics lecture 1.pptx
 
Be4201384387
Be4201384387Be4201384387
Be4201384387
 

More from Steven Casey

grumpy (NS)-2
grumpy (NS)-2grumpy (NS)-2
grumpy (NS)-2
Steven Casey
 
Tractor Cab
Tractor CabTractor Cab
Tractor Cab
Steven Casey
 
Swiss Cheese
Swiss CheeseSwiss Cheese
Swiss Cheese
Steven Casey
 
International Ergo Project
International Ergo ProjectInternational Ergo Project
International Ergo Project
Steven Casey
 
Nein, nein, nein
Nein, nein, neinNein, nein, nein
Nein, nein, nein
Steven Casey
 
Control Dynamics
Control DynamicsControl Dynamics
Control Dynamics
Steven Casey
 
Visibility
VisibilityVisibility
Visibility
Steven Casey
 
HF in Automation
HF in AutomationHF in Automation
HF in Automation
Steven Casey
 
Cab Space
Cab SpaceCab Space
Cab Space
Steven Casey
 
The Wearable Machine
The Wearable MachineThe Wearable Machine
The Wearable Machine
Steven Casey
 
Mars Rover Concept
Mars Rover ConceptMars Rover Concept
Mars Rover Concept
Steven Casey
 
Design for Cold
Design for ColdDesign for Cold
Design for Cold
Steven Casey
 
Autonomous Vehicle
Autonomous VehicleAutonomous Vehicle
Autonomous Vehicle
Steven Casey
 

More from Steven Casey (15)

grumpy (NS)-2
grumpy (NS)-2grumpy (NS)-2
grumpy (NS)-2
 
Customer Clinic
Customer ClinicCustomer Clinic
Customer Clinic
 
Tractor Cab
Tractor CabTractor Cab
Tractor Cab
 
Swiss Cheese
Swiss CheeseSwiss Cheese
Swiss Cheese
 
International Ergo Project
International Ergo ProjectInternational Ergo Project
International Ergo Project
 
Nein, nein, nein
Nein, nein, neinNein, nein, nein
Nein, nein, nein
 
Control Dynamics
Control DynamicsControl Dynamics
Control Dynamics
 
Visibility
VisibilityVisibility
Visibility
 
HF in Automation
HF in AutomationHF in Automation
HF in Automation
 
Cab Space
Cab SpaceCab Space
Cab Space
 
The Wearable Machine
The Wearable MachineThe Wearable Machine
The Wearable Machine
 
Mars Rover Concept
Mars Rover ConceptMars Rover Concept
Mars Rover Concept
 
Design for Cold
Design for ColdDesign for Cold
Design for Cold
 
Intuitive Display
Intuitive DisplayIntuitive Display
Intuitive Display
 
Autonomous Vehicle
Autonomous VehicleAutonomous Vehicle
Autonomous Vehicle
 

Colour Display

  • 1. design & product developmentergonomics & styling steven 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
  • 2. 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: ©iStockphoto.com
  • 3. • 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 formatting Colour 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 ergonomics & styling 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
  • 4. 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 displays left: Colour can be used to highlight touch- screen areas or fields of ‘buttons’ 14 iVT International 2007
  • 5. 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 ergonomics & styling 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
  • 6. 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 ergonomics & styling 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 16 iVT International 2007