Canada.ca alerts and service disruptions: Canada.ca design

On this page

• How to use alerts for service disruptions
• Examples and code
• Alerts that repeat across several pages

How to use alerts for service disruptions

Alerts are meant to draw attention to changes in regular content in 2 ways:

1. a change to the content of the page on which the alert appears: in this case, place the alert next to the updated content
2. a change that has been made elsewhere, such as new information being published: in this case, link to the new information from within the alert

What to include in alerts

Alert content should:

• be short and simple
• describe the impact on the user
• be tailored to the page on which it appears
• include the dates (if known) when the disruption will take place
• use the appropriate verb tense to reflect when the change is taking place
• use links sparingly - if a link is needed, only include one

Limit use of alerts

Be aware that alert fatigue reduces the effectiveness of the alert over time. The more people see alerts and warning messages the less receptive they are to them. To avoid this, follow these guidelines:

• only use alerts on a temporary basis (for the time it takes to integrate the information or resolve the situation)
• limit the number of alerts on each page
• limit the number of alerts used across pages:
  • use at impacted points of service or information delivery, such as service initiation pages, contact pages, etc.
  • avoid beyond service or information delivery points - on theme and topic pages, consider using a new doormat instead
• save alerts for significant situations that impact most users:
  • on the Canada.ca home page, only use when more than 50% of the population is affected
  • on institutional landing pages, only use when more than 40% of users are impacted
• avoid using alerts just for styling regular content (for emphasis or highlighting)

Examples and code

<section class="alert alert-warning">
	<h3>Limited service availability</h3>
	<p>This service is affected by the outbreak of coronavirus (COVID-19).</p>
	<a href="#">Check service status updates</a></p>
</section>

Use the Contextual alerts pattern

Additional examples

Alert examples on specific page types:

• Service initiation page
• Contact page
• Beta institutional landing page
• Institutional profile

Alerts that repeat across several pages

If you need to add the same alert on many different pages, it may make sense to make a single page that all these alerts can link to.

The central page will:

• summarize the change in plain language
• explain the impact on the users of affected services
• be updated as soon as new information arises

The breadcrumb for this central page should lead to the Government of Canada's main response page for the crisis.

How this helps

• prevents scattered crisis and service disruption pages
• encourages a coordinated approach within each department and across the Government of Canada
• reduces the work required to maintain various alerts and related updates

2022-05-10

Revised headings to say “service disruption” rather than “crisis”.

Added a recommendation to include dates in the alert and use the correct verb tense.