Console Banner Spacing

[jkiga]

Hi team!

The project I am working on is notifying customers who are sending messages on phone numbers that are not A2P registered. This dismissible banner is an entry point to where the customer can register those phone numbers and learn more about it. This specific banner is only on this Messaging overview page and doesn't live on multiple pages.

I tried looking at the Paste guidelines and the discussions as to spacing and placement for non-global alerts, but didn't see anything too specific. After hearing feedback from other designers in critpod, they have mentioned there is usually spacing above and below the alert and is not common to be flush against other elements. Since this technically isn't a global alert, I would love your feedback!

This is a new design of our Messaging overview page that is going to go GA before the project I am working on launches. The best spot I thought to place the alert was at the top of the page flush to the Masthead and Navigation. From what I read, most alerts sit below the Header unless it is a global alert. I'm thinking hierarchically, it makes the most sense because it is the most important piece of information and it looks a tad odd in between the Header and Tabs. My first choice would be the alert flush to the Masthead and the Navigation because I think visually it goes well with the full bleed hero card. But I do understand historically there is space above and below alerts. Let me know what you think!

[nkrantz]

Hey @jkiga! Thanks for all the helpful context here. It's true that we don't typically recommend Alerts sit flush with their surroundings because they tend not to stand out as much that way. I chatted with the designers on the team and they recommend the third option you shared - below the Heading, above the Tabs. For non-global Alerts the general guidance is that they sit within the given container (the page, in this case), below the Heading (see the 2nd "Do" in the Alerts docs). Hope this helps, let us know if you have more questions!

[jkiga]

Thank you so much for the response @nkrantz!
I am a little worried that if I place the alert under the title, it might get lost because there is already a lot of information in this section. Since this banner is informing the user about how their current activity and use of messaging could lead to fines, I think it is important the alert sits at the top of the page where it will be the first thing they see. Can we make an exception for this case for the alert to sit above the Header with spacing due to the importance of the message (first option)?

[nkrantz]

Totally your call if you think the first option placement would be better for the user - you're not bound to our guidance 😉 If there's any way you could do a bit of quick usability testing to validate that pattern, it would help inform us so that we can iterate on our recommendations as well, but it's not necessary. If you're putting the Alert above the Heading, I do think that giving it a bit of spacing (like you have in the first option) helps it stand out.

[jkiga]

@nkrantz Thank you so much for helping me through this and giving your perspective! I did do some super quick internal hallway testing with some Twilions today! Here are my findings if you are interested to see the results. I did test the first option against the third option here with 11 users. 8 out of 11 users preferred the first option where the alert sits above the heading. It was interesting to hear everyone's thought process and their thoughts about alerts in general. Please let me know if you have any follow up questions! Thank you again!

[nkrantz]

Sorry for the delayed response, but thank you so much for sharing these findings! I've shared them with the design team. Awesome work 🚀