Banner
A banner shows an important message at the top of the screen.
When to use
- A condition affecting the whole product, such as a service being degraded or a licence about to lapse.
- Something people need to know on every screen, not just one.
- One at a time. Stacked banners push the product down the page, and people stop reading them.
When not to use
- A message about one part of a screen. Use a section message, which sits next to what it refers to.
- The result of something the user just did. Use a flag.
- An error on a field. Show it under the field, where the problem is.
- Marketing. Banners are for real problems. If they are used for anything else, people learn to skip them.
Guidance
Do
Say what is happening in one sentence, in words people understand.
Don't
Do not show an internal error. Say what is affected and what people can do, and keep the error code in the logs.
Intensity
How much attention each of this component's grounds uses, scored against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| banner | warning-bold | 0.448Marked | 0.601Marked |
| banner--announcement | neutral-boldest | 0.714Marked | 0.809Marked |
| banner--error | danger-bold | 0.443Marked | 0.617Marked |
| banner--warning | warning-bold | 0.448Marked | 0.601Marked |
Substrate, Ambient and Marked are measured. Directed depends on what else is in the region. Demanded is declared, and its use is limited. So neither of those two depends on the component alone. See intensity.
Content
What to write, and what to leave out.
- Keep it to one sentence. If a banner wraps to three lines, it is too long.
- Say what is affected, not what failed internally.
- Give a next step if there is one. Do not make one up.
- Use announcement sparingly. When banners turn out not to matter, people stop reading the next one.