Information
Why
Confirmation
Shows the user that their action has been registered (e.g., clicking a button).
Status Indicator
Informs about ongoing processes (e.g., loading indicators, progress bars).
Error Prevention and Correction
Clear error messages help users understand and resolve issues.
Principles
Immediacy
Feedback should be provided as quickly as possible.
Clarity
Feedback must be understandable and unambiguous.
Consistency
Same actions should trigger the same feedback.
Appropriateness
Feedback should not be excessive or intrusive.
Common Patterns
Visual Feedback
Color changes on buttons when tapped (e.g., ripple effect), loading animations, success or error messages.
Haptic Feedback
Vibrations when certain actions occur (e.g., when a task is successfully completed or an incorrect input is made).
Audible feedback
Sounds to confirm actions or signal events (use sparingly to avoid distractions).
Visual Feedback
Color changes on buttons when tapped (e.g., ripple effect), loading animations, success or error messages.
Embedded prototype: foil-visa-23684284.figma.site › Visual
Haptic Feedback
Haptic feedback is a subtle but effective form of feedback that communicates via the user's sense of touch, usually through vibrations. It complements visual and auditory feedback to enable richer and more intuitive interaction with the app.
Why
The core principle of haptic feedback is immediate, tangible confirmation and orientation. It signals to the user that an action has been registered, a system status has changed or important information is available without the user having to take their eyes off the current focus. When used correctly, it increases trust in the app, improves the perceived responsiveness and can even make operation easier for users with certain limitations. A lack of or inconsistent use of haptic feedback, on the other hand, can lead to uncertainty and a perceived lower quality user experience.
Embedded prototype: foil-visa-23684284.figma.site › Haptic
Audible feedback
Sounds to confirm actions or to signal events (use sparingly so as not to disturb).
Embedded prototype: foil-visa-23684284.figma.site › Audible