Feedback Patterns

What You Do

Feedback Types

Immediate Feedback

• Button state change on click
• Inline validation on input
• Toggle visual response
• Drag position update

Confirmation Feedback

• Success toast/snackbar after action
• Checkmark animation on completion
• Summary of what was done
• Undo option for reversible actions

Status Feedback

• Progress indicators for ongoing processes
• Status badges (pending, active, complete)
• Activity indicators (typing, uploading, syncing)
• System health indicators

Notification Feedback

• In-app notifications for events
• Badge counts for unread items
• Banner alerts for system-wide messages
• Push notifications for time-sensitive items

Feedback Channels

• Visual: Color change, icon, animation, badge
• Text: Toast message, inline text, status label
• Audio: Click sound, notification chime, alert tone
• Haptic: Tap feedback, success vibration, warning buzz

Feedback Hierarchy

1. Inline/contextual — closest to the action (preferred)
2. Component-level — within the current component
3. Page-level — banner or toast at page level
4. System-level — notification outside current view

Duration and Dismissal

• Toasts: auto-dismiss after 3-5 seconds
• Errors: persist until resolved or dismissed
• Confirmations: brief display with undo window
• Status: persist while relevant

Best Practices

• Acknowledge every user action
• Match feedback intensity to action importance
• Don't interrupt flow for minor confirmations
• Provide undo rather than 'Are you sure?'
• Ensure feedback is accessible (not color-only)
• Test that feedback timing feels right