François Ziserman : un entrepreneur à l'aire Post Carbonne
Je suis invité, le Café-Croissance, à parler paiement et performance.
Un beau sujet…
Vaut il mieux avoir le paiement sur le site e-commerce ou pas ?
Comment optimiser cette page clé ?
Je suis parti de pas mal d’exemples, pour discuter de tout ça de manière concrète.
Au fait, c’est le 17 Novembre, au Fouquets (et alors, c’est pas bien le Fouquets ? 😉 )
La site d’Apple est pour moi une référence, avec sa simplicité, et la mise en avant d’un seul produit.
Avec la sortie du MacBook Air, Apple va plus loin, et propose une sorte de « pré home » :
La page est 100% dédiée à la mise en avant du produit… Mais au bout de quelques secondes, par un effet « dissolve », le bord de l’image disparait, pour laisser apparaitre les menus traditionnels :
Cela me semble un excellent compromis : on a dans un premier temps une immersion complète, puis, sans avoir à cliquer, on arrive sur la page d’accueil.
Je trouve ça bien mieux que les « pré home » habituelles, qui prennent le risque d’augmenter le taux de rebond.
Cet article est écrit par Christophe Davy, dirigeant de Brand Online Commerce, qui est « l’invité permanent » de François sur ce blog.
Depuis son lancement début septembre, le site e-commerce de Zara a généré beaucoup de commentaires, positifs pour la plupart. Il faut dire que ce site est vraiment bien fait : je ne lui trouve personnellement rien à redire, si ce n’est le zoom sur les produits, qui ne s’active que sur un clic ; il aurait mieux valu me semble-t-il un zoom sur survol de la photo, sans clic (mais cela a peut-être été un choix délibéré pour accélérer le chargement initial de la page et/ou favoriser au maximum le référencement naturel dans Google).
J’ai même trouvé sur le site zara.com une excellente innovation concernant la mécanique d’ajout d’un produit au panier. Découvrons-la ensemble…
Sur ce site, une fiche produit se présente de la sorte :
La grande question que se pose tous les concepteurs de sites e-commerce, c’est comment faire réagir le site lorsque l’internaute clique sur le bouton « Ajouter au panier » ?
Jusqu’à présent, j’avais croisé 3 types de gestion de l’ajout au panier :
– l’affichage direct du panier ; dans ce cas, on favorise une vente mono-produit, rapide et vite terminée,
– l’affichage d’un pop-up demandant si l’on souhaite afficher le panier ou continuer ses achats ; là on invite l’internaute à faire un choix, car le pop-up ne s’efface que lorsqu’une des deux options est choisie,
– l’affichage d’un compteur après le mot panier, avec parfois une petite animation envoyant virtuellement le produit dans le panier ; avec ici le risque que l’internaute se demande ce qu’il doit faire pour terminer son achat.
Et bien les concepteurs du site Zara.com proposent une nouvelle solution, avec l’affichage d’un 2ème bouton intitulé « Passer commande » juste à côté du bouton « Ajouter au panier » :
C’est très astucieux car, l’internaute venant de cliquer sur le bouton « Ajouter au panier », son attention visuelle se situe dans cette zone de l’écran (et pas en haut, là où se situe le Panier).
Je ne serais donc pas étonné de voir cette astuce reprise par d’autres sites e-commerce dans les prochains mois…
Je donnais une formation la semaine dernière, et l’une des personnes de la salle m’a parlé du site Tiffany :
De manière générale, les sites liés au luxe ne respectent pas les standards du e-commerce, avec comme résultat prévisible des taux de transformations… adaptés ;).
Ici, c’est à mon sens un des meilleurs exemple, entre luxe et performance.
Le site, comme vous pouvez le voir sur la home, est extrêmement dépouillé.
Et les visuels produits sont les plus grands possibles.
Les pages catégories sont également très dépouillées… A l’extrême, même, puis qu’aucun texte n’est affiché.
Très joli. On notera juste que ce n’est pas la meilleure solution pour le référencement naturel.
Au passage de la souris, une autre photo est affichée, montrant le produit en détail.
Cette zone est gérée en Flash.
Au dessus, quelques options permettent de naviguer dans la catégorie avec des filtres : matière, prix, …
Dernière page analysée : la page produit :
Très propre également. Cela n’empêche pas le site de mettre en oeuvre de l’ergonomie incitative, avec un bouton « ajouter au panier » bien visible.
Bon, la photo du produit ne permet pas de voir le produit « d’assez près » à mon gout.
Très bon exemple en tout cas, qui montre qu’on peut faire un site classe et efficace.
L’apple store vient d’être mis à jour, et propose maintenant un nouvel outil : un comparateur / configurateur :
La fonction est particulièrement intéressante, parce qu’elle répond à un vrai sujet : comment aider les internautes à choisir le bon produit, quand chaque produit est configurable ?
La réponse proposée est, comme souvent chez Apple, réellement soignée.
Premier point : comment garder une interface simple et lisible, alors qu’on peut comparer pleins d’options ?
Deux réponses sont proposées :
1) La page est bâtie avec une iFrame, et la partie haute de la page reste affichée, même quand on descend pour afficher les options en bas de la page. Ainsi, le nom du produit et son prix reste affiché en permanence, comme sur Excel, quand on « fige les volets ».
2) Les options sont regroupées en thèmes, qui peuvent être repliés ou dépliés.
Enfin, l’outil limite à la comparaison de trois produits, pour garder un affichage en pleine largeur.
Deuxième point : comment comparer des produits qui peuvent être personnalisés ?
La réponse est finalement simple, mais je ne l’avais jamais vu en oeuvre : Apple propose simplement de customiser chaque produit, option par option :
Simple, non ?
Et terriblement puissant.
La nouvelle version de l’OS d’Apple pour mobile devait être une étape majeure, avec en particulier l’ajout du multi-tâche.
Bon, effectivement, on peut lancer plusieurs applications en parallèle, et passer de l’une à l’autre…
Sauf qu’il y a, à mon sens, un défaut de conception énorme.
En effet, on ne peut pas quitter une application simplement.
Rapidement, on a donc des dizaines d’applications qui tournent en parallèle.
Hors, pour aller de l’une à l’autre, on doit choisir parmi quatre icônes visibles.
On doit donc faire défiler les icônes, quatre par quatre, jusqu’à trouver l’application cherchée.
Et évidemment, avec toutes ces d’applications qui tournent en parallèle, les performances sont bien attaquées à la longue.
Autre bug : la gestion des emails ne fonctionne plus vraiment bien, avec affichage de nombreux messages fantômes.
Dommage…
ça me rappelle les concours de SVM : il fallait trouver les alertes les plus débiles.
Tous les messages de l’iPhone ne sont pas toujours très clairs… Exemple :
J’ai passé un peu de temps a chercher des infos sur Citroën. Le résultat est… qu’il reste un long chemin à Citroên pour avoir une offre cohérente en ligne.
Le test :
Hum, Citroen propose une interface « riche ». Ok, why not ?
Moi, ce que je veux, c’est faire une bonne affaire. Je vais donc assez naturellement cliquer sur l’offre de juin (la grosse zone, a gauche) :
L’interface est complètement différente de celle d’avant. Bon, je continue.
Je voulais des infos sur les offres sur le C4 Picasso.
Ok, je peux voir les produits en stock, je clique donc sur « Citroen Store ».
Surprise…
On arrive sur un nouveau site, et bien sûr, toutes les informations contextuelles ont été perdues.
Je dois donc de nouveau chercher comment décrire le véhicule que je cherche.
Cette partie du site est d’ailleurs particulièrement mal faite, puisque je dois choisir un garage, pour consulter les offres. Impossible donc d’avoir une vue sur les véhicules sur une zone donnée.
Bon, retour sur le premier site, ou je peux choisir le modèle… même si la navigation est tout sauf intuitive, j’arrive, après un effet 3D plongeant du meilleur effet, sur la page d’accueil du produit :
On voit tout de suite qu’on est dans un espace piloté par le marketing :
On peut tout savoir sur le produit, l’intérieur, l’extérieur, … Mais par contre, si on cherche a acheter un tel véhicule, l’info n’est pas si facile à trouver…
Bon, je choisi « configurateur » :
Arghhh ! On est bien loin de la 3D ! Je dois de nouveau choisir le véhicule à configurer, avec une nouvelle interface.
Bon, j’arrête là cette petite revue. Le configurateur mériterait lui aussi une petite analyse, mais ce que je voulais montrer est déjà bien clair :
J’imagine que la réalisation de tous ces sites à du coûter bien cher… Et c’est, à mon humble avis, beaucoup d’argent perdu.
Il y a la volonté de mettre beaucoup de choses, de présenter des interfaces riches et innovantes… Mais les fonctions de bases ne sont pas assurées, et l’internaute de bonne volonté n’a pas facilement accès aux informations simples.
Le côté positif, c’est que cela montre a quel point des entreprises comme Araok ont du pain sur la planche.
Lacoste vient d’ouvrir sa boutique en ligne :
Premier point, Lacoste a decidé de séparer la boutique en ligne du site « société ».
C’est, pour ce type de marque, une bonne idée. Cela permet à la boutique de se concentrer sur son rôle : vendre.
La boutique est plutôt bien faite. Le moteur derrière la boutique est Demandware.
Le moteur de recherche propose, dès la saisie des premières lettres, une liste de suggestions (comme google).
La page de résultat propose des filtres d’aide à la sélection :
C’est une bonne idée. même si je pense qu’il serait mieux de masquer les critères non discriminant (Type ici, qui n’a qu’une valeur).
Autre bonne idée, les vignettes qui présentent les produits proposent de voir directement les déclinaisons couleurs (le visuel change dynamiquement au passage de la souris sur une vignette couleur).
Visite de la page produit :
C’est très pro :
De grands visuels, de qualité.
La mise en page, clair, structurée.
La mise en œuvre d’une ergonomie incitative, avec un bouton « ajouter au panier » d’une couleur bien visible, qu’on ne retrouve nul part ailleurs.
La fonction Zoom est mise en œuvre de deux manières :
Au survol de la grande photo, et avec des photos de détails.
Quand on ajoute le produit au panier, celui ci se déroule, pour afficher son contenu :
La page panier propose une fonction originale :on peut modifier son article, sans sortir de la page :
Il est donc possible d’ajuster la couleur, la taille ou la quantité, sans sortir de la page panier. C’est une bonne idée !
Bravo donc pour cette réalisation.
A mon avis, on peut améliorer la navigation dans le catalogue : l’accès aux catégories est un peu long.
Les sites e-commerce se copient beaucoup les uns les autres.
Ca peut être une bonne idée… Mais le danger, c’est de copier une mauvaise idée, ou de copier une idée, qui n’est pas applicable dans le contexte.
Bref, méfiance !
Le site babyage a fait des tests A/B sur l’emplacement du bouton « ajouter au panier ».
Ils sont parti là dessus après avoir lu une étude expliquant que la partie gauche de l’écran est « plus chaude » que celle de droite.
Le résultat de leur test : la transfo est meilleure avec un bouton à gauche !
Et le test semble avoir été bien fait, puisqu’il prenait en compte le taux réel de transformation : c’est à dire le taux de clients qui vont jusqu’à l’achat du produit (et pas simplement l’ajout au panier).
L’amélioration mesurée est de 16.7% !
Vous remarquerez que la zone d’ajout au panier est particulièrement bien mise en valeur, avec un prix qu’on ne peut pas rater. autre remarque : le bouton d’ajout au panier est particulièrement incitatif, avec une couleur unique qu’on ne retrouve nul part ailleurs dans le site.
(source GetElastic et Whichtestwon.com)
