Difference between revisions of "Canada.ca warnings and service disruptions - Alertes et perturbations de service Canada.ca"
David.pepin (talk | contribs) |
|||
(26 intermediate revisions by 2 users not shown) | |||
Line 5: | Line 5: | ||
<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== | ||
Line 16: | Line 22: | ||
**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== | ||
Line 23: | Line 30: | ||
*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 | + | ==Alerts: do’s and don’ts== |
'''Do:''' | '''Do:''' | ||
Line 29: | Line 36: | ||
*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 | + | **on the Canada.ca home page, only use when more than 50% of the population is affected |
− | **on institutional landing pages, only use when | + | **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== | ||
More information about contextual alerts can be found in the Canada.ca design system. | More information about contextual alerts can be found in the Canada.ca design system. | ||
− | Code: | + | Code: |
− | < | + | |
− | <section class="alert alert-warning"> | + | <nowiki><section class="alert alert-warning"></nowiki> |
− | <h3> | + | <nowiki> <h3>Limited service availability</h3></nowiki> |
− | <p>This service is affected by the outbreak of coronavirus (COVID-19). | + | <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> | |
− | <p><a href="link to | + | <nowiki></section></nowiki> |
− | |||
− | </section> | ||
− | </ | ||
− | |||
− | *[https://design.canada.ca/alerts-alertes/alertes- | + | ==== 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] | ||
</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== | ||
Line 96: | Line 113: | ||
==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== | ||
Line 107: | Line 124: | ||
Code: | Code: | ||
− | <section class="alert alert-warning"> | + | <nowiki><section class="alert alert-warning"></nowiki> |
− | <h3>Perturbation de service</h3> | + | <nowiki> <h3>Perturbation de service</h3></nowiki> |
− | <p>Ce service est touché par l'épidémie de coronavirus (COVID-19). | + | <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> | |
− | <p><a href="lien à la page d'état du service de l'institution>Consulter les mises à jour de l'état du service</a> | + | <nowiki></section></nowiki> |
− | |||
− | </section> | ||
− | |||
− | |||
− | |||
+ | ==== 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> |
Latest revision as of 13:50, 15 March 2020
Table of contents
- Proposed approach - contextual alerts
- Alerts and regular in-page content
- Alerts: do’s and don’ts
- Multiple alerts about the same issue/situation
- Code and samples
Proposed approach - contextual alerts
- Use the contextual alert pattern:
- 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 don’ts
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 more than 50% of the population is affected
- on institutional landing pages, only use when more than 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
- Don't 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, 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
More information about contextual alerts can be found in the Canada.ca design system.
Code:
<section class="alert alert-warning"> <h3>Limited service availability</h3> <p>This service is affected by the outbreak of coronavirus (COVID-19).</p> <p><a href="link-to-summary-page">Check service status updates </a></p> </section>
Examples
Table des matières
- Approche proposée - Alertes contextuelles
- Alertes et contenu régulier des pages
- Alertes: quoi faire et ne pas faire
- Alertes multiples sur la même question/situation
- Code et exemples
Approche proposée - Alertes contextuelles
- Utilisez les alertes contextuelles :
- Mettre en oeuvre aux points de prestation des services concernés, tels que les pages de lancement de service, les pages de contact, etc.
- Limiter la mise en oeuvre au-delà des points de prestation de service pour éviter la "fatigue d'alerte".
- Le contenu des alertes devrait :
- expliquer pourquoi le service est interrompu ou pourquoi l'alerte est nécessaire
- décrire les conséquences pour l'utilisateur
- être adapté à la page sur laquelle il figure
- inclure un lien unique vers les sites où les mises à jour sont disponibles
Alertes et contenu régulier des pages
N'utilisez pas les alertes comme un contenu régulier - elles sont plutôt destinées à attirer l'attention sur les changements au contenu régulier, de deux façons :
- une modification du contenu de la page sur laquelle le signalement apparaît - dans ce cas, placez le signalement à côté du contenu mis à jour
- un changement qui a été effectué ailleurs, comme la publication de nouveaux renseignements - dans ce cas, un lien vers les nouveaux renseignements placé dans l’alerte elle-même
Alertes: quoi faire et ne pas faire
À faire :
- Utiliser les alertes à titre temporaire uniquement - tout au plus pendant quelques jours ou quelques semaines.
- Placer l'alerte au point de service ou au niveau de la tâche.
- Utilisez des alertes uniquement pour les situations importantes qui touchent la plupart des utilisateurs :
- sur la page d'accueil de Canada.ca, n'utilisez que lorsque au moins 50 % de la population est touchée
- sur les pages d'accueil des institutions, à n'utiliser que lorsque > 40 % des utilisateurs sont concernés
À ne pas faire
- Avoir trop d'alertes - limiter le nombre d'alertes sur chaque page et le nombre d'alertes utilisées sur les différentes pages - idéalement 1, maximum 2.
- Ne les utilisez pas pour "mettre en évidence" le contenu permanent.
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
Vous trouverez plus d'informations sur les alertes contextuelles dans le système de conception de Canada.ca.
Code:
<section class="alert alert-warning"> <h3>Perturbation de service</h3> <p>Ce service est touché par l'épidémie de coronavirus (COVID-19).</p> <p><a href="lien à la page d'état du service de l'institution">Consulter les mises à jour de l'état du service</a></p> </section>