Notifications show success, warning, information or error messages to the users.
Notifications should be clear and concise.
They'll always include some body content, but also also include a heading, as well as a button if there's a specific action you want to encourage the member to take.
If the notification includes a heading, it should be written in sentence case. The heading should be an answer-first summary of the message the notification is conveying.
Don't just use "Something's gone wrong" if we can be specific.
Yes: There's a problem with your smart meter
No: Something's gone wrong
Yes: We're getting your smart meter ready
No: Smart meter update
If you can include all the information the user needs in a single line, do so. If you need more content, try to keep it to 2 or 3 sentences. If it's longer than this, consider whether a notification is the right way to get this message to the user.
Clearly explain what the user needs to know. Use the content to expand on, but not repeat, the heading.
If the notification is about a problem with their account, tell the user what they can do to fix it or find out more.
Use a button in a notification if there's a specific action you want the user to take. Read the content guidance for buttons.
Inform our members when an action they've taken has been successfully completed and provide helpful context based information around that action.
Tell users about problems that have occurred after they've taken an action. The error should apply to the whole page.
Tell users information that could negatively affect their energy supply, Bulb account balance or finances.
If a close handler is provided the CTA will not be rendered