Confirmations

An example of the confirmations pattern.An example of the confirmations pattern.

Confirmations are a reassurance element. They confirm the success of a user-initiated action. It is information only.
See also: Confirmations vs similar patterns

Also known as: Success

Example

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

Design Specs

Desktop/Tablet/Mobile

  1. Confirmation messages have a background color of #eaf1e7 and a stroke color of #347814. Stroke styling is a solid 1px stroke with a 3px border radius.
  2. Confirmation text is Open Sans Semi Bold in #347814. Text should be left justified. There is 15px of padding around the text within the box.
    • For Desktop, the font size is 15px.
    • For Mobile, the font size is 14px.
  3. The close ‘x’ (recommended, but optional) must be top aligned with the text in the alert box. There should be a 44px touch area around the close ‘x’ affordance.

Set focus behavior:
  • The Notification Container is inserted, and the page expands to accommodate. If text length necessitates wrapping, the page expands to accommodate.
  • Placement: near CTA or top of form
  • Set focus behavior TBD

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

Desktop/Tablet

When Do I Use This?

Use when a completion or submission results in a refresh of a page or module as a supplemental or primary confirmation of completion of a user-initiated action

It may not be necessary to use when the completion or submission results in a page turn.

Example use cases include: confirming success of edits (e.g. profile edits), settings have been saved, item added to cart, coupon loaded to my account.

See also: Confirmations vs similar patterns

Usage Guidelines

1. Primary Confirmation

When the completion happens off-screen

This message container is the primary confirmation of completion for the preceding task

A checkmark only variant. After a removal task in a modal window, the confirmation is shown on the original page, using a checkmark only.

A checkmark only variant. After a removal task in a modal window, the confirmation is shown on the original page, using a checkmark only.

2. Supplemental confirmation

When the addition of a supplemental notification would help ensure noticeability of a subtle change.

After completing the preceding task, the user is returned to the original page. The change to "Arriving on..." date may be too subtle of a change to notice. Additionally, the user may not recall the previous date selection; this treatment removes the burden of recall and provides reassurance of completion.

3. Confirmation Pages

When an interaction results in a confirmation page, there is no need for an additional message. A checkmark (optional) may be used in this case.

A confirmation page inside a modal or other layer/window (example: chat) with a checkmark.

A confirmation page inside a modal or other layer/window with only body copy.

The container is unnecessary to call attention on a page whose content is primarily confirmational

4. Close X is recommended, but optional

Use as needed. If the user will do a page turn right after, there is no need for a close X.

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 the changes, 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

The use of a Notification Container and its styling helps visibility in context of a page.
Our styling roughly follows Bootstrap styling and aligns to similar items in our UI design system. All color contrast ratios are ADA compliant.

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.