Contextual Feedback

Pattern Status

---

Overview

Contextual Feedback indicators are visual elements that help users notice important information at a glance, to:

• Signal that something requires attention
• Raise awareness of something new or potentially changing

Goal: Help users notice information at a glance, such as updates, unusual events, and important details.

 

---

Principles

• Highlight important information: Make unusual or relevant details noticeable.
• Communicate changes: Show temporary, conditional, or newly added content.
• Use visual cues thoughtfully: Combine icon, color, and background to convey meaning clearly.
• Keep the interface clean: Avoid unnecessary clutter while drawing attention where needed.
• Clear and accessible: Ensure indicators are perceivable and usable for all users.

 

---

Types

Indicators typically fall into three categories based on the information they convey.

Attention Cues

Highlight unusual or relevant information that requires user attention.

Examples: Expired invoice, overdue task, tip generated by the system.

 

Contextual Updates

Show temporary or conditional information for awareness rather than urgency.

Examples: New messages or notifications, a “New” badge indicating recently added content.

 

Status Highlights

Emphasize important statuses to ensure they are noticed at a glance.

Examples: Security status, completion indication, balanced statuses.

 

Out of scope

Scenarios that look like Contextual Feedback but aren’t:

• Dynamic Status / Progress Columns: Persistent statuses in a table column.
• Guidance/Informational Content: Fixed content provided by the product to guide users through the interface.

 

---

Pattern Implementation

Contextual Feedback can be represented by two main components: Status Indicators and Badges.

Status Indicators

Status Indicators communicate meaning through a combination of icon, color, and optional background. These elements can be combined to reflect importance and semantic meaning.

 

 

Badges

Badges represent dynamic counts, temporary states, or short awareness messages.

 

---

Examples in the Product

Contextual Feedback can appear differently depending on the layout and type of information. Here are examples showing how the pattern is applied in the product:

Tables

Scenario: Highlighting a specific item or cell that needs attention; something unusual.

Recommended component: Status Indicator (icon-only, no background).

• Place the icon in the relevant cell for a cell-specific warning.
• For row-level relevance, place the indicator in the first cell of the row.
• If the text is left-aligned, place the indicator on the right side of the cell. If the text is right-aligned, place the indicator on the left.
• For multiple warnings, add a label showing the count next to the icon.

 

Dashboards and Cards

Scenario: Highlighting card-level updates, important metrics, or status information.

Recommended component: Status Indicator (icon + background).

• Emphasize key information, such as positive or negative status (e.g., ledgers are balanced, security is low).
• Apply recommended colors and shapes for each semantic variant.
• Include indicators only to show relevant states to reduce clutter (e.g., display a “completed” indicator but not an “incomplete” one on a progress dashboard).

 

Badges

Scenario: Indicating new messages, system updates, or temporary status changes.

• Place Badges in the top-right corner of Icon Buttons and Avatars.
• For elements with text (e.g., menu items or titles), place the Badge next to the text with a small gap separating them.

 

---

Best Practices

• Combine icon, color, and optional background to communicate semantic meaning clearly.
• Place indicators thoughtfully based on context: cell-level, row-level, card-level, etc.
• Avoid relying on tooltips for critical information: use popovers or detail views instead.
• Minimize visual noise: use basic variants or remove background for low-priority feedback.
• Ensure icons and labels are easily distinguishable at a glance.

 

---

Accessibility Considerations

• Ensure keyboard and screen reader accessibility.
• Provide ARIA labels or text equivalents.
• Do not provide detailed context in tooltips.
• Use popovers for displaying interactive elements.
• Ensure icons and labels are clear and readable.

 

---

Additional Resources