Export (0) Print
Expand All
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Graphic Elements

Graphic elements show relationships, hierarchy, and emphasis visually. They include backgrounds, banners, glass, aggregators, separators, shadows, and handles.

Screen shot of Windows Explorer with shadow, etc.

An example with several types of graphic elements.

Graphic elements are usually not interactive. However, separators are interactive for resizable content and handles are graphics that show interactivity.

Note: Guidelines related to group boxes, animations, icons, and branding are presented in separate articles.

Is this the right user interface?

While graphic elements are a strong visual means of indicating relationships, overusing them adds visual clutter and reduces the space available on a surface. They should be used sparingly.

A design trend in Microsoft Windows is a simpler, cleaner appearance by eliminating unnecessary graphics and lines.

To decide whether a graphic element is necessary, consider these questions:

  • Is the design's presentation and communication just as clear and effective without the element? If so, remove it.
  • Can you effectively communicate the relationships using layout alone? If so, use layout instead. You can place related controls next to each other and put extra spacing between unrelated controls. You can also use indenting to show hierarchical relationships.

Screen shot of a four-icon layout

In this example, layout alone is used to show control relationships.

  • Is the communication effective without text? If not, use a group box, labeled separator, or other label.

Usage patterns

Graphic elements have several usage patterns:

Graphic illustrations

Use to communicate an idea visually.

Graphic illustrations are similar to icons except that they can be any size and usually aren't interactive.

Screen shot CPU Usage History graph

In this example, a graphic illustration is used to suggest the nature of a feature.

Backgrounds

Use to emphasize or de-emphasize different types of content.

Backgrounds can be used to emphasize important content.

Screen shot of virus message on red background

In this example, a background is used to emphasize an important task.

Backgrounds can also be used to de-emphasize secondary content.

Screen shot of Control Panel items

In this example, secondary tasks are de-emphasized by locating them in a task pane.

Banners

Used to indicate important status.

In contrast to backgrounds, banners emphasize primarily a single text string.

Screen shot of banner with settings information

In this example, a banner is used to indicate that the page's settings are controlled by Group Policy.

Glass

Use strategically to reduce the visual weight of a window.

Glass can reduce the weight of a surface by focusing on the content instead of the window itself.

Screen shot of bird in Windows Photo Gallery

In this example, glass focuses the user's attention on the content instead of the controls.

Aggregators

Use to create a visual relationship between strongly related controls.

Screen shot of Back and Forward navigation arrows

In this example, an aggregator background is used to emphasize the relationship between the Back and Forward buttons in Explorer.

Screen shot of Windows Photo Gallery controls

In this example, a boundary aggregator is used to emphasize the relationship among the controls, and make them feel like a single control instead of eight.

Separators

Use to separate weakly related or unrelated controls.

Separators can be either interactive or non-interactive. Interactive separators between resizable content are known as splitters.

Screen shot of splitter separator for Name button

In this example, an interactive separator is used for resizable content.

Screen shot of separator for browser information

In this example, the separator isn't interactive.

Shadows

Use to make content stand out visually against its background.

Screen shot of four photos with shadows

In this example, shadows make the artwork stand out against the background.

Handles

Use to indicate that an object can be moved or resized.

Handles are always interactive and their behavior is suggested by the mouse pointer on hover.

Screen shot of a window corner with resize pointer

Screen shot of selection box with resize pointer

In these examples, handles indicate that an object can be resized.

 

Guidelines

General

  • Don't convey essential information through graphic elements alone. Doing so presents accessibility issues for users with visual disabilities or impairments.

Graphic designs

  • Graphics are most effective when they reinforce a single simple idea. Complex graphics that require thought to interpret don't work well. Hieroglyphics are best left for cave drawings.

    Incorrect:

    Screen shot of warning using complex graphic

    In this example, a complex graphic from Windows XP ineffectively attempts to explain a complex trust decision.

  • Don't use arrows, chevrons, button frames, or other affordances associated with interactive controls. Doing so invites users to interact with your graphics.
  • Avoid swaths of pure red, yellow, and green in your designs. To avoid confusion, reserve these colors to communicate status. If you must use these colors for something other than status, use muted tones instead of pure colors.
  • Use culturally neutral designs. What may have a certain meaning in one country, region, or culture may not have the same meaning in another.
  • Avoid using people, faces, gender, or body parts, as well as religious, political, and national symbols. Such images may not easily translate or could be offensive.
  • When you must represent people or users, depict them generically; avoid realistic depictions.

Backgrounds and banners

  • To emphasize content, use dark text on a light background. Black text on a light gray or yellow background works well.

    Screen shot of blue link text on yellow background

    In this example, the link gets the user's attention because it is on a yellow background.

  • To de-emphasize content, use light text on a dark background. White text on a dark gray or blue background works well.

    Screen shot of white Help link on green background

    In this example, the dark background de-emphasizes the content.

  • If a gradient is used, make sure that the text color has good contrast across the entire gradient.
  • Always use a 16x16 pixel icon to draw attention to the banner. Banners are too easy to overlook otherwise. For more guidelines and examples, see Standard Icons.
  • Use backgrounds and banners with caution. While the intent of the background or banner may be to emphasize content, quite often the results are the opposite—a phenomenon known as "banner blindness."

Glass

  • Consider using glass strategically in small regions touching the window frame without text. Doing so can give a program a simpler, lighter, more cohesive look by making the region appear to be part of the frame.
  • Don't use glass in situations where a plain window background would be more attractive or easier to use.

Separators

  • Use vertical and horizontal lines for separators. Be sure to have sufficient space between the separators and the content being separated.
  • For separators between sizable content (splitters), display the resize pointer on hover.

Screen shot of splitter with resize pointer

Screen shot of splitter with resize pointer

In these examples, resize pointers are shown on hover.

Shadows

  • Use only to make your program's most significant content or objects being dragged stand out visually against its background. Consider shadows to be visual clutter in other circumstances.

High dpi support

  • Support 96 and 120 dots per inch (dpi) video modes. Detect the dpi mode at startup and handle dpi change events. Windows is optimized for 96 and 120 dpi, and uses 96 dpi by default.
  • Prefer to provide separate bitmaps rendered specifically for 96 and 120 dpi over scaling graphics. At least provide 96 and 120 dpi versions for the most important, visible bitmaps, and either center or scale the others. Such applications are considered "high-dpi aware" and provide a better overall visual experience than programs that are automatically scaled by Windows.
    • Developers: You can declare a program high-dpi aware (and prevent automatic scaling) setting the dpi aware flag in the program's manifest, or by calling the SetProcessDPIAware() API during program initialization. You can use macros to simplify selecting the right graphics. For Win32 bitmaps, you can use SS_CENTERIMAGE to center or SS_REALSIZECONTROL to scale.
  • Check your program in both 96 and 120 dpi for:
    • Graphics that are too small or too large.
    • Graphics being clipped, overlapped, or otherwise not fitting properly.
    • Graphics that are poorly stretched ("pixilated").
    • Text that is clipped or not fitting in graphic backgrounds.

Text

  • For accessibility and localization, don't use any text in graphics. Make exceptions only to represent branding and text as an abstract concept.

 

 

Community Additions

Show:
© 2014 Microsoft