La conception des boutons : best practices

Les boutons sont des éléments primordiaux lors de la conception des interactions et pourtant, leur impact est souvent minimisé. Ils permettent de faire comprendre comment les utilisateurs peuvent interagir avec l’interface et la parcourir jusqu’à l’acte de conversion final.

C’est pourquoi il est nécessaire de leur accorder une attention particulière, au risque de créer de l’incompréhension, voire de la frustration de la part des utilisateurs. Je vous propose de passer en revue les principaux points à retenir pour concevoir des boutons qui permettent d’améliorer l’expérience de vos utilisateurs.

Qu’est-ce qu’un bouton ?

Un bouton est un élément cliquable qui permet aux utilisateurs de faire un choix en un seul clic. Cet élément communique une action qu’il est possible de réaliser.

Un bouton doit être rapidement identifiable en tant que bouton et doit permettre d’identifier clairement l’action que les utilisateurs pourront effectuer.

Comment ? Grâce à deux aspects : l’affordance et le signifiant.

Affordance et signifiant

• L’affordance est la capacité d’un élément à suggérer sa propre utilisation. Ce terme a été introduit pour la première fois par le psychologue cognitiviste américain Donald Norman dans son ouvrage “The Design of Everyday Thing”.
• Le signifiant, quant à lui, permet d’indiquer à quel endroit l’action doit être réalisée.

En effet, il est important d’avoir une indication sur l’utilité d’un élément pour pouvoir le comprendre rapidement et correctement.

L’action des boutons

Il existe trois principales actions à réaliser à travers des boutons :

• Action primaire : il s’agit de l’action principale, les verbes utilisés pourront être de l’ordre : “ajouter au panier”, “réserver”, “s’inscrire” ou encore “suivant” dans un tunnel de commande ou de réservation par exemple.
• Action secondaire : l’action est considérée ici comme une alternative proposée à l’utilisateur avant qu’il n’entre dans le parcours de conversion principal. Parmi les verbes que l’on pourra utiliser on retrouve : “en savoir plus”, “lire la suite”, “annuler” ou “précédent”.
• Action tertiaire : loin d’être une action “fourre-tout”, elle peut être importante pour les utilisateurs, mais pas en lien avec la conversion. Exemples d’actions possibles : “modifier”, “partager”. 

Visuellement, ces types d’actions et les boutons doivent facilement se distinguer du reste des informations de l’interface, mais aussi entre eux pour éviter qu’ils ne se fassent concurrence.

Quelles sont les bonnes pratiques pour l’aspect des boutons ?

1- Bien adapter l’aspect en fonction de l’action

• Les boutons pleins : suggèrent l’action principale à réaliser.

• Les boutons avec une bordure : suggèrent une action secondaire.
  
  

• Les liens soulignés : la forme très simple suggère une action tertiaire, à réserver pour du maillage interne par exemple.

Téléchargez dès maintenant notre guide d'introduction au Growth Driven Design 🔥

• Les boutons flottants : rendus populaires sur mobile, ces éléments permettent d’afficher un bouton principal, quel que soit le niveau de la page consultée. Attention cependant à leur intégration au sein de l’interface, ceci pour éviter qu’ils n’empêchent la consultation d’un contenu ou qu’ils ne concurrencent un autre élément cliquable.
  
  

 2 - Travailler le style pour les rendre accessibles

Voici des points importants à prendre en compte lors de la conception d’un bouton

• La couleur du fond et du libellé doit être suffisamment contrastée pour faciliter la lisibilité (cf : “Focus sur le contraste dans les interfaces web”). Elle doit également être adaptée à votre identité, mais également en fonction du message. Un bouton vert sera par exemple interprété comme une action positive (“valider”, “sauvegarder”), au contraire? un bouton rouge suggérera l’inverse (“annuler”, “supprimer”).
• L’arrondi : permet de donner aux boutons de la personnalité. Un bouton aux bords carrés renverra une image plus stricte qu’un bouton avec des bords totalement arrondis.
• Le style du libellé : majuscule ou minuscule ? Là encore, cela dépend à la fois de votre identité, mais également de la lisibilité de la typographie utilisée et de la longueur de vos libellés. 
• Le libellé : il est fortement recommandé d’intégrer des libellés courts, tel qu’un verbe d’action seul ou accompagné d’un terme, exemple : “Lire la suite”, “Ajouter au panier”, “Réserver votre séjour”. Autre point à ce sujet, il faut présenter une homogénéité dans l’ensemble.
• La taille : plus elle est importante, plus le bouton sera accessible, c’est vrai, mais attention aux abus. 😉 Il faut travailler et tester sa taille (hauteur et largeur) au sein de l’interface sur mobile puis sur ordinateur pour l’optimiser du mieux possible.
• L’interaction : tous les boutons doivent présenter un état initial (hover off) ET un état de survol (hover). Bien que sur mobile l’état de survol ne soit pas visible, sur ordinateur le changement d’état participe grandement à l’expérience. En effet, il permet de renforcer la compréhension de l’utilisateur sur le fait qu’il s’agit d’un élément cliquable.
  
  

En conclusion, les boutons sont des éléments qui doivent être particulièrement travaillés, car ils participent à l’expérience globale.

En effet, plus ils seront optimisés, moins les utilisateurs ne leur prêteront attention, du fait d’un parcours fluide jusqu’à l’acte de conversion.

Ebook

LE GUIDE D'INTRODUCTION AU "GROWTH DRIVEN DESIGN".

Découvrez nos solutions pour palier les lacunes du webdesign traditionnel, comprendre les principes clés  du Growth Driven Design et lancer un site via ce concept.