Changes

no edit summary
Line 11: Line 11:     
*Alert content should:
 
*Alert content should:
**Explain why service is disrupted or warning is required
+
**explain why service is disrupted or warning is required
**Describe the impact on the user
+
**describe the impact on the user
**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
    
==Alerts and regular in-page content==
 
==Alerts and regular in-page content==
Line 25: Line 25:     
'''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
*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 > 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 > 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
+
*Don't use them to ‘highlight’ permanent content
    
==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, & link to it from the relevant alerts
  −
*For this page, use the basic page layout pattern
      
*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==
Line 57: Line 55:  
</section>
 
</section>
   −
[https://design.canada.ca/alerts-alertes/alerts-en.html English samples]
+
*[https://design.canada.ca/alerts-alertes/alerts-en.html English samples]
   −
[https://design.canada.ca/alerts-alertes/alertes-fr.html French samples]
+
*[https://design.canada.ca/alerts-alertes/alertes-fr.html French samples]
 
</div>
 
</div>
 
[https://design.canada.ca/alerts-alertes/alertes-fr.html <!--START French column, do not touch this code-->]
 
[https://design.canada.ca/alerts-alertes/alertes-fr.html <!--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>
+
<div style="float:left; width:47%; padding:5px;"> <!--PLACE FRENCH TEXT BELOW THIS LINE AND ABOVE THE CLOSING DIV-->
 +
===Lignes directrices pour alerter les visiteurs de Canada.ca===
 +
==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>
 +
 
 +
[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]
 +
 
 +
</div>
112

edits