[ Previous | Next | Contents | Glossary | Home | Search ]
Motif and CDE 2.1 Style Guide

Designing Controls Within Windows

The following sections discuss:

  1. Aligning controls

  2. Sizing controls

  3. Grouping controls

  4. Placing and sizing push buttons

  5. Providing dialog and action choices

  6. Designing icons

  7. Using ellipses

  8. Creating new controls

    9. 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:

    1. Align controls horizontally with the baseline of the text or graphic.

    2. 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.

    3. 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.

      4. Sizing Controls

      The following principles address sizing controls:

      1. 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.

      2. 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.

      3. 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.

      4. 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.

        5. Grouping Controls

        Group and label controls within a window appropriately. Examples of controls that belong in a group are:

        1. Related radio buttons

        2. Push buttons at the bottom of a window

        3. 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:

          1. Blank window space

          2. Separator lines

          3. Group boxes

            4. Placing and Sizing Push Buttons

            The following principles address placing and sizing push buttons:

            1. 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.

            2. 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.

            3. 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.

            4. 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.

            5. 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.

              6. 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:

              1. 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.

              2. 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.

              3. 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.

              4. 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.

              5. 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.

              6. Incorporate multicultural considerations in your icon design. For more information about international guidelines, see "International Design Guidelines".

                7. Using Ellipses

                The following principles address when to use an ellipsis (...) after a choice label.

                1. 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.

                2. 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.

                  3. 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 | Next | Contents | Glossary | Home | Search ]