Les boutons consistent en un élément de conception qui vous permet d’ajouter une interaction à une page.
Pensez à utiliser des boutons dans les cas suivants :
- aider une personne à amorcer ou à mener à bien une transaction (un bouton « Se connecter », par exemple);
- invoquer une fonction, comme « Partager cette page »;
- 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 ».
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.
La configuration des boutons dans le système de conception de Canada.ca comprend cinq styles de boutons différents. Utiliser le bon style dans la bonne situation peut aider les gens à mieux naviguer sur votre page Web.
Boutons – Configuration de conception de Canada.ca
Le bouton de super tâche
Parmi les options de boutons dans le système de conception se trouve le bouton de super tâche. Il s’agit d’un gros bouton vert attrayant qui attire vraiment votre attention! Ce bouton peut être puissant… mais « un grand pouvoir implique de grandes responsabilités ».
Alors, comment doit-on utiliser ce bouton adéquatement?
Utilisez ce bouton pour lancer la tâche principale ou l’étape suivante – lorsque cette tâche ou cette étape correspond à ce que la majorité des visiteurs de la page doivent faire.
Un moment pour le haut de la page
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.
Agence du revenu du Canada – page d'accueil institutionnelle
Le bouton de super tâche apparaît directement sous le titre principal de la page, avant les autres contenus.
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.
Un moment pour le milieu de la page
Il y a des circonstances où il est logique d’utiliser un bouton de super tâche, mais le placer plus bas dans la page est plus efficace que de l’avoir en haut.
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 ».
Prestation de rétablissement du Canada – Comment faire une demande
Le bouton de super tâche apparaît sous l'en-tête « Postuler en ligne ou par téléphone »
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.
Éviter d’utiliser le bouton de super tâche pour la promotion
Que se passe-t-il lorsque vous utilisez le bouton de super tâche pour promouvoir quelque chose qui n’est pas la tâche principale que les gens recherchent sur cette page?
Faire en sorte que les gens téléchargent l’application COVIDAlert a été une priorité essentielle pour le gouvernement du Canada, alors que les cas de COVID-19 augmentent et que la recherche des contacts devient plus difficile. Ce bouton vert était une manière tentante d’essayer d’attirer l’attention des gens.
Lorsque le bouton de super tâche était placé sur des pages où il n’était pas directement lié au contenu de la page, le bouton n’était pas efficace.
Ces résultats moins concluants étaient dus au fait que les gens n’étaient pas venus sur ces pages pour télécharger l’application. Ils ont vu alors le bouton davantage comme une publicité qui faisait obstacle à ce qu’ils cherchaient. Le résultat? Ils n’en ont pas tenu compte.
Ainsi, non seulement l’ajout du bouton sur ces pages n’a pas donné les résultats escomptés, mais les gens ont vu en ce dernier un élément irritant plutôt que quelque chose d’utile. Un contenu Web efficace respecte les conventions du Web. Autrement dit, plus le contenu Web est prévisible, plus il est facile à utiliser. Les promotions devraient ressembler à des promotions, et pas à des boutons. Ils ne devraient pas nuire à la tâche première pour laquelle la page est destinée. Les promotions devraient plutôt apparaître à la fin d’une tâche, comme une mesure de courtoisie, une option ou quelque chose destiné à enrichir l’expérience.
Nous parlerons davantage de la façon de présenter les promotions de manière efficace dans un prochain billet de blogue.
Boutons de super tâche par rapport aux boutons de tâche primaire ou secondaire
Nous avons établi que le bouton de super tâche fonctionne bien lorsque nous voulons qu’il soit extrêmement facile d’accéder à la tâche ou au processus que la plupart des gens qui accèdent à une page tentent d’accomplir.
Une fois que les gens accèdent au processus, il est temps d’utiliser le bouton de tâche primaire. Ce bouton se démarque un peu moins que le bouton de super tâche, mais il prend toujours en charge la tâche principale sur la page. Ainsi, le bouton semble faire partie du processus et appuie une logique claire de la « prochaine étape » pour les utilisateurs. Utilisez ce bouton pour les actions que quelqu’un est susceptible d’exécuter sur la page, comme « soumettre » ou « suivant ».
Le bouton de tâche secondaire est utile pour d’autres étapes d’un processus, comme un bouton « précédent ». Utilisez-le pour les étapes qui constituent « le chemin le moins fréquenté ».
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.
Exemple de boutons de tâches primaires et secondaires
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".
Boutons danger et lien
Le système de conception de Canada.ca comprend également deux autres styles ou configurations de boutons.
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.
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.
Mot de la fin
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.