Designing a user interface

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 off-the-shelf programs.

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 diagram.

Whatever your interface shows, you need to consider the people who have to view, understand and react to it.

Windmill Graphics is one program that lets you design and implement user interfaces.

Other manufacturers offer their own process mimic or virtual instrument generators, or you may be writing your own software.

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 possible.

How we achieve clarity in our design depends on how we arrange the screen, present the data and use colour.

Arranging the screen.

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.

You could group related items by drawing a box around them.

Make sure 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.

People can understand and respond to data presented graphically much quicker than they can to data presented alpha-numerically.

For example, 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.

Present numerical data only when the operator needs to know exact values. This is especially true for rapidly changing readings.

When you do need to show actual data values, line them up neatly and consistently.

You might always left-justify alpha-numeric data, right justify integers and line up decimal points.

And always 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.

Use changing 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 identity.

Consider whether you need to label your icon.

Be careful with control.

When the interface lets someone control, as well as view, the system - make sure you offer feedback for her actions.

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 clear.

Using colour.

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 shapes).

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.

Choose colours in context, not in isolation.

For the background use a muted, light, colour such as pale grey or blue.

Colour vision depends on the outputs of the different cones.

These are coded as difference signals.

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.

The second 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.

The eye has evolved to detect edges - boundaries between dark and light.

On a light background then, outline objects in black.

The 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.

Be careful 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.

An 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 recognition.

Red, green and yellow might be associated with stop, go and standby; or with danger, safe and alert.

Chemical engineers might view red as hot and blue as cold.

Be very careful that colour helps rather than confounds interpretation of you display.

Most of us broadly agree on the colours we see, because we are using similar neural circuits to see them.

Some people disagree though, and these are called colour blind by the rest of us.

About 8% of men and 1% of women are colour blind.

This and 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).

Each variable contributes in a small, cumulative way.

Optimising each aspect of your design will improve legibility of your display.

5 point 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.

3 Where appropriate present information graphically, such as with analogue meters or moving bars, rather than alpha-numerically.

4 Line up numeric values and always show clear labels with units.

5 Don't use all uppercase and keep the number of fonts to a minimum.

6 Use changing icons for digital states.

7 Outline objects in black.

8 Group related items, perhaps by drawing a box around them.

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.

12 Use a muted, neutral colour for the background, such as grey or blue.

13 Use dark characters on a lighter background.

14 Minimise the number of colours and make these as distinct as possible.

15 Don't make colour the sole source of information - use labels or position to clarify.