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