Inline Notifications
Inline notifications help application users by delivering timely, contextual information and feedback related to their actions.
Inline notifications are messages that appear near the content to which they are related. They may be task or system generated, communicating information such as significant status updates, alerts to success or failure of an action, or call attention to a new feature in which a user may be interested.
When to use
Consider using an inline notification when presenting:
- Feedback – Providing feedback to users about their actions. For example, if a user submits a form requiring server-side validation, an inline notification should be used to display and summarize form-level errors.
- Significant status updates – Delivering significant status updates about a task. For example, if a user initiated an asynchronous process such as a device update, a notification might provide the status update upon. "Success - all devices have updated to the latest version."
- Promotions – Calling a user's attention to such as new features, tips, best practices, or other announcements. Use these sparingly.
When to consider something else
Inline notifications are quite flexible, however consider using the alternatives for the following scenarios:
Low severity information – If communicating low severity information which does not need to persist or require the user's attention, consider using a toast notification.
High attention information – Consider using global banner notification when communicating information which might result in loss of functionality or requires the user's attention and/or action. Examples might include a system outage, critical error, or expiring subscription or license. Global banner notifications are persistent and require user action to acknowledge or dismiss.
Immediate feedback – When providing immediate feedback to a user's action, a variety of tools are likely more appropriate.
- When a user is awaiting a response after clicking an action button, use the busy button which provides in-progress and success animations. If the response time exceeds expectations or the API call fails, then an inline notification is appropriate for providing status updates.
- When validating form input client-side, use field-level form validation when possible. If validation results in a form-level error, using an inline notification is appropriate.
Anatomy
An inline notification consists of:
Label | Region | Purpose | Required | Notes |
---|---|---|---|---|
1 | Icon or status indicator | Indicates the type of notification | Normal, Warning, Critical, and Unknown status indicators can be displayed. | |
2 | Title | Short, descriptive label identifying the notification | Titles should only be used for inline notifications presenting page level summaries. | |
3 | Message | Briefly describes the action, status, or additional context | ||
4 | Link | Used to direct users to additional detail or related content | ||
5 | Close button | Dismisses the notification | Critical notifications should not be dismissible. |
Placement
Inline notifications should be placed near the content to which they are related.
- If the notification is related to the entire page, it should be placed underneath the page header.
- If the notification is related to a specific element, section of content, or action, it should be placed above that element, section of content, or action.
Examples of inline notifications relating to a specific section of content:
- A notification indicating a new option or configuration is available would be appropriate to place at the top of the form.
Examples of inline notifications relating to an action element:
- A notification providing form-level validation should be placed above the submit button, between the last input and the submit button. See form validation example.
- An notification indicating a service has an available upgrade should be placed above the launch action for that service. See promotion example.
Format
- Titles and messages should be brief and clear.
- Messages should generally be no longer than two lines.
- Longer messages should wrap on narrower screens; they should not be truncated.
- Anchor links may be used to provide additional information about the notification. The links should immediately follow the message and should be limited to no more than two links.
Content guidelines
Notifications reassure users that they are moving towards their goal. They should be relevant, timely, and informative providing assurance that their intended actions have been completed successfully. Or, if there is an issue, they should provide clear direction on how to resolve the issue.
- Relevant – Notifications should be relevant to the user's current task.
- Timely – Deliver notifications in a timely manner and ensure they are kept up to date with current status.
- Informative – Messages shoud provide clear context and direction on how to resolve any issues. Follow the voice and tone guidelines for writing crisp and effective content.
Behavior
- Never sticky and should scroll when there is other content.
- The width and resizing behavior of an inline notification should scale alongside related content. For example, when placed below the PageHeader, the inline notification should have the same width and responsive behavior as the PageHeader.
- Inline Notifications are not clickable. Instead use anchors to direct users to take further action or to view the issue in full detail.
- Do not place buttons within an inline notification.
Use cases
Status updates
Inline notifications may be used to display normal, warning, and critical information.
For example, a normal status might communicate a process is progressing without interruption, a warning status might communicate a resource is approaching a limit or threshold, and a critical status might communicate an action has failed.
Cost by Service
Last 30 DaysYou've reached 85% of your spending goal.Adjust budget View saving ideas
Additional detail
An inline notification may be used to provide additional detail or context, offering a helpful hint or tip, or providing a link to additional information.
In this example, the page-level banner informs the user that an action is required on a set of resources and provides a way for the user to navigate to the affected section for more details. Click "View details" to see the section-level notification with additional information.
Machine Learning Ops
Support for CentOS v7.5 ended on 04/04/021. One or more applications require updates to a later version.View details
Promotion
It is desirable for users to stay up-to-date on the latest version. Place the notification above the card action.
In this case, placing the upgrade notification above the launch action informs the user of an action they might want to take prior to launching the application.
Services
Determined AI
World-class capabilities to support training at enterprise-scale.
HPE Networking Services
World-class capabilities to support training at enterprise-scale.
Dataiku DSS
Bring data analysts, engineers, and scientists together.
Flywheel
Bring data analysts, engineers, and scientists together.
H20 Driverless AI
Bring data analysts, engineers, and scientists together.
Apache Spark
Open source analytics engine for big data processing, with built-in modules for streaming, SQL, machine learning and graph processing.
Dremio
Open source analytics engine for big data processing, with built-in modules for streaming, SQL, machine learning and graph processing.
Joulica
Open source analytics engine for big data processing, with built-in modules for streaming, SQL, machine learning and graph processing.
Singlestore
Built for data-intensive applications, SingleStore enables low-latency analytics without any compromises.
StreamSets
StreamSets speeds data integration for data lakes and data warehouses for hybrid and multi-cloud environments.
Form validation
An inline form validation appears above the form's footer, providing a summary of any errors and steps to resolve them.
Create cluster
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.