Banners

[yesenia-perezcruz]

Let's collect issues and opportunities with Banners.

Issues

• Banners take up a lot of attention because they're often the most colorful element on a page and they're large (large padding especially.)
• You can really notice this when multiple banners are stacked on a page or when a banner is placed within a card in the sidebar.
• We have some complexity in our color system just to render the colors within Cards.
• Because they look similar to Cards, the text within Banners can get long. What I've seen as a result is that Informational Banners can sit in the admin for extended periods of time.

Opportunities

• Differentiate the design of the Banner so that it feels more like an alert and less like a Card.
• Tighten up spacing and sizing and simplify the color system for Banners
• Look into whether Banner usage guidance needs to be updated
• Zooming out: are there other alert patterns that are needed in the admin that banners don't cover?

Usage:
Banners are used 805 times in admin with 4 overrides

[bernardojoaogarcia]

Being new to the team, I don’t have as much context but I would love to chime into this discussion :)
+1 to all the opportunities above, especially tightening up the padding 🙌

Issue:

• The colour contrast between the Admin Surface and the Banner Surface.

Suggestions:

• Using a more contrasting colour style for the Banner’s surface would eliminate the need for a border outline to contrast the Admin’s BG, and it would resonate more as an alert.
• Creating colour uniformity between the text and the icons within the banner would reduce the number of colour styles.

P.S. - A viable option could also be the use of a critical message style and a less visually disruptive message style, creating high/low contrast notification banners

[alex-page]

There are situations where multiple banners show on the page. Sometimes it's multiple critical or a mix of multiple types. We need better guidance and patterns for what to do when there are multiple banners on a page.

[heyjoethomas]

I am most interested by your last bullet. Would be really interesting to create a matrix of the different types of messages and the tools/patterns used to employ them. Part of the answer here may be creating a more diverse set of messaging components that serve specific needs. This would be a really interesting pattern to think through and document.

Message types

• System messages like failures
• Messages triggered by merchant action
• Time or deadline based messages
• Page level messages
• Messages related to only a specific chunk of content on the screen
• Marketing messages

Roles

• Informative
• Positive
• Caution
• Critical/error

[heyjoethomas]

Was playing with some quick banner ideas today. Thought I would just throw them in here for visibility even though they are rough.

• Updated the colors to use the WIP colors from the token project
• Tightened the spacing a bit
• In card variants have less rounding on the corners to fit the space more naturally
• Removed border all the way around and replaced it with a thicker left border to help draw more attention
• Text now uses a dark shade of the color role instead of just black. Creates a nice visual harmony.