11
edits
Changes
Jump to navigation
Jump to search
Line 5:
Line 5: + + + + + + Line 16:
Line 22: + Line 23:
Line 30: − + Line 29:
Line 36: − + − + + + + + − *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+ − *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+ Line 49:
Line 60: − + + + + + − <nowiki><h3>Limited service availability</nowiki>+ − + − <nowiki></h3></nowiki>+ − + − <nowiki><p>This service is affected by the outbreak of coronavirus (COVID-19).</nowiki>+ − − <nowiki></p></nowiki> − − <nowiki><p><a href="#">Check service status updates </a></nowiki> − − <nowiki></p></nowiki> − − </section> − − − + + + + + + Line 103:
Line 113: − *Lorsque vous utilisez plusieurs alertes à différents endroits concernant le même problème ou la même situation, créez une page résumant les interruptions de service actuelles dans l'ensemble de l'organisation et créez un lien vers cette page à partir des alertes concernées.+ − *Le contenu de la page devrait :+ − **résumer les services concernés dans un langage simple+ − **expliquez les conséquenes sur les utilisateurs des services concernés+ − **être mis à jour dès que de nouvelles informations sont disponibles+ Line 114:
Line 124: − + − + − + − + − + − − *[https://design.canada.ca/alerts-alertes/alertes-fr.html Exemples en français] − *[https://design.canada.ca/alerts-alertes/alerts-en.html Exemples en anglais] + + + + +
Canada.ca warnings and service disruptions - Alertes et perturbations de service Canada.ca (view source)
Revision as of 13:50, 15 March 2020
, 13:50, 15 March 2020→Table des matières
<div style="float:left; width:47%; padding:5px;">
<div style="float:left; width:47%; padding:5px;">
<!--PLACE ENGLISH TEXT BELOW THIS LINE AND ABOVE THE CLOSING DIV-->
<!--PLACE ENGLISH TEXT BELOW THIS LINE AND ABOVE THE CLOSING DIV-->
==Table of contents==
*[[#Proposed_approach_-_contextual_alerts|Proposed approach - contextual alerts]]
*[[#Alerts_and_regular_in-page_content|Alerts and regular in-page content]]
*[[#Alerts:_do’s_and_don’ts|Alerts: do’s and don’ts]]
*[[#Multiple_alerts_about_the_same_issue/situation|Multiple alerts about the same issue/situation]]
*[[#Code_and_samples|Code and samples]]
==Proposed approach - contextual alerts==
==Proposed approach - contextual alerts==
**be tailored to the page on which it appears
**be tailored to the page on which it appears
**include a single link to where updates are available
**include a single link to where updates are available
<br>
==Alerts and regular in-page content==
==Alerts and regular in-page 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
*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==
==Alerts: do’s and don’ts==
'''Do:'''
'''Do:'''
*place the alert at the point of service/task
*place the alert at the point of service/task
*save alerts for significant situations that impact most users:
*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 the Canada.ca home page, only use when more than 50% of the population is affected
**on institutional landing pages, only use when > 40% of users are impacted
**on institutional landing pages, only use when more than 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
*Don't use them to ‘highlight’ permanent content
*Don't use them to ‘highlight’ permanent content
<br>
<br>
<br>
==Multiple alerts about the same issue/situation==
==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, and link to it from the relevant alerts.
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==
==Code and samples==
Code:
Code:
<section class="alert alert-warning">
<nowiki><section class="alert alert-warning"></nowiki>
<nowiki> <h3>Limited service availability</h3></nowiki>
<nowiki> <p>This service is affected by the outbreak of coronavirus (COVID-19).</p></nowiki>
<nowiki> <p><a href="link-to-summary-page">Check service status updates </a></p></nowiki>
<nowiki></section></nowiki>
==== Examples ====
*[https://design.canada.ca/alerts-alertes/alerts-en-sit.html On a service initiation page]
*[https://design.canada.ca/alerts-alertes/alerts-en-contact.html On a contact page]
*[https://design.canada.ca/alerts-alertes/alerts-en-ilp.html On a beta institutional landing page]
*[https://design.canada.ca/alerts-alertes/alerts-en-stable-ip.html On an institutional profile]
*[https://design.canada.ca/alerts-alertes/alerts-en.html English samples]
*[https://design.canada.ca/alerts-alertes/alertes-fr.html French samples]
</div>
</div>
<!--START French column, do not touch this code-->
<!--START French column, do not touch this code-->
<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;"> <!--PLACE FRENCH TEXT BELOW THIS LINE AND ABOVE THE CLOSING DIV-->
<div style="float:left; width:47%; padding:5px;"> <!--PLACE FRENCH TEXT BELOW THIS LINE AND ABOVE THE CLOSING DIV-->
==Table des matières==
*[[#Approche_proposée_-_Alertes_contextuelles|Approche proposée - Alertes contextuelles]]
*[[#Alertes_et_contenu_r.C3.A9gulier_des_pages|Alertes et contenu régulier des pages]]
*[[#Alertes:_quoi_faire_et_ne_pas_faire|Alertes: quoi faire et ne pas faire]]
*[[#Alertes_multiples_sur_la_m.C3.AAme_question.2Fsituation|Alertes multiples sur la même question/situation]]
*[[#Code_et_exemples|Code et exemples]]
==Approche proposée - Alertes contextuelles==
==Approche proposée - Alertes contextuelles==
==Alertes multiples sur la même question/situation==
==Alertes multiples sur la même question/situation==
Lorsque vous utilisez plusieurs alertes à différents endroits concernant le même problème ou la même situation, créez une page résumant les interruptions de service actuelles dans l'ensemble de l'organisation et créez un lien vers cette page à partir des alertes concernées.
Le contenu de la page devrait :
*résumer les services concernés dans un langage simple
*expliquez les conséquenes sur les utilisateurs des services concernés
*être mis à jour dès que de nouvelles informations sont disponibles
==Code et exemples==
==Code et exemples==
Code:
Code:
<nowiki><section class="alert alert-warning"></nowiki>
<nowiki><section class="alert alert-warning"></nowiki>
<nowiki><h3>Perturbation de service</h3></nowiki>
<nowiki> <h3>Perturbation de service</h3></nowiki>
<nowiki><p>Ce service est touché par l'épidémie de coronavirus (COVID-19).</p></nowiki>
<nowiki> <p>Ce service est touché par l'épidémie de coronavirus (COVID-19).</p></nowiki>
<nowiki><p><a href="lien à la page d'état du service de l'institution>Consulter les mises à jour de l'état du service</a></p></nowiki>
<nowiki> <p><a href="lien à la page d'état du service de l'institution">Consulter les mises à jour de l'état du service</a></p></nowiki>
<nowiki></section></nowiki>
<nowiki></section></nowiki>
==== Exemples ====
*[https://design.canada.ca/alerts-alertes/alertes-fr-sit.html Sur une page de lancement de service]
*[https://design.canada.ca/alerts-alertes/alertes-fr-contact.html Sur une page de contact]
*[https://design.canada.ca/alerts-alertes/alertes-fr-ilp.html Sur une page d'accueil institutionnelle bêta]
*[https://design.canada.ca/alerts-alertes/alertes-fr-profil-inst-stable.html Sur une page de profil institutionnel]
</div>
</div>
