Difference between revisions of "Canada.ca warnings and service disruptions - Alertes et perturbations de service Canada.ca"
Jump to navigation
Jump to search
David.pepin (talk | contribs) |
David.pepin (talk | contribs) (FIxes) |
||
| Line 1: | Line 1: | ||
<!--THE CODE BELOW THIS LINE CREATES THE TWO-COLUMN FR/EN LAYOUT--> | <!--THE CODE BELOW THIS LINE CREATES THE TWO-COLUMN FR/EN LAYOUT--> | ||
| − | <div id="alet-skip"> | + | <div id="alet-skip"><!--START English column, do not touch this code--></div> |
| − | <!--START English column, do not touch this code--></div> | ||
<div lang="en" id="eng"><div class="alet-nav"></div> | <div lang="en" id="eng"><div class="alet-nav"></div> | ||
<div style="float:left; width:47%; padding:5px;"> | <div style="float:left; width:47%; padding:5px;"> | ||
| Line 19: | Line 18: | ||
==Alerts and regular in-page content== | ==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: | + | '''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 to the content of the page on which the alert appears - in this case place the alert next to the updated content | ||
| Line 26: | Line 25: | ||
==Alerts: do’s and dont’s== | ==Alerts: do’s and dont’s== | ||
| − | Do: | + | '''Do:''' |
*Use alerts on a temporary basis - retain only for days or weeks | *Use alerts on a temporary basis - retain only for days or weeks | ||
*Place the alert at the point of service/task | *Place the alert at the point of service/task | ||
| Line 33: | Line 32: | ||
**On institutional landing pages, only use when > 40% of users are impacted | **On institutional landing pages, only use when > 40% of users are impacted | ||
| − | Don’t: | + | '''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 | *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 | *Use them to ‘highlight’ permanent content | ||
| Line 41: | Line 40: | ||
*For this page, use the basic page layout pattern | *For this page, use the basic page layout pattern | ||
| − | |||
*Page content should: | *Page content should: | ||
| Line 60: | Line 58: | ||
</section> | </section> | ||
| − | Alert samples | + | Alert samples (need link) |
</div> | </div> | ||
| Line 66: | Line 64: | ||
<div lang="fr" id="fra"><div class="alet-nav"></div> | <div lang="fr" id="fra"><div class="alet-nav"></div> | ||
<div style="float:left; width:47%; padding:5px;"> | <div style="float:left; width:47%; padding:5px;"> | ||
| − | <!--PLACE FRENCH TEXT BELOW THIS LINE AND ABOVE THE CLOSING DIV--> | + | <!--PLACE FRENCH TEXT BELOW THIS LINE AND ABOVE THE CLOSING DIV--></div> |
| − | </div> | ||
Revision as of 11:23, 13 March 2020
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">
Service disruption
This service is affected by the outbreak of coronavirus (COVID-19).
<a href="link to departmental service status page">Check service status</a>
</section>
Alert samples (need link)
