Blog OSEOX : Marketing, Trafic et E-commmerce

RSS referencement
Ajouter à netvibes
Ajouter à google

Oseox c'est aussi plus de 500 formations web, un forum et des services gratuits.

E-commerce

107 boutons "Ajouter au panier" des meilleurs sites e-commerce

Nicolas Debaets

26 août 2010

Voici un article intéressant qui reprend une centaine de boutons "Ajouter au panier" présents sur le top des sites e-commerce en 2006. Peut-être pourrez-vous vous en inspirer, ou en tirer avantage pour optimiser vos boutons.

Par Nicolas Debaets,

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…

1-800-Contacts 1-800-PetMeds
1-800-Flowers Abercrombie Fitch
AbeBooks Alibris
Amazon.com Avon
Art Apple
American Eagle Barnes and Noble
BassPro Bed Bath and Beyond
Bath and Body Works Best Buy
Blair Cabelas
Blue Nile Buy
Bloomingdales Cafe Press
Chadwicks CDW
Circuit City Coldwater Creek
Comp-U-Plus CompUSA
Costco Crate and Barrel
Crutchfield CVS
dELiAs Dell
Disney Shopping Drs Foster and Smith
Domestications Drugstore
eBags eCost
Eddie Bauer eTronics
Footlocker Follet
Furniture FTD
Hickory farms GAP
Harry and David Gateway
Hallmark Home Click
HP Home Depot
I Buy Digital JC Penney
Zappos JC Whitney
J Jill Lands End
Liz Claiborne Lillian Vernon
Linens n Things LL Bean
Macys Lowes
MLB Musicians Friend
Nieman Marcus New Egg
Nordstrom Northern Tool
Office Depot Office Max
Oriental Trading Company Omaha Steaks
Overstock Palm
PC Connection PC Mall
QVC PetSmart
Pro Flowers Peapod
Ralph Lauren Radio Shack
REI Ritz Camera
SAKS Scholastic
Sears Schwans
Sephora Shop NBC
Smart Bargains Sony Style
Sportsmans Guide Staples
Spiegel Victorias Secret
Target The Sharper Image
Tiger Direct Toys R Us
Urban Outfitters Talbots
VistaPrint Walmart
Williams Sonoma Walgreens
J Crew

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.

S'il vous plait, motivez moi à écrire d'autres articles

Formez-vous avec notre newsletter professionnelle (gratuite)


(En cadeau, un guide sur le Référencement de plus de 30 pages)

Nicolas Debaets

Passionné par l'e-marketing et toutes les innovations offertes par les TIC, Nicolas Debaets a pu développer son approche stratégique et analytique de ces domaines en travaillant aussi bien en agence que chez l'annonceur. Aujourd'hui il se spécialise sur les différents leviers qu'Internet met à disposition pour générer du trafic et optimiser l'e-réputation des marques.

Affichez les commentaires

N'oubliez pas de vous abonner au flux

S'inscrire à la newsletter (info exclusive)

Recevoir 80 tests Référencement ?
(PDF gratuit de 31 pages)
(Désabonnement en 1 clic)
oseox Monitoring
Yooda
E-commerce

E-commerçants ? Vous recherchez un partenaire ?

18/03/2015 par Aurélien Bardon : 13094 lectures.

chapeau bas de bloc
Référencement

Code promo SEOCampus 2015

06/03/2015 par Aurélien Bardon : 12162 lectures.

chapeau bas de bloc
Développement Web

CDI Full Stack Developer

18/12/2014 par Aurélien Bardon : 14779 lectures.

chapeau bas de bloc
Référencement

Compte rendu du SEOcamp'US de Lille 2014

09/12/2014 par Aurélien Bardon : 13181 lectures.

chapeau bas de bloc
Référencement

Apéro Référencement à Lille le 5 décembre

02/12/2014 par Aurélien Bardon : 11011 lectures.

chapeau bas de bloc
Internet

Interview de Julien Ringard

26/11/2014 par Aurélien Bardon : 10503 lectures.

chapeau bas de bloc
Internet

Interview de Mounira Hamdi, spécialiste SMO

19/11/2014 par Aurélien Bardon : 13224 lectures.

chapeau bas de bloc
Internet

Le programme du SEOCAMP'US de Lille dévoilé

18/11/2014 par Aurélien Bardon : 11038 lectures.

chapeau bas de bloc
Internet

Interview de Nicolas Gallet

17/11/2014 par Aurélien Bardon : 9465 lectures.

chapeau bas de bloc
Internet

Interview de Elie Sloïm

14/11/2014 par Aurélien Bardon : 11509 lectures.

chapeau bas de bloc

Forum Marketing