Comment améliorer les boutons de votre site e-Commerce

bouton-stop

Ergonomie d'un site de vente en ligne - améliorer les boutons

Le diable se cache dans les détails. Mais en matière de graphisme pour un site commerce, ce sont plutôt des milliers de diablotins qui peuvent saboter votre projet. Parmi eux, LES BOUTONS. Que vous demandiez aux gens de cliquer sur "ajouter au panier", ou "d'en savoir plus", ces visuels sont des repères fondamentaux pour guider les internautes dans le parcours qui mène à votre tiroir-caisse. Pourtant beaucoup d'e-commerçants négligent cette pièce très importante du puzzle d'une charte. Voici une série d'erreurs fréquentes dans la conception des boutons.

 

C'est un sujet dont la plupart de gens se préoccupent finalement assez peu une fois leur site lancé... Pourtant de bons boutons conçus intelligemment peuvent singulièrement renforcer le taux de conversion d'une boutique en ligne.

 

L'erreur la plus commune que l'on peut observer à propos des boutons c'est une absence de cohérence avec l'image du site. Songez-y un instant : le graphisme de vos pages plante le décor, raconte une histoire, et positionne votre entreprise. Luxe, Écolo, Bazar, Low cost, Bobo etc.. Si vos boutons ne sont pas cohérents avec cet univers conçu de toutes pièces, ils viennent interrompre votre petite musique - c'est la raison pour laquelle vos boutons doivent être en harmonie avec le contexte commercial de votre boutique.

Passez en revue vos appels à l'action. Souvenez-vous, vos boutons endossent la lourde responsabilité d'expliquer aux acheteurs ce qu'ils doivent faire dès qu'ils consultent une de vos pages. Voilà pourquoi vous devriez envisager de tester plusieurs libellés. Les acheteurs sont-ils plus sensibles à "Ajouter au panier" ou "Acheter maintenant ?" Nous en reparlerons un peu plus loin.

 

Troisièmement, il est très fréquent d'observer un manque de contraste dans le choix des couleurs des boutons, y compris sur de très gros sites de vente en ligne. C’est d'ailleurs un péché d’infographiste zélé par excellence, le syndrome de l’esthétique qui l'emporte sur la lisibilité du message. L’esthétique d'un site est, bien entendu, très importante, mais elle ne devrait en aucun cas constituer une finalité. Les internautes doivent être en mesure de distinguer clairement vos boutons car c'est le système de signalisation qui permet de trouver le chemin qui mène à la caisse.


Prenez par exemple ce petit effet ton sur ton bleu :

 
Le jeu de nuance de bleu entre le texte, le fond et la charte du site est trop harmonieux. Résultat, le bouton ne retient pas suffisamment l'attention. Il se confond dans l'image et finit par faire partie "du mobilier". Des couleurs qui contrastent pour vos boutons permettent d’obtenir de meilleurs taux de conversion.


 

Ne négligez pas les boutons en dehors des fiches-produit. Bien souvent les e-Commerçants partent du principe que seuls les boutons "d’ajout au panier" qui, sont habituellement situés sur les fiches produit comptent, mais ce n'est pas le cas. En réalité, les acheteurs doivent cliquer sur toute une série de boutons qui constituent le tunnel de conversion et forment le processus d'achat qui mène au formulaire de commande. Voilà pourquoi vous devriez tenir compte de tous les boutons qui figurent aussi bien sur votre page d'accueil que sur vos pages de catégories pour aider les acheteurs à valider une commande plus rapidement.


Enfin, ne pas tester vos boutons revient à ne pas exploiter cette opportunité. "Ajouter au panier" ou "Acheter maintenant" qu’est-ce qui fonctionne le mieux sur votre site ? A vous de le découvrir en testant vos propres intitulés et en combinant les couleurs, les contrastes et la position de vos boutons sur vos pages.


Le Memo d'eCommerce-pratique.info à propos des boutons


1. Votre bouton " Ajouter au panier " devrait ressortir de votre page et devrait être suffisamment grand pour qu'on puisse cliquer dessus. Utilisez une couleur qui se démarque du reste des éléments présents sur la page et de la charte. Choisissez une police de caractères plus grande que le texte des fiches-produit.

2. Ne placez jamais de boutons d’appel à l'action importants à côté d’éléments graphiques ou d'images qui ressemblent à des publicités au risque de voir leur efficacité réduite à néant. Isolez-les toujours les boutons dans un environnement neutre et aéré pour améliorer leur visibilité.

3. Le prix doit se trouver dans la même " zone géographique " que le bouton " Ajouter au panier ". Si le client ne parvient pas à associer facilement le prix et l’action il en éprouvera un sentiment de frustration, ou pire, de méfiance.

4. Le nombre de boutons sur votre page d'accueil est-il raisonnable ? Si votre barre de menu dépasse 7 éléments, réfléchissez sérieusement à l’intérêt d'en ajouter davantage. Si vos menus déroulants comportent plus de 3 sous-menus, revoyez votre copie. Établissez un ordre de priorité dans vos boutons et vos appels à l'action.

5. Évitez de faire tous vos boutons de la même taille et de la même couleur. Par exemple le bouton d’ajout au panier ne doit pas être identique au bouton ajouter aux favoris. Évitez d’utiliser des boutons d'appel à l’actions (ajouter au panier, contactez-nous) qui sont de la même couleur que la charte graphique du site.

6. Des couleurs qui contrastent pour vos boutons permettent d’obtenir de meilleurs taux de conversion. Testez différentes couleurs de boutons pour améliorer votre taux de conversion. Le simple fait de modifier la couleur d’un bouton peut augmenter de façon significative votre taux de conversion.

7. Testez différents intitulés sur vos boutons d'achat immédiat. "Ajouter au panier" est une formulation non agressive pour encourager les commandes, alors que "Acheter" ou "Commander" peuvent être trop directs et faire hésiter les prospects.

8. Ne jamais utiliser l'expression "Soumettre" sur un bouton, car il a une forte connotation négative. Utilisez plutôt "Continuer", "valider", ou "étape suivante".