Alerts

Alerts are an error or frustration avoidance element. They prompt the member to take action in order to avoid a possible mistake.
See also: Alerts vs similar patterns

Also known as: Warnings

Example

See the Pen Alert Message by SHC-FED (@SHC-FED) on CodePen.0

Design Specs

  • Sears
  • Kmart

Desktop/Tablet


Mobile

  1. The notification/message container has a background color of #fff9e6 and a stroke color of #fec70b. Stroke styling is a solid 1px stroke with a 3px border radius.
  2. Text within the message container is Open Sans Semi Bold with a 20px line height. Text color is #001733. Text should be left justified. There is 14px of padding around the text within the box.
    • For Desktop, the font size is 15px.
    • For Mobile, the font size is 14px.
  3. Link text (optional) within the alert box is Open Sans Regular with a 20px line height and #005ccc and is underlined.
    • For Desktop, the font size is 15px.
    • For Mobile, the font size is 14px.

Not shown: An X to close is optional. In instances where a close ‘x’ is used, the close ‘x’ must be top aligned with the text in the alert box. There should be a 44px touch area around the close ‘x’ affordance for both mobile and desktop.

Functional Specifications

  • The message container is inserted and the page expands to accommodate. If text length necessitates wrapping, the page expands to accommodate.
  • Placement: proximal to the content or module being addressed, or at top of page

Note: Design specs are for reference only. Developers should implement patterns using the Enterprise Framework whenever possible - see the Example section on this page.

Desktop/Tablet


Mobile

  1. The notification/message container has a background color of #fff9e6 and a stroke color of #fec70b. Stroke styling is a solid 1px stroke with a 3px border radius.
  2. Text within the message container is Helvetica Bold with a 20px line height. Text color is #333333. Text should be left justified. There is 14px of padding around the text within the box.
    • For Desktop, the font size is 15px.
    • For Mobile, the font size is 14px.
  3. Link text (optional) within the alert box is Helvetica Regular with a 20px line height and #a61111 and is underlined.
    • For Desktop, the font size is 15px.
    • For Mobile, the font size is 14px.

Not shown: An X to close is optional. In instances where a close ‘x’ is used, the close ‘x’ must be top aligned with the text in the alert box. There should be a 44px touch area around the close ‘x’ affordance for both mobile and desktop.

Functional Specifications

  • The message container is inserted and the page expands to accommodate. If text length necessitates wrapping, the page expands to accommodate.
  • Placement: proximal to the content or module being addressed, or at top of page

Note: Design specs are for reference only. Developers should implement patterns using the Enterprise Framework whenever possible - see the Example section on this page.

Production Examples

  • Sears
  • Kmart

Mobile

Desktop/Tablet/Mobile

An example of the alert box for zip code on Desktop in the bundles purchase experience.

An example of the alert box on Desktop in Order Center.

Mobile

Desktop/Tablet/Mobile

An example of the alert box for zip code on Desktop in the bundles purchase experience.

When Do I Use This?

Use when proactively communicating critical information related to the action a user is taking or task at hand. Such as:

  • Error prevention - guide a user to take action before continuing and triggering an error.
  • Condition Explanation - explain why parts of the interface are disabled/limited.
Avoid overuse. Consider whether body copy dynamically inserted or good design can suffice.
See also: Alerts vs similar patterns

Usage Guidelines

Content best practices:
  • Optimize for scannability. Use brief, meaningful text. Blocks of text are frequently not read by users.
  • Make sure to clearly identify the topic being addressed by the alert and any actions that need taken.

1. Error Prevention

An alert being used to inform a customer they have reached the maximum. Doing so avoids the frustration of attempting to add an 11th card, only to receive an error.

Error styling (red) should only be used after an action, not pre-emptively. See Alerts, errors, confirmations

2. Condition Explanation

During registration, an alert is used to explain why the password field is disabled. This is preferred to allowing form completion, followed by an error.

During the layaway payment process, an alert is used to explain why some of the normally available options are disabled. This is critical information to the task at hand.

Do not use for Promotional messaging.

3. Using Links and other Form Elements

Links are optional, but allowed

Form elements are not allowed. If form elements are needed, use a modal.

ADA Compliance

Many users of assistive technology including users of screen readers and screen magnifiers may not be aware of content updates on the screen. When users are unaware of updates, users may miss the updated content or the features that it contains. Source: Web Accessibility Best Practice 969

The alert role is used to communicate an important and usually time-sensitive message to the user. When this role is added to an element, the browser will send out an accessible alert event to assistive technology products which can then notify the user about it. The alert role is most useful for information that requires the user's immediate attention, for example:

  • An invalid value was entered into a form field
  • The user's login session is about to expire
  • The connection to the server was lost, local changes will not be saved
Because of its intrusive nature, the alert role must be used sparingly and only in situations where the user's immediate attention is required. Dynamic changes that are less urgent should a less aggressive method. Mozilla Developer Guidelines

Alert messages should clearly describe the notifications that are present and, optimally, include cues or instructions for resolving or dismissing them.
Useful links:

Rationale

This solution and guidelines were heavily researched including an SHC audit, which included discussions and user testing to help define its relationship with notifications
Specifics:

  • The color yellow is the industry convention, and is commonly associated with warnings in the physical world
  • The use of a Message Container and its styling helps visibility in context of a page. Our styling roughly follows Bootstrap styling and aligns to similar items our UI design system. All color contrast ratios are ADA compliant.
  • UXR testing and competitive review indicate yellow is the most visible color variant. The stroke around the container is a critical part of its visibility

Research

Alerts/Notifications Pattern Optimization

Yellow container styling produced slightly higher success (noticeability) than blue, and dramatically more than body copy (text on white); however, context matters. User's emotional response differences between yellow and blue styling may be minor, or vary by context.

view full study

2013 Holiday Promotions Engagement (Eyetracking)

While this test was about promotions, there are some best practices that can be extracted: "It is important that the message...be conveyed in a manner that can be quickly understood by the user (i.e. few words, meaningful imagery)." Page 30 "The smartphone executions of the Signature Offer were quite successful in turning exposure into attention. The mobile Sears site presented the offer in highly visible locations, such that it captured the eye despite limited screen time." Page 30 (visual on page 4, 31).
In the smartphone study, alerts styling conventions were used at top of page; which validates the effectiveness of this element at drawing attention. Page 10 comment: "...used a system text design later in the flow, proving to be highly effective"

view full study

Post a New Comment

Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

For general questions or assistance, email the Patterns Team directly.