[ Previous |
Motif and CDE 2.1 Style Guide
Designing Controls Within Windows
The following sections discuss:
- Aligning controls
- Sizing controls
- Grouping controls
- Placing and sizing push buttons
- Providing dialog and action choices
- Designing icons
- Using ellipses
- Creating new controls
When related controls are displayed next to one another
within a window, align them into rows and columns. The following principles
address aligning controls:
- Align controls horizontally with the baseline of the text or graphic.
- Align controls vertically with the most distinguishing features of the
control. For example, align radio buttons and check boxes such that the radio
button graphic or check box graphic is in alignment. To align text, use the
left edge of the text in each control if the text is left-justified.
- Right align the labels with the left edge of the text-entry fields in
cases where there are several text-entry fields. This makes it easier for the
user to see which label goes with which field.
For more information, see the Label and Text-Entry Field (Control)
The following principles address sizing controls:
- If the user can change the size of a window, size any controls that can be
scrolled so that more of the control's contents are visible. Examples of
controls that support scrolling are text-entry fields, list boxes, and
- Size other controls when the user would expect the size to change or when
it would be useful for accomplishing a particular task. For example, users
might expect sliders to be sized larger when a window is made larger because
it lets them set slider values more accurately. When sizing controls, remember
to keep the controls' sizes in proportion to text size.
- There should be a minimum size for each control if controls are sized in a
window. The minimum size should not be so small that it is useless to the
user. When the window is sized smaller than the minimum control size, the
control will be clipped. If clipping makes the application unusable, the
window can display a message stating that the user should increase the window
- When displaying graphics, bit maps, or icons, do not automatically resize
the image so that the aspect ratio is incorrect. This results in unpredictable
and often unreadable images.
Group and label controls within a window appropriately.
Examples of controls that belong in a group are:
- Related radio buttons
- Push buttons at the bottom of a window
- Check boxes that have a common purpose
When grouping controls, separate individual groups from one another in the
window. Some ways to separate the groups are to use:
- Blank window space
- Separator lines
- Group boxes
Placing and Sizing Push Buttons
The following principles address placing and sizing push buttons:
- Place push buttons that affect the entire window at the bottom of the
Align push buttons on the left side of the window when the window is much
wider than the area occupied by the push buttons. Place the push buttons so
that there is the same amount of space between each push button.
- Align push buttons on both sides of the window (with equal amounts of
space between each button) when the window is about the same size as the area
occupied by the push buttons.
In rare circumstances, placing all the buttons on one horizontal line
causes the window to be wider than necessary to display all the elements in
the window. In extreme cases, provide the user with two rows of buttons
instead of making the window wider than is necessary.
See the Push Button (Predefined) reference page for the correct ordering of
the push buttons from left to right.
- Place push buttons that affect a particular control or group of controls
within the window to the right of the control or group of controls. Align the
push buttons vertically. If there are too many buttons to fit beside the
affected controls, place the push buttons horizontally below the controls and
visually separate the controls and their associated push buttons from the
other controls in the window.
- Design all push buttons that are in a horizontal row to have the same
height and all push buttons that are in a vertical column to have the same
- Design push buttons to be consistent in size, whenever possible. Consider
the longest label necessary and make the buttons conform to that size. If it
is not possible to make all of the push buttons the same size, size the push
buttons relative to the length of their labels.
For more information, see the Push Button (Control) and Push Button
(Predefined) reference pages.
Providing Dialog and Action Choices
Provide a dialog choice when the user must supply additional
parameters through a secondary window before a process begins. Provide an
action choice when the user's action begins immediately after the user
activates the choice.
For example, when a user chooses the Print choice, it can be either a
dialog choice or an action choice. A dialog choice asks for additional
information such as page orientation, number of copies, and printer name. An
action choice prints the document immediately, possibly displaying a secondary
window to show an in-progress message.
Icons are a prominent visual aspect of the interface and are
what many people think of when they think of a graphical user interface. When
you design your icon set, be aware that users need to work within a larger set
-- the operating environment. Do not consider icons as
"advertisements" for the interface. Design icons as functional,
integrated parts of the visual hierarchy of the interface.
The following principles address icon design:
- Design your icons to work together as a family by using the same style for
each icon and by conveying a consistent language of images throughout your
A family of icons builds on knowledge the user acquires when encountering
different icons in the set.
- Do not design any icon that stands out from the rest of the icons, unless
it is necessary for user understanding.
An icon stands out if its use of color, style, or shape are different than
those around it. This would be considered an anomaly and should be employed
only where there is a genuine necessity. Color and font resources should never
be hard coded.
- Limit the number of details shown in the icon.
For most interfaces, there are between 70 and 90 pixels in which to display
icon information. Because of the limited space, the amount of information that
you can convey is also limited. Any extraneous details detract from your
- Design icons to be clear and readily understood.
Strive to create icons that are easily recognized and memorable. One way to
achieve this is to base your designs on metaphors from the user's
environment and to create icons that are consistent with those metaphors.
- Simplify and refine the icon design to reduce clutter or visual noise in
the overall interface image.
Visual noise is annoying and distracts the user from important visual
information. If visual noise occurs in the interface, the user must sift
through the noise to find information. It is difficult to use an icon to
convey a complex message because icons are small and are often created from
simple shapes such as squares or rectangles. To convey your basic message
clearly, limit details and simplify information when possible.
- Incorporate multicultural considerations in your icon design. For more
information about international guidelines, see
"International Design Guidelines".
The following principles address when to use an ellipsis (...) after a
- A choice should have an ellipsis when the choice will not be carried out
immediately and a secondary window will be presented to the user to further
clarify the choice before the process begins.
- A choice should not have an ellipsis when the choice is carried out
immediately after the user activates it, regardless of whether or not a
secondary window is opened. Never display an ellipsis on a choice when
activating it will not display a secondary window.
Creating New Controls
When creating new controls, remember that some controls,
such as audio or video controls, have real-world metaphors that you can
follow. As with other static elements, you need to be aware of the user's
idea of how these elements should be presented.
[ Previous |