Les boutons d'action sont des objets interactifs cliquables incitant l'utilisateur à déclencher une action précise dans un contexte établi. Ils servent à attirer l'attention sur une action à poser, comme télécharger un formulaire ou avancer dans un processus.

Types de boutons

Il existe trois types de boutons d'action dans le site Web de Revenu Québec. Comme leur degré d'importance varie, ils n'ont pas la même apparence visuelle.

 

Chacun d'entre eux peut être accompagné d'une icône si l'on désire mettre encore plus l'accent sur l'action à accomplir. 

Bouton d'action principal 

Le bouton principal est toujours de couleur bleu opaque. Il sert à attirer l'attention sur l'action principale à accomplir dans une page.

Il peut être utilisé pour différentes raisons, notamment les suivantes : 

• passer à la prochaine étape d'un questionnaire;
• télécharger un document;
• filtrer des résultats;
• fermer une fenêtre modale. 

Bouton secondaire

Le bouton secondaire n'est jamais utilisé seul; il accompagne toujours le bouton principal. Son apparence est plus discrète que le bouton principal, mais plus contrastée que le bouton fantôme (ghost button).

Il peut être utilisé pour 

• proposer une action secondaire à l'utilisatrice ou à l'utilisateur dans une page;
• revenir en arrière ou annuler une action dans un processus transactionnel.

Bouton fantôme

Comme son nom l'indique, le bouton fantôme a une apparence plus subtile que les autres. Il n'a aucune couleur de remplissage, ni aucun contour. Ce n'est qu'au survol de la souris qu'il prend l'apparence d'un bouton.  

Il est la plupart du temps jumelé au bouton principal et au bouton secondaire afin d'afficher une troisième action de moindre importance comparativement aux deux autres.

Utilisation

Les boutons d'action sont utilisés stratégiquement pour attirer l'attention sur des actions ou des tâches à accomplir. 

Voici les endroits où on les utilise le plus souvent dans l'interface utilisateur : 

• Carrousel promo de la page d'accueil;
• Fenêtres modales;  
• Questionnaires interactifs;
• Listes filtrables;
• Pages de téléchargement ou guides HTML.

États

Les boutons doivent répondre aux actions commandées par la souris et le clavier. Par conséquent, les boutons ont trois états d'interaction distincts.

État actif

Il indique que l'utilisatrice ou l'utilisateur peut cliquer sur le bouton. C'est l'état que les utilisatrices et utilisateurs voient le plus souvent sur une page quand le focus n'est pas sur le bouton.

État au survol

Il apparaît lorsque l'utilisatrice ou l'utilisateur survole le bouton avec le curseur. En général, la couleur du bouton change légèrement et le pointeur se transforme en main pour indiquer qu'une action est possible.

État au focus

Il ne s'affiche que lorsque l'utilisatrice ou l'utilisateur navigue au clavier. C'est un indicateur visuel qui permet à cette dernière ou à ce dernier de savoir où elle ou il se situe dans la page par rapport aux éléments interactifs.

Emplacement

Généralement, lorsqu'un bouton d'action principal est utilisé seul, il doit être placé en bas du contenu auquel il se réfère et être aligné à gauche. S'il se trouve dans une fenêtre modale, il sera plutôt placé au bas de la fenêtre et aligné à droite.

S'il y a plus d'un bouton principal dans une même page de contenu, ceux-ci doivent être positionnés les uns au-dessus des autres.

Le bouton secondaire apparaît généralement à gauche du bouton principal, mais son emplacement peut varier, selon le contexte d'utilisation.  

Libellés 

Le libellé d'un bouton d'action annonce généralement l'action qui se produit lorsque l'utilisatrice ou l'utilisateur interagit avec celui-ci.

Il comporte en général un verbe à l'infinitif pour inviter l'utilisatrice ou l'utilisateur à passer à l'action. Celui-ci doit être court et représentatif du résultat de l'action tout en étant le moins ambigu possible quant à sa fonction dans la page.

Accessibilité

Pour répondre aux standards d'accessibilité Web, un texte de remplacement doit régulièrement accompagner les boutons d'action afin d'en préciser les libellés.

Par exemple, si le libellé du bouton est « En savoir plus », il sera important d'ajouter un complément d'information dans le texte de remplacement.