BT.com Design Guidelines

Introduction |  Notifications |  Grids |  Colours |  Typography |  Image Sizes |  Padding and Spacing |  Modals |  Icons |  Social Norms |  Dividers
Tables |  Package Selector |  Timelines |  Progress Indicator |  CTAs and Buttons |  Forms |  Tooltips |  Accordions |  Loaders | 

Notifications
 

Notifications are used to give important messages to the user. That could be an action that they need to take, or the status of the system or service.

They’re designed to attract the user’s attention, so they should be used sparingly. If overused, users may begin to ignore them.

The message should be short and written in clear, simple language. If there is an action that needs to be taken, this should also be clear.

This pattern should not be used to convey complex messages. Notifications can direct users to a page with more complex information, but the notification itself should be use d as a prompt.

Please note that this pattern is only for bt.com websites and apps.

Anatomy of a notification

Use it when...

Low priority (grey)

Prompts users to learn more about new products and services. It can also be used to inform users about something that’s not urgent, such as account usage or expiry dates.

Medium priority (yellow)

Informs users about account issues which require them to take action, such as usage issues or a service that hasn’t been activated.

High priority (red)

Informs users about urgent actions that they need to take. That could concern system outages, errors on the page, or errors that have occurred as they attempted to action something.

Success (green)

Informs users when an action they’ve taken was successful. It’s intended to be immediate feedback and shouldn’t stay on screen.

For a message that stays on screen, use an indicator.

 

How notifications behave

Low priority (grey)

  • Trigger: triggered by the system
  • Close: close button always present 
  • Actions: one CTA, usually a text link but can be a button

 


Medium priority and high priority (yellow/red)

  • Trigger: triggered by the system
  • Close: close button always present
  • Actions: one CTA, usually a text link but can be a button
  • For yellow alerts the icon, text and CTA colours should all be black #000000
     


Success (green)

  • Trigger: should appear on the screen after the user has taken an action (saved an item, made a payment, etc)
  • Close: no close button
  • Actions: no CTAs – notification is temporary
  • Motion: will disappear from the screen in 800ms
  •  


With close icon and CTAs

 

 

Note: font for the CTAs is BodyB to make the buttons stand out more

 


Less than 600px wide with close icon and CTAs

Secondary CTA rollover background colours

Rollover: button background #5c5c5c

Rollover: button background #007c00

Rollover: button background #e5c600

Rollover: button background #cf0012

Layout

Notifications should always sit below the header (i.e. below the universal, global and local navigation) on all pages. This is true of all notifications.

If a notification is used anywhere else on the page, it ceases being a notification and becomes another UI elements or pattern.

Sizing

The notifications can span any number of columns, but they must never go wider than the content width.

The size of the icon will depend upon on how wide the notification is displayed. The icon size is not dependent on the breakpoint, but rather the width of the banner at any given breakpoint. If the banner is smaller than 600px the icon is 20x20px. If it is larger it is 40x40px.

Typography

The font for links and CTAs is changed to bold to allow it to stand out on the coloured backgrounds.

Copy

Copy in notifications, including CTAs, should follow the usual copy guidelines and be as simple and clear as possible.

Pay particular attention to the length of the title and body copy. Long notifications will push the rest of the page content down on a mobile – so keep it short and sweet.

All notifications need a primary message (i.e. a title), but not all require supporting copy.


Changelog


1.0.1



1.0.0