Share on LinkedIn3Share on Google+4Share on Facebook1Tweet about this on Twitter13

Suite à ce premier article sur l’analyse de la page d’accueil de la Fnac, voici quelques réflexions pour optimiser le taux de conversion du tunnel de commande du site Fnac. Passage obligé avant l’achat, c’est l’une des parties les plus sensibles d’un site e-commerce. Découvrez comment l’ergonomie peut améliorer l’expérience utilisateur, et servir de levier d’optimisation. Alors est ce que le site de la Fnac est optimisé pour la conversion ? réponse ci-dessous. Bonne lecture.

Le cross-selling ?

Après votre ajout au panier, ou sélectionnant le panier dans le menu vous arrivez sur un écran intermédiaire qui vous propose la vente de services et produits alternatifs. C’est une façon assez originale de faire du cross-selling et la majeure partie de l’espace principal y est réservée.

Analyse par Mathieu Fauveaux du cross-selling Fnac

L’utilisateur est entièrement concentré sur les garanties ce qui est un bon point pour le site, mais peut gêner l’expérience utilisateur. L’utilisateur qui découvre cette page au lieu de son panier peut être perdu, perdre patience et quitter la page. Vérifier le taux de sortie de vos différentes pages ainsi que la provenance de vos utilisateurs pour comprendre leur motivations / parcours.

Pour illustrer cette gêne, la vidéo compare la difficulté d’un tunnel de commande pour un utilisateur et la frustration que cela peut causer :

Conseils :

Faites un état des lieux des types de produits / services que vous vendez actuellement, combien, en complément de quel autre produit etc..

 

Les tests A/B vous permettront d’optimiser les ventes de services en testant :

- Le nombre de service : Faut-il ajouter plus de services ? En retirer ? lesquels sont consultés ?

- Le prix : Un écart de prix plus ou moins important

- La présentation du prix : Modification des formulations et d’affichage (grand VS petit) du prix, affichage par mois / semaine / année.

- Design : Modifier la page où ou vous proposer les services additionnels ( Fiche produit, popup, écran intermédiaire, tunnel de commande etc.. ), ajouter des pictogrammes etc..

 

Un seul Call-to-action par page.

L’utilisation du call-to-action est perfectible sur cette page et une règle simple doit être utilisée : 1 page = 1 action principale et des actions secondaires.

3 call-to-action pour la Fnac.com analyser par Fauveaux Mathieu

L’action principale est de passer la commande, et ensuite d’acheter des produits supplémentaires normalement. Ici l’unique bouton pour accéder à l’étape suivante a la même importance ( taille, couleur, police ) que les deux autres boutons. C’est surement un bon choix pour vendre davantage, mais en aucun cas pour faciliter la vie de l’internaute. Mettez un ordre d’importance aux actions par page, et faites des boutons en fonction de ces dernières avec différentes tailles, couleurs. ( Action principale, secondaire etc.. )

Conseils pour créer un bouton « call-to-action » :

Un bouton call-to-action, est un bouton qui désigne l’action la plus importante d’une page. Sur la fiche produit d’un site e-commerce, le bouton principal sera l’ajout au panier par exemple. Il doit être :

- Unique : C’est l’action principale de votre page.

- Coloré : Le seul à avoir cette couleur. Elle doit être opposée aux couleurs de votre charte graphique. Si vous ne savez pas quelle couleur est dominante, utiliser cet outil en uploadant une copie d’écran de votre site.

- Grand : De taille supérieure aux autres boutons.

- Indiquer l’action à venir : Doit avoir un verbe d’action qui décrit ce que l’utilisateur va réaliser comme action au clic.

Vous pouvez utiliser cette méthode pour réaliser des boutons d’action secondaires, avec des teintes différentes.

On rassure le client pour mieux vendre.

Très bon point, la présence d’un bandeau de ré-assurance en bas du tunnel. Même si la Fnac est un marchand connu, il est toujours bon de rappeler ses avantages aux clients.

La rassure ses clients dans le tunnel de commande

 Conseils :

Rassurez un maximum vos futurs clients dans tout le tunnel de commande. Trouvez les points qui pourraient poser questions auprès de vos utilisateurs, pourquoi ne pas faire un test A/B avec différents éléments de réassurance sur la fiche produit et dans le tunnel. Je parie que vous allez être surpris !

Par exemple pour acheter un service en porcelaine, vos clients vont se demander si il y a une assurance en cas de casse et comment cela va se passer. Quelques idées à indiquer dans un bandeau de rassurance :

 – Service client : Le numéro du service client (heures d’ouvertures, jours et tarif), être rappelé ou une adresse email de contact.

-  Paiement : Le paiement sécurisé (moyen de paiement, banque etc..).

 - Retour : Votre politique de retour et remboursement

 – SAV : Le service après-vente ouvert 24h/24h, gestion en moins de Xh pour un service etc…

Le panier.

Voici donc le (vrai) panier avec les informations de disponibilité, les frais de livraisons, la quantité etc.. tout ce qui fait un panier standard. C’est un bon point pour la Fnac de rappeler les coordonnées de son service client. A noter qu’Il vaut mieux préciser les horaires d’ouvertures, et le coût pour éviter à l’utilisateur de chercher ces informations.

Le panier standard de la Fnac

L’utilisation du vert pour l’éco participation est étrange, et permet à cette information d’être beaucoup plus visible que le bouton principal  » Validez et commandez « . Ici comme vous pouvez le voir, ces 2 couleurs secondaires (vert et violet) ne sont pas opposées mais tendent à l’être et ressortent donc plus naturellement.

Code couleurs présents sur Fnac.com par Fauveaux Mathieu

Alors oui il est intéressant de mettre en avant la garantie pour optimiser les ventes, mais pourquoi mettre en avant l’écoparticipation ?

Et si je continue mes achats ?

Le lien de retour vers les achats est bien conçu : il n’est pas mis en avant avec une forme type « bouton » et reste visible. Le placer à gauche simulerait mieux cette notion de retour, et permettrait de le séparer du bouton suivant.

La page d’identification.

Le fil d’Ariane est visible du premier coup d’œil indique la position à l’utilisateur et permet de revenir aux étapes précédentes.

La première partie du formulaire permet de récupérer rapidement les coordonnées personnelles, et demander les informations de livraison à l’étape suivante. Ça permet d’alléger le processus, mais ce n’est pas aussi rapide qu’un paiement en tant qu’invité. Pour continuer sur les points positifs, une phrase de réassurance est placée en bas à droite sur l’utilisation qui sera faite des données.

L'identification de Fnac.com analysé par Fauveaux Mathieu

Mauvais point concernant les champs obligatoires qui devraient être écrits en rouge pour suivre les standards du web, et être vite reconnaissable. Le libellé « * Champ obligatoire », est en bas de formulaire alors qu’il faudrait le placer en haut dans les bonnes pratiques. Ici ce n’est pas gênant puisque le formulaire est court.

Ici aucune indication lors de la sélection d’un champ, alors qu’une simple bordure colorée ou une ombre aiderez vos utilisateurs. De plus vous pouvez les aider en agrandissant les champs, avec une marge intérieur de 5 ou 10px, la sélection n’en sera que plus facile.

Conseils :

Lorsque vous créez un formulaire, respectez certains standard :

 – Champ obligatoire : Les étoiles « * » des champs obligatoires doivent être écrites en rouge, et cette légende inscrite au début du formulaire.

 – Exemple de donnée : Donnez des exemples à côté des champs lorsque c’est nécessaire.

 - Espace : Donnez de l’espace à votre formulaire, séparer les groupes de champ pour augmenter la lisibilité.

La gestion des erreurs.

La gestion des erreurs est très importante sur un formulaire, et permet souvent d’optimiser le nombre d’inscription. Un utilisateur peut faire un oubli, ou faire une erreur de saisie. Guidez-le au maximum dans vos messages avec des exemples, écrits en rouge, et surtout placez ce message au plus proche de l’erreur.

Gestion des erreurs sur Fnac.com

Ici le contrôle se fait en Ajax pendant la saisie, et avant l’envoi du formulaire. C’est rapide, et permet d’éviter l’envoi du formulaire, se rendre compte qu’il y a une erreur, recommencer etc…bon point ici pour la Fnac.

Il y a quand même un petit hic.. pour les utilisateurs qui ont un écran de faible/moyenne résolution. Ils lancent la validation du formulaire, et là rien ne se passe. Ils recommencent, une fois, deux fois (…) alors que le traitement est en cours. Veillez toujours à rendre compte des actions en cours. La seconde erreur est de mettre le message tout en haut du formulaire alors que l’utilisateur se situe à sa fin.

Conseil :

Pour écrire vos erreurs, suivez les standards du web :

 - Rouge : Un texte signalant une erreur s’écrit en rouge pour être facilement repérable et reconnaissable.

 - A proximité : Il doit être à proximité de l’erreur.

 - Précis : Il doit être le plus précis possible, en donnant un exemple si possible.

 - Fun : Et pourquoi pas tourné de façon sympathique ! L’utilisateur ne doit pas se sentir agressé par un message d’erreur, aidez-le.

 La page de livraison.

La Fnac propose 3 modes de livraison : Le retrait en magasin, le retrait dans un point relais, et la livraison à domicile. Ces modes permettent de répondre à de nombreux besoins, c’est un bon point. C’est a cette étape que l’utilisateur va enregistrer le reste de ses informations pour créer son compte, sous la forme des informations de facturation. Dans le cas d’un point relais, ou en magasin, la Fnac vous demandera quand même ces informations.

Etape de livraison sur Fnac.com

Il y a quelques points négatifs, comme le bouton grisé tout en bas, l’indication des délais de livraison, ou du tarif pour une livraison à domicile. Alors oui, il y a une fiche récapitulative tout en haut en lien, mais je ne suis pas sûr que ça profite à l’utilisateur. Bon courage pour comprendre cette fiche..

Dans le cas d’une livraison en point relais, ou après avoir entré toutes vos coordonnées pour livraison à domicile, le prix sera affiché tout en bas comme ceci :

Bloc d'information des tarifs de livraison sur Fnac.com

En survol rapide on pense voir le récapitulatif du panier avec la désignation des produits, leur disponibilité…  alors que ce tableau indique le tarif de livraison. Pourquoi ne pas mettre ces informations tout de suite en évidence et en haut de la page ?

 Une ou deux étoiles ?

Pour mettre un peu de piment dans ce formulaire, la Fnac a glissé des libellés avec une seule étoile et d’autres avec 2 étoiles. En lecture rapide on imagine devoir tout remplir, donc c’est un bon point pour engranger un maximum d’informations, mais ça ne facilite absolument pas le travail de l’utilisateur. Imaginez le doute qui peut s’installer dans la tête de l’utilisateur.

Texte obligatoire sur Fnac.com Mathieu Fauveaux

 On guide de A à Z.

Lors de la sélection d’un magasin pour y retirer sa commande, ou d’un points relais par exemple, pourquoi ne pas glisser une carte ? Par exemple pour votre site on peut aller plus loin, si vos utilisateurs s’enregistrent avant cette étape. Récupérez leur adresse et donnez la possibilité de voir l’itinéraire sous Google Map entre chez eux et ce point.

Modes de livraisons et guide utilisateur

L’étape paiement.

L’étape de paiement est assez chargée avec de nombreux onglets : codes promotionnel, type de carte, récapitulatif du panier et adresse de livraison. Ça en fait du monde ! Les types de cartes sont facilement repérables grâce aux pictos, et à la couleur.

Dernière étape de paiement dans le tunnel de Fnac.com

On rassure le client en affichant ses produits ( visuel ), on reprend l’adresse de livraison et les différentes horaires, ainsi que l’adresse de facturation. Autre point non négligeable, tous est modifiable grâce à un lien « modifier ».

La présence du bloc de réduction avant le bloc de paiement peut s’expliquer par le fait qu’il existe de nombreuses cartes cadeaux compatibles avec la Fnac. Les clients peuvent directement aller en magasin acheter un chèque cadeau Fnac. La plupart du temps, ce bloc est placé en dessous du bloc de paiement avant le bouton de validation.

La présence d’une phrase qui informe de la conservation des données bancaires est un bon point. Soyez transparent avec les données bancaires, les processus, et intermédiaires s’il y en a.

Conclusion.

Ce tunnel de commande traditionnel du site Fnac.com a des points perfectibles qui pourraient vite être corrigés. Il est possible de mettre plus en avant les ventes de produits/services, tout en améliorant l’expérience utilisateur en appliquant quelques règles d’ergonomie. C’est presque l’unique levier de d’optimisation que vous ayez pour augmener votre taux de transformation du tunnel. Les Tests A/B vous permettront de mesurer précisément l’impact de vos modifications, et d’effectuer des recherches sans trop de risques.

Share on LinkedIn3Share on Google+4Share on Facebook1Tweet about this on Twitter13

Ecrire un commentaire

requis

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>