Short description

This component is for when the system needs to inform the user of a given situation or state. 

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 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. 

Placement

Generally, there are four types of placements that depends on the context; global, page, group and specific. The rule is to simply place the alert near the issue that triggered it.

Global

Alert is placed at the top under the header. Is typically a system notice (i.e Maintenance).

Page

Alert is placed at the top of the page. Is typically a function notice (i.e Bankgiro is down).

Group

Alert is placed in the module. Is typically a notice related to the module (i.e Transaction listing is unavailable).

Specific

Alert is placed in the content (table, etc) in the module. Is typically a notice related to the content (i.e Negative balance).

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)

• Overwhelm the user with multiple alerts of the same severity. Group them if possible.

Examples

Above: Information alert ribbon

Above: Warning alert ribbon

Specification

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

Icons

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

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

Information alert ribbon

States

• On white backgrounds: Grey 200
• On grey backgrounds: Grey 800
• Text: Grey 800

• Grey 200
• Grey 800
• Grey 800

Success alert ribbon

States

• Background: Dark green 2
• Text: White
• Timeout line: 10% Dark green 2

• Dark green 2
• White

Warning alert ribbon

States

• Background: Yellow
• Text: Grey 800

• Yellow
• Grey 800

Critical information and error alert ribbon

States

• Background: Dark red 1
• Text: White

• Dark red 1
• White

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.

Examples

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.