la wouat

Basé sur le classement des sites e-commerce de la FEVAD (1er trimestre 2009), voici un petit tableau récapitulatif que j’avais envie de partager depuis un moment…

La question du bouton de “Call to Action” sur une fiche produit est un des éléments sur lequel les webdesigners, DG, et responsables web analytics (ou vous, tout seul derrière votre écran) peuvent parfois s’arracher les cheveux.
Voilà de quoi s’inspirer si vous démarrez le design de votre fiche produit et désirez rester dans les rails de ce que les internautes peuvent avoir l’habitude de rencontrer sur leur site internet marchand favori, en terme de call to action pour l’ajout de produit à leur panier.

Notez bien que ces exemples ne représentent pas de bonnes ou mauvaises pratiques en la matière, la meilleure méthode restant bien évidemment le testing multivarié pour optimiser le design de vos pages produit.

Mais le benchmarking n’étant pas encore mort et inutile, n’hésitez pas à consulter ce tableau pour vous mettre dans l’ambiance

PS : L’évolution au fil du temps du webdesign de ces mastodontes de l’e-commerce pouvant être encore bien plus intéressante qu’un simple relevé à un instant “t”, nous tenterons de publier ce tableau récapitulatif régulièrement sur la Wouat.

Enseigne	Ambiance chromatique du site	Bouton d’ajout au panier

Analyse et bonnes pratiques

Utilisez une icône pour illustrer l’action envisagée

85% des boutons présents dans notre comparatif disposent d’une icône, représentant l’action que l’internaute effectuera en cliquant sur l’élément.
La présence d’une icône au sein d’un bouton d’action permet à l’utilisateur d’associer une image à l’action souhaitée (en l’occurence : “ajouter un produit à mon panier”).
Ma préférence en la matière revient au bouton de 3Suisses.fr car on y retrouve la notion d’ajout via la flèche verticale, en plus du traditionnel panier / caddie :

Privilégiez une forme rectangulaire aux bords arrondis

Pourquoi privilégier une forme rectangulaire aux bords arrondis pour votre bouton d’action ?
Tout d’abord parce qu’une forme rectangulaire permettra l’insertion d’un texte plus aisément, et ensuite tout simplement car dans la vie “réelle”, nous sommes habitués à rencontrer des boutons de cette forme (claviers de téléphone ou d’ordinateur, manettes de consoles, boutons d’ascenseurs et j’en passe…).
Libre à vous de designer un bouton de forme circulaire ou triangulaire si vous souhaitez dérouter vos visiteurs, ou si cela correspond vraiment à un design de site web “insolite”…
Mention spéciale pour la forme hybride du bouton d’Amazon que je trouve très efficace :

Le libellé texte : faites au plus simple et utilisez l’infinitif

Simplifiez au maximum le libellé de votre bouton d’action.
Généralement, la règle à suivre pour une efficacité maximale est de ne pas dépasser 3 mots (ex : “Ajouter au panier”). Si l’action est plus complexe, vous pouvez monter jusqu’à 4, ou 5 mots, mais c’est déjà beaucoup.
Enfin, utilisez toujours l’infinitif (”…er”) plutôt que l’impératif (”…ez”). Ainsi, l’utilisateur aura d’avantage l’impression d’avoir le contrôle sur son action.
Quelques exemples de libellés d’action efficaces : “S’abonner”, “Acheter”, “Recevoir la newsletter”, “Demander un devis”, etc…

Plus c’est gros, mieux c’est ?

Premier conseil : votre libellé doit être facilement lisible (caractère 12 minimum).
Deuxième conseil : la hauteur de votre bouton doit être environ égale au double de la hauteur de votre libellé. Vous permettrez ainsi à l’utilisateur d’avoir une zone de clic plus confortable :

Ensuite, la taille réelle d’un bouton d’action dépend de 3 paramètres :

• Votre objectif objectif de conversion,
• Le nombre total d’actions proposées à l’utilisateur sur cette même page (nombre de choix),
• Le taux d’occupation de la page dans laquelle il se trouve (nombre d’éléments).

Vous l’aurez compris, votre objectif de conversion est déterminant :
- Pour la page d’accueil d’un service en ligne gratuit dont l’objectif est l’acquisition de nouveaux utilisateurs, le bouton d’action pour le Signup sera très grand, à l’instar de www.mailchimp.com.
- A l’inverse, une page plus complexe (ex : la fiche produit d’un site e-commerce proposant des produits associés / ventes croisées) se verra attribuer un bouton d’ajout au panier de taille plus raisonnable.

Il n’y a donc pas de règle, faites appel à votre bon sens : votre bouton doit être un des éléments le plus visible de la page et doit être situé au dessus de la ligne de flottaison de l’internaute.
Si l’on devait citer un mauvais exemple en la matière, le bouton d’ajout au panier de Carrefour Online n’est pas particulièrement réussi :

La couleur dépend de la charte graphique de votre site

La couleur d’un bouton de call-to-action doit lui permettre d’attirer l’attention de l’internaute, tout en respectant la charte graphique du site.
Vous remarquerez que la plupart des boutons présentés dans le tableau ci-dessus utilisent au moins une des couleurs de la charte graphique du site Internet.

En conclusion…

Un bouton de call-to-action doit :

• représenter clairement l’action proposée à l’internaute (via son icône, son libellé, et sa forme),
• s’intégrer harmonieusement au sein de la page / site,
• être idéalement situé au dessus de la ligne de flottaison de la page (pour la plupart des configurations d’écran).