Good Screen Design
Richard Rothrock and Virginia Martz
Vista Control Systems Inc.
ABSTRACTThis paper reviews the elements of good screen design in relation to designing a Man MachineInterface (MMI). The key principles in accomplishing a successful design are knowing the userand empowering the user. Fast prototyping helps the designer know the user and the ability tocreate well designed screens empowers the user. Good screen design includes setting up local
standards, proper use of color, using effective layout rules, ensuring adequate screen response,managing complexity, and maintaining consistency. This paper examines these elements andhow they relate to factors such as intended operators and room environments.

INTRODUCTION
Creating the operator interface or the man machine interface (MMI) for a control system can be a
rewarding, creative and satisfying effort. A job well done contributes greatly to the productivity of the controls
effort. A poor MMI becomes very frustrating, hard to use and may prevent the users from accomplishing theircontrol system goals. This paper provides some guidelines for creating a good MMI. The two key principles forthis effort as stated in the OSF/MOTIF Style Guide [4] are knowing and empowering the user.

KNOW THE USER
Knowing your user is the job of every professional. Users are the operators, customers and people thatwill eventually sit or stand in front of your screens for hours and hours, keeping their machine running. In allendeavors we hear the same phrases: know your user, learn to communicate, write specifications, and iterate ideas
so that users get a close approximation to, or maybe even more than, what they wanted. For good screen andMMI design, in order to know your user, you must use an iterative design process with the user during thedevelopment of the MMI.
Iterative design is essential to good screen design, especially when users are coming from an older MMI
based upon character cell terminals. These iterations help teach the users what is possible with newer graphicbased MMIs and is accomplished most efficiently with a rapid prototype screen builder. When you show users
what is possible, they can better communicate their requirements to you. Several iterative designs should be doneeven during the initial demonstration of the preliminary screens in order to show the users that changing screens iseasy. In the past, changing control screens was a very time-consuming effort and was requested only whenabsolutely necessary. With new MMIs, users themselves have the ability to create preliminary screens which will
enhance the design process greatly. Later on, users will also have the ability to maintain production screens.

EMPOWER THE USER
The main reason for good screen design is to enable users to do their jobs. If your iterative design
process is successful with the user, you could come up with an MMI that meets all the requirements but still isineffective because the screens are busy, too colorful, or do not get to the heart of the job. If the screens distract
rather than inform, or you need to navigate into too many screens to get the job done, the effectiveness of theMMI can be lost. The following sections describe some rules that make it easier to create an effective MMI. Welldesigned MMIs make a good first impression and still are easy to look at and use after a full shift and after yearsof running a facility. Remember that an effective MMI empowers the users by minimizing the scan time required
to assimilate the information needed to do a task.
MINIMIZE COLOR
One main rule to follow is to minimize the use of color by using grayscale in most of the windows. Resist
the temptation to play with the many great colors now available on workstations. When the job is to control aphysics experiment, the technicolor (wild random use of color), screen furniture and visual toys are very
distracting. Bright, busy and cheerful images should be left to games; minimal use of color is the name of thegame for MMIs. An exception to this rule is photorealistic images, which may have many colors; this realistic useof color is very natural and not distracting.
To get a subdued look, do all preliminary screen design first using only grayscale, then add color only
where it adds information and clarity. For example, a standard could be that all help screens have a muted green
background and all operations screens have a light gray background. The muted green provides a visual cue that
distinguishes help screens from other screens. If all other screens had randomly colored backgrounds, the green
background would be meaningless.
USE COLOR EFFECTIVELY
Knowing how to use color effectively starts with understanding the physiology of the human eye. Color
results from the interaction of certain frequencies of electromagnetic radiation with an appropriately designed
nervous system. The eye is the sensor that perceives this radiation using the lens and retina. More brain power isdedicated to sight than all the other senses combined. A simplified diagram of the eye is shown in Figure 1.

Focal Points
BlueGreen/YellowRedFovea CentralisLens

RetinaOptic Nerve
Figure 1. Diagram of the eye
Keep in mind the main function of our eyes is survival of the human species, not looking at a color
monitor. At night our eyes become incredibly sensitive to light to allow us to see in the dark. Our eyes also are
sensitive to rapid changes in light. Figure 1 shows that you can only focus on red, green/yellow, or blue at asingle time. However, a color monitor presents all colors at the same focal depth, causing the eye to refocus toeach color as the fovea scans the screen to perceive detail. These characteristics must be considered in developing
an effective MMI.
Users find it easy to remember combinations of seven, plus or minus two, items, as in telephone andsocial security numbers. This rule can be applied to color as well. Meanings should be assigned to no more thanseven to nine colors. To insure consistency across the MMI, develop a color standard to keep the meaning ofcolors consistent throughout the MMI. Users will make an implicit assumption that all things colored the same
are associated in some way. When colors are used for meaning, the associated help screens should have color
legends describing this meaning. When choosing the meanings of colors, keep in mind commonly held
associations of color and meaning, as shown in Figure 2. The meanings of words must be carefully chosen,
depending upon the application. Notice that the word “on” appears as a meaning for both the color Red andGreen. In some applications, if the color is closely associated with a dangerous piece of equipment, “on” shouldmean red to denote danger and green would mean “off” or safe. If “on” is not closely associated with danger,
then green is often used for denoting “on,” red is then reserved for an alarm condition, and blue or gray wouldColor
GreenRed
YellowBlueWhiteBlack

Meaning
Go, on, clear, safe
Stop, hot, danger, fire, on, emergency
Caution, slow, warning, warm
Cold, off, calm
Empty, closed
Full, open
Figure 2. Common color meanings

mean “off.”
Picking harmonious colors can be made easier by examining a color wheel and looking at different typesof color combinations. The color wheel in Figure 3 shows relationships between colors. Similar colors, adjacent
to each other on the wheel are useful for shading and showing changes in levels. Complimentary colors fall
directly across from each other, and they make good combinations, because they are less distracting and easier tofocus on than similar colors. Distinct colors, found in symmetrical positions around the wheel, are good forshowing changes in state. Highly saturated, spectrally extreme colors (like pure red and pure blue) next to eachother should be avoided. These colors cause eye fatigue, because the eye constantly needs to refocus on one ofthe two colors. If they must be used together, a black border should be used between them. Since blue is a hardcolor for the eye to focus on, it is not a good color to use for text, thin lines, and small shapes, but blue does makeComplimentary Colors

Similar Colors
Yellow

GreenBlueRed

Distinct Colors

Figure 3. Color relationships

an excellent color choice for backgrounds.
Choosing a color standard often can be a difficult task in developing an MMI. You can obtain ideas for
effective colors from many places. For example, look at the color combinations of basketball and footballuniforms. Notice the color of text used with the background color on the jersey; it is black on light coloredbackgrounds, and white on dark colored backgrounds. Another source for good color combinations is Microsoft’s
window color combinations. Notice that the colors are subdued and very close to each other on the color wheel.
The default colors, grays and blues, allow applications to stand out more in color. The “Arizona” selection uses
complimentary blues and greens with gray. The “Black Leather Jacket” selection is a good example for darker
rooms. The “Florescent” selection is hard to focus on for long periods of time, but it allows the user quickly torecognize the active window. The “Hot Dog Stand” selection has very strong edges made from very saturated
colors taken from one side of the spectrum (reds and yellows and not blues), a selection resulting in less eye
strain.
When choosing a standard set of colors, don’t forget the occasional color blind users. The most common
form of color blindness is the inability to distinguish between red and green. Color alone should never be used toconvey a change. Use changes in color and text, or color and shape, or vary the contrast of the color as the color
changes. If this idea is extended, a screen is not rendered useless if a color gun in the monitor fails. If printing isimportant, try printing your standard colors to ensure that colors are discernible in both color and grayscale.
CONSIDER ENVIRONMENTAL CONTRAST

Another factor to be considered when developing good screens is the room environment. Light
conditions in the control room should be taken into account when locating monitors, to reduce glare on the screenand lower contrast. As the user’s eyes move around the room and to the computer monitor, the light intensities
between the room and the screen should be as close as possible to reduce eye strain. If you have control over thisenvironment, the ambient light intensity should be set to around 500 LUX. A standard bright office is around1000 LUX, which would be difficult to match with a computer monitor.
In other words, if you have a dark room, use dark colors for the majority of the screen area with lightgraphics and text. Similarly, with a bright room, use light backgrounds with black text. This method will lower
eye strain by taking into account eye sensitivity to light. If the monitor is portable, determine all lighting
conditions where the MMI may be used; if necessary make two sets of background and text colors available, andswitch them dynamically to match the lighting conditions. The key colors that carry meaning should remainunchanged and be designed to work in all situations. Some MMIs have this capability by defining multiple color
maps for use in different lighting conditions.
USE TEXT EFFECTIVELY
The proper use of text can do much to improve screen effectiveness. Select only two or three fontfamilies for use throughout the MMI. Use standard point sizes to show different types of information. Use a large
point size for screen titles, with a slightly smaller point size for labeling groups of information and yet a smaller
point size for labeling data. Point sizes should be based on how far from the screen the users will be. With few
exceptions, text should be white or black. If it is necessary to use color for text, a bold font from the same family
should be used to maintain a contrast similar to the normal text. When labeling data and titling screens, only thefirst letter of each word should be capitalized. Users tend to identify words by their shapes; therefore words madeEfficient use of labels enhances meaning
EFFICIENT USE OF LABELS ENHANCES MEANING
Figure 4. Text shapeup entirely of capitals do not vary in shape from word to word and thus take longer to identify . Figure 4
demonstrates the added clues the shape gives by viewing only the top half of both sentences.
USE LAYOUT RULES

Consistent layout choices for objects also can enhance the effectiveness of an MMI. A standard should
be developed for the placement of objects. Aligning rows and columns of objects reduces the complexity of ascreen, which also reduces the scan time for a user. Another layout rule is to reduce the density of the screen. Awindow should be made up of 70% to 80% white space if at all possible. Again, this use of white space makes it
easier for the user to scan the display and gather information quickly. Reduce information density by presenting
lists of values in columns with appropriate labels and by grouping similar objects with separators such as boxes orlines.
CONSIDER SCREEN RESPONSE
Operator feedback is another important part of an MMI. The computer should respond immediately toall actions by a user. This response can be a color change, a wait cursor (if the action will take time to perform),a popup informational window, or some other feedback method that informs the user that their action has beenrecognized. It is very frustrating to request an action and not have anything happen, even though the MMI hasreceived the request. Often this lack of response causes the user to repeatedly request the same action and stall therequested action or toggle unnecessarily.
Consider, too, the update rates of information displayed on a screen. A user can recognize and process
information changing on a screen from 5 to 30 Hz. Changes more frequent than this are unnecessary, because theuser will not perceive data changing more often and the MMI will waste computer cycles. The movie industry has
found 30 frames per second adequate to show smooth and uninterrupted change. It is recommended that the MMI
throttle changes more frequent than 10 Hz to prevent overloading of the graphics server and to insure fast response
for the user. Reserve higher rates (up to 30 Hz) for showing smooth animation when necessary.
SELECT TILED VS OVERLAPPING WINDOWS
Another decision to be made is which windowing method should be used: tiled or overlapping windows.
A computer-controlled tiled system determines where and what windows should be placed on the screen. The
user is not allowed to size or move individual windows. This method is the least flexible, but the easiest to learn
by inexperienced computer users. Tiled windows present less complexity; use them when users are
nonprogrammers whose interactions with the computer are peripheral to their work. Overlapping windows can beentirely user controlled. Users can choose which windows should be opened, where they are placed, and how
large they will be. Overlapping windows can be dynamically rearranged to suit the user’s operational needs,
depending upon what task is being performed and which windows will most empower the user to perform the task.
A user controlled overlapping system is the most flexible, but the hardest to use and much less determinant.
The disadvantages of tiled windows are that the users cannot configure the windows to meet their needs.
Overlapping windows have the disadvantage of giving the user too much control over the number of windows
open at one time. This can lead to windows being lost behind each other, increased complexity and overloading
the graphics server. Choose one method and use it for the majority of the MMI.
DESIGN ICONSWhen possible, give information to the user graphically instead of textually, or both together for more
lexical-based users. Graphical information can be processed much more quickly, allowing faster recognition thanpure lexical based information. Using well designed icons also saves space and reduces complexity. Whenchoosing icons to represent data, select symbols that are meaningful and distinct from other icons in the MMI.
Keep in mind that the computer culture is currently building a common set of recognizable icons (the trashcan,and the phone, for example). Use commonly recognized icons when possible, to give the user less to learn.
RULES FOR DIALOG WINDOWS
There are two main types of windows in a control system: display windows where the users performprimary tasks and dialog windows which are secondary windows intended to appear temporarily. Dialog windows
ask a question or show detailed information needed for a minor step in a task. They should have a consistency all
their own. For example, the cancel button should put the dialog window away without any action taking place,and it should be in the same spot on all dialog windows. Dialog windows should be as small as possible andplaced effectively in order to show the orientation of where it came from when the user answers the dialog. Thesewindows should be designed so that the user must answer the dialog before continuing a task. Give carefulconsideration as to when an additional dialog window is necessary and when dialog windows can be combined tolimit the frequency of processing individual windows. If too many windows are thrown at the user too frequently,
the user begins to ignore the messages and the meaning is lost.

PLAN FOR EXPERIENCED USERS
As users become more familiar with the MMI, they become curious and exploratory. As users explore,
they should be able to back out of their actions without making permanent changes to the system. Warnings about
destructive actions allow the user to avoid making a permanent change and encourage curiosity. Moreexperienced users tend to repeat familiar actions and desire accelerators for performing repetitious work.
Excessive warning beeps from the MMI are ignored by experienced users. A single beep should be employed if
the user tries a sequence that is not correct at the time.
TOUCHSCREEN RULES
Touchscreens are becoming more common in industry with improved cost/performance. Touch panels
have become easy to press and are transparent. The important design considerations to be aware of are touch area
size and placement. Touch area size should be set to 2 cm minimum. Place most frequently used touch areas along
the bottom and right side of screen, to minimize the amount of screen obscured during a press (remembering thatmost users are right handed). A good reference for touchscreens is the Sematech standard, which is anindustrywide standard for semiconductor manufacturing [5].

CONCLUSION
Good screen design can be a learned skill; with careful attention to color and text choices, layout andenvironment. Plan on creating standards and prototyping early in the design process. As the iterative design
process develops, it can be useful to keep a storyboard of the screens, to monitor your progress, see improvements,
and keep track of your goals. The references are recommended as helpful tools for building a complete, easy-touse and interesting graphical user interface.

RECOMMENDED BOOKS[1] Foley, James D. et. al. Computer Graphics Principles and Practices. Reading, MA: Addison-Wesley
Publishing Company, 1990.
[2] Fowler, Susan, and Victor R. Stanwick. The GUI Style Guide. Boston: Academic Press, 1995.
[3] Horton, William. The Icon Book. New York: John Wiley & Sons, 1994.
[4] Open Software Foundation. OSF Style Guide. Englewood Clipps, NJ: Prentice Hall, 1989.
[5] Sematech. SCC User-Interface Style Guide. Austin, TX, 1992.