Short description

This component is for when the system needs to inform the user of a given situation or state. Information can be plain information, success, warnings and critical information (such as errors).

Overview

Behaviour

Alert ribbons can stay constantly visible, or if the issue is something that can be resolved by the user, a call to action (button, x or a link) may be included to dismiss the message.

Types of alerts

There are four types of colour-coded alerts.

1. Information (grey): Used for informative guiding messages, sometimes proactive advice. 
2. Success (green): Indicates that an action processed successfully, or that there are no account-related issues. Typically used when there is no need for a printed receipt.
3. Warning (yellow): A warning, that you may disregard from, but it may influence the experience. Gives the user a hint about a condition or situation that needs attention from the user.
4. Critical or error (red): A critical warning that you may not disregard and requires the full attention. The user usually must act or they will probably not be able to use the function. 

• Grey 200
• Dark green 2
• Yellow
• Dark red 1

Placement

Generally, there are four types of placements that depends on the contex. The rule is to simply place the alert near the issue that triggered it.

1. Global: Alert is placed at the top under the header. Is typically a system notice (i.e Maintenance).
2. Page: Alert is placed at the top of the page. Is typically a function notice (i.e Bankgiro is down).
3. Group: Alert is placed in the module. Is typically a notice related to the module (i.e Transaction listing is unavailable).
4. Specific: Alert is placed in the content (table, etc) in the module. Is typically a notice related to the content (i.e Negative balance).

Global

Page

Group

Specific

Do's and don'ts

• Be specific and short in the actual message
• Place the alert near the context of what is triggered the alert
• Urge the user to act if needed
• Add an icon to enforce the message (optional)

• Don't overwhelm the user with multiple alerts of the same severity. Group them if possible.

Examples

Information alert ribbon

Warning alert ribbon

The four types of alert ribbons are used for four different types of information:

• Information; information in general.
• Success; confirmations.
• Warnings; important information to be aware of.
• Critical and error; what the customer needs to do to be able to proceed.

Information

Information ribbons may be used to inform the users, for instance about new features, or to give proactive advice.

In information ribbons, the message may consist of:

• Information. Short message about a new feature, current event or guiding tip.
• Instruction. Next choice or mandatory step. The action may be a button, x or link. The button label or link text might be a separate content.

Success

Success ribbons may be used to confirm that the customers action was successful.

Why should we confirm?

• People expect digital interfaces to behave according to social norms.
• Confirmations are among the most important feedbacks that people expect to receive.

In success ribbons, the message should consist of:

• Confirmation. Everything is done and ok. Generally, we do not thank the customers for what they did, especially not for regular activities like payments or fund or securities orders.However, it might be appropriate to thank the customer after entering KYC information or other private information.
• Instruction. Next choice or mandatory step. The action may be a button, x or link. The button label or link text might be a separate content.
• Relation. If appropriate, you can give extra meaning to the action: a positive impression of our brand and the customer’s pleasant experience.

Example

We have opened your account. You can add a monthly saving. Add a monthly saving

 

We have received your extra payment
It can take up to two weekdays before the reduced mortgage amount appears on your mortgage. Once the instalment is registered, you can pay extra again. However not more than 100 000 kronor within a 30-day period.

Warning

Warning ribbons may be used for different types of non-critical information, for instance that the due date of an upcoming transaction is close, that the stock market prices aren’t properly updated or for information about planned maintenance of the service.

In warning ribbons, the information normally consists of:

• Explanation. Summarise as much of as possible what is wrong, for example There are technical problems with the stock market prices, and you cannot be sure that they are correctly displayed. The message should normally not start with words like Important, Note or Warning.
• Estimation. How long we estimate the problem to persist, if there is a reasonable estimate.
• Apology. Apologize only when problems in SEB's system are interfering. Otherwise, the explanation of the problem will suffice.
• Instruction. Next choice or mandatory step. The action may be a button, x or link. The button label or link text might be a separate content.

Critical and error

Critical and error ribbons may be used for information that is crucial for the users to be able to do what they want, for example if a system is closed, the service cannot be used or if there is a system error.

In critical and error ribbons, the information about the problem normally consists of:

• Explanation. Explain what is wrong. The message does not need to start with words like Important, Note etc.
• Apology. Apologise only when problems in SEB’s system are interfering.
• Help or instruction. What the customer must do to be able to proceed with what the he or she intended to do – now or later. Next choice or mandatory step. The action may include a button, x or link. The button label or link text might be a separate content.

Upper and lower case

Don't start each word in headings and labels with upper case. Only use upper case in:

• The first letter of the first word
• The first letter of proper names
• Abbreviations

Typograpy

• Text: 16 px medium/regular
• Text line height: 20 px

Measurements

• Background height: Min 48 px, max x px
• Background width ribbon: Full width/content width
• Background width toast: Min 343 px

Specification

Icons

To make the icons clear on coloured backgrounds, use "solid" FontAwesome icons: 

• Information – "info-square"
• Success – "check"
• Warning – "exclamation-square"
• Alert – "exclamation-square"

States

Information

Alert on white background

• Ribbon: Grey 200
• Text: Grey 800

Alert on grey background

• Ribbon: Grey 800
• Text: White

Success

• Ribbon: Dark green 2
• Text: White

Warning

• Ribbon: Yellow
• Text: Grey 800

Critical information and error

• Ribbon: Dark red 1
• Text: White

Information

Success

Warning

Error

Colours

• Yellow
• Dark green 2
• Dark red 1
• Grey 200
• Grey 800
• Grey 800
• White