Parmi les éléments cruciaux d’une interface utilisateur, on retrouve les boutons. Ils permettent aux utilisateurs d’interagir avec un système, et d’agir en faisant leur propre choix. On retrouve souvent des boutons de site Web sur des formulaires, des pages d’accueil, des fenêtres de dialogue, des barres d’outils, des pages de produits, etc.
Il est essentiel de faire la distinction entre les boutons et les liens, même si les deux permettent de diriger les visiteurs vers d’autres pages. En effet, les boutons de site Web invitent les visiteurs à effectuer une action précise. Ils permettent ainsi d’inciter ces derniers à effectuer l’action que vous souhaitez qu’ils fassent sur la page concernée.
Dans cet article, nous allons voir comment faire en sorte que vos boutons de site Web soient irrésistibles.
Sommaire
- Quelques conseils pour la conception de boutons de site Web
- 10 meilleures pratiques pour la conception de boutons de site Web
- Comment créer facilement des boutons de site Web accrocheurs avec Strikingly ?
Quelques conseils pour la conception de boutons de site Web
Nous avons détaillé ci-dessous quelques conseils de base qu’il faut toujours garder à l’esprit lorsqu’on veut concevoir des boutons de site Web. Voyez alors ceci comme un cours accéléré sur la création de boutons attrayants.
∙ Les bases pour concevoir des boutons de site Web
La netteté : Ces dernières années, le design plat est devenu tendance pour les boutons de site Web. Garder les choses simples est donc une pratique sûre. Mais il faut tout de même bien veiller à ce que les textes ainsi que les couleurs des boutons soient bien nets. En effet, des boutons de site Web trop sophistiqués et voyants pourraient distraire les visiteurs.
Un texte court : Il est aussi important que le texte de vos boutons de site Web soit court et concis. Il est ainsi recommandé d’utiliser un minimum de texte. Faites en sorte qu’un ou deux mots suffisent à indiquer aux visiteurs l’action qu’ils sont censés effectuer. Souvent, il s’agit d’un verbe.
Image tirée du site d’un utilisateur de Strikingly
Le contexte : Quelle est la fonction du bouton ? Souvenez-vous que les boutons de site Web qui sont difficiles à comprendre ne sont pas cliqués. Si vous placez un bouton « Acheter maintenant », celui-ci devrait amener le visiteur vers une page où il entrera ses informations de carte de crédit, plutôt qu’une page sur laquelle il devra encore choisir parmi de nombreux produits.
∙ Les erreurs à éviter
Non réactif : Aujourd’hui, toute conception Web se doit de tenir compte de l’expérience mobile. Certes, vous allez presque certainement concevoir vos boutons de site Web sur un ordinateur de bureau. Mais pensez à vérifier que ces derniers fonctionnent également sur les appareils mobiles. Assurez-vous qu’ils ne soient ni trop grands ni trop petits pour un appareil mobile. Cela aura un impact sur votre taux de clic.
Heureusement, la plupart des plateformes de création de sites Web comme Strikingly vous permettent de prévisualiser votre site Web en version mobile, rien qu’en cliquant sur un bouton.
Aucune couleur : Les boutons de site Web fonctionnent mieux lorsqu’ils sont lumineux et gras, car ils attirent ainsi facilement l’attention du visiteur. Gardez à l’esprit que votre site Web propose un voyage, et que les boutons doivent servir de guide. Vos visiteurs auront du mal à parcourir vos différentes pages et à se convertir si vous n’utilisez pas de boutons en couleur.
Mal alignés : L’un des objectifs principaux que vous devez considérer est de ne surtout pas désorienter vos visiteurs. Des boutons de site Web mal placés ou isolés au milieu d’un paragraphe n’aideront pas, et pourraient même aggraver les choses.
Placez vos boutons là où vous demandez au visiteur d’agir, par exemple :
- Près d’une section sur les fonctionnalités et les avantages
- Dans l’en-tête
- Vers le bas de page
- À la fin d’un paragraphe incitant le visiteur à faire une action
Image tirée du site d’un utilisateur de Strikingly
10 meilleures pratiques pour la conception de boutons de site Web
Avant de commencer à concevoir vos boutons de site Web, prenez la peine de consulter ces quelques conseils en plus des notions de base que nous venons de voir.
1. Restez simple
« Keep it simple ! » Cela résume tout. En effet, la conception de boutons de site Web ne doit pas être une chose compliquée. Il suffit que ces derniers soient bien visibles et pratiques. Ne compliquez pas les choses en tentant des méthodes qui risqueraient de nuire au taux de conversion de votre site Web.
2. Assurez-vous que vos boutons soient bien visibles
Malheureusement, certains sites mettent en place des boutons qui n’ont pas assez de contraste pour être immédiatement discernables. Ils deviennent alors des boutons fantômes placés sur des graphiques attrayants et dominants, et les utilisateurs peuvent ne pas les localiser tout de suite. Bien sûr, cela nuit au taux de conversion.
Si vos boutons de site Web ont un faible contraste, faites en sorte de régler le contraste, d’ajouter des couleurs, d’optimiser l’espace afin de mieux les distinguer. Vos utilisateurs vont alors facilement les détecter et les reconnaître en tant qu’objets cliquables.
3. Utilisez de la couleur
Avez-vous déjà remarqué que les boutons de site Web sont souvent de couleur rouge ou orange ? C’est tout simplement parce que les couleurs vives attirent le regard et inspirent l’action. Une bonne utilisation de la couleur est actuellement une très bonne technique de conception de boutons de site Web. Vous pouvez essayer d’appliquer des teintes vives avec des dégradés simples.
Image tirée du site d’un utilisateur de Strikingly
4. Attention au texte
Rares sont les boutons de site Web qui ont comme texte « Cliquez ici ». Cela fait trop Spam. Au lieu de cela, il y a plusieurs mots ou combinaisons de mots que l’on peut utiliser, pour fournir à l’utilisateur une idée plus claire de ce qui se passera lorsqu'il cliquera sur le bouton. Des informations claires peuvent aider à renforcer la confiance des utilisateurs et à augmenter les conversions.
Cela peut être aussi simple que de cliquer sur :
- « Envoyer » après avoir saisi des informations
- « En savoir plus »
- « Acheter maintenant »
- « Commander maintenant »
- « Réserver maintenant »
5. Utilisez une animation subtile pour engager vos visiteurs
De plus en plus de sites Web utilisent deux boutons côte à côte dans leur design. L’un est rempli tandis que l’autre est « fantomatique ». L’effet est que les deux créent un mouvement de survol qui attire l’attention. Et cela peut inciter les gens à cliquer dessus. Toutefois, n’en faites pas trop. En effet, mettre trop d’animation risque d’avoir l’effet inverse.
6. Privilégiez de grands boutons
Il est mieux que les boutons de site Web aient une large zone cliquable. Ce n’est pas pour rien que les touches de nos claviers mesurent au moins 15 x 15 mm. Il ne faut pas que des utilisateurs se retrouvent en difficulté pour cliquer sur vos boutons. Avec un grand bouton, cela ne risque pas de se produire. Gardez simplement à l’esprit qu’un trop grand bouton risque de ne pas être adapté aux petits écrans.
Image tirée du site d’un utilisateur de Strikingly
7. Les formules qui marchent bien
Pourquoi chercher loin lorsqu’on connaît déjà les formules qui marchent bien ? Par exemple :
- Un bouton rectangulaire avec des coins carrés et du texte à l’intérieur
- Un bouton rectangulaire avec des bords arrondis et du texte à l’intérieur
- Un bouton rectangulaire avec une ombre
- Etc.
8. L’emplacement de vos boutons de site Web
Les boutons de site Web doivent non seulement apparaître et fonctionner comme prévu, mais ils doivent également être placés là où les gens trouveront logique de les voir.
- Pour les boutons suivant un bloc de contenu, ils sont généralement alignés avec le texte ou au centre de l’écran.
- Dans certains formulaires à saisie unique, le bouton est placé sur la même ligne que le champ de saisie à droite.
- Les boutons CTA (Call To Action) sont généralement placés sous le contenu auquel ils se réfèrent.
- Les boutons de lecture ou de démarrage d’une vidéo sont souvent situés au centre de l’écran d’aperçu.
- Les boutons pour le panier d’achat sur une boutique en ligne se trouvent généralement dans le coin supérieur droit.
9. Indiquez que le bouton a bien fonctionné
Image tirée de Strikingly
Vos boutons de site Web fonctionnent-ils bien ? Vous pouvez rassurer vos visiteurs en leur donnant des indications visuelles que le bouton sur lequel ils ont cliqué a bel et bien fonctionné. Par exemple, après avoir rempli un formulaire de contact, le visiteur clique sur le bouton de soumission. Ce serait génial si un message de remerciement peut s’afficher à l’écran.
10. N’en faites pas trop
Lorsqu’il y a trop de boutons de site Web, cela peut semer le chaos. Bien sûr, lorsque l’utilisation des boutons est appropriée, faites-le. Mais évitez de surcharger votre design en parsemant des boutons partout. Les utilisateurs ne sauront plus où cliquer ni quels boutons sont les plus importants.
Comment créer facilement des boutons de site Web accrocheurs avec Strikingly ?
Image tirée de Strikingly
Vous souhaitez créer des boutons de site Web, mais vous ne savez pas comment faire. Rassurez-vous, Strikingly est là pour vous. Si vous créez votre site Web avec notre plateforme, vous pourrez concevoir avec facilité différents types de boutons, comme ceux qui servent habituellement dans l’e-commerce (Acheter maintenant, Réserver maintenant).
Nous mettons à votre disposition différentes fonctionnalités pour que vos boutons de site Web soient accrocheurs. Le style de bouton individuel ainsi que les options d’alignement ont été étendus. Pour bien mettre en évidence un bouton, agrandissez-le ou changez sa couleur. Vous pouvez aussi modifier leur police afin de respecter le thème de votre site Web.
Pour créer ou modifier vos boutons de site Web, allez dans votre éditeur de site et cliquez sur « Styles ». Un panneau s’ouvrira, vous permettant de modifier vos en-têtes, vos sections et vos boutons.
Pour conclure, les boutons de site Web ont le pouvoir de transformer un appel à l’action en un résultat. Mais pour qu’ils soient efficaces, pensez à observer tous ces précieux conseils que nous venons de vous donner. Et enfin, n’oubliez pas de tester la conception de vos boutons de site Web pour garantir que votre interface soit bien fonctionnelle.
