How do you communicate with your laboratory instrumentation? See
and control what's happening? A software view of the system
is known as the user interface.
You may have little or no control
over the look of this interface - as in the case of some
Windmill Software's free Chart
program, for example, lets you choose colours, backgrounds and
styles of display.
The basic look of the Chart window, however,
always remains the same.
Other programs give you complete control
over the screen's appearance, and this article gives tips on
designing these interfaces.
They might represent an industrial
process, might be an annunciator panel or perhaps a wiring
Whatever your interface shows, you need to consider the
people who have to view, understand and react to it.
Graphics is one program that lets you design and implement user
Other manufacturers offer their own process mimic or
virtual instrument generators, or you may be writing your own
These notes endeavour to help you create better user
interfaces - whatever method you are using.
Strive for clarity.
We want the display to be as easy-to-use and foolproof as
How we achieve clarity in our design depends on how we
arrange the screen, present the data and use colour.
To allow rapid access, with no confusion, group
controls and parts of the display logically.
A good method is to
design in black and white, using grouping and spacing to enforce
clarity, then add colour where it will help the operator.
could group related items by drawing a box around them.
your design is simple, logically organised and well labelled.
Display only necessary information and avoid cluttering the
screen with data that is irrelevant to the user - involve the
operator early in the design process.
Some displays let people
jump to a completely different screen.
In this case make sure you
include an obvious a way back.
Be consistent in presenting a
given type of information from screen to screen: use the same
design and location.
Present data graphically.
understand and respond to data presented graphically much quicker
than they can to data presented alpha-numerically.
it's easy to misread text but you can instantly get a rough
idea of a reading from an analogue meter or a bar graph.
numerical data only when the operator needs to know exact values.
This is especially true for rapidly changing readings.
do need to show actual data values, line them up neatly and
You might always left-justify alpha-numeric data,
right justify integers and line up decimal points.
include text labels plus units, to show what your numbers mean.
For your labels, and other screen text, remember that it's
easier to read upper and lower case than all uppercase.
Don't clutter the screen with lots of different fonts.
On-screen a sans-serif typeface is easier to read than serif.
When designing, say, an annunciator panel showing a large amount
of data - insert blank rows to enhance legibility.
icons for digital states.
Digital states, such as open or closed
and on or off, are generally best represented by changing icons.
There is often a nationally or internationally recognised symbol
for your icon.
The British Standards Organisation, for example,
specifies graphical symbols for process measurement and control.
To design your own icon emphasise the graphical elements that
distinguish this object from other objects and eliminate the
elements that don't contribute to the object's
Consider whether you need to label your icon.
careful with control.
When the interface lets someone control, as
well as view, the system - make sure you offer feedback for her
If, say, she presses a button to open a valve, make sure
that valve is seen opening on the display.
For all control
functions be careful that the result of the action is absolutely
It's helpful to consider the
implications of the construction of the eye when laying down some
guidelines for using colour.
The retina, at the back of the eye,
is the light sensitive component.
It contains two types of
photoreceptor: rods and cones (they get their names from their
Rods are highly sensitive to light and let us see under
a low level of illumination.
Cones let us see colour, but need
more light to function.
There are three types of cone, each
sensitive to a different wavelength of light (blue, green, red).
Colour vision does not simply detect the wavelength composition
of light transmitted from the object; it analyses an object in
relation to its background.
The colours we see in objects are
those that best set them off from their background.
colours in context, not in isolation.
For the background use a
muted, light, colour such as pale grey or blue.
depends on the outputs of the different cones.
These are coded as
One colour difference signal is red versus
green - the red and green cone outputs are weighed up and the
resulting signal depends on their relative strength.
colour difference signal is yellow vs blue - which uses the red
and green to deduce yellow.
A third signal uses all three cones
to produce luminance.
Interestingly, television engineers use a
similar method to achieve colour TV.
They analyse the picture
into three basic colour components but then transmit the
information as two colour difference and a luminance signal.
eye has evolved to detect edges - boundaries between dark and
On a light background then, outline objects in black.
use of dark characters on a light background (positive contrast
or polarity) ensures good legibility, as reflections are less
obvious and edges of the characters appear sharper.
which colours you use together.
Red and blue, for example, have
very different wavelengths.
The eye might strain to provide sharp
focus for both these saturated (pure) colours simultaneously.
(Some studies have estimated that up to 40% of operators suffer
from eyestrain, for a variety of reasons including contrast,
colour, glare and alpha-numeric design.) The eye is attracted to
colour changes so you could use these to show status changes.
analogue channel might change colour when it passed an alarm
threshold, and a digital channel when it changed state - opening
or closing say.
Colours conforming to the operator's
expectations and common conventions in your industry speeds
Red, green and yellow might be associated with stop,
go and standby; or with danger, safe and alert.
engineers might view red as hot and blue as cold.
Be very careful
that colour helps rather than confounds interpretation of you
Most of us broadly agree on the colours we see, because
we are using similar neural circuits to see them.
disagree though, and these are called colour blind by the rest of
About 8% of men and 1% of women are colour blind.
other colour considerations means you shouldn't make colour
the sole source of information - use position information and
labels as well.
Experiments have shown that people read more
slowly from computer screens than from paper.
Reading speeds are
increased, however, by optimising a number of factors such as
using dark characters on a light background, anti-aliasing
characters (ie smoothing their edges) and using displays with
relatively high resolutions (eg 1000x800).
contributes in a small, cumulative way.
Optimising each aspect of
your design will improve legibility of your display.
summary and checklist.
1 Make sure the design is simple,
logically organised and well labelled.
2 Avoid cluttering the
screen with data that is irrelevant to the operator.
appropriate present information graphically, such as with
analogue meters or moving bars, rather than alpha-numerically.
Line up numeric values and always show clear labels with units.
Don't use all uppercase and keep the number of fonts to a
6 Use changing icons for digital states.
objects in black.
8 Group related items, perhaps by drawing a box
9 Make sure the results of pressing a control button
are absolutely clear.
10 Give feedback on all operator actions.
11 Use colour conservatively, conventionally and consistently.
Use a muted, neutral colour for the background, such as grey or
13 Use dark characters on a lighter background.
the number of colours and make these as distinct as possible.
Don't make colour the sole source of information - use
labels or position to clarify.