An inline notification is a message object that presents timely information within content areas as close as possible to the thing that it’s about.
- Autocomplete (not built)
- Button Group (not built)
- Checkbox Group
- Date Picker (not built)
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon Button
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Pagination (not built)
- Progress Bar (not built)
- Progress Stepper
- Radio Group
- Rich Text Editor
- Search Field
- Split Button
- Tile Grid
- Toast Notification
- An inline notification is a message object that presents timely information within content areas as close as possible to the thing that it’s about.
E.g. Blank select options These won’t be shown. Add select option text.
E.g. No select options Without select options, this question won’t be shown. Add an option.
E.g. Meaning changed We prevent significant changes to the meaning of questions in a live survey. To make this change, contact support.
- Single-line: inline/adjacent heading and body
- Multi-line: stacked heading and body
- Inline Notifications are used for contextual information, including positive feedback or confirmation about an action, warnings about possible issues or show-stopping errors.
- They are used to provide context in close proximity to a piece of content.
- They must always follow this anatomy:
- CTA link
- Inline notifications can be system or user triggered.
- Dismissible or persistent:
- Use Persistent notifications when the information continues to be relevant after the message is shown, e.g. Defining the reporting size on an Insight report
- Use Dismissible notifications when the information has been acknowledged and the message is no longer relevant, e.g. helpfully updating formatting for user input data.
- What’s an autohide?
- TODO: add details
The key to a good inline notification is conciseness and clarity. Here are some language rules:
Keep the title short but descriptive. Describe exactly what has happened or what needs to happen.
- Data imported successfully
- Errors found in your employee data
- Critical error.
Explain the title further but keep it to one to two sentences maximum. Include links to supporting documentation or next actions. If the notification is dismissible, don’t include information that the user would need to perform crucial actions.
- Survey invitations have been scheduled. 10 participants will receive their survey invitations at 9:00AM EST on 10 March 2020.
- Errors found in your employee data. For your survey to run smoothly, you must fix these errors and re-import your data.
- Sent! They’ll get their invitations soon.
- Errors found in your employee data. Fix them to proceed.
Make sure you guide the user towards a next step if there are any to be taken. Include a link directly to the next step.
Make sure you adjust the tone of your writing to fit the specific mood of the notification:
- Positive notifications - Let the user know that the action they performed was successful. Give them a link to a next step, or an opportunity to view the successful result.
- Informative notifications - Give the user supplementary information to the content on the page.
- Cautionary notifications - Warn the user of any side effects of the action they’re about to perform.
- Negative notifications - Let the user know that an error has occurred, describe the error and how they can fix it. Remember to avoid jargon and tech speak.
All inline notifications copy should be in sentence case i.e. the first letter of the first word is capitalized and everything else is in lower case unless it’s a proper noun or feature name. Always err on the side of minimal punctuation, so leave out full stops and commas where possible.
- Use an Inline Notification when you are speaking directly to a piece of content and the notification can be positioned close to the content.
- Use an Inline Notification for highly contextual information.
- When a message applies at a system level or does not apply to a specific piece of content and it needs to alert all users, use Global Notifications.
- When you are notifying a user of an action they have taken, provide visual feedback with a Toast Notification.
- When an action is user triggered and you need to inform the user, use a Confirmation Modal with relevant Mood, e.g. Informative Confirmation Modal.
- Global Notification: A Global Notification is a message object used for system-level notifications that inform the user about system status such as logging in and background processes like data imports.
- Toast Notification: Toasts appear in the top–right (or top–left in right-to-left languages). It is used immediately after a specific event such as a user action that does not relate to an object on the page. For example, confirmation of deleted items.