Feedback and status

Feedback and status let users know what’s happening, understand the results of actions, discover what they can do next, and avoid mistakes. Both provide information to users that may (or may not) require action and are used across a range of components that can be broadly categorized as alerts or status updates. This guidance outlines the differences between feedback and status, and the components used to communicate both. It covers everything from how to decide on the right component for your context, where to place it, and its level of disruption.

For specific guidance on how to craft content for feedback and status components including information, success, warning, and error messaging, visit Messaging.

Also known as: System messaging, status alert, global status message, informational notice, site notice, page notification, validation bar.

Best practices

• Use sparingly, especially when interrupting tasks.
• Only offer essential information to the system or workflow.
• Limit the use for common actions, but always use to confirm destructive actions that users can’t undo.
• Provide the appropriate visual cues and responses to help users quickly assess and identify the alert and respond.
• Only display one feedback or status alert at a time. Alerts should not be stacked one after another.
• Include actions as needed. In most cases, alerts would be dismissed by other user interaction elsewhere.
• Reference individual component guidelines to learn about best practices for different screen sizes.

Feedback component examples

Feedback typically occurs when a user takes action, interacts with a system or with an item in a system. The effects of that action are then communicated back to the user in the form of messaging that guides their next action—creating a feedback loop. Below are some examples of the components commonly used to create a feedback alert.

Dialog

Dialogs are a modal interface that gives feedback on an action that was just taken that requires additional action before the user can move forward.

Usage: Since the main mechanism is disruption to the user’s workflow, limit use to critical moments, confirmations of destructive actions, or tasks that require action.

Placement: Appears in the middle of the user’s main workflow.

Persistence: Should persist, keeping the user’s focus and blocking their access to the parent window until the required action is taken or window is dismissed.

Explore dialog guidelines

Empty state

Empty states communicate feedback when there’s no information to display and instruct the user on how to move forward.

Usage: Typically appears the first time a user interacts with a product or page and can be used when data has been deleted or is unavailable. Common uses include: a screen where no files or folders have been created, the resulting screen after completing all tasks in a to-do list manager, an error screen in an instant messaging system when a command isn’t supported, and a filtered or unfiltered search with no results. Don’t default to total empty states, which can cause confusion about whether the system is working.

Placement: Can appear at the system or site level or within a main workflow or content area.

Persistence: Persists until data is available to display.

Flag

Flags provide simple, contextual feedback to inform the user of non-critical information that does not require specific attention or action, and does not prevent usage of the workflow.

Usage: Primarily used for low priority messages such as confirmations of tasks and success messages related to the page or workflow.

Placement: Floats over the page in a consistent screen area (top or bottom of a window or page) without blocking vital or interactive content.

Persistence: Should persist passively until the user takes action or dismisses.

Explore flag guidelines

Section message (error and warning)

Error and warning section messages provide contextual feedback on a user action that was just taken that requires additional action.

Usage: Limit use of error and warning section messages to critical and high priority messages to highlight potential issues relevant to the user’s workflow.

Placement: Appears above the section of the page the user is interacting with, usually below the page title, and does not block any information.

Persistence: Should persist until the user takes action (corrects the issue) or dismisses the message.

Explore section message guidelines

Status component examples

Status messaging doesn’t typically require user action to occur. Instead, these alerts are usually passive, meaning users can view it when they need it. The messaging describes the condition or state of a system or item within a system at a particular time.

Badge

Badges are a supplementary component that communicates contextually relevant information about the status of an element or something relevant to the user’s workflow.

Usage: Primarily used to provide various status updates from low to critical priority in lists, dashboards, data tables, data visualizations, and network diagrams.

Placement: Placed alongside the element it’s supporting or highlighting.

Persistence: Not interactive and cannot be dismissed by the user.

Explore badge guidelines

Banner

Banners provide messaging that communicate changes to information on the state or status of a website or app at the global level that is relevant to the user.

Usage: Primarily used to provide updates from low to critical priority where high and critical priority messages may require action and low to medium messages may feature a call to action to learn more or complete a minor task.

Placement: Fills the width of the page at the site or application level.

Persistence: Can persist passively, requiring no immediate action (low and medium priority) or persist until the user takes required action (high and critical priority).

Explore banner guidelines

Progress bars and indicators

Progress bars and progress indicators communicate real-time status updates including the duration and progression of a process towards completion.

Usage: Typically used to indicate how much longer a user will need to wait, or in some cases, indicate indeterminate progression when there’s no predetermined end. Common uses include download, file transfer, and installation.

Placement: Depends on the type of progress indicator used.

Persistence: Not interactive; persists until progress is complete.

Explore progress guidelines

Section message (informational)

Informational section messages communicate contextual changes in a state or status updates that typically don’t require any additional action. Can feature a call to action to learn more, undo, or complete a minor task.

Usage: Limit use of informational section messages to low priority messages that passively communicate relevant information.

Placement: Appears above the section of the page the user is interacting with and does not block any information.

Persistence: Should persist until the user takes action (if applicable) or dismisses the message.

Explore section message guidelines

Visual indicators

Visual indicators can be used to reflect the urgency or priority of an alert or message. Typically, this includes set colors and icons to grab the user’s attention and draw focus where the the alert or message is placed within the experience. For badges, this also includes stable colors and icons.

• Low attention: Indicate when something’s ready to view or to signify that there’s been a change since the last interaction. For example, information or subtle messages that relay status or added details about a system or app.
• Medium attention: Indicate when no immediate user action is required or to confirm a user action. For example, success messages that confirm an action after task completion.
• High attention: Indicate status change or that user action is required BEFORE someone takes action to avoid the loss of data or an error. For example, warning messages that confirm risky action like changing permissions.
• Critical attention: Indicate when user action is needed immediately to address an issue including irregularity in the system, malfunctions, invalid entries, and more. For example, error messages that tell users a problem has occurred.

Learn more about using icons in Icons and illustrations and messaging color sets in Color.

Level of disruption

Disruption is typically determined by the placement and persistence of the alert or message and describes the interruption experienced by the user. Some components are more disruptive than others while some are passive, meaning the user can view the message when relevant. Disruption can also occur when drawing focus to the alert using visual indicators like color and icons, and words that communicate urgency.

For example, a high level of disruption would be a dialog used to communicate that a critical update is needed to continue using an app. The dialog would disrupt the user’s experience, preventing them from continuing to use the app until the user takes action. The visual indicators would draw the user’s focus using red or yellow colors and error or warning indicators, and the words used would communicate the requirement to proceed.

For guidance on how to word messaging to draw user attention, visit our guidance on Messaging.

VGAR (internal only)

Find links to the Visa Global Accessibility Requirements (VGAR) for this component.

Related guidelines