Windmill Software Ltd
Windows Engineering Software

Monitor Newsletter Archive

Home
Newsletters
Shop

Search

Issue 9: Designing the User Interface; Virtual Libraries

CONTENTS

Windmill News | Designing the User Interface | Arranging the screen | Presenting data | Using colour | Virtual libraries

WINDMILL NEWS

We're please to use our Monitor newsletter to announce the launch of Windmill Version 5. With full 32-bit compatibility, the new Windmill extends the range of hardware available by offering many new NT drivers, including those for Microlink plug-in cards, industrial RS485 units and GPIB devices.

Should you wish to upgrade your Windmill system, you can do so for just £120 (around 195 US dollars or 185 Euros). This will buy you Version 5 of every Windmill program and driver you currently possess! E-mail us with details of your current system, including your software serial numbers, and then purchase either from our on-line shop or through your normal channels. (Note: Windmill 5 will not work alongside Windmill 4.3 - you must upgrade everything.)

DESIGNING SOFTWARE USER INTERFACES: PROCESS MIMICS, HMIs...

How do you communicate with your data acquisition system? See and control what's happening? A software view of the system is often 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. Our 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.

*

Presenting Data

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 v blue - which uses the red and green to deduce yellow. A third signal uses all 3 cones to produce luminance. Interestingly, television engineers use a similar method to achieve colour TV. They analyse the picture into 3 basic colour components but then transmit the information as 2 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 1000 x 800). Each variable contributes in a small, cumulative way. Optimising each aspect of your design will improve legibility of your display.

*

By Jill Studholme.
This article has subsequently been reprinted in the Automotive Test Report.

*

Further Reading

Human-Computer Interaction, Alan Dix et al, Prentice Hall International

Designing the User Interface: Strategies for Effective Human-Computer Interaction, Ben Shneiderman, Addison-Wesley Publishing Company

Human-Computer Interface Design Guidelines, C Marlin Brown, Intellect Books

ENGINEERING AND SCIENTIFIC VIRTUAL LIBRARIES

Virtual libraries are repositories of internet resources. They range from a page of links to comprehensive directories organised under systematic classification systems. Here are some of the best science and engineering libraries.

Control Engineering Virtual Library

From the Control Group at the University of Cambridge. A library of Links to control groups around the world, professional societies, journals, control information services and commercial organisations.
http://www-control.eng.cam.ac.uk/

The Instrumentation Signpost

Published by Readout, Ireland's Journal of Instrumentation and Control, the Instrumentation Signpost lists measurement, control and automation resources from throughout the world. It features periodicals; an up-to-date list of exhibitions, conferences and courses; professional bodies; standards; news and even a poetry corner.
http://www.iol.ie/~readout/

M&C (Measurement & Control) on the web

From the international society for measurement and control, a list of links to communication networks, bookstores, employment, training, quality, year 2000, control, etc.
http://www.isa.org/techtalk/0,1621,0,00.html

Internet para Engenheiros Mecānicos (Mechanical Engineering Internet Resources)

Departamento de Engenharia Mecānica da UFMG
Although titled mechanical engineering this library also features other engineering disciplines. A Brazilian resource with links from around the world. Subjects covered include engineering software, patents, publishing companies, journals, professional organisations, on-line courses and newsgroups.
http://www.fem.unicamp.br/~cerqeira/principal.html

WWW Virtual Library: Mechanical Engineering

Managed by Charles Petrie of the Stanford Center for Design Research, this virtual library lists resources under jobs, publications, online calculations, free engineering software, and other information services. (Charles wants to make clear that he's a computer scientist, not a mechanical engineer, and so can't answer any ME questions.)
http://cdr.stanford.edu/html/WWW-ME/home.html

Edinburgh Engineering Virtual Library

Provides links to an extensive range of engineering web sites, arranged by engineering discipline. Environmental engineering, for example, is broken down into general, pollution, and renewable energy resources. Other categories include bioengineering, chemical engineering, automotive engineering, marine engineering and power engineering.
http://www2.eevl.ac.uk/browsepage

Directory of Networked Resources - Engineering

From the National Information Services and Systems, which provides online information for the UK education and research community. Gives an overview of each site so you can quickly see if you want to go there. Categories include materials testing and mechanical engineering
http://www.niss.ac.uk/cgi-bin/GetUdc.pl?62

GALAXY

"The professional's guide to a world of information". Lists academic organisations, government organisations, events and periodicals under a wide range of scientific and engineering disciplines.
http://galaxy.einet.net/galaxy/Engineering-and-Technology.html

Open Directory Project

A directory of links in categories such as data acquisition and control, biotechnology, chemical engineering, environmental, journals and magazines, manufacturing, materials and safety engineering.
http://dmoz.org/Science/Technology/

Department of Mechanical Engineering

University of Twente, the Netherlands Features on-line education, newsgroups, production, planning and manufacturing.
http://www.wb.utwente.nl/mech-surf/

Engineering Virtual Library

Covers standards, products, services, academic institutions and other virtual libraries. http://arioch.gsfc.nasa.gov/wwwvl/engineering.html

University of Kentucky Engineering Resources

Lists engineering search engines, patents, trademarks, societies & associations, employment and standards.
http://www.uky.edu/Subject/engineering.html

Institution of Electrical Engineers

Includes search tools, government and official organisations, standards organisations and software libraries.
http://www.iee.org.uk/Misc/otherwww.htm

SciCentral

Includes biological, engineering, physical, chemical, and earth sciences.
http://www.scicentral.com/

Do you have a comment or suggestion for this newsletter? Why not email the editor - Jill - at monitor@windmill.co.uk

* Copyright Windmill Software Ltd
* Reprinting permitted with this notice included
* For more articles see http://www.windmill.co.uk

We are happy for you to copy and distribute this newsletter, and use extracts from it on your own web site or publication, providing the above notice is included and a link back to our website is in place.

Subscribing

To receive Monitor every month please fill in your e-mail address below. We will not pass your address to any third parties, nor send you any unsolicited e-mail.