Tout savoir sur le design des boutons

Les boutons sont des éléments simples, mais primordiaux pour une bonne expérience usager. Il ne faut toutefois pas négliger leur design.

Les boutons servent principalement à deux choses.

1- Ils doivent inciter l’usager à agir.

2- Ils doivent guider l’usager à travers le site.

Pour aboutir à ces deux actions, vous devez absolument bien réfléchir à la mise en place et au design de ceux-ci. Voici quelques éléments à prendre en considération lorsque vous ferez vos appels à l’action dans vos pages web :

La forme

Rectangles et rectangles à coins arrondis sont des classiques lors de la conception de sites web. Les flèches, lignes et autres formes géométriques sont de plus en plus utilisées, bien qu’elles soient moins performantes. L’important est de demeurer constant dans le choix de vos formes.

La taille

Sans exagérations, vos boutons doivent être bien visibles et proportionnés dans vos pages. La taille des boutons est d’autant plus importante pour la navigation sur appareils mobiles. Selon une étude faite par MIT Touch Lab, pour qu’un bouton soit facilement cliquable au contact d’un doigt, il devrait avoir une taille minimum de 10 mm de large.

La couleur

Comme pour un feu de circulation, vos boutons d’appels négatifs devraient être dans les teintes de rouge, et ceux positifs dans les teintes de vert. Ce langage est universel, donc impossible de mélanger l’usager! Vous pouvez aussi mettre les boutons d’annulation ou de refus en gris, ou en transparence, afin de laisser la vedette à votre bouton prédominant.

L’emplacement

Placez vos boutons dans un ordre et à un endroit où l’usager s’attend à trouver un bouton. Par exemple, vous trouverez toujours un bouton « précédent » placé à la gauche, et un bouton « suivant » à la droite.

À noter que pour les applications mobiles et les sites web mobiles, il est préférable de mettre les boutons d’appels positifs (oui, OK, envoyer, etc.) à porter du pouce.

Le message

Un court message de 1 à 3 mots, clair et précis. Si vous voulez inciter l’usager à prendre une action, assurez-vous de choisir des termes qui susciteront son intérêt.

Pour conclure, l’important est d’être constant dans vos choix d’éléments, afin de rendre l’expérience usager fluide et agréable.

Voici quelques exemples de boutons, pour vous inspirer lors de vos prochains projets!

Paméla Théoret
Designer Web UX/UI

Source : https://uxplanet.org/button-ux-design-best-practices-types-and-states-647cf4ae0fc6#.q9retieer