Bouton en français

Introduction au bouton

Le bouton est un élément de conception crucial qui permet aux utilisateurs d’effectuer des actions au sein d’un produit numérique. Que ce soit pour finaliser un achat, télécharger un fichier ou fermer une fenêtre contextuelle, les boutons sont omniprésents. Leur conception doit clairement exprimer leur fonction, afin que l’utilisateur puisse saisir l'action qui sera exécutée en cas de clic. Ils peuvent être dotés d’un texte, d'une icône, ou d’une combinaison des deux pour communiquer leur utilisation. De plus, d'autres éléments de conception tels que des images ou des textes situés à proximité du bouton peuvent fournir un contexte supplémentaire pour clarifier sa fonction.

Composantes d'un bouton

Un bouton est généralement composé de plusieurs éléments :- Étiquette texte : Cette étiquette décrit en mots la fonction du bouton. En règle générale, elle utilise un verbe (comme "Continuer") ou une courte phrase (tel que "Modifier le profil").

• Icône : Une icône représente graphiquement la fonction du bouton. Un bouton peut contenir uniquement une icône, du texte, ou les deux. Il est essentiel que les icônes soient conformes à des standards communément acceptés pour répondre aux attentes des utilisateurs. Par exemple, l’icône représentant un pouce levé est souvent utilisée pour symboliser une approbation ou un "j’aime". Dans l’exemple ci-dessous, un plus (+) figure sur le bouton "Nouveau Workspace".
• Conteneur : Ce dernier encadre l’étiquette du bouton, l'icône, ou les deux. Un conteneur crée une emphase visuelle, permettant au bouton de se démarquer des autres éléments. Généralement, un bouton avec un conteneur plein (comme le bouton "Nouveau Workspace") est plus repérable que celui ayant un contour sans remplissage (comme le bouton "Modifier le profil"). Un bouton sans conteneur peut paraître moins distinctif et s’apparenter à un lien, alors qu'un bouton déclenche une action, contrairement à un lien qui redirige vers une nouvelle page.

Hiérarchie des boutons

Les concepteurs classifient souvent les boutons en actions principales, secondaires, ou tertiaires, en fonction de l’importance visuelle qu’ils revêtent :- Action principale : C’est le bouton que les utilisateurs sont le plus enclins à sélectionner, généralement encadré par un conteneur plein afin d'attirer l’attention. Dans la plupart des cas, un produit n’affiche qu’un seul bouton principal à la fois.

• Actions secondaires : Ces actions offrent des alternatives à l'action principale et sont dotées d'une emphase visuelle réduite. Un bouton secondaire présente souvent un conteneur de contour sans remplissage ou peut ne pas avoir de conteneur du tout. Ces boutons sont repérables, mais moins visibles que le bouton principal.
• Actions tertiaires : Ce sont des options supplémentaires que l'utilisateur peut vouloir accéder. Les boutons tertiaires présentent la moindre emphase visuelle et sont souvent de taille inférieure aux boutons principal et secondaire. Bien qu’ils soient disponibles dans divers styles, leur conception est subtile tout en restant perceptible.

Ressources Complémentaires

• Human Interface Guidelines : Boutons
• Material Design Guidelines : Boutons
• “Getting to Know Buttons and Links” par Sera Tejima sur Medium
• “UI Cheat Sheet: Buttons” par Tess Gadd sur Medium