Difference between revisions of "Canada.ca warnings and service disruptions - Alertes et perturbations de service Canada.ca"

From wiki
Jump to navigation Jump to search
 
(29 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 dont’s==
+
==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 > 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, & link to it from the relevant alerts
+
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:
+
Page content should:
**summarize affected services in plain language
+
*summarize affected services in plain language
**explain the impact on the users of affected services
+
*explain the impact on the users of affected services
**be updated as soon as new information arises
+
*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">
 
  <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>
 
  
*[https://design.canada.ca/alerts-alertes/alerts-en.html English samples]
+
  <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>
  
*[https://design.canada.ca/alerts-alertes/alertes-fr.html French samples]
+
==== 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>
[https://design.canada.ca/alerts-alertes/alertes-fr.html <!--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 95: 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.
+
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 :
+
Le contenu de la page devrait :
**résumer les services concernés dans un langage simple
+
*résumer les services concernés dans un langage simple
**expliquez les conséquenes sur les utilisateurs des services concernés
+
*expliquez les conséquenes sur les utilisateurs des services concernés
**être mis à jour dès que de nouvelles informations sont disponibles
+
*être mis à jour dès que de nouvelles informations sont disponibles
  
 
==Code et exemples==
 
==Code et exemples==
Line 106: 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>
  </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></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>
  </p>
 
</section>
 
 
 
*[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]
 
  
 +
==== 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 14:50, 15 March 2020

Table of contents

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

  • 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>

Exemples