Skip to main content

Le bouton est un élément de communication fondamental dans une interface. D’ailleurs, je parle d’interface mais vous retrouvez des boutons dans votre quotidien (la souris, votre clavier, interrupteurs, sur le tableau de bord de votre voiture, etc.)

Bref, ils font partis de notre vie et participent aux interactions entre vous et l’interface. Les boutons te permettent d’avoir une interactions avec ton user.

Je ne suis pas là pour vous parlez de praticité mais de conversion. Pour la faire simple, si vous n’avez pas des boutons qui respectent les quelques règles que j’énonce ici, vous allez avoir du mal à convertir les personnes qui viennent sur votre site ou sur votre app. Par exemple, pour tes ventes, un bouton rouge convertira plus qu’un bouton vert.

Laissez moi vous partager les quelques principes qui vont faire de vos boutons, des machines à clics.

01 – La forme

Il faut que ton bouton ressemble à un bouton. Pas de choses abracadabrantesque. Une forme simple et épuré. Si tu pars avec des bords strict, sache que ton user auras plus de mal qu’avec un bouton aux bords arrondis. Cela peut paraître bizarre, mais ça lui demandera moins d’efforts de visualisation lors de la lecture de l’interface. Le Barrow Neurological Institute a prouver que “perceived salience of a corner varies linearly with the angle of the corner. Sharp angles generated stronger illusory salience than shallow angles”. En résumé, plus il y a d’aspérités à une formes, moins elle est lisible.

02 – La taille

L’action principale que fera votre user sera de toucher l’écran avec son doigt. or, on sait que la zone en contact du doigt avec l’écran est d’environ 8 à 10mm de largeur. Donc, si tu pars avec un bouton qui fait dans les 10mm de large (soit 38px), alors tu seras tu auras un bouton qui fait la bonne taille.

Là, on part sur un postulat de base. C’est à dire un bouton par défaut. Il faut intégrer la notion d’importance et de priorité. En effet, il est de convention de dire que plus un bouton est important, plus il est gros. Ton utilisateur doit avoir plus de faciliter à trouver et utiliser un bouton important, qu’un bouton qui l’est moins. Si on prend l’exemple d’une app de musique, le bouton play sera toujours plus grand que le bouton dislike.

Les designers de chez Apple ont recommandé un bouton autour des 44px pour assurer un confort pour l’utilisateur. Cependant, si vous évoluez sur une taille d’écran moindre, je vous conseille de partir sur 32 à 40px. De l’autre côté, les designers de chez Androids (Material Design) partent plus sur une largeur minimum de 36px avec 6px d’espace entre 2 boutons.

03 – Le padding

Le padding correspond aux marges internes à un bloc. Il permet donc à un bouton d’avoir de l’espace autour du texte. Au delà de l’aspect esthétique, il permet à l’utilisateur d’être plus précis sur mobile ou tablette dans son geste de clic. Pour l’ordinateur, ce n’est pas si important dans la mesure où il y a la souris qui permet d’être plus précis.

Pour éviter de générer de la frustation de l’utilisateur en cliquant sur un bouton à côté, je te recommande de mettre entre 30 et 38 px de padding, soit 8 à 10mm.

04 – La couleur

La couleur et le contraste d’un bouton a toujours été super important. Elle permet à l’utilisateur de voir clairement et facilement les actions importantes à faire. Cela aide l’utilisateur à mieux naviguer dans ton interface.

Il n’y a pas vraiment de couleurs « interdites » mais plutôt des associations à éviter. Pour les utilisateurs daltoniens, n’utilises jamais l’association « rouge / vert » mais plutot en privilégiant 1 des 2 couleurs.

05 – Le contraste

En plus de la couleur, le contraste aide l’utilisateur entre les différents boutons. Les règles sont simple :

  • Haut contraste : Action positive / importante (signup, checkout, valider, accepter, etc.)
  • Contraste moyen : Action negative (annuler, etc.)
  • Contraste faible : Action neutre

06 – Le label

Le label (ou placeholder), permet de décrire l’action que l’utilisateur fera. Donc il faut que tu mettes un label qui soit clair et précis. Le plus simple est de mettre un verbe d’action. Par exemple, on peut mettre « Inscription, Se connecter, Accepter, Valider ».

07 – La typographie

Sur internet, l’utilisateur lit une page internet en diagonale. Il ne la lit pas mot par mot mais plutôt comme s’il scannait la page entière.  En conséquence, il faut que la police d’écriture soit plutôt grande et facile à lire.

Je te recommande donc d’avoir une typographie sans serif (Roboto, Open Sans, Poppins) avec une taille autour des 16/17 pixels.

08 – L’état

Et enfin, l’une des choses les plus importantes dans la conception d’un bouton, c’est son état. Un bouton doit avoir plusieurs états différents avec des styles différents. Cela permet à l’utilisateur de connaître l’état et le statut du bouton et savoir les actions qui sont possibles ou non.

De manière générale, par défaut, un bouton est plutôt avec une couleur light, c’est à dire claire. Donc avec une opacité assez faible (60 à 70%). Le bouton se noircit alors au survol, c’est à dire quand l’utilisateur passe sa souris dessus. Pour signifier que le bouton est désactiver, il est grisé.

Guigz

Guigz

Hello, je m'appelle Guillem. Je suis designer d'interface depuis 2018 en freelance. Je suis aussi Entrepreneur et Mentor sur la conception web.

Laisser un commentaire