107 boutons "Ajouter au panier" des meilleurs sites e-commerce
Ce billet est une traduction de l’article de Jason Billingsley.
Les boutons « Add to Cart » - ils peuvent être petits, mais aucun site de vente en ligne ne peut faire sans eux. Ces petits, rectangulaires, parfois colorés cliquables envoient directement le produit dans le panier et sont une extension de votre image de marque. Il est important de réfléchir au design de votre bouton « Add to Cart ».
Nous avons recueilli plus de 100 boutons « Add to Cart » des meilleurs sites de vente en ligne de l'année 2006 pour vous donner un peu d'inspiration pour votre design. Et nous avons résumé quelques grandes lignes d’utilisation que vous pourrez appliquer à votre propre bouton « Add to Cart ». Ok, il ya effectivement 111 boutons, mais 107 sont juste plus sympa à regarder.
NDLR : les sites ont depuis évolué et leurs boutons aussi…
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
|
Et maintenant, quelques statistiques, parce que les pourcentages c’est plus cool.
| Texte du bouton | Graphisme du bouton | |||
| Add to Cart | 58.0% | Sans élément | 48.2% | |
| Add to Bag | 9.8% | Flèches | 17.9% | |
| Add to Shopping Bag | 9.8% | Chariot | 14.3% | |
| Add to Basket | 6.3% | Sac Shopping | 7.1% | |
| Add to Shopping Cart | 4.5% | Signe Plus | 5.4% | |
| Buy | 2.7% | Plusieurs | 4.5% | |
| Buy Now | 1.8% | Unique | 1.8% | |
| Add Item(s) to Cart | 1.8% | |||
| Add Item(s) to Bag | 0.9% | |||
| Add to My Bag | 0.9% | |||
| Add to My Brown Bag | 0.9% | |||
| Add to My Shopping Cart | 0.9% | |||
| Order Now | 0.9% |
Comment le bouton « Add to Cart » peut renforcer votre image de marque
Au début, le bouton « Add to Cart » peut sembler être un détail mineur, mais il a le potentiel pour créer un lien affectif avec votre marque. Votre choix (de la forme, la couleur, la police et le texte du bouton) a une incidence sur ce sujet.
L’aspect feutre utilisé par Urban Outfitter reflète l’image de la marque (cependant cet effet peut se faire au détriment de la visibilité du bouton car il ne se démarque pas sur l’écran). Le signe plus du bouton de Notherntool ressemble à une tête de tournevis. L’icône « Big Brown Bag » de Bloomingdale reflète le cachet de la marque. Le bouton intemporel et d’un bleu profond de « Polo Ralph Lauren » permet de conserver l’harmonie entre l’identité online et offline.
Le texte du bouton a également une grande importance. « Add to shopping bag » est plus approprié pour les grands magasins que « Add to Cart », qui est plus adapté pour des enseignes de type WalMart ou Target. « Order Now » peut fonctionner pour des marques ayant des catalogues saisonniers qui permettent également les commandes en ligne. Au Royaume-Uni, « Add to Basket » est une terminologie plus répandue.
Design et utilisabilité du bouton
Texte du bouton
La Rédaction web met l’accent sur la Numérisation – Peut-être que la règle d’or du web est de ne pas utiliser 5 mots quand 3 suffisent. Quelle dimension prend cette règle lorsqu’elle s’applique à un petit bouton ? Néanmoins, nous avons trouvé que 15% des top e-commerçants utilisaient des termes trop longs. Le bouton « Add To My Shopping Cart » de Harry And David en est – pensée personnelle – trop chargé.
« Buy Now » peut avoir un impact plus important sur l’action que « Add to Cart », mais peut subtilement suggérer à l’utilisateur que ses achats sont terminés ou qu’il s’est engagé dans un processus d’achat sans avoir pris le temps de visualiser ses choix. La beauté de « Add To Cart » est qu’il reste non-ancré et qu’il suppose à l’utilisateur qu’il peut poursuivre ses achats. Et si vois êtes un bon e-vendeur, vous suggérerez d’autres produit et proposer un lien « Continuer mes achats » sur la page du panier.
Format du texte
Les grandes lignes de l'ergonomie web recommandent les polices sans-serif avec une sélection de contraste de couleur élevé (à haut contraste blanc sur noir ou bleu foncé, plutôt que de faible contraste, comme le bouton de « Chadwick » bleu-bleu).
En général, en rédaction web, il est déconseillé d’écrire tout en majuscules. Une casse mixte est le plus facile à lire, bien que tout en minuscules est également très lisible. Nous avons trouvé 45% de « Add to Cart » en utilisant uniquement des lettres capitales. Le défaut du bouton de Walgreen, blanc, tout en lettres capitales sur une couleur légère, petit bouton avec un dégradé et une icône, obligeant certains utilisateurs à loucher.
Placement du bouton
Si vous offrez des fonctionnalités utiles sur vos pages produits comme les idées de cadeaux, photos agrandies, les variantes de couleurs, vues du produit alternatives, envoyer à un ami, tableau de taille ou la vue du panier, assurez-vous que « Add to Cart » est mis en évidence, clair et au premier plan dans le comparatif produits. Les fonctions les moins importantes peuvent être présentées par des boutons aux couleurs plus légères ou des simples liens textes.
Empilement de texte
L’empilement de texte n'est pas une bonne idée pour des liens ou les boutons de navigation et il en va de même pour les boutons « Add to Cart ». Les utilisateurs se sont habitués à voir des formes rectangulaires, et en scannant rapidement la page, cela peut prendre plus de temps pour distinguer le bouton de la décoration, voire même devenir frustrant.
Que faire si vous utilisez un bouton partir d'un modèle?
Même si vous n'utilisez pas un bouton « Add to Cart » standard pour votre panier, choisissez un bouton qui complète le thème de votre site (complète n'implique pas qu'il doit être exactement de la même couleur). Et assurez-vous de choisir un design et de vous y tenir. Le e-commerce prospère sur la confiance, et les boutons choisis au hasard érodent la confiance des clients.
