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
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.
https://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 - 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 - 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/ - 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@windmillsoft.com
* Copyright Windmill Software Ltd * Reprinting permitted with this notice included * For more articles see https://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.
You will receive an e-mail asking you to confirm your subscription. On doing so you will be sent details of how to download the free software. If you don't receive this e-mail please contact monitor@windmillsoft.com.
You can read an archive of previous issues on our Data Acquisition Intelligence site.
Cancel Subscription
You can cancel your free subscription at any time - just return to this page or follow the instructions in the newsletter.
