Alerts and Notifications

Patterns
1

I’m documenting the 'Sitewide messages’ and ‘Notifications’ today and there’s a massive difference in their naming in the industry.

Sitewide message names

  • Global notifications
  • Page alerts
  • Global alerts
  • Alerts
  • Notifications
  • Banners
  • Flash message
  • Alert banners
  • App-level alert

Notification names

  • Inline notifications
  • In-page alerts
  • Container Alert
  • Notice
  • Notifications
  • Alerts
  • Inline alerts
  • Standard alerts (as opposed to app-level)

I think alerts is wrong for the in-page stuff, as the label has negative connotations (I.e. can you have a success alert?).

I think the family is ‘Notifications’ and that ‘Global alerts’ work the site wide stuff as they’re always alerts of some description and they’re site-wide/global and ‘In-page notifications’ works for in-page stuff as notifications can be positive and negative and they’re in-page.

Thoughts?

2

I agree with in page being called “notifications”. For the global/sitewide messages, if it is a proper warning like a bush fire, then “alert” makes sense.

Is there a use case where the alert at the top of the page would be used for non-emergency information? Could be something abused by an overzealous stakeholder if we take away their carousels. :wink:

My personal feelings is that there should be rules around when alerts should be used, such as emergency information only (impending bushfire, severe weather, etc). Otherwise, the content should be displayed in a news section.

1 Like
3

Hi guys,

I just wanted to suggest a slightly modified global alert design for desktop that takes up less vertical space.

Currently, global alerts take up a minimum of around 200px of valuable vertical screen real estate. We can more than half this with a few small style tweaks on desktop. Global alerts are inherently invasive, but I think slimming them down a bit will help give them the right visual hierarchy.

image
image1501×726 152 KB

4

Hi @adham, this is a great suggestion and thanks for sharing your work on it. We’ll review the design and look at the options to reduce the vertical space. Will keep you posted!

1 Like
5

Hi @adham, thanks again for your feedback on the global alerts! To reduce the height of global alerts where appropriate, we’ve added guidance on linking text within the description instead of using a CTA button. This will also allow for in context linking and more descriptive call to actions. Live examples of the component with these options is available at NSW Digital Design System - Global alert

1 Like