Contextual messaging refers to several components and techniques designed to deliver information at key moments throughout a user's journey.
In seeking simplicity, product designers rely on techniques like progressive disclosure to provide users with the power, functionality, and information they need while keeping the experience simple and easy to understand.
With a wide range of components available for providing information to users, this guide aims to make choosing one for your messaging simple.
Alerts are components that signal information, warnings, or danger to provide confirmation or avoid potential problems.
Choose when your messaging requires event-driven feedback.
Use when the messaging requires persistent, non-dismissible content near the described object.
Overlays are components that overlap page-level content with supplemental information. The way overlays launch and obscure page content differ from component to component. We’ll help clear up which to use when.
Choose a for small and medium amounts of content. Users need to hover an element to reveal the messaging.
A simple 1-2 sentence definition, instruction, explanation, value, or additional context.
An in-depth definition, instruction, explanation, additional context, or links.
Inline tooltip error
An error message and instructions to remedy, if applicable.
We recommend a for large quantities of information in cases where covering page content is not a concern. Users click an action to launch the modal.
A Modal is also an ideal candidate for interrupting a user’s workflow by providing messaging, as a moment of friction, before a potentially destructive decision.
A can be used as an alternative to a when access to page-level content is important. Users click an action to toggle the drawer.
Loading can be one of the most important moments to keep users informed throughout their journey. When a user understands the system’s status they feel in control of the outcome. A predictable interaction promotes open, authentic communication and builds trust between the user and application.
Button with feedback
A reflects the status of an action during a loading event with real-time feedback and messaging.