Guide de conception de boutons : comment concevoir des boutons qui convertissent

Pourquoi rédiger un guide de conception de boutons ? Les boutons sont-ils si importants ? Pourquoi dépenser autant d'énergie sur une si petite partie de l'interface utilisateur ?

Bien que les boutons soient très courants dans la conception de sites Web et semblent simples, leur importance ne doit pas être sous-estimée. Ce sont des éléments vitaux du site qui remplissent des fonctions très importantes.

Surtout en tant que principaux appels à l'action et sur les sites de commerce électronique, les boutons influencent littéralement les résultats. Cependant, en tant que boutons de partage social, les boutons d'inscription par e-mail et de soumission de formulaire sont également essentiels au succès d'un site Web.

Pour cette raison, dans cet article, nous voulons parler en détail de cet élément de conception souvent négligé et de la façon de créer des boutons à conversion élevée pour les sites Web WordPress. Bien que l'accent soit mis sur les CTA (appels à l'action), nous parlerons également de nombreux conseils généraux en matière de conception de boutons.

Ce sujet a-t-il poussé votre bouton ? Alors continuez à lire.

Avant de commencer, un petit mot sur les tests A/B

Ci-dessous, nous passerons en revue quelques directives claires pour la création et l'utilisation de boutons. Ces principes vous aideront à réfléchir à la conception, au positionnement et à d'autres attributs importants de tous les boutons de votre site.

Cependant, en même temps, il est important de garder à l'esprit que cela ne constitue que la base pour améliorer votre taux de conversion. Les principes de conception vous permettent de deviner ce qui fonctionnera, mais de savoir vraiment quel type de bouton détient la clé pour convertir les visiteurs en abonnés, en acheteurs ou bien réside dans les tests. L'exécution de tests A/B vous permet de déterminer ce qui fonctionne vraiment pour votre site, les couleurs des boutons, la copie, la position et les autres marqueurs auxquels les visiteurs répondent le mieux.

Parce que tout compte. Même le plus petit changement peut avoir un effet étonnamment important sur les taux de conversion, à la fois positifs et négatifs. Revoyez ces exemples pour comprendre de quoi je parle.

Ainsi, bien que notre guide de conception de boutons vous aide à comprendre les meilleures pratiques, il est préférable de le compléter par des expérimentations saines pour trouver la combinaison gagnante pour le succès de votre site.

Comment concevoir des boutons sur lesquels les utilisateurs cliquent réellement

Après cette mise en garde, nous passons maintenant à la création de boutons performants pour de meilleurs appels à l'action et des taux de conversion accrus. Prendre plaisir!

Concevez-les pour qu'ils correspondent à votre marque ou à votre site

Avant de se lancer dans la conception fonctionnelle, il est important de réfléchir au contexte dans lequel les boutons apparaîtront. Il ne sert à rien de créer le bouton parfait s'il perturbe votre site.

Pour cette raison, bien que les directives ci-dessous soient importantes, il est également important que leur résultat s'intègre bien au contexte dans lequel il apparaît. Cela signifie que vos boutons correspondent à la palette de couleurs, au style et aux directives générales de conception de votre site.

Bien que vous souhaitiez que les boutons se démarquent afin d'inciter à l'action, l'objectif est de les faire ressortir de manière positive. Cela signifie un qui est en harmonie avec le design global et ne le détruit pas.

En même temps, n'ayez pas peur d'expérimenter un peu. Parfois, un bouton de couleur contrastante est juste ce qu'il faut pour pimenter un design par ailleurs fade.

Faire en sorte que les boutons ressemblent à des boutons

La première étape pour concevoir des boutons sur lesquels on clique est de les faire ressembler à des boutons. Les appels à l'action et les options de partage ne servent à rien si les utilisateurs ne comprennent pas qu'ils sont censés en profiter.

Les utilisateurs ont certaines attentes en ce qui concerne la conception des boutons. Si vous ne les remplissez pas du tout, ils auront du mal à prendre les mesures souhaitées. Par conséquent, il est important d'inclure des repères visuels qui les aident à comprendre.

Le premier indice est la forme. La forme la plus courante pour les boutons est rectangulaire ou rectangulaire avec des coins arrondis. Les utilisateurs d'ordinateurs sont exposés à cette conception depuis longtemps et la connaissent donc très bien.

Source : Wikipedia Utilisé avec la permission de Microsoft

Bien entendu, d'autres formes sont également possibles, notamment des carrés, des cercles, des triangles ou encore des formes personnalisées. En fait, il existe de nombreux exemples de boutons décalés et insolites, par exemple sur dribbble

Aller avec une forme moins traditionnelle peut avoir du sens afin de garder la conception de votre site cohérente. Pourtant, comme l'a prouvé l'iOS d'Apple avec ses carrés arrondis, cela ne veut pas dire que cela ne fonctionne pas.

Image de Ienjoyeverytime / shutterstock.com.

Quoi que vous choisissiez, assurez-vous simplement de rester cohérent. Évitez d'utiliser des conceptions différentes pour des boutons différents. Cela améliore non seulement l'interface utilisateur, mais garantit également que les utilisateurs seront en mesure d'identifier les boutons sur l'ensemble de votre site.

Les ombres et les reflets sont un autre indice de conception important. Les ombres portées sont devenues un repère universel pour montrer que les éléments sont cliquables ou peuvent être touchés. Même autrement, la conception plate les utilise comme un signal de fonctionnalité.

Source : Material.io

Fournir des étiquettes claires

Outre la conception de base, des étiquettes claires sont également importantes pour l'utilisation des boutons. Sans étiquette, les utilisateurs n'ont aucun moyen de déterminer ce qu'ils font.

Les étiquettes ne doivent pas nécessairement être écrites, les icônes fonctionnent également (voir les boutons de partage social). Utiliser les deux ensemble est une autre possibilité, notamment sur les boutons liés au e-commerce.

Image de Prixel Creative / shutterstock.com.

Ce qui est important, c'est que l'utilisateur puisse comprendre quel effet aura son action de cliquer sur un bouton. S'ils ne le font pas, ils pourraient éviter de le faire en premier lieu.

Voici quelques directives pour des étiquettes claires :

• Soyez descriptif et précis
• Utilisez des verbes d'action, par exemple Inscrivez-moi , Soumettre un formulaire , Créer un compte
• Adressez-vous directement à l'utilisateur
• Créez un sentiment d'urgence avec des mots comme Maintenant ou Aujourd'hui
• Restez simple et clair

Les labels sont d'une importance particulière lorsqu'il s'agit de CTA. Changer juste quelques mots peut avoir un grand impact sur les performances d'un bouton. Par exemple, Unbounce a enregistré une augmentation de 90 % du taux de clics en modifiant simplement la copie de son bouton de « Commencer votre essai gratuit de 30 jours » à « Démarrer mon essai gratuit de 30 jours ».

Oui, tel peut être le pouvoir d'un mot.

Placez les boutons là où les utilisateurs peuvent les trouver

C'est vraiment une évidence. Si vos utilisateurs ne trouvent pas vos boutons, ils auront du mal à cliquer dessus. Pour cette raison, un autre facteur de leur efficacité est l'emplacement.

Il y a des conventions. Par exemple, le CTA principal peut généralement être affectueux au-dessus du pli. Cela a du sens et est désormais anticipé par les utilisateurs.

Source : Netflix

Il en va de même pour les autres types de boutons où les utilisateurs ont été formés pour s'attendre à certains emplacements. Par exemple, les boutons pour le précédent et le suivant sont généralement ordonnés à gauche et à droite l'un de l'autre.

Étant donné que cela est si ancré dans la conscience du public, inverser l'ordre pourrait frustrer les visiteurs et les faire partir. Et c'est la dernière chose que vous voulez.

Cependant, même pour les boutons qui ont des emplacements plus flexibles, par exemple les boutons de partage social, il est primordial de réfléchir à l'endroit où les placer. Par exemple, vous pourriez penser que placer des boutons sociaux à la fin de vos articles est une bonne idée. De cette façon, les utilisateurs peuvent partager la publication une fois qu'ils l'ont terminé, n'est-ce pas ?

Cependant, la majorité des lecteurs n'arrive même pas à la fin de vos messages. En conséquence, une meilleure idée est de placer des boutons où ils peuvent être consultés à tout moment de l'expérience de lecture. La barre latérale flottante Monarch en est un exemple :

En cas de doute, une bonne règle de base pour le placement des boutons est de vous demander où les utilisateurs vont regarder ensuite. Le design est censé guider l'utilisateur sur son chemin, de sorte que les boutons peuvent être la conclusion logique de son parcours sur le site.

Faites attention à la taille et à l'espacement

Nous arrivons maintenant à un sujet qui est particulièrement important dans la conception mobile. Les personnes qui interagissent avec votre site via le toucher sont moins précises dans leurs actions que celles qui utilisent une souris. Pour cette raison, vous devez leur permettre d'utiliser et d'atteindre les boutons sans problème ni risque d'appuyer sur le mauvais.

Source : Pomme

La première étape consiste à vous assurer que vos boutons sont suffisamment gros. Le bout d'un doigt humain moyen est de 8 à 10 mm de large. En conséquence, Apple suggère de créer des éléments qui doivent être utilisés au toucher au moins 44px par 44px (utilisez des points au lieu de pixels pour les écrans Retina). Les recommandations des autres fabricants tournent également autour de la barre des 10 mm. Bien sûr, la taille peut être légèrement réduite pour la conception Web destinée à une utilisation sur ordinateur.

Dans le même temps, vous devez tenir compte de l'espacement entre les boutons. Vous ne voulez pas frustrer les utilisateurs parce qu'ils poussent accidentellement des choses qu'ils n'avaient pas l'intention de faire. Un grand espace permet également de repérer plus facilement les éléments, ce qui est important pour les principaux appels à l'action.

Fournir une réponse

Une fois que les boutons ou votre site sont identifiables en tant que tels et utilisables, il est temps de penser au moment où ils sont réellement appelés à agir. Les boutons peuvent avoir plusieurs états d'existence :

• Normal - Identifiable en tant que bouton, signale la possibilité d'être cliqué
• Focused - Modification lors du survol de la souris, confirmation pour l'utilisateur que l'action est possible
• Appuyé - Modification supplémentaire pour récompenser l'utilisateur d'avoir pris des mesures et confirmer que quelque chose se passe
• Occupé — Lorsque l'action se déroule en arrière-plan, le bouton peut refléter que
• Désactivé — Montre que d'autres actions sont possibles, mais pas pour le moment

Source : Material.io

En fournissant un retour visuel aux utilisateurs pour l'utilisation des boutons, vous pouvez rendre l'interaction plus claire et plus agréable. Pour d'autres idées similaires, consultez l'article sur les micro-interactions.

Faire bon usage du contraste

Tous les boutons ne sont pas créés égaux. Bien qu'une page de destination puisse avoir plusieurs liens sur lesquels cliquer, il ne devrait y en avoir qu'un seul qui compte vraiment.

Les outils pour expliquer cela aux visiteurs sont la couleur, le contraste et l'emplacement. Utilisez-les efficacement pour attirer l'attention et inciter les utilisateurs à cliquer.

En contrastant les boutons du reste de l'interface, vous les rendez plus visibles. En plus de cela, cela évite qu'ils se perdent parmi d'autres éléments.

Quand il s'agit de couleur, il n'y a pas de meilleure option. Encore une fois, beaucoup ici dépend de votre propre conception. Une bonne règle de base est d'opter pour une couleur contrastante et de partir de là. Pour en savoir plus sur ce sujet, consultez notre article sur les techniques de correspondance des couleurs.

En plus de la couleur, vous pouvez utiliser différentes manières d'introduire le contraste, notamment la taille, la typographie et les espaces. Le contraste entre la couleur des boutons et le texte peut encore améliorer l'effet et rendre la copie plus lisible. Combiné à une position proéminente, ces boutons font vraiment ressortir les boutons.

Source : Prezi

Pour savoir si votre appel à l'action est perceptible, utilisez le bon vieux « test du strabisme ». Appliquez le design, faites quelques pas depuis l'écran, plissez les yeux et voyez si votre bouton se démarque. Je sais, ça n'a pas l'air très professionnel mais ça marche !

Êtes-vous en train de tester votre #CTA ? C'est le meilleur moyen de savoir si votre appel à l'action se démarque. http://t.co/uO53xJIOPu pic.twitter.com/wzNPyTErD2

- Design Pickle (@designpickle) 25 juillet 2015

Le contraste des boutons est également important pour établir l'ordre entre eux. Lorsque vous avez deux choix ou plus, une couleur plus forte peut indiquer celle que vous préférez ou conseiller aux visiteurs de choisir.

Source : Quicksprout

Résumé

Les boutons sont un élément central mais souvent négligé de la conception Web. Indûment ainsi. Surtout sous la forme d'appels à l'action, ils peuvent avoir une influence considérable sur les conversions, les taux de clics et d'autres marqueurs de succès importants.

Pour cette raison, le sujet de la conception et du placement des boutons ne doit pas être pris à la légère. Pour rappel, afin de créer des boutons efficaces :

• assurez-vous qu'ils correspondent à votre conception globale
• s'assurer que les utilisateurs peuvent les identifier en tant que boutons
• fournir des étiquettes claires
• placez-les là où les utilisateurs peuvent les trouver
• attention à la taille et à l'espacement
• fournir des commentaires lorsqu'ils sont utilisés
• les démarquer du reste du site

Ces directives vous aideront à configurer des boutons sur lesquels vos utilisateurs ne pourront s'empêcher de cliquer. Cependant, comme mentionné au début, ces meilleures pratiques sont censées être traitées comme un point de départ. Pour vraiment comprendre quels boutons fonctionnent pour votre site et comment améliorer les conversions, la conception des boutons doit toujours aller de pair avec des tests A/B approfondis. Heureusement, nous avons également un article sur ce sujet.

Quelle est votre expérience avec la conception de boutons ? Quelque chose d'important à ajouter à ce qui précède ? S'il vous plaît laissez-nous savoir dans la section commentaires ci-dessous!

Image miniature de l'article par BerryCat / shutterstock.com