Notifications

Notifications are confusion avoidance elements that proactively communicate non-critical information related to the task at hand.
See also: Notifications vs similar patterns

Example

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

Design Specs

Desktop/Tablet

Mobile

  1. The notification/message container has a background color of #eaf6fd and a stroke color of #59a1c6. Stroke styling is a solid 1px stroke with a 3px border radius.
  2. Text within the message container is Open Sans Semi Bold. 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 in #005ccc and is underlined.
    • For Desktop, the font size is 15px.
    • For Mobile, the font size is 14px.
Not shown: 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 in desktop and mobile.
Functional requirements:
  • 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 use classes from Global Enterprise CSS where possible - see "Code and Downloads" section on this page.

Production Examples

The Notfications pattern consists of one element; a message container in support of other elements on the page.

Desktop/Tablet/Mobile

An example Notification on desktop that includes a link. View Code

An example Notification on mobile that includes an X to close. The X is optional.

More Production Examples

When Do I Use This?

Use when proactively communicating non-critical information related to the action a user is taking or task at hand. Notifications do not prompt the member to take action in the interface in order to proceed. Generally, these are FYIs about the current process or any post-completion processes. See also: Notifications vs similar patterns

Usage Guidelines

1. Create Expectations or Prevent Frustration

This notification creates expectations for the refund time frame and method, which may prevent frustration and reduce the need for customer service downstream. It may also increase completion of this task by proactively answering these questions.

2. Provide Proactive Answers

A notification is used to clarify that the installation step of checkout does not include date selection.

3. Highlight Price Change

A price change notification

4. Avoid Overuse

Consider whether body copy dynamically inserted based on the same conditions, or good design can suffice.

5. Place message at the right place in the flow

Find means to validate that its presence is effective. For example: do we know the message is actually preventing problems or customer confusion? Is the information better placed in an email confirmation?

6. Follow 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 Notfication and any actions that need taken.

7. Calls to action

Links are allowed. Don't include buttons. If a button is required attempt to solve using the other elements on the page body, or 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 Alerts
Specifics:

  • 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 of these messages. We are using blue for these notification messages because of the severity of their content. See Alerts/Notifications Pattern Optimization research that gives minor validation to the emotional aspect of this color choice.
  • The stroke around the container is a critical part of its visibility. At the time of publishing, we have added a stroke to the Notifications pattern, due to concerns with visibility revealed in user testing. See research below.

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. Note: Contradicts visibility concerns in the other studies. Perhaps an issue with test approach.

view full study

Checkout Redesign - Delivery & Billing Page September 2014

"Noticeability of the message within the “Please Note” section was weak. None of the shoppers noticed the note." See page 15

view full study

Payment Page - Radios v. Selectors January 2015

The relevant portion of this study asks "do people see the offers?". It used the same blue container around UI elements. "The offers on the Saved Sears Card were not noticed." See page 23. This study combines 2 studies, with the same finding on this point. Note: other factors are at play in this context.

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.