Feedback indicators that direct the attention of the user to a change in the state of the application.
Examples & Guidelines
Banners communicate one of the following states: success, information, warning, or error.
Additional information or directions go here. Brevity is the soul of wit, however, text may wrap to another line in the off chance that we want the user hooked on phonics.
Additional information or directions go here. We may decide this particular information is very important and remove the option to close it. If users can’t get rid of it, maybe they’ll read it.
An explanation of the warning goes here.
An explanation of the error goes here. This should be the scariest looking banner — but not too scary. Maybe we’ll choose to add a button on this banner.
Banners show at the top of the page or section they apply to on top of (z-wise) other content on the page. Try to avoid covering critical content / actions.
Content & Timing
Titles and text should be concise. Errors and warnings should be actionable if applicable. Let the user know how to remedy the situation. Some banners may be dismissable and/or have additional buttons or in-line links for secondary actions. Banners will time out after 2 seconds or until they are dismissed (optional via “x”). There is no need to have duplicate close actions.