Line 1: |
Line 1: |
| + | __NOTOC__ |
| <!--THE CODE BELOW THIS LINE CREATES THE TWO-COLUMN FR/EN LAYOUT--> | | <!--THE CODE BELOW THIS LINE CREATES THE TWO-COLUMN FR/EN LAYOUT--> |
| <div id="alet-skip"><!--START English column, do not touch this code--></div> | | <div id="alet-skip"><!--START English column, do not touch this code--></div> |
| <div lang="en" id="eng"><div class="alet-nav"></div> | | <div lang="en" id="eng"><div class="alet-nav"></div> |
| <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-->=== Guidance for alerting Canada.ca visitors === | + | <!--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== |
− | *Use contextual alert patterns: | + | *Use the [https://design.canada.ca/common-design-patterns/contextual-alerts.html contextual alert pattern]: |
| **Apply at impacted points of service delivery, such as service initiation pages, contact pages, etc. | | **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” | | **Limit application beyond service delivery points to avoid “alert fatigue” |
Line 15: |
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 22: |
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 28: |
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--> |
− | ===Lignes directrices pour alerter les visiteurs de Canada.ca=== | + | ==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== |
− | *Utilisez les alertes contextuelles : | + | *Utilisez les [https://conception.canada.ca/configurations-conception-communes/alertes-contextuelles.html 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. | | **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". | | **Limiter la mise en oeuvre au-delà des points de prestation de service pour éviter la "fatigue d'alerte". |
Line 94: |
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 105: |
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> |