Design Specifications and Guidelines - Visual Design

Design of Visual Elements

All visual elements influence each other. Effective visual design depends on context. In a graphical user interface, a graphic element and its function are completely interrelated. A graphical interface must function intuitively — it should look the way it works and work the way it looks. These are the cornerstones to building a strong user experience with your application.

Basic Border Styles

Windows provides a unified visual design for building visual components based on the border styles shown in Figure 14.2.

Figure 14.2 Basic border styles

The following table describes each of these border styles.

Border Styles
Border style	Description
Raised outer border	Uses a single line in the button face color for its top and left edges, and the window frame color for its bottom and right edges.
Raised inner border	Uses a single line in the button highlight color for its top and left edges, and the button shadow color for its bottom and right edges.
Sunken outer border	Uses a single line in the button shadow color for its top and left borders, and the button highlight color for its bottom and right edges.
Sunken inner border	Uses a single line in the window frame color for its top and left edges, and the button face color for its bottom and right edges.

If you use standard windows and Windows controls, these border styles are supplied for your application automatically. If you create your own controls, your application should map the colors of those controls to the appropriate system colors so that the controls fit in the overall design of the interface when the user changes the basic system colors.

More Information

The DrawEdge function automatically provides these border styles using the correct color settings.

Avoid using fixed widths to define the borders of your own controls. Instead, use the system's GetSystemMetrics function to determine the appropriate thickness of a line. These values are defined appropriately for the resolution of the display.

Window Border Style

The borders of primary and secondary windows, except for pop-up windows, use the window border style. Menus, scroll arrows, and other elements where the background color may vary also use this border style. The border style is composed of the raised outer and raised inner basic border styles, as shown in Figure 14.3.

Figure 14.3 Window border style

Button Border Style

Command buttons use the button border style. The button border style uses a variation of the basic border styles, where the colors of the top and left outer and inner borders are swapped when combining the borders, as shown in Figure 14.4.

Figure 14.4 Button border styles

The normal button appearance combines the raised outer and raised inner button borders. When the user presses the button, the sunken outer and sunken inner button border styles are used, as shown in Figure 14.5.

Figure 14.5 Button-up and button-down border styles

Toolbar button borders differ slightly from command button borders. Toolbar buttons show no visible border unless the user moves the pointer over them. In the button-up state, a toolbar button uses the raised inner border, but uses button highlights for the top and left edges and the button shadow color for the bottom and right edges. In the button-down state, a toolbar button uses the button shadow color for the top and left edges and the button highlight color for the bottom right edges. Unlike command button borders, toolbar buttons do not have a secondary edge border.

Field Border Style

Text boxes, check boxes, drop-down combo boxes, drop-down list boxes, spin boxes, and list boxes use the field border style, as shown in Figure 14.6. You can also use the style to define the work area within a window. It uses the sunken outer and sunken inner basic border styles.

Figure 14.6 Field border style

For most controls, the interior of the field uses the button highlight color. For text fields, such as text boxes and combo boxes, the interior uses the button face color when the field is read-only or disabled.

Status Field Border Style

Status fields use the status field border style, as shown in Figure 14.7. This style uses only the sunken outer basic border style.

Figure 14.7 Status field border style

You use the status field style in status bars and any other read-only fields where the content of the file can change dynamically.

Grouping Border Style

Group boxes and menu separators use the grouping border style, as shown in Figure 14.8. The style uses the sunken outer and raised inner basic border styles.

Figure 14.8 Group border style

Visual States for Controls

The visual design of controls includes the various states supported by the control. If you use standard Windows controls, Windows automatically provides specific appearances for these states. If you design your own controls, use the information in the previous section for the appropriate border style. Use the information in the following sections to make your controls consistent with standard Windows controls.

Pressed Appearance

When the user presses a control with the primary mouse button, the control provides visual feedback on the downward stroke of the button (for the keyboard, on the downward stroke of the key).

More Information

For more information about standard control behavior and appearance, see Chapter 8, "Menus, Controls, and Toolbars," and the Microsoft Platform SDK on the MSDN Online Web site.

For standard Windows check boxes and option buttons, the background of the button field is drawn using the button face color, as shown in Figure 14.9.

Figure 14.9 Pressed appearance for check boxes and option buttons

For command buttons, the button-down border style is used and the button label moves down and to the right by one pixel, as shown in Figure 14.10.

Figure 14.10 Pressed appearance for a command button

The pressed appearance for a toolbar button is similar, but it is slightly different because of the differences in its border design, as shown in Figure 14.11.

Figure 14.11 Pressed appearance for toolbar buttons

Option-Set Appearance

To indicate when a button's associated value or state applies or is currently set, the controls provide an option-set appearance. The option-set appearance is set for the up transition, or release, of the primary mouse button and the downward stroke of a key. It is visually distinct from the pressed appearance.

Standard check boxes and option buttons provide visual indicators that the option corresponding to that control is set. A check box uses a check mark, and an option button uses a dot that appears inside the button, as shown in Figure 14.12.

Figure 14.12 Option-set appearance for check boxes and option buttons

For toolbar buttons that represent properties or other state information, the button face reflects when the option is set. The button uses the button-down border style, but a checkerboard pattern (dither) consisting of the button face color and button highlight color is displayed in the background, as shown in Figure 14.13.

Figure 14.13 Option-set appearance for a toolbar button

For configurations that support 256 or more colors, if the button highlight color setting is not white, then the button background is a halftone between the button highlight color and the button face color. The image on the button does not otherwise change from the pressed appearance.

Mixed-Value Appearance

When a control represents a property or other setting that reflects a set of objects where the values are different, the control is displayed with a mixed-value appearance (also referred to as an indeterminate appearance), as shown in Figure 14.14.

Figure 14.14 Mixed-value appearance for a check box

For most standard controls, leave the field with no indication of a current set value if it represents a mixed value. For example, for a drop-down list, the field is blank.

Standard check boxes support a special appearance for the mixed-value state. The check mark, in the button shadow color, is displayed against a checkerboard background that uses the button highlight color and button face color. For configurations that support 256 or more colors, if the button highlight color setting is not white, then the interior of the control is drawn in a halftone between the button highlight color and the button face color.

More Information

The system defines the mixed-value states for check boxes as constants BS_3STATE and BS_AUTO3STATE when using the CreateWindow and CreateWindowEx functions. 

For buttons like those used on toolbars, the checkerboard pattern, or halftone composed of the button highlight color and the button face color, is drawn on the background of the button face, as shown in Figure 14.15. The image is converted to monochrome and drawn in the button shadow color.

Figure 14.15 Mixed-value appearance for buttons

For check box and command button controls displaying a mixed-value appearance, the property value or state is set when the user clicks the button. Clicking a second time clears the value. As an option, you can support a third click to return the button to the mixed-value state.

Unavailable Appearance

When a control is unavailable, or disabled, its normal functionality is no longer available to the user (although it can still support access to contextual Help) because it does not apply or is inappropriate under the current circumstances. To reflect this state, the label of the control is rendered with a special unavailable appearance, as shown in Figure 14.16.

Figure 14.16 Unavailable appearance for check boxes and option buttons

For graphical or text buttons, create the engraved effect by converting the label to monochrome and draw it in the button highlight color. Then overlay it, at a small offset, with the label drawn in the button shadow color, as shown in Figure 14.17.

Figure 14.17 Unavailable appearance for buttons

If a check box or option button is set but the control is unavailable, then the control's label is displayed with an unavailable appearance, and its mark appears in the button shadow color, as shown in Figure 14.18.

Figure 14.18 Unavailable appearance for check boxes and option buttons (when set)

If a graphical button needs to reflect both the set and unavailable appearance (as shown in Figure 14.19), omit the background checkerboard pattern and combine the option-set and the unavailable appearance for the button's label.

Figure 14.19 Unavailable and option-set appearance for buttons

Input Focus Appearance

You should provide a visual indication so the user knows where the input focus is. For text boxes, the system provides a blinking cursor, or insertion point. For other controls a dotted outline is drawn around the control or the control's label, as shown in Figure 14.20.

Figure 14.20 Input focus in a control

The system provides the input focus appearance for standard controls. To use it with your own custom controls, specify a rectangle with at least one border width of space around the border of the control. If the input focus indicator would be intrusive, you can instead include it around the text label for the control. Display the input focus when the mouse button is pressed and the cursor is over a control; for the keyboard, display the input focus when a navigation or access key for the control is pressed.

More Information

The system provides support for drawing the dotted outline input focus indicator using the DrawFocusRect function.

Whenever you provide a visual indication of the focus location, you should make sure this information is exposed to other software, such as the Magnifier accessory provided with Windows. For details about how to accomplish this, see the Microsoft Accessibility Web site at https://www.microsoft.com/enable/.

Hot-Tracked Appearance

Controls such as toolbar buttons provide visual feedback when the user moves the pointer (hotspot) over the boundary of the control. The system automatically provides support for menus and toolbars.

The convention for toolbar images is to display a border (one border width in thickness) and to change the image of the button from a neutral or grayscale to a color representation. However, if the image is already in color, then only the border presentation appears. The various modes of hot-tracked toolbar buttons are shown in Figure 14.21.

Figure 14.21 Hot-tracked toolbar buttons

If the button represents an option that the user can set, the hot-tracked appearance does not use the border. Instead, the button background changes from the button set color to the normal button face color.

The menu bar uses the same single-pixel border hot-tracked appearance that is used for toolbar buttons. Items in drop-down menus and context-menus use the same hot-tracked appearance that is used for selection highlighting.

Flat Appearance

When you use controls such as check boxes and option buttons in a list box control, you should use the control's flat (as opposed to three-dimensional) appearance, as shown in Figure 14.22.

Figure 14.22 Displaying check boxes and option buttons using the flat appearance

Fundamentals of Designing User Interaction

Windows Interface Components

Design Specifications and Guidelines

Appendixes and References