Alerts are important messages to let people know about their current task within the context of a screen.
Why we have a design pattern for Alerts
We have a design pattern for Alerts to provide users with contextual information so they:
-
get confirmation when they've completed an action;
-
have supplementary information to help them complete a task; and
-
can see if they've made a mistake and how to correct it.
When to use Alerts
Apply Alerts to digital services, online forms and websites where appropriate. An Alert should tell people:
-
about something that relates to what they're currently doing; and
-
that something needs their attention.
When not to use Alerts
Do not use an Alert in these instances.
- If the message is something that should always be visible to the user. If the message needs to be permanent, add it to the page as normal content.
- If the message only relates to a single form field.
- If you want to communicate a network or system error.
How Alerts work
Danger alerts
A Danger alert tells people an action they've taken will or has already had a negative effect. They help people understand:
- what has happened or could happen; and
- how they can avoid or correct an action to have a positive user experience.
A danger alert should be active until the user takes corrective action.
Placement
A Danger alert should appear at the top, left of the page under the Page number and above the page content.
Language
Danger alert messages should be short and easy to understand. They must identify the issue and help the user take corrective action. Reading grade level is key.
Do not use language that blames the user. Do not use system language.
Only include a link if the user needs to go somewhere to get help resolving the issue.
Style
The border, icon and text colour is a shade of Lichen with 45% black. The original value of black for Lichen is 0%.
The background colour is a tint of Lichen at 24%.
Hex codes for Danger alerts
-
Border #244C5A
-
Icon #244C5A (transparent icon)
-
Text #244C5A
-
Background #D4ECEF
Example of a Danger alert
Information alerts
Information alerts are neutral. They provide people with information that will help them complete a task. For example, contextual hints or general information.
Placement
Information alerts can appear in different places. Always position them near the place where they will help the user. Information alerts are often placed:
-
at the top, left of a page below the page number and above the page content; or
-
in association with a specific section of an online form.
Language
Information alert messages should be short and easy to understand. Write them to meet the Reading grade standard.
Only include a link if the user needs to go somewhere to get more detailed information.
Style
The border, icon and text colour is the Zinc colour with no modification of the percentage of black.
The background colour is a tint of River Blue at 15%.
Hex codes for Information alerts
-
Border #244C5A
-
Icon #244C5A (transparent icon)
-
Text #244C5A
-
Background #D4ECEF
Example of an Information alert
Success alerts
A Success alert lets people know they were successful at the task they undertook. It could also show something is resolved or available based on the action they took.
Placement
Success alerts appear at the top, left of the page. On a Confirmation page they appear under the Page number and above the "What you need to do" heading.
Language
Success alert messages should be short and easy to understand. They should meet the reading grade standard.
Only include a link if the user needs to go somewhere to get more information.
Style
The border, icon and text colour is a shade of Bryum Moss with 80% black. The original value of black for Bryum Moss is 20%.
The background colour is a tint of Bryum Moss at 15%.
Hex codes for Success alerts
-
Border #244402
-
Icon #244402 (transparent icon)
-
Text #244402
-
Background #e1ebd7
Example of a Success alert
Warning alerts
Warning alerts tell people an action could have a negative impact. They give users a warning so their action doesn't create a negative user experience.
Placement
Warning alerts usually appear at the top, left of the page under the Page number and above the page content. For example, we use Warning alerts for Error message summaries.
People should be able tell the action they took, or may take is related to the Warning alert. To do this - make sure the alerts is near the action.
Language
Warning alert messages should be short and easy to understand. They should identify the potential issue to help the user avoid making a mistake. They must meet the reading grade standard.
Do not use language that blames the user. Do not use system language.
Only include a link if the user needs to go somewhere to get help to avoid the issue.
Style
The border, icon and text colour is a shade of Midnight Sun with 80% black. The original value of black for Midnight Sun is 0%.
The background colour is a tint of Midnight Sun at 24%.
Hex codes for Warning alerts
-
Border #563B00
-
Icon #563B00 (transparent icon)
-
Text #563B00
-
Background #FFE9C3
Example of a Warning alert
Yukon.ca alerts
There are 4 types of alerts on Yukon.ca.
-
Site-wide alert
-
In-page alert
-
Engagement alert
-
Closed engagement alert
Site-wide alerts
Site-wide alerts appear on every page on Yukon.ca. See guidance for how and when to use a Site-wide alert.
Placement
Site-wide alerts appear below the Search bar and above the page content on the Yukon.ca home page. They appear across the top of all pages on the website.
Style
The icon and text colour is a tint of black at 85%.
The background colour is a tint of Midnight Sun at 10%.
Hex codes for Yukon.ca Site-wide alerts
-
Icon #444142 (transparent icon)
-
Text #444142
-
Background #fff4e4
Example of a Yukon.ca Site-wide alert
In-page alerts
In-page alerts appear on specific pages on Yukon.ca. See guidance for how and when to use a In-page alerts.
Placement
In-page alerts appear on a specific page or set of pages below the page title and above the page content.
Style
The icon and text colour is a tint of black at 85%.
The background colour is a tint of Midnight Sun at 10%.
Hex codes for Yukon.ca In-page alerts
-
Icon #444142 (transparent icon)
-
Text #444142
-
Background #fff4e4
Example of a Yukon.ca In-page alert
Engagement alerts
Engagement alerts let people know if there is an update on a government engagement.
Placement
Engagement alerts appear at the top of public engagement pages on Yukon.ca.
Style
The colour border is Lichen with no modification on the percentage of black.
The icon and text colour is a tint of black at 85%.
The background colour for the engagement alert is a tint of Midnight Sun at 24%.
Hex codes for Engagement alerts
-
Border #DC4405
-
Text #444142
-
Background #FFE9C3
Example of Yukon.ca Engagement alert
Closed engagement alerts
Closed engagement alerts let people know when a public engagement has ended.
Placement
Closed engagement alerts appear at the top of public engagement pages on Yukon.ca.
Style
The background colour for the engagement alert is a tint of River Blue at 15%.
Hex codes for Closed engagement alerts
-
Border #DC4405
-
Icon #444142 (transparent icon)
-
Text #444142
-
Background #D4ECEF
Example of Yukon.ca Closed engagement alert
