Notifications

Notifications provide important, contextual information that may or may not not require the user to take action.

Alerts & Errors

Page-level notifications should appear below the page title and above the content.

Section-level notifications should appear below the section header and above that section's content.

Alerts and errors are displayed with the following priority:

  1. Catastrophic error alerts (if any) are always displayed by themselves.
  2. If there are no catastrophic errors, then user error alerts are displayed first.
  3. Success alerts (if any) follow user errors.
  4. Informational alerts (if any) are displayed last.

Alerts and errors may include an optional title.

Minor modifications can be made to the paragraph styling for an alert or error, but its heading styling should not be changed. Use screenreader-only text because notifications should be readable without a style sheet.

Navigation should be precise to each identified error and without the necessity to navigate the entire form. Notifications may include an optional list of one or more anchor links if the alert is specific to features farther down the page.

In cases with limited space, an appropriate icon (success, informational or error) can be used to trigger a tooltip that houses the notification message.

Writing a Notification

Important: See the Content Style Guide for detailed information about writing notifications, alerts and error messages.

Alerts and errors do not include marketing or promotional content.

Alerts and errors do not use interstitial or modal transitions that leverage static content.

Sufficient details should be provided for the user to address any user error. Error message text should be associated with each feature in error so that all errors are understandable and potentially correctable.

Consider next steps. When the user is required to do something in response to notification, let them know what they need to do and make that task as easy as possible. Think about how much context to provide with your message.

Write the message in concise, human readable language; avoid jargon and computer code.

Be polite in error messages — don’t blame the user.

Notifications are an opportunity to educate users because users will read a message that helps them resolve an error even if they won’t read documentation.

Don’t overdo it. Too many notifications will either overwhelm or annoy the user and are likely to be ignored.

Understand the user’s context. Don’t include notifications that aren’t related to the user’s current goal.

Alerts

Alerts include success messages and important information that do not require action by the user.

Can be collapsed and reopened.

Errors

Errors notify users that something has gone wrong, giving their progress either a temporary or permanent “stop”.

Cannot be collapsed due to their importance.

Catastrophic errors appear by themselves, without the distraction of other error and alert types.

Error notifications are automatically removed, independent of other error messages, when each error state is resolved.

The meaning of an error notification should be conveyed through means other than color alone (i.e. an icon and explicit title).

Badges

Badges are the smallest type of notification and are typically used to:

  • Numeric badges highlight the amount of items needing attention, such as items in a cart, unread messages, or alerts that are awaiting action.
  • Label badges reinforce content and file types, such as help content, primary subject matter, secondary subject matter, and content related to purchases.

Any of the brand approved colors for containers may also be used for badges so long as the implementation follows usage and accessibility guidelines.

No badge is shown for a numeric badge if the badge count number is zero.

Badge counts in excess of 999 will display “999+” for numeric badges.

Announcements

Multiple Announcements

  • Avoid stacking multiple announcements unless its unavoidable.

Use an announcement for publicizing ...

  • Dell programs
  • Dell.com features
  • Dell.com tools

Don't use an announcement for ...

  • Merchandising a product, service or solution. Instead, use a banner or card.
  • System alerts, errors or similar information. Instead, use an alert or error (see below)

Variants

  • An announcement may have a colored bar or approved icon, but never both.
  • An announcement can include an optional title.
  • An announcement can include up to two links.

Do's and Don'ts

Types

Variants

Common Button Labels and Usage

Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.

Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information regarding call-to-action labels and usage.

Button Label:
Corresponding Action:
Add to Cart
Search
Cancel
Save
Edit
Delete
Continue
Next/Previous
Submit
Select
Sign In/Sign Out
View Details
Ok/Cancel
Learn More
Close
Takes users to Cart page, with item added
Used for search buttons
Takes users back to entry point for a task
Used to save an item
Navigates users to change an item
Deletes an item on the page, usually with a verification step
Used as progression
Used as forward and backward navigation (Next is primary, Previous is secondary)
Used to submit a task or info
Used for choosing items in a task flow
Authentication standard, for consistency do not use Log In/Log Out or Signin/Signout
Used instead of “Select” in cases of product details or within learn content
For use in modal verification steps when more specific CTAs will not fit due to space
Used to link users to more learning content or contextual help
Used within modal windows