Short description

Different kinds of alert messages need different designs. For a passive notification, such as information “good to know”, use the Information alert ribbon. An action-required notification such as a warning or an error needs more emphasis, use the Warning alert ribbon to attract user’s notification when needed or the Error alert ribbon for immediate action.

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.

Behaviour

The Alert ribbon can be a fixed, time set, action required or a dismissable message. All types can contain a link for more information. An action required alert always contains a button or a link. The dismissable type use the Close button in upper right corner.

Icons

• Information: info-square solid
• Success: check regular
• Warning: exclamation-square solid
• Alert: exclamation-square solid

Placement

Generally, there are four types of placements that depends on the contex. The rule is to 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

Do

• Place the alert near the context of what has triggered the alert
• Urge the user to act if needed
• Add an icon to enforce the message (optional)

Don't

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

General note

Write short and to the point. Always think mobile; 1.5 rows on desktop becomes 3.5 rows on mobile. Maximum 75 characters or 500 pixels wide in the desktop version.

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

With a header

Feel free to use a header if it reinforces the message and gives the customer a quick and good understanding of what the message is about. Don’t just write, for example, "Information" followed by the important message. The header should always be on the same row as the rest of the text, never separated above. 

Do

Don't

No header

It is fine to write the message without a title. Perhaps the first sentence is so informative that it can be placed first, but will be too long as a heading. Remember to start the message with the most important and informative sentence so that the customer gets a quick understanding of what the message is about.

Do

Close button, X

A close button (X) is often used so that the customer can delete the message. When the customer receives a message and does not need to act on it, it's possible to have no action (X, button or link). The message then disappears by itself. An example can be when the customer has logged out of the internet bank and receives a confirmation for this.

Do

Button

Use a button when the customer needs to act on something. For example, if the customer needs to switch funds, change or confirm answers to continue using a service.

There are exceptions when a button should not be used even though there is something important to act on. An example of this is when the customer needs to choose new loan conditions on their mortgage loan, then a link is preferable.

Read more under the section about links below.

Do

Link

Use a link when you want to allow the user to read more or when the user needs to act on another page, but it may not be critical. The link can also be used for critical actions if a button may be perceived as "scary", meaning that the customer might think that something will happen at the same moment that the button is clicked. An example is when it is time for the customer to re-commit their loans, and the customer must act on this to be able to choose the committing period and interest rate, but a button can be perceived as committing them immediately.

The link must always be on the same row as the last sentence. Do not put it into a separate row, remember the limited space. The link must always end the message but can be integrated with the last sentence or as its own sentence.

Do

Don't

Link and button together?

Preferably, do not use both link and button together. There is limited space to talk to the customer. We need to choose what the main message is and avoid giving different kinds of information in the same alert. If the customer needs to act on something but needs more information to make a decision, we should first lead the customer somewhere they can get more information and then act.

Alert types

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.

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.
• Relation. If appropriate, you can give extra meaning to the action: a positive impression of our brand and the customer’s pleasant experience.

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. 

Review

Result from the latest accessibility review of the component (Chlorophyll, React): 2023-02-22

• Contrast: good
• Colour-blindness: ok - can be hard too distinguish the different "bad"
• Code + aria: ok
• Touch + keyboard: good
• Dark-mode: ok - should it change?
• Focus: ok - need new style
• Reader: ok - should have better example text

• Details: Specification in Figma
• Instruction: How to access Figma