Give feedback to users
There are several patterns for giving feedback to users. Not all of them can be used in the same way with the same purpose.
We can divide the possible scenarios into two main categories: feedback for users after a user’s action and feedback not related to user’s active actions.
For feedback after user’s action we have:
- Notification
- Error messages
- Loader
- Inline notifications
For feedback not related to user’s action (already present at landing) we have:
- Notification banner
- Callout (aka Blockquote)
Callout (aka Blockquote)
When to use
- Present at landing
- Useful to highlight info for user regarding the content of the page (specific task)
- Have not a recurrent position, should be placed in the page where relevant for the user
- Can have 2 states: default and alert
When not to use
- Do not use as Feedback (after user action)
- Can be dismissable
- Can be collapsed
- Can be with/without icon or title
Notification banner
When to use
- Present at landing on top of the page
- Useful to highlight info for user regarding the system (general info or updates)
- Can have 2 states: default and alert
When not to use
- Do not use as Feedback (after user action)
- Do not use referring to specific tasks in the page
- Can be dismissable
- Can be with/without call to action
Notification
When to use
- Appears after user’s action
- Gives feedback on the result of an action
- Can have 4 states: default, success, alert and warning
When not to use
- Do not use as Input error
- Can be dismissable
- Can be with/without icon or title
Input error
When to use
- Appears after user’s action
- Gives feedback on the correct input
When not to use
- Do not show before user’s action
- Can be with/without icon or title
CTA spinner (component WIP)
When to use
- Appears after user’s action
- Gives feedback on progress
- As an animation
- Is followed by another feedback (notification)
When not to use
- Do not show before user’s action
Inline notification (component WIP)
When to use
- Appears after user’s action
- Gives feedback on the state of the action
- Appears always in the same place (e.g. top of main container or below main CTA)
- Useful for server-side errors
- Can have 2 states: error or success
When not to use
- Do not show before user’s action
- Do not use together with Notification (overlay)
- Can be with/without icon or title