Professional Documents
Culture Documents
Psychologicalcartog Displays2001
Psychologicalcartog Displays2001
Psychologicalcartog Displays2001
net/publication/6285024
Article in Human Factors The Journal of the Human Factors and Ergonomics Society · July 2007
DOI: 10.1518/001872007X200111 · Source: PubMed
CITATIONS READS
10 2,202
2 authors, including:
SEE PROFILE
All content following this page was uploaded by Darren Van Laar on 02 July 2014.
Abstract
A method is reported which enables designers to colour code computer displayed information into a perceptual hierarchy in much the same
way as visual layering effects are achieved in cartography. Principles of colour perception and cartography are used to derive palettes of
colours. The colours within these palettes are used to code screen based information such that elements of the display most relevant to the
user's task appear more conspicuous and nearer than less task relevant information. The application of this method to a typical control room
display is described and illustrated. q 2001 Elsevier Science B.V. All rights reserved.
Keywords: Cartography; Colour coding; Colour perception; Human factors; Visual layers
which have been developed for items which must be of a should be a Lightness difference of at least 20 L p units
speci®c or special colour (e.g. conventional colour codes for between text and background.
pipes carrying high pressure steam within a reactor). The 5. Unless colours have to be highly distinguishable, keep
third supplementary palette consists of ®ve achromatic colour codes unsaturated and subtle. Keates [13] recom-
colours which include the screen maximum black and mends that codes within a map (including colour codes)
white, which are used for borders and text. Note that three should have the minimum degree of contrast needed to
of the colours in the achromatic palette have the same light- make the information elements legible or perceptually
ness as the layering palettes. Appendix A describes all 42 distinct. This recommendation is based on the need to
colours in terms of their hue angle, saturation and lightness avoid visual clutter and to allow a suitable degree of
and the RGB values required to produce these colours on a relative emphasis for very important codes. Medium or
typical computer display. Appendix B provides a visual large areas of highly saturated reds or blues should be
impression of these same colours (except for black and especially avoided as these can give rise to colour
white). For more information on generating required colours stereopsis, ¯utter and other distracting phenomena [21].
on computer displays, see the recent review of calibration 6. There must be a suf®cient hue difference between the
techniques by Post and Calhoun [19]. colour codes used within each layer to enable separate
colour regions or task areas of the same informational
rank to be coded. Experience has shown that colours
2. Ten principles for colour coding visually layered within a layer should have a difference of at least 10
displays DE units between them. A good method for ensuring
high discriminability of hues is to ensure they are
Based on the experience of designing visually layered equally spaced around the hue circle (i.e. a palette of
formats for nuclear power station displays ten principles 6 hues could be chosen by selecting hues lying 608 from
for colour coding such displays have been developed. each other).
These principles have been designed to produce palettes 7. It is a good idea to maintain the same hues between
of colours that allow visual layering effects to be easily layering palettes, so that relationships and similarities
generated, as well as giving rise to displays that would be may be indicated across conceptual layers. In this way,
uncluttered and aesthetically pleasing. Note that these prin- elements of differing task importance, but relevant to
ciples have been designed to be applied to existing displays the same task area or task group can be communicated.
or formats and presume that such formats already have a 8. It is good design practice to nominate one layer as the
clear structure, employ careful use of white space and serve focal layer and have the other layers appear as back-
the tasks for which they have been produced [3]. grounds (for less important information) or highlights
(for very important information) to this. A focal layer is
1. All colours within a layer must have the same or a very important for ease of conceptualising the display
similar level of lightness. As lightness differences are design.
the major method of indicating the depth of a visual 9. Keep the number of colours within a layer to the
layer [10], lightness similarity is the main method minimum necessary to communicate the task
used to indicate same-layer colour codes. effectively. There is no need to use a different colour
2. All colours within a layer should have the same satura- for every task area when colours are merely used to
tion level. Saturation of colour codes can be used in a discriminate between task areas within the same
similar way to lightness to indicate depth of visual conceptual layer within a display. Instead, the total
layers. Wood [9] notes that with increasing distance number of hues on a display should be kept to a mini-
objects in the real world become less saturated, and mum by alternating between two or three colours, thus
recommends that objects on less important visual layers reducing visual clutter. For example, a table with 16
should be less saturated. rows might cluster rows in groups of four and code
3. There must be suf®cient difference in lightness and the resultant groups in green, orange, green, orange
saturation between layers for the layering effect to be (but see Foster and Bruce [4] for possible problems
effective. Experience has shown that there should be a when coding columns of data). When there is no colour
colour difference of at least 10 DE units between layers convention to follow, hues may be based on the
for the colours to be discriminated in most designer's aesthetic judgement or chosen at random.
circumstances. 10. Ensure most people can see codes in most environ-
4. There must be suf®cient brightness contrast between ments. Once a candidate set of colour codes have
texts and backgrounds to ensure legibility. Lippert been produced they should be checked for perceptual
[20] has shown that text legibility on displays is mainly discriminability under typical illuminants [22], as well
due to brightness contrast, with hue and saturation as for potential problems of confusion that may be
contrast only having a small effect on reading perfor- experienced by people with colour vision dif®culties
mance. If legibility of text is very important then there [23].
128 D.L. Van Laar / Displays 22 (2001) 125±135
Fig. 2. Typical power station mimic display showing schematic representations of pipes, valves, four boilers (B13 to B16), the D/A, SUV and Condenser.
3. Mimic display example room. Although there will be hundreds of such displays that
may be called up to aid the operator's task, this boiler feed
In order to demonstrate the utility of the principles above, format would be viewed relatively often as it provides an
this section will show how to analyse and apply the palette overview of many major systems within the plant. The
colour codes to an example display. Fig. 2 is a typical mimic boiler feed format shows, or mimics, the major connections
display as might be used in a nuclear power station control between four of the boilers within the plant (B13±B16) and
three of the major plant subsystems (the D/A, the SUV and
Table 1 the Condenser). The bow-tie like screen elements represent
Analysis and ranking of information groups and visual layers for mimic valves situated along pipes.
display example
After consultation with domain experts the individual
Informational groups Rank/Layer Justi®cation elements within the display were grouped according to the
assigned information they contained and then ranked according to
their task relevance. Table 1 shows brief justi®cations for
Borders and 1 Base layer, screen boundary
background elements providers, area washes and related the rankings of each information group.
text Table 2 shows the relationship between the information
Task area blocks and 2 Demarcates lower level grouping grouped within the conceptual layers, and how they are to be
mimic structures information coded using the colour palettes. Note that to maintain
Static reference text 3 Mostly labels, which need to be
consistency, once a palette has been allocated to a particular
seen as lying on top of Layer 2
task areas but on a lower level than information group within a layer it is not used to code
dynamic information information in other layers (see colour coding principle 3
Dynamic data 4 Frequently updated task relevant (P3)).
information In general, palettes are applied in the order 3 to 1, with the
Alarm signals 5 Infrequent but highly important
lightest Palette (3) being applied to lower layers, the darkest
information
Palette (1) to higher or more important layers (See P1, P2, P3).
D.L. Van Laar / Displays 22 (2001) 125±135 129
Table 2
Summary of information groups and palettes used to produce visual layer effects
Although MacEachren [7] argues for the case of attempt- small number of the colours contained in Appendix A
ing to generate a continuous visual hierarchy within maps were used to code the example display.
with no limit to the number of layers that can be employed,
he cites Spiess [24] as proposing that no more than three,
and Wood [9] that no more than four visual layers 4. Colour allocation
should be should be employed within a map. The
palettes and use of achromatic textual codes (as As described in Table 1, backgrounds and borders are
speci®ed in Appendix A) allow for up to ®ve layers assigned to the lowest task level. Visual Layer 1 therefore
to be created within displays as complex as the mimic contains the white background, and the screen borders and
example shown in Fig. 2 (P3, P4). Note that only a titles which are coded in a grey of the same lightness as
Fig. 3. Mimic display example showing Layer 1 containing background, borders and washes.
130 D.L. Van Laar / Displays 22 (2001) 125±135
Fig. 4. Mimic display example showing adding of Layer 2 mimic and grouping objects.
Palette 2. On the example mimic format it has been decided Colour coding conventions must be followed in many
to colour code the background layer into task areas (i.e. displays to communicate speci®c types of information.
subdivisions) to aid interpretation of the different regions Layer 2 contains two such special or conventional colour
of the screen as different areas of the plant (P6, P7). The codes in that hot water pipes need to be coded red, (Spred in
colours applied to these large areas are called washes and Appendix A) and cold water pipes coded blue (Spblue). The
are chosen from Palette 3 as they appear relatively unsatu- hue of these codes may need to be speci®ed exactly but the
rated and subtle on this lowest layer (P1, P2, P5). As there lightness and, wherever possible, the saturation should be
are no colour conventions to be applied, the hues of the three kept consistent with the palette used to code the layer on
wash areas can be based on the designer's aesthetic judge- which the information is to be applied in order to maintain
ment or chosen at random (P9). Fig. 3 shows the colour the layering effect (P1, P2, P3). Colour codes applied to
coding of conceptual Layer 1, with background, borders layers without controlling lightness and saturation
and green, tan and purple washes (approximate hue names). properties can seriously disturb the perception of separate
Objects within a display are often required to be seen as visual layers. Note in this case, to conform to the colour
sitting on a higher conceptual layer than the backgrounds, conventions, the Special red and blue colours have the
yet lower than more task relevant items. These objects may same lightness, but are more saturated than other colours
be tables, graphs, representations of real world objects (such on Layer 2.
as a boiler or a pipe), or other some information grouping Text on most control room displays can be divided into
device. In the example format these objects have been coded three types: static, dynamic, and alarm text. Static text is
using colours from Palette 2 and lie on Layer 2. Fig. 4, used for labels or other passive indicators, such as the units
illustrates the addition of Layer 2 information and shows the screen inputs are measured in, which change very rarely
how the boiler, condenser and D/A areas have been coded in if at all. Static text must therefore be included in the display,
the same hue as their background area washes to enhance it must be legible above the background or information
their appearance and give the impression of related informa- grouping devices but does not need to be as legible or as
tion with the same task area (P3, P6, P7, P9). conspicuous as the more important dynamic values (P1, P4,
D.L. Van Laar / Displays 22 (2001) 125±135 131
Fig. 5. Mimic display example showing adding of Layer 3 static text items.
P5). Fig. 5 shows the addition of Level 3 static text to the coding need to be employed, such as in lines on a
display, which is coded in a Palette 1 level grey. graph or trace plot [13].
In most displays dynamic text is the most important type Fig. 6 shows the ®nal colour coded, visually layered
of information other than alarms. For this reason the layer computer display. The most important and conspicuous
upon which dynamic text is viewed, Layer 4, is known as item on the display is the red alarm block (Layer 5). The
the focal layer. For most displays the dynamic text should be user should be able to easily focus on, and segment the task
black, thus giving maximum contrast with the background, relevant dynamic text in Layer 4 from the rest of the display.
and insuring maximum legibility and conspicuity (P4, P8). The reference text on Layer 3 should still be legible, but
The addition of the dynamic text is shown on Layer 4 in seen as de-emphasised and on a lower visual plane when
Fig. 6. compared to the dynamic text. The pipes and mimic objects
Alarm text or alarm indicators have been designed to be in Layer 2 should be seen on a lower layer than the refer-
very conspicuous, and thus appear to be on the highest ence, dynamic and alarm values, but on a higher level than
visual or conceptual layer. Fig. 6 shows an example of an the Layer 1 background and washes.
alarm block, colour coded in a highly saturated red. To
ensure maximum conspicuity of the highly saturated alarm
codes, unsaturated almost pastel colours have been 5. Discussion
employed within the layering palettes (P3, P5). Using
relatively unsaturated colours for the layering palettes This paper has described a number of principles to be
also has the advantage of being a more subtle and used when designing visually layered general computer
less attention grabbing coding method than is often displays, and has provided an example of applying such
employed in computer displays, thus leading to less principles when colour coding a typical process control
garish and more aesthetically pleasing displays [6]. display.
The highly saturated palette may also be used to help Although the method presented for producing visual
with discrimination when very small areas of colour layers in displays appears to be of general use, it may be
132 D.L. Van Laar / Displays 22 (2001) 125±135
Fig. 6. Mimic display example showing adding of Layer 4 dynamic information and a Layer 5 alarm item.
that low interaction screen displays or formats such as effects physical separation in colour science terms may
process control or emergency control room applications not always be the same as perceptual separation [25]. Colour
would be especially enhanced. Note that some applications categorisation has been investigated by research into colour
may be high interaction at one time, such as when develop- naming, where it has been found that some colours are
ing a spreadsheet based costing program, and low inter- physically similar, but perceptually distinct (e.g. yellow
action at other times, such as when consulting information and orange), and others relatively physically distinct, but
on a spreadsheet based costing program. Here, colour perceptually similar (e.g. red±purple and blue±purple). It
coding might only be applied after the display had been may be that future methods could select hues based on the
developed in all other respects. categorical difference or `Nameability' of colours [26],
Although the methodology presented will produce rather than their physical differences.
visually layered, task relevant colour codes for non-map As part of the work for the Nuclear Industry, these
computer displays, a number of factors including colour colour coding principles have been encapsulated within
contrast effects and colour nameability still remain to be a software program. To derive palettes for visually
resolved. layering the display designer merely sets the starting
Whenever two or more colours are seen together, hue angles. The software then produces the palettes to
complex colour contrast effects will in¯uence perception be used based on perceptual principles, and the designer
of the individual colours and of the scene as a whole then utilises the application principles to assign the
[15,21]. However, because of the low saturation of the colour codes to the screen elements.
layering colours chosen with this method, these effects are A recent study within our laboratory has shown when
unlikely to exert a very strong in¯uence. using a visually layered format of the type shown in Fig.
The seven hues de®ned for the example were chosen to be 6, that the time taken to search for task relevant information
as far apart from one another in colour space as was is signi®cantly faster than for a monochrome and a non-
possible. Paradoxically, because of colour categorisation layered highly discriminable colour coded version of the
D.L. Van Laar / Displays 22 (2001) 125±135 133
same format. Although the number of errors committed did not Acknowledgements
differ between coding methods in this study, participants
clearly preferred the visual layering coded format to the The work described here was funded by the Industry
other two. This work is currently being prepared for publica- Management Committee as part of the UK Nuclear Safety
tion [27]. Further work employing other types of formats and Research Programme. Thanks are extended for project
more complex tasks is currently being undertaken to develop support and comments to Ian Umbers and Steve Smeaton
and ®ne-tune the task analysis and colour coding methods. of British Energy and to Terry Williams (research assistant).
Appendix A
Hue (huv), saturation (suv), lightness (L p) and typical monitor RGB values for an example set of palettes for creating colour
layering effects. Note that hues are equally spaced and thus labels are the nearest monoleximic colour name. Key: Blue1
Palette 1 blue, Satblue Highly saturated blue, Spblue Special palette blue, na not applicable. Colour coordinates for
nominal white point: x 0:313; y 0:329; Y 124:0 Please note that hue names are only approximations.
Fig. 7.
Appendix B [8] A.H. Robinson, Elements of Cartography, 2nd ed, Wiley, New York,
1960.
[9] M. Wood, Visual perception and map design, Cartogr. J. 5 (1968)
Visual impression of colour palettes (three layered, one
54±64.
saturated, one special). Note that due to problems reprodu- [10] A.H. Robinson, J.L. Morrison, P.C. Muehrcke, A.J. Kimerling, S.C.
cing screen based colours in print these colours will only be Guptill, Elements of Cartography, Wiley, New York, 1995.
approximate versions of those speci®ed in Appendix A (Fig. [11] R.E. Christ, Research for evaluating visual display codes: an
7). emphasis on color coding, in: R.S. Easterby, H. Zwaga (Eds.), Inform.
Design, Wiley, Chichester, 1984.
[12] L.D. Silverstein, Human factors for color display systems: concepts,
References methods and research, in: H.J. Durrett (Ed.), Color and the Computer,
Academic Press, New York, 1987, pp. 27±62.
[13] J.S. Keates, Cartographic design and production, Longman, New
[1] R.A. Skelton, The early map printer and his problems, The Penrose
York, 1989.
Annu. 27 (1964) 171±186.
[14] B. Kirwin, A task analysis programme for a large nuclear chemical
[2] S. Taylor, Colour design in aviation cartography, Displays 10 (1985)
187±194. plant, in: B. Kirwin, L. Ainsworth (Eds.), A Guide to Task Analysis,
[3] I.G. Umbers, G.D. Collier, Coding techniques for process plant VDU Taylor and Francis, London, 1994, pp. 363±388.
formats, Appl. Ergonom. 21 (3) (1990) 187±198. [15] R. Hunt, Measuring Colour, Ellis Horwood, London, 1991.
[4] J.J. Foster, M. Bruce, Looking for entries in viewdata tables, a [16] K.L. Kelly, Twenty-two colours of maximum contrast, Colour
comparison of four colour formats, J. Appl. Psychol. 67 (5) (1982) Engineering 3 (1966) 26±27.
611±615. [17] D.L. Van Laar, R. Flavell, I. Umbers, J. Smalley, A methodology for
[5] V.D. Hopkin, Color on air-traf®c-control displays, Inform. Display 1 producing maximally discriminable, nameable colours in control
(1994) 14±18. room displays, in: C. Dickinson, I. Murray, D. Carden (Eds.), John
[6] L. Reynolds, Colour for air traf®c control displays, Displays 15 (4) Dalton's Colour Vision Legacy, Taylor and Francis, London, 1996,
(1994) 215±255. pp. 673±676.
[7] A.M. MacEacheran, How maps work: representation, visualisation [18] R.C. Carter, E.C. Carter, High-contrast sets of colours, Appl. Opt. 21
and design, Guilford, New York, 1995. (1982) 2936±2939.
D.L. Van Laar / Displays 22 (2001) 125±135 135
[19] D.L. Post, C.S. Calhoun, Further evaluation of methods for producing [23] J. Birch, Diagnosis of Defective Colour Vision, Oxford Medical
desired colours on CRT monitors, Color Res. Appl. 25 (2) (2000) Publications, Oxford, 1993.
90±104. [24] E. Spiess, Map compilation, in: R.W. Anson (Ed.), Basic Cartography
[20] T.M. Lippert, Colour difference prediction of legibility for raster CRT for Students and Technicians, vol.2, International Cartography Asso-
images, SID Digest 17 (1986) 86±89. ciation, London, 1988, pp. 35±69.
[21] J. Walraven, Color basics for the display designer, in: H. Widdel, D.L. [25] R.M. Boynton, L. Fargo, C.X. Olson, H.S. Smallman, Category
Post (Eds.), Color in Electronic Displays, Plenum, New York, 1992, effects in colour memory, Color Res. Appl. 14 (1989) 234±299.
pp. 3±38. [26] S. Guest, D.L. Van Laar, The structure of colour naming space, Vision
[22] J.P. Viveash, J. Laycock, Computation of the resultant chromaticity Res. 40 (2000) 723±734.
coordinates and luminance of combined and ®ltered sources in display [27] D.L. Van Laar, Evaluation of a visual layering methodology for
design, Displays 3 (1983) 17±23. colour coding control room displays. In preparation.