 |
» |
|
|
|
The following sections discuss: Placing and sizing push buttons Providing dialog and action choices
Aligning 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)
reference pages. Sizing Controls | |
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 containers. 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 display
size. 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.
Grouping Controls | |
Group and label controls within a window appropriately. Examples
of controls that belong in a group are: 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: 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 window horizontally. 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 width. 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. Designing Icons | |
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 icons. 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 intended message. 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 Chapter 11 “International
Design Guidelines”
Using Ellipses | |
The following principles address when to use an ellipsis (...)
after a choice label. 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. |
Printable version
