Standard Icons

Design concepts

Guidelines

General

Icon size

Error icons

Warning icons

Information icons

Question mark icons

Standard icons are the error, warning, information, and question mark icons that are part of Windows®.

The standard error, warning, information, and question mark icons.

The standard icons have these meanings:

●Error icon. The user interface (UI) is presenting an error or problem that has occurred.

●Warning icon. The UI is presenting a condition that might cause a problem in the future.

●Information icon. The UI is presenting useful information.

●Question mark icon. The UI indicates a Help entry point.

The standard icons are notable because they are built into many Windows application programming interfaces (APIs), such as task dialogs, message boxes, balloons, and notifications. They are also commonly used on in-

place messages and status bars.

Note: Guidelines related to icons are presented in a separate article.

Design concepts

There are several factors in choosing the appropriate standard icon—which in part explains why they are so often used incorrectly. The most common mistakes are:

●Using a warning icon for minor errors. Warnings are not "softened" errors.

●Using a standard icon when it is better to use no icon at all. Not every message needs an icon.

●Alarming users by giving warnings for minor issues or presenting routine questions as warnings. Doing so makes programs appear prone to hazard, and detracts from truly significant issues.

The remainder of this section explains how to think about standard icons in order to avoid these common mistakes.

Message type vs. severity

Choose standard icons based the message type, not the severity of the underlying issue. The message types are:

●Error. An error or problem that has occurred.

●Warning. A condition that might cause a problem in the future.

●Information. Useful information.

Consequently, an error message might take an error icon but never a warning icon. Don't use warning icons as a way to "soften" minor errors. So despite their difference in severity, "Incorrect font size" is an error, whereas "Continuing with this operation will set your house on fire" is a warning.

Determining the appropriate message type

Some issues can be presented as an error, warning, or information, depending on the emphasis and phrasing. For example, suppose a Web page cannot load an unsigned ActiveX control based on the current Windows® Internet Explorer® configuration:

●Error. "This page cannot load an unsigned ActiveX control." (Phrased as an existing problem.)

●Warning. "This page might not behave as expected because Windows Internet Explorer isn't configured to load unsigned ActiveX controls." or "Allow this page to install an unsigned ActiveX Control? Doing so from untrusted sources may harm your computer." (Both phrased as conditions that may cause future problems.)

●Information. "You have configured Windows Internet Explorer to block unsigned ActiveX controls." (Phrased as a statement of fact.)

To determine the appropriate message type, focus on the most important aspect of the issue that users need to know or act upon. Typically, if an issue blocks the user from proceeding, it is presented as an error; if the user can proceed, it's a warning. Craft the main instruction or other corresponding text based on that focus, and then

choose an icon (standard or otherwise) that matches the text. The main instruction text and icons should always match.

Severity

While severity isn't a consideration when choosing among the error, warning, and information icons, severity is a factor in determining if a standard icon should be used at all.

Icons work best when used to communicate visually. (Note that for accessibility reasons, this visual communication must always be redundant with another form, such as text or sound.) Users should be able to tell at a glance the nature of the information and the consequences of their response, so we must differentiate critical errors and warnings from their ordinary counterparts. Critical errors and warnings have these characteristics:

● They involve potential loss of one or more of the following:A valuable asset, such as data loss or financial loss.

System access or integrity.

Privacy or control over confidential information.

User's time (a significant amount, such as 30 seconds or more).

●They have unexpected or unintended consequences.

●They require correct handling now, because mistakes can't be easily fixed and may even be irreversible.

To distinguish non-critical errors and warnings from critical ones, non-critical messages are usually displayed without an icon. Doing so draws attention to critical messages, makes critical and non-critical messages visually distinct, and is consistent with the Windows tone.

Not every message needs an icon. Icons are not a way to decorate messages.

The following is a good example of a critical warning because it meets the previously defined characteristics.

Make sure the meaning and the tone of each standard icon matches the meaning and the tone of its context. If they don't match, change or remove the icon.

Guidelines

Note: For the following guidelines, "in-place" means on any normal window surface, such as within the content area of a wizard, property sheet, or control panel item page.

General

● Choose standard icons based their message type, not the severity of the underlying issue:Error. An error or problem that has occurred.

Warning. A condition that might cause a problem in the future.Information. Useful information.

●If an issue straddles different message types, focus on the most important aspect that users need to act on.

●Icons must always match the main instruction or other corresponding text.

Correct:

Incorrect:

In the incorrect example, the standard warning icon doesn't match the main instruction (which gives an error).

Icon size

● Choose the standard icon size based on the context:

● Use error icons only when an error or a problem has occurred:

Notifications Use for critical errors only. (For action failures.)

Generally, error icons aren't needed for non-critical user input problems. However, icons are needed for in-place errors, because otherwise such contextual feedback would be too easy to overlook.

● For task dialogs, don't use error footnote icons. Error icons must be presented in the content area only.

Warning icons

● Use warning icons only when a condition might cause a problem in the future:

Context When to use

Dialog boxes Use for all warnings.

Notifications Use for all warnings. (For non-critical system events.)

●Don't use warning icons to "soften" non-critical errors. Errors aren't warnings—apply the error icon guidelines instead.

●For question dialogs, use warning icons only for questions with significant consequences. Don't use warning icons for routine questions.

Correct:

Incorrect:

In the incorrect example, a warning icon is incorrectly used for a routine question.

●For task dialogs, you can use a warning footnote icon to alert users of risky consequences. However, use a warning icon either in the content area or the footnote area, but not both.

In this example, a yellow security shield is used in a footnote.

Information icons

● Use information icons only when the context isn't obviously presenting information: