Inline Message
Inline messages provide contextual feedback directly within the interface. They are used to inform users about the status of their actions, such as errors, warnings, success, informational messages.
Overview
Inline messages offer immediate feedback on actions, guiding users through the interaction process seamlessly. It helps users understand the status of their actions and make necessary adjustments instantly.
When to use
When an action triggers a change in status (e.g., saving data, warnings about missing fields), inline messages give users instant feedback without navigating away.
Use when the notification needs to be visible but not block or disrupt the current user action. They remain part of the content flow.
Inline messages are ideal within forms or workflows to show validation errors or success messages without removing the user from their task.
Use inline messages to immediately inform users about the result of their actions, such as form submissions, password changes, or uploads.
When not to use
Don’t use if the message doesn’t offer actionable feedback. Inline messages should provide clear guidance or status updates.
Don’t use inline messages for critical alerts that require immediate attention. Instead, use a modal or other more prominent alert mechanism.
Avoid inline messages for system-wide failures or major disruptions, which require more prominent notifications like banners or dialogs.
Avoid inline messages for persistent notifications that don’t disappear or change, as they may clutter the interface and overwhelm users.
Don’t use inline messages if the notification isn’t directly related to the user’s current action or context, as this can confuse the user.
States
Anatomy
Icon (optional): A small symbol that communicates the urgency or type of message to the user.
Text: Descriptive text that explains the status or outcome of the user's action in clear, actionable language.
Size
Default
12
14
Accessibility
Clear and Descriptive Text: Ensure the text in inline messages is concise, clear, and easy to understand, especially for users relying on assistive technologies like screen readers.
Screen Reader Announcements: Inline messages should be announced by screen readers automatically, especially when they convey critical information like errors or success states.
Dismissal and Duration: Ensure error or warning messages persist until the user resolves the issue, but success and informational messages can auto-dismiss after a brief duration.
Example
Error in a Form Field: When a user submits a form with missing or incorrect information, an inline error message appears next to the relevant field explaining the issue.
Success Notification After Form Submission: After successfully submitting a form, a success message appears confirming the action, such as “Your changes have been saved.”
Warning Message for Unsaved Changes: A warning message appears when a user navigates away from a page with unsaved changes, informing them to save or discard changes.
Information About Incomplete Profile: An inline informational message might suggest that users complete their profile for a better experience, placed at the top of the profile page.
Last updated