You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: en/_posts/2020-12-17-choosing-buttons.md
+43-33Lines changed: 43 additions & 33 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,16 +1,18 @@
1
1
---
2
2
altLangPage: "/2020/12/17/choisir-des-boutons"
3
-
date: 2020-12-17
3
+
css: "../../../css/blog.css"
4
+
date: 2020-12-17
4
5
description: "The super task button is a large-ish, attractive green button and it really gets your attention!...How using the right button style in the right situation can help people succeed better on your web page."
5
-
title: "Choosing the right button for task success"
6
+
title: "Choosing the right button for task success"
6
7
---
8
+
7
9
Buttons are a design element that let you add interaction to a page.
8
10
9
11
Consider using buttons when:
10
12
11
-
* helping a person into or through a transaction such as “Sign in”
12
-
* invoking functionality, for example “Share this page”
13
-
* providing a persistent set of UI controls across a series of pages, for example “previous”, “next”, or “back to table of contents”
13
+
- helping a person into or through a transaction such as “Sign in”
14
+
- invoking functionality, for example “Share this page”
15
+
- providing a persistent set of UI controls across a series of pages, for example “previous”, “next”, or “back to table of contents”
14
16
15
17
Don’t use buttons when an ordinary text link will do the job just as well. Overuse reduces their visual impact.
16
18
@@ -30,13 +32,15 @@ Use this button to launch the main task or next step - **when that task or step
30
32
31
33
We first used the super task button on the CRA institutional landing page. There, the majority of visitors are looking for how and where to sign into one of their CRA accounts. Since that’s what most people are there to do, the CRA makes it easy by placing the “Sign in to a CRA account” super task button right at the top of the page.
32
34
33
-
<figure>
34
-
<imgclass="img-responsive border"alt="A long description can be found after the image."src="/images/green-button-1.PNG">
35
+
<figureclass="gc-complex-img"role="group">
36
+
<imgalt="A long description can be found after the image."src="/images/green-button-1.PNG">
<p>Super task button appears directly below the main title of the page, ahead of other content.</p>
39
-
</details>
40
44
41
45
In the spring of 2020, when the Coronavirus landing page was receiving extremely heavy traffic, anxiety about the virus was high. Call centres were swamped with people wanting to check their symptoms to see if they had COVID-19. To support them, we worked with Health Canada to add a super task button at the top of the page. It led to the newly developed symptoms checker. Again, this worked well because it provided an answer for a key task visitors were coming to the page for at that time. The super task button at the top of the page supported users and redirected them to web content instead of call centres.
42
46
@@ -46,13 +50,15 @@ There are times when using a super task button makes sense, but placing it furth
46
50
47
51
For example, the Canada Recovery Benefit uses a green “Sign in to your CRA my account” button part way down the “How to apply” page.
48
52
49
-
<figure>
50
-
<imgclass="img-responsive border"alt="A long description can be found after the image."src="/images/apply-online-1.PNG">
53
+
<figureclass="gc-complex-img"role="group">
54
+
<imgalt="A long description can be found after the image."src="/images/apply-online-1.PNG">
55
+
<figcaption>
56
+
<details>
57
+
<summary>Canada Recovery Benefit - How to apply</summary>
58
+
<p>Super task button appears part way down the page, below the in the Apply online or by phone heading</p>
59
+
</details>
60
+
</figcaption>
51
61
</figure>
52
-
<details>
53
-
<summary>Canada Recovery Benefit - How to apply</summary>
54
-
<p>Super task button appears part way down the page, below the in the Apply online or by phone heading</p>
55
-
</details>
56
62
57
63
In this case, the button appears part way down the page. At that point, users have everything they need to be ready to launch into the process of applying. For the vast majority of people on the page, clicking that button is the reason they’re there. However, since there are a few things they need to know before they begin, the button is where it needs to be to ensure task success.
58
64
@@ -80,28 +86,34 @@ The secondary task button is useful for alternate steps in a process - like a
80
86
81
87
Notice how the primary and secondary task buttons work together in this survey invitation to distinguish between “Yes” as the primary action to take, and “No” as the alternate option.
82
88
83
-
<figure>
84
-
<imgclass="img-responsive border"alt="A long description can be found after the image."src="/images/improve-CA.PNG">
89
+
<figureclass="gc-complex-img"role="group">
90
+
<imgalt="A long description can be found after the image."src="/images/improve-CA.PNG">
91
+
<figcaption>
92
+
<details>
93
+
<summary class="stretched-link">Example of primary and secondary task buttons</summary>
94
+
<p>Example of primary and secondary task buttons working together.</p>
95
+
</details>
96
+
</figcaption>
85
97
</figure>
86
-
<details>
87
-
<summary>Example of primary and secondary task buttons</summary>
88
-
<p>Example of primary and secondary task buttons working together.</p>
89
-
</details>
90
98
91
99
## Danger and link buttons
92
100
93
101
The Canada.ca design system includes 2 other button styles or patterns as well.
94
102
95
103
The danger button is an option when an action may have unintended consequences. Leaving an authenticated application or deleting the contents of a form are examples of correct use cases. Use this button sparingly.
Finally, the link button pattern offers an option for a rarely used action that must not compete with a primary or secondary task button. You wouldn’t want those controls to compete with the “Submit” button, but you might want to style the control as a button for consistency, or to provide a slightly larger target area than rectangular links.
description: "Le super bouton de tâche est un bouton vert attrayant relativement gros, et il attire vraiment votre attention! La façon d'utiliser le bon style de bouton dans la bonne situation peut aider les gens à mieux réussir sur votre page Web."
5
-
title: "Choisir le bon bouton pour la réussite des tâches"
6
+
title: "Choisir le bon bouton pour la réussite des tâches"
6
7
---
8
+
7
9
Les boutons consistent en un élément de conception qui vous permet d'ajouter une interaction à une page.
8
10
9
11
Pensez à utiliser des boutons dans les cas suivants :
10
12
11
-
*aider une personne à amorcer ou à mener à bien une transaction (un bouton « Se connecter », par exemple);
12
-
*invoquer une fonction, comme « Partager cette page »;
13
-
*offrir un ensemble permanent de commandes d'interface utilisateur dans une série de pages, par exemple « précédent », « suivant », ou « retour à la table des matières ».
13
+
-aider une personne à amorcer ou à mener à bien une transaction (un bouton « Se connecter », par exemple);
14
+
-invoquer une fonction, comme « Partager cette page »;
15
+
-offrir un ensemble permanent de commandes d'interface utilisateur dans une série de pages, par exemple « précédent », « suivant », ou « retour à la table des matières ».
14
16
15
17
N'utilisez pas de boutons lorsqu'un lien de texte ordinaire fera tout autant l'affaire. La surutilisation de ces derniers réduit leur efficacité visuelle.
16
18
@@ -30,15 +32,17 @@ Utilisez ce bouton pour lancer la tâche principale ou l'étape suivante – **l
30
32
31
33
Nous avons d'abord utilisé le bouton de super tâche à partir de la page d'accueil institutionnelle de l'Agence du revenu du Canada (ARC). À partir de là, la majorité des visiteurs cherchent comment et où ouvrir une session dans l'un de leurs comptes de l'ARC. Puisque c'est ce que la plupart des gens font, l'ARC facilite les choses en plaçant le bouton « Se connecter à un compte de l'ARC » au haut de la page.
32
34
33
-
34
-
<figure>
35
-
<imgclass="img-responsive border"alt="Une longue description peut être trouvée après l'image."src="/images/bouton-2.PNG">
<img class="img-responsive center-block" alt="Une longue description peut être trouvée après l'image." src="/images/bouton-2.PNG">
38
+
<figcaption>
39
+
<details>
40
+
<summary class="stretched-link">Agence du revenu du Canada – page d'accueil institutionnelle</summary>
41
+
<p>Le bouton de super tâche apparaît directement sous le titre principal de la page, avant les autres contenus.</p>
42
+
</details>
43
+
</figcaption>
44
+
</div>
36
45
</figure>
37
-
<details>
38
-
<summary>Agence du revenu du Canada – page d'accueil institutionnelle</summary>
39
-
<p>Le bouton de super tâche apparaît directement sous le titre principal de la page, avant les autres contenus.</p>
40
-
</details>
41
-
42
46
43
47
Au printemps 2020, alors que la page d'accueil du Coronavirus recevait un trafic extrêmement important, l'anxiété à propos du virus était grande. Les centres d'appels étaient submergés de personnes qui voulaient vérifier leurs symptômes pour savoir si elles étaient atteintes du COVID-19. Pour les aider, nous avons travaillé avec Santé Canada pour ajouter un bouton de super tâche en haut de la page. Le bouton donnait accès au nouvel outil de vérification des symptômes. Encore une fois, cela a bien fonctionné car il a fourni une réponse à une tâche clé pour laquelle les visiteurs venaient sur la page à ce moment-là. Le bouton de super tâche situé en haut de la page a permis de soutenir les utilisateurs et de les rediriger vers le contenu du site web plutôt que vers les centres d'appels.
44
48
@@ -48,15 +52,17 @@ Il y a des circonstances où il est logique d'utiliser un bouton de super tâche
48
52
49
53
Par exemple, le site réservé à la Prestation canadienne de la relance économique (PCRE) comporte un bouton vert associé à la mention « Se connecter à mon dossier de l'ARC » situé plus bas dans la page « Comment faire une demande ».
50
54
51
-
52
-
<figure>
53
-
<imgclass="img-responsive border"alt="Une longue description peut être trouvée après l'image."src="/images/ARC-2.PNG">
<img class="img-responsive center-block" alt="Une longue description peut être trouvée après l'image." src="/images/ARC-2.PNG">
58
+
<figcaption>
59
+
<details>
60
+
<summary class="stretched-link">Prestation de rétablissement du Canada – Comment faire une demande</summary>
61
+
<p>Le bouton de super tâche apparaît sous l'en-tête « Postuler en ligne ou par téléphone » </p>
62
+
</details>
63
+
</figcaption>
64
+
</div>
54
65
</figure>
55
-
<details>
56
-
<summary>Prestation de rétablissement du Canada – Comment faire une demande</summary>
57
-
<p>Le bouton de super tâche apparaît sous l'en-tête « Postuler en ligne ou par téléphone » </p>
58
-
</details>
59
-
60
66
61
67
Dans ce cas, le bouton apparaît plus bas dans la page. À ce moment-là, les utilisateurs disposent de tout ce dont ils ont besoin pour être prêts à faire une demande. Pour la grande majorité des gens qui accèdent à la page, la raison pour laquelle ils le font consiste à cliquer sur ce bouton. Cependant, comme ils doivent savoir certaines choses avant de commencer, le bouton est là où il doit être pour assurer la réussite de la tâche.
62
68
@@ -84,44 +90,43 @@ Le bouton de tâche secondaire est utile pour d'autres étapes d'un processus, c
84
90
85
91
Remarquez comment les boutons de tâche primaire et secondaire fonctionnent de concert dans cette invitation au sondage pour faire la distinction entre « Oui » comme action principale à prendre et « Non » comme option de rechange.
86
92
87
-
88
-
<figure>
89
-
<imgclass="img-responsive border"alt="Une longue description peut être trouvée après l'image."src="/images/pouvez-vous.PNG">
93
+
<figureclass="gc-complex-img"role="group">
94
+
<imgalt="Une longue description peut être trouvée après l'image."src="/images/pouvez-vous.PNG">
95
+
<figcaption>
96
+
<details>
97
+
<summary>Exemple de boutons de tâches primaires et secondaires</summary>
98
+
<p>Une invitation à participer à un sondage sur Canada.ca utilise le style de la tâche principale pour l'option "Oui, après ma visite", et le style de la tâche secondaire pour l'option "Non, merci".</p>
99
+
</details>
100
+
</figcaption>
90
101
</figure>
91
-
<details>
92
-
<summary>Exemple de boutons de tâches primaires et secondaires</summary>
93
-
<p>Une invitation à participer à un sondage sur Canada.ca utilise le style de la tâche principale pour l'option "Oui, après ma visite", et le style de la tâche secondaire pour l'option "Non, merci".</p>
94
-
</details>
95
-
96
102
97
103
## Boutons danger et lien
98
104
99
105
Le système de conception de Canada.ca comprend également deux autres styles ou configurations de boutons.
100
106
101
107
Le bouton danger consiste en une option lorsqu'une action peut avoir des conséquences imprévues. Laisser une application authentifiée et supprimer le contenu d'un formulaire constituent des exemples de cas d'utilisation adéquats. Utilisez ce bouton avec parcimonie.
102
108
103
-
104
-
<divclass="pattern-demo mrgn-bttm-md">
105
-
<buttonclass="btn btn-danger">Effacer le formulaire</button>
109
+
<divclass="panel panel-default">
110
+
<figureclass="panel-body">
111
+
<button type="button" class="btn btn-danger center-block">Effacer le formulaire</button>
112
+
</figure>
106
113
</div>
107
114
108
-
109
115
Enfin, la configuration de bouton lien offre une option pour une action rarement utilisée qui ne doit pas entrer en concurrence avec un bouton de tâche primaire ou secondaire. Vous ne voudriez pas que ces commandes entrent en concurrence avec le bouton « Soumettre », mais vous pourriez vouloir concevoir la commande sous la forme d'un bouton pour assurer l'uniformité, ou pour fournir une zone cible légèrement plus grande que les liens ordinaires.
110
116
111
-
112
-
<divclass="pattern-demo mrgn-bttm-md">
113
-
<buttonclass="btn btn-link">Redémarrer le calculateur</button>
117
+
<divclasss="panel panel-deafult">
118
+
<figureclass="panel-body">
119
+
<button type="button" class="btn btn-link center-block">Redémarrer le calculateur</button>
120
+
</figure>
114
121
</div>
115
122
116
-
117
123
## Mot de la fin
118
124
119
125
La plupart du temps, vous n'avez pas besoin de boutons sur une page Web – des liens texte simples suffisent souvent. Lorsque vous utilisez un bouton, veillez à en limiter l'utilisation. Dans une situation où vous devez utiliser plusieurs boutons sur une seule page, utilisez différents styles pour créer une hiérarchie. Cela permet d'éviter que les boutons se fassent concurrence. Plus l'action est commune ou importante, plus le bouton y étant associé doit se démarquer. Choisir le bon style de bouton vous permet de signaler l'importance relative d'une action par rapport à une autre. Il vous aide à créer un enchaînement logique dans votre processus ou votre contenu.
120
126
121
127
## Pour en savoir davantage
122
128
123
-
*[Boutons – Configuration de conception de Canada.ca](https://conception.canada.ca/configurations-conception-communes/boutons.html)
124
-
*[Promotions contextuelles - Configuration de conception de Canada.ca ](https://conception.canada.ca/configurations-conception-communes/vignettes-promotionnelles.html)
125
-
*[Agence du revenu du Canada – page d'accueil institutionnelle](https://www.canada.ca/fr/agence-revenu.html)
126
-
*[Prestation de rétablissement du Canada – Comment faire une demande](https://www.canada.ca/fr/agence-revenu/services/prestations/prestation-relance-economique/pcre-comment-demande.html)
127
-
129
+
-[Boutons – Configuration de conception de Canada.ca](https://conception.canada.ca/configurations-conception-communes/boutons.html)
130
+
-[Promotions contextuelles - Configuration de conception de Canada.ca ](https://conception.canada.ca/configurations-conception-communes/vignettes-promotionnelles.html)
131
+
-[Agence du revenu du Canada – page d'accueil institutionnelle](https://www.canada.ca/fr/agence-revenu.html)
132
+
-[Prestation de rétablissement du Canada – Comment faire une demande](https://www.canada.ca/fr/agence-revenu/services/prestations/prestation-relance-economique/pcre-comment-demande.html)
0 commit comments