Check if the message is still relevant after processing
Take the recommended action and then return to the screen. Banner needs to be updated or disappear when the issue is resolved; Don't let old information continue to worry users.
Banner Design system
Put important information in the right context.
Checklist contents
Review progress
01
Structure and meaning
Compare information and presentation in context of use.
02
Interaction and usability
Try the operation, change the status and continue working.
Progress is saved automatically in this browser.
GUIDANCE
How to review
EXAMPLES
Usage examples
Account information needs to be added
The “Complete information to continue” banner has a button to go to the correct missing section; After addition, the banner does not appear again.
Variants and use cases
Level of message
Separate information, warnings, errors, and successes with labels or icons of the same color.
Read the banner when removing color; Users still understand whether they need to pay attention or just know more.
Example “Incomplete payment” has a warning icon and a check action.
Message structure
Put what just happened first, then state the impact and brief treatment steps.
Try long-form messages and dynamic metrics; Avoid hiding important actions on mobile.
Example “Session is about to expire. Save a draft before logging in again.”
Action included
Prioritize the correct event handling action, maybe add a close option if the message is not required.
Click action then return; There is no more error banner if the problem is resolved.
Example The "Reconnect" button in the connection loss notification does not lead to the home page.
Contrast with the page
Keep the message prominent enough to be noticed but without taking away from the main content of the page.
Place the banner on a dark background and theme; Text, links and buttons need to be readable.
Example Warning banner with border and icon; The description still uses an easy-to-read font size.
Symbols according to meaning
Use icons to represent the type of message and keep text labels as the primary source of information.
Hide the icon and read again; The message needs to stand alone and not lose meaning.
Example The lock icon goes with the sentence "You do not have editing rights yet".
Notification location
Place the notification near the area it affects; Session-wide announcements can be found at the top of the page.
Scroll the page and open the keyboard; The banner must not cover the processing button in the relevant area.
Example Filter errors are next to the results; Service maintenance is at the top.