Alert ribbons

The alert ribbon is a compontent containing information about the state of the system/page/function. Information can be plain information, success, warnings & critical information (such as errors).

Guidelines

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 & Error: red

A critical warning that you may not disregard and requires the full attention. The user usually has to 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

Do

  • Be specific and short in the actual message
  • Place the alert near the context of what is triggered the alert
  • Urge the user to take action 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

Above: Information alert ribbon

Above: Warning alert ribbon

Related

Simular to Toast notifications

Code

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

Background colour: Grey 8/#E6E6E6 on white background or Grey 2/#333333 on dark background.

 

Success alert ribbon

Background colour: Dark Green 2/#379D00

 

Warning alert ribbon

Background colour: Yellow/#FFC500

 

Critical information and error alert ribbon

Background colour: Dark Red 1/#D81A1A