CONTROL SYSTEM APPLICATION LOOK AND FEEL GUIDELINES

M. Kadunc*, J. Kamenik, I. Križnar, G. Pajor, M. Pleško, A. Pucelj, I. Verstovšek,

J. Stefan Institute and Cosylab Ltd.
Abstract common repository and accessible by anyone writing
Control system applications, usually developed using applications. The widgets are designed to be consistent
modern RAD tools, are often inconsistent and do not meet with the Java™ metal look and feel, using standard
the visual or functional requirements of the users. To colors, fonts, borders, keyboard shortcuts and mouse
avoid such problems, Cosylab[1] adopted a set of actions. They are intended to minimize the effort needed
guidelines for writing good user interfaces. Most of these to design and implement an application user interface.
guidelines were gathered by studying various user
interface approaches in control system and common PC 2 VISUAL DESIGN
applications[2,3], identifying specific problems and
finding the most acceptable solutions. This paper briefly 2.1 Colors
discusses the choice of a color scheme for control Use a simple color model, with no more than two
widgets, labels and other components often used in different basic colors for default functionality and a
control panels, as well as their layout on screen or in a standard set of colors to communicate additional
window. Font, case and language of different texts used in information to the user. Background and borders of
applications are also suggested. Furthermore, it focuses components should be rendered using light, non-saturated
on the interaction between the user and the computer, first colors, which do not distract the user and are natural to
by enumerating and evaluating ways of displaying the eye. These are typically shades of gray. Selected or
messages to the user, and then by addressing accessibility focused items should use a more saturated, neutral color
issues, such as keyboard shortcuts, contextual (pop-up) such as blue. Text should be rendered using black and
and window menus, toolbars etc. Finally, it addresses the should have a white background when editable.
customization of application workspace and the problem Other colors should have a special meaning and they
of finding a balance between user-specified and default should be used consistently across applications. Most
look and feel of the applications. common colors are: strong red for errors, green for start,
yellow for warning, etc.
1 INTRODUCTION An application may define its own colors with an
associated meaning to clarify the user interface and
When a new control system is being developed, most of
identify certain items, but no more that seven different
the time is spent programming the server architecture,
colors should be used, otherwise the users will have
integrating the hardware equipment, writing drivers,
difficulty remembering their meaning. Use darker,
network protocol, client access libraries and application
saturated colors, but make sure that they are not too
programming APIs. While all of these are very complex
similar to the standard colors mentioned above.
pieces of software, writing applications and especially
designing graphical user interfaces is usually considered 2.2 Application Graphics and Animation
to be a simple task, done either by physicists who are not
Icons, button graphics and symbols are very useful to
professional software developers, but rather the intended
visually represent an action or an item without using a
users of the applications, or by programmers who
large area of the application. Graphics in applications
otherwise have more “important” things to do, but have to
should be very simple, easy to remember by the users and
write the applications because the operators really need
should identify clearly the objects or concepts they
them. Many people end up writing applications, each with
represent. A “family” of icons that identify similar actions
a different sense of design and a different definition of
or concepts should utilize common visual elements to
user-friendliness. On the other side, there are the control
separate them from other groups of icons. Color rules for
system operators, who will use the applications daily and
images are not as strict as for the rest of the application
thus ask for consistent, intuitive, easy-to-use, appealing
controls, but you should nevertheless use a limited set of
and, if possible, customizable look and feel of the
colors and avoid large areas of saturated colors, such as
applications.
pure red or pure blue.
At Cosylab, we defined a set of guidelines for writing
Animation can provide effective emphasis if used
user interfaces and encouraged our developers to use
correctly, but a GUI designer should give careful thought
these guidelines. We appointed a single person to be
whether an animation is appropriate. Limit animations
responsible for the GUI look and feel, inspecting the work
only to situations where they provide meaningful
done by other programmers, suggesting improvements
feedback to the user, do not interfere with the user’s work
and helping them write good user interfaces. We also
and do not detract the user from more important screen
decided to design a set of useful GUI widgets, stored in a
elements.
________________________________________________________

*[email protected]
2.3 Fonts and Text most users are already familiar with. These primary
menus positioned in the menu bar should be equipped
Text is an important design element and appears
with keyboard mnemonics (ALT + letter) for faster
throughout the application in labels, buttons and other
access. Item names should be capitalized and one word in
components. To ensure consistency, ease of use, and
length to be easily recognized. Secondary menus’ names
visual appeal, only one simple font style in no more than
can be longer. Menu options containing submenus should
three different sizes should be used for the whole
indicate this with an arrow displayed next to the name and
application. For most applications, only one font color
menu actions invoking a dialog should indicate this by
(preferably black) should be sufficient. Other colors
displaying three dots (“…”) next to their name. If a
should be used to help the user identify certain values or
toolbar button exists invoking the same action as a menu
to notify the user that an unexpected situation appeared.
option, the icon of the toolbar button should be displayed
Language used in applications should be clear, concise
on the left of the menu option to indicate this. Finally, a
and consistent, with wording that is readable and
separator line should separate groups of similar actions in
grammatically correct. Use headline capitalization for
a menu.
most of the names, titles, labels and short text, sentence
Popup menus can be very useful for configuring and
capitalization for lengthy messages. Only one language
performing actions on individual components in an
should be used otherwise users might get confused.
application In principle all actions from popup menus
2.4 Borders and Layout should also be accessible through the main application
menu bar.
Borders are commonly used to visually separate
Toolbars should be placed at the edges of the
logically different parts of an application. Similar borders
application and should take up 20 to 30 pixels of screen
are also parts of components used in applications.
height. All toolbar actions should also be accessible
Application designer should use a single style of borders
through application menus while all buttons on a toolbar
throughout the application. The borders’ color should be
must be equipped with a descriptive tooltip text.
similar to the component background color, different
Tooltips are very useful since they educate and inform
enough for the user to notice the border, but moderate
users about the functionality of the application. When
enough not to distract him from important data. Borders
using tooltips, buttons can be stripped of all text and be
should be used as an orientation only, not to impress the
distinguished by icons only. New users read the tooltips
user with colors and shapes. One should use borders only
to learn the functionality of the corresponding buttons
to make an application clearer to the user.
while experienced users recognize buttons by their icons
GUI designers should give careful consideration to the
and can ignore the text.
layout of components in windows and dialog boxes. The
best designs are aesthetically pleasing and easy to
understand, enabling the user to move through an 3 BEHAVIOR
application and utilize its features effectively.
Components should be laid out in a logical order, with
3.1 Messages
more important components in the center, on top and to The user has to be informed about any event that
the left of the application, less important components at occurred inside an application without his direct
the bottom and to the right. The main application window initiation. Actions taking considerable time to complete
should only contain components that will most probably should indicate their completion status via an hourglass
be used by the operators during normal operation. cursor and a progress bar when appropriate and
Additional functionality and optional application features meaningful. The user also has to be notified upon their
should be available via application menus and displayed completion. Expected and frequently occurring messages
on demand. can be displayed in a status bar or preferably in a special
The layout should maintain its visual appeal and textual report area, while unexpected and important
functionality if the application window is resized. In most messages should be displayed in a special message box. If
of the graphical environments, there are many the operator attempts to perform an action that would
components that facilitate creation of resizable layouts, seriously affect the application or the control system, a
such as scroll panes, split panes, tabbed panes, layout warning window should appear allowing confirmation or
managers, utility windows, internal windows and other. rejection of the attempted action as to prevent accidental
With the use of such components, users have more misacting. Finally if the startup of an application takes
control over the appearance of the application and can more than a couple of seconds, a splash screen should
enlarge or expose individual areas that they are interested appear possibly displaying the current status of
in. application initialization. It is advisable that all messages
be saved in some log that the user can later inspect.
2.5 Menus, Toolbars and Tooltips
Menus have to be well organized so that the operators
3.2 Dialogs and Wizards
can navigate them intuitively. Thus it is best to implement Dialogs and wizards should be accessed through menu
standard menus like File, Edit, View, Help, etc, which options marked with three dots (e.g. “Options…”). The
first are to be used for configurations and more important,
less frequently used actions, while the second are used for 4 DESIGNING WIDGETS
complex tasks that can be split into smaller steps and
Individual graphical widgets are usually not stand-alone
presented to the user one step at a time.
end-user products but are designed to be used and reused
A typical dialog is of fixed size and contains a few text
in different contexts inside an application and even in
fields, check boxes and radio buttons together with a pair
different applications, thus great care has to be taken in
of control “OK” and “Cancel” buttons (“Apply” may be
their visual design to reflect their reusability and
included if appropriate) in that order. The control buttons
adjustability. Standard colors should be used in all
should be placed in the lower right corner of the dialog,
widgets so that they cohere well with the rest of the
while the design of the rest of the components above them
application. The designer of a widget should focus on
should follow the same guidelines as the rest of the
details, especially insets and borders, as they dictate how
application. The “OK” button should be the default
the widget will connect visually to other components in
command that can also be accessed through the “Enter”
its context.
key on the keyboard while pressing the “Esc” key should
Another important aspect of its visual design is the
be equivalent to the “Cancel” command.
widget’s adjustability to different sizes and different user
The layout of a wizard should be similar to that of a
(programmer) needs. If possible, different visual and
dialog: control buttons “Back”, “Next”, “Finish” and
functional modes should be implemented to be switched
“Cancel” should be placed in this order in the lower right
between in different contexts. A component used for
corner. The “Next” button should only become enabled
displaying numbers could have a simple mode showing
after all critical parameters have been validly set in a
only the number, or an extended mode which would also
panel, while the “Back” button should always be enabled
display the maximum an minimum values, units, average
to allow user to correct parameters set in previous panels.
etc. Still it is important for the widget to retain some of its
Pressing the “Finish” button should set all the parameters
common characteristics and that it is easily recognizable
on remaining panels to their default values and complete
in all of its modes
the wizard.
The designer should implement support for as many
Dialogs and Wizards should be modal, i.e. they should
ways of controlling the widget as possible. Keyboard
block access to other parts of the application. If there is a
shortcuts for switching focus inside the widget, standard
good reason for not doing so (when application should be
action keys, arrow keys for moving etc. should all be
responsive while the dialog is displayed) they should be
mapped. Mouse buttons and mouse wheel should be put
displayed on top of the application.
to some use if possible. Furthermore d ’n’ d and copy-
3.3 Mouse and Keyboard Actions paste support for values and texts should be implemented.
Tool tip text should be applied to all buttons and other
Mouse actions should be used for switching focus
active components of the widget.
between parts of application, selecting text or other
elements, operating graphical controls like buttons, check
boxes, etc… and drag and drop (d’n’d) operations. In 5 CUSTOMIZATION
general, keyboard equivalents should be implemented for Use customization when you consider that the
all mouse operations inside an application. application’s functionality might be increased if the users
The following keyboard shortcuts should be specify their own appearance and behavior. Users should
implemented in all applications: The TAB key should be not be bothered with every detail of the application’s look
used for switching between components (Shift + TAB in and feel, such as picking appropriate colors, moving the
textual components where TAB has a different meaning) components, specifying shortcuts etc. - this is the work of
and ALT + letter for activating individual components the application designer. They should only choose
with mnemonics. Inside a component or menu the between a small number of relevant options, all of which
arrowed keys should be used for cursor, focus or selection should produce a consistent, appealing and functional
movement. Keyboard shortcuts for copy (Ctrl + C), cut look and feel. The configuration should be persistent,
(Ctrl + X) and paste (Ctrl + V) operations should be allowing the users to save their settings and load them the
implemented where appropriate. The Space key should be next time they use the application.
used for activating buttons, check boxes and radio buttons
in focus and for selections while Ctrl + Space should be 6 REFERENCES
used for adding selection and Shift + Space for range
[1] http://www.cosylab.com/
selection. The Esc key should be used to dismiss a menu
[2] Sun Microsystems, Inc., “Java™ Look and Feel
or a dialog box without changes or to cancel a d’n’d
Design Guidelines, Second Edition”, Addison-Wesley,
operation in process. The Designer of the application
February 2001.
should make sure that no implemented shortcuts in any
[3] D. Springgay et al., “Eclipse User Interface
context inside the application interfere with any existing
Guidelines”, Object Technology International and
shortcuts in any operating system the application is
others, February 2002
designed to run in.