112
edits
Changes
Jump to navigation
Jump to search
Canada.ca warnings and service disruptions - Alertes et perturbations de service Canada.ca (view source)
Revision as of 11:22, 13 March 2020
, 11:22, 13 March 2020Created page with "__NOTOC__ <!--THE CODE BELOW THIS LINE CREATES THE TWO-COLUMN FR/EN LAYOUT--> <div id="alet-skip"> <!--START English column, do not touch this code--></div> <div lang="en" id..."
__NOTOC__
<!--THE CODE BELOW THIS LINE CREATES THE TWO-COLUMN FR/EN LAYOUT-->
<div id="alet-skip">
<!--START English column, do not touch this code--></div>
<div lang="en" id="eng"><div class="alet-nav"></div>
<div style="float:left; width:47%; padding:5px;">
<!--PLACE ENGLISH TEXT BELOW THIS LINE AND ABOVE THE CLOSING DIV-->
Guidance for alerting Canada.ca visitors
==Proposed approach - contextual alerts==
*Use contextual alert patterns:
**Apply at impacted points of service delivery, such as service initiation pages, contact pages, etc.
**Limit application beyond service delivery points to avoid “alert fatigue”
*Alert content should:
**Explain why service is disrupted or warning is required
**Describe the impact on the user
**Be tailored to the page on which it appears
**Include a single link to where updates are available
==Alerts and regular in-page content==
Don’t use alerts as regular content - rather they are meant to draw attention to changes in regular content, in two ways:
*a change to the content of the page on which the alert appears - in this case place the alert next to the updated content
*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
==Alerts: do’s and dont’s==
Do:
*Use alerts on a temporary basis - retain only for days or weeks
*Place the alert at the point of service/task
*Save alerts for significant situations that impact most users:
**On the Canada.ca home page, only use when > 50% of the population is affected
**On institutional landing pages, only use when > 40% of users are impacted
Don’t:
*Have too many alerts - limit the number of alerts on each page and the number of alerts used across pages- ideally 1, maximum 2
*Use them to ‘highlight’ permanent content
==Multiple alerts about the same issue/situation==
*When using a number of alerts at different points about the same issue or situation, create a page summarizing current service disruptions across the organization, & link to it from the relevant alerts
*For this page, use the basic page layout pattern
*Page content should:
**Summarize affected services in plain language
**Explain the impact on the users of affected services
**Be updated as soon as new information arises
==Code and samples==
More information about contextual alerts can be found in the Canada.ca design system.
Code:
<section class="alert alert-warning">
<h3>Service disruption</h3>
<p>This service is affected by the outbreak of coronavirus (COVID-19).
</p>
<p><a href="link to departmental service status page">Check service status</a>
</p>
</section>
Alert samples
</div>
<!--START French column, do not touch this code-->
<div lang="fr" id="fra"><div class="alet-nav"></div>
<div style="float:left; width:47%; padding:5px;">
<!--PLACE FRENCH TEXT BELOW THIS LINE AND ABOVE THE CLOSING DIV-->
</div>
<!--THE CODE BELOW THIS LINE CREATES THE TWO-COLUMN FR/EN LAYOUT-->
<div id="alet-skip">
<!--START English column, do not touch this code--></div>
<div lang="en" id="eng"><div class="alet-nav"></div>
<div style="float:left; width:47%; padding:5px;">
<!--PLACE ENGLISH TEXT BELOW THIS LINE AND ABOVE THE CLOSING DIV-->
Guidance for alerting Canada.ca visitors
==Proposed approach - contextual alerts==
*Use contextual alert patterns:
**Apply at impacted points of service delivery, such as service initiation pages, contact pages, etc.
**Limit application beyond service delivery points to avoid “alert fatigue”
*Alert content should:
**Explain why service is disrupted or warning is required
**Describe the impact on the user
**Be tailored to the page on which it appears
**Include a single link to where updates are available
==Alerts and regular in-page content==
Don’t use alerts as regular content - rather they are meant to draw attention to changes in regular content, in two ways:
*a change to the content of the page on which the alert appears - in this case place the alert next to the updated content
*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
==Alerts: do’s and dont’s==
Do:
*Use alerts on a temporary basis - retain only for days or weeks
*Place the alert at the point of service/task
*Save alerts for significant situations that impact most users:
**On the Canada.ca home page, only use when > 50% of the population is affected
**On institutional landing pages, only use when > 40% of users are impacted
Don’t:
*Have too many alerts - limit the number of alerts on each page and the number of alerts used across pages- ideally 1, maximum 2
*Use them to ‘highlight’ permanent content
==Multiple alerts about the same issue/situation==
*When using a number of alerts at different points about the same issue or situation, create a page summarizing current service disruptions across the organization, & link to it from the relevant alerts
*For this page, use the basic page layout pattern
*Page content should:
**Summarize affected services in plain language
**Explain the impact on the users of affected services
**Be updated as soon as new information arises
==Code and samples==
More information about contextual alerts can be found in the Canada.ca design system.
Code:
<section class="alert alert-warning">
<h3>Service disruption</h3>
<p>This service is affected by the outbreak of coronavirus (COVID-19).
</p>
<p><a href="link to departmental service status page">Check service status</a>
</p>
</section>
Alert samples
</div>
<!--START French column, do not touch this code-->
<div lang="fr" id="fra"><div class="alet-nav"></div>
<div style="float:left; width:47%; padding:5px;">
<!--PLACE FRENCH TEXT BELOW THIS LINE AND ABOVE THE CLOSING DIV-->
</div>
