Comment écrire un message d’erreur pour son site eCommerce ?

Passer une commande sur un site ecommerce oblige bien souvent l’utilisateur à remplir avec succès un formulaire. Même pour un utilisateur avancé, cette tâche est plus que périlleuse. Comment connaitre à l’avance la configuration du champ mot de passe ? Est-ce qu’il autorise les chiffres ? Doit-il contenir au moins 8 caractères ?

Nous allons voir qu’avec un peu d’aide, il est possible de réduire les frictions lorsqu’une erreur est détectée, le but étant d’augmenter votre taux de conversion à cette étape. Lors d’un test utilisateur chez Wexperience, nous avions mesuré l’impact des messages d’erreurs de mauvaise qualité. Pour résumer, l’utilisateur arrête bien souvent sa commande !

Apple, un système de gestion des erreurs complet

Apple utilise un contrôle de formulaire extrêmement complet indiquant toutes les conditions nécessaires à la validation d’un champ. L’utilisateur peut rapidement repérer les points non valides en rouge, mais aussi les points déjà validés pour ne pas créer une nouvelle erreur.

Cette idée est vraiment intéressante et n’a qu’un point négatif à mon sens, une surcharge d’informations. L’utilisateur doit parcourir l’ensemble des informations pour vérifier les éléments valides, pourquoi ne pas mettre les erreurs en haut de la liste pour faciliter la lecture ?

ux designer lille mathieu fauveaux formulaire erreurs

Lire la suite de Comment écrire un message d’erreur pour son site eCommerce ?

L’Occitane sur mobile, quelles optimisations possibles ?

Il y a quelques jours, j’ai voulu commander un produit chez L’Occitane depuis mon mobile. Je commande rarement depuis mon mobile et cette fois-ci, je n’ai pas pu passer commande à cause du formulaire de création de compte, mais ce n’est pas ce qui nous intéresse aujourd’hui. J’ai réalisé une petite analyse de la fiche produit et relevé des axes d’optimisations possibles grâce à des tests MVT ou A/B. Avec un peu d’intégration et du temps pour l’analyse des résultats, l’ensemble des tests sont très simples à mettre en place.

Loccitane-mobile-analyse-optimisation-ecommerce

Bonne lecture !

L’essentiel mais chargée

Lire la suite de L’Occitane sur mobile, quelles optimisations possibles ?

Suivre les bonnes pratiques sur le web, attention danger ?

Vous devez surement faire votre veille sur Twitter comme moi, et on voit souvent des articles de bonnes pratiques web de ce style : « 3 astuces pour la fiche produit parfaite ! » ou « Augmenter de 5% la conversion de son tunnel de commande avec des boutons orange. », …etc. Des titres racoleurs, un peu comme les rabatteurs de ces restaurants à touristes. Peu recommandé dans le guide du Routard.

En plus de ces articles, vous avez peut-être déjà entendu lors d’une réunion de projet, la citation de ces articles qui ressemblent à des légendes…bien ancrées dans les esprits de chacun. Alors faut-il les suivre à la lettre ? s’en inspirer ? ou y prendre garde ? Voici mon point de vue sur le sujet avec l’exemple de la couleur miracle ! Vous savez, celle qu’il faut absolument utiliser sur nos boutons pour mieux convertir, vous vous souvenez ? Très bien.

Études de cas pour une couleur de bouton parfaite

Le premier test A/B est réalisé par Hubspot test la couleur de 2 boutons sur une landing page, vert VS rouge. La version rouge convertit 21% de plus que la version verte :

red_green_button

 

Je vous invite à lire cette étude de cas très intéressante pour comprendre le résultat final. Hubspot a par exemple eu peur que le rouge soit perçue comme l’information stop ou danger.

Un autre cas ici, le bouton rouge gagne avec +34%  :

buttons

 

Alors, la couleur rouge est-elle parfaite ? Bien sur que non. Ces optimisations s’expliquent et suives une démarche particulière. Dans ces 2 exemples, le bouton vert est noyé au milieu d’autres éléments de même couleur ce qui réduit sa visibilité. Le bouton rouge a un taux de contraste beaucoup plus important (le rouge étant opposé au vert), il attire donc plus le regard. Basique ? Tout à fait mais efficace. Lire la suite de Suivre les bonnes pratiques sur le web, attention danger ?

Tape à l’oeil, quelles améliorations avec cette nouvelle version ?

Cette semaine, en me baladant sur Twitter, je suis tombé sur une news qui a aiguisé ma curiosité, la refonte du site eCommerce de Tape à l’oeil. En 2012, j’avais écrit un article avec quelques hypothèses d’optimisations de leur fiche produit. 1 an plus tard, l’enseigne refond son site internet en partenariat avec l’agence SQLI.

Je suis donc retourné lire mon vieil article pour voir comment a évolué cette fiche produit, est-ce que d’autres points peuvent être améliorés ? Pour vous faciliter la comparaison à l’ancienne version, je résumerai rapidement ce qui avait été dit l’année passée en suivant la même structure.

Un call-to-action toujours timide

Ce qui avait été dit : Le bouton acheter se fait très, trop discret; impossible de le voir du premier coup d’oeil ! La couleur est identique à beaucoup d’autres éléments de la page, et surtout ne fait pas partie du bloc gris qui rassemble les informations nécessaires à l’achat. Ce bloc rassemble les informations de tailles, de couleurs, de prix, mais pas le bouton d’achat.

Peu de changements, ce nouveau bouton reste toujours aussi discret. Pire, il est entouré de nouveaux éléments qui peuvent perturber l’utilisateur dans sa prise de décision. Par exemple, la carte membre doit-elle être si visible ? Est-elle indispensable pour acheter le produit ?  Même chose pour les réseaux sociaux, incitent-ils à acheter ? Je ne pense pas.  Pour finir les informations de contact au-dessus du prix restent très obscur ! Qui va-t-on avoir au bout du fil ? quel service ? pour quelle raison ? (On y reviendra).

Un bouton qui manque de contraste par rapport au reste de la page

La visibilité du bouton d’ajout au panier n’est donc pas meilleure, voici la fiche produit floutée. Quels éléments sont les plus visibles d’après vous ? Vous pouvez faire cet exercice sur vos pages, avec un flou de 5px sous Photoshop par exemple. Lire la suite de Tape à l’oeil, quelles améliorations avec cette nouvelle version ?

Comment augmenter la performance de la fiche produit de Grosbill

Grosbill a donné un coup de jeune à sa fiche produit, porte d’entrée de ce type de site friand de comparateurs de prix. Alors comment optimiser cette landing page et inviter les visiteurs à mettre le produit au panier ? Début de réponse.

Pour commencer voici l’ancienne fiche produit :

Ancienne version optimisation ecommerce mathieu fauveaux

et la nouvelle version :

Refonte fiche produit grosbill optimisation ecommerce

Au survol de cette refonte, la première chose marquante est la surcharge d’informations et de couleurs : Une zone très large d’informations de points de retrait ainsi que d’accessoires et surtout 15 couleurs différentes. Ouchh ! [Tweet « Finalement l’utilisateur ne verra que peu d’informations sur le produit au-dessus de la ligne de flottaison. »]

Lire la suite de Comment augmenter la performance de la fiche produit de Grosbill

Les agences web sont-elles adaptées au eCommerce d’aujourd’hui ?

Dans la longue vie d’un site eCommerce  une agence web est appelée lors de créations de pages ou dans un cycle de 4 à 5 ans pour une refonte complète.  Cette demande intervient souvent après quelques années pour rafraichir l’identité visuelle d’une marque, mais est-ce que les dirigeants mesurent-ils toute la portée de cette demande ?

Peindre sans boucher les trous

Je ne vais pas me faire d’amis mais combien d’agences se débrouillent pour travailler le plus rapidement possible sans notion de qualité/performance, dans le but de recevoir le précieux chèque le plus rapidement possible? Impossible à dire ! Prenons donc le problème à l’envers : Combien d’agences osent mesurer précisément le retour sur investissement de leur travail et de facturer en fonction de celui-ci ? (Contactez moi si vous avez des adresses Françaises ou étrangères avec cette vision, ça m’intéresse)

Sans outils de mesure, les principaux éléments qui vont conditionner la réussite de cette refonte seront l’expertise des équipes interne, leurs processus de conception et le discours commercial. ( et la chance ? )

Bundesarchiv_B_145_Bild-F038812-0014,_Wolfsburg,_VW_Autowerk

Lire la suite de Les agences web sont-elles adaptées au eCommerce d’aujourd’hui ?

Comment hiérarchiser les informations sur une fiche produit eCommerce ?

Vous vous êtes surement déjà demandé si certaines informations avaient une influence sur les ventes, comment prioriser les éléments entre eux lors de la prochaine refonte. Quel dilemme n’est-ce pas ? Il n’y a pas de fiche produit miracle ou parfaite mais avec quelques réflexions, on peut essayer de trouver la plus adaptée à votre cas.

Une fiche produit surchargée

Prenons l’exemple du site Mistergooddeal et de sa fiche produit surchargée. On peut observer de nombreux pictogrammes, couleurs, un visuel animé (..) et pas moins de 9 prix affichés ! Pourquoi placer au second plan une information comme le prix ? Est-ce une information inutile pour un utilisateur ?

Jouons à un petit jeu : A combien s’élève le prix de cette machine à laver ? 3…2 … 1 .. TOP

Fiche produit ecommerce mistergooddeal optimiser la conversion du taux de mise au panier
La fiche produit de Mistergooddeal est surchargée d’informations et affiche plusieurs tarifs ce qui ne facilite pas la prise de décision de l’internaute.

Vous avez surement dit 349,99 € au premier coup d’œil mais le prix final ( écrit avec une police de 10px…mais passons ) s’élève à 359,99 €.  La conséquence de ce choix, aussi simple soit-il, peut être la déception à la découverte de l’information plus loin dans le tunnel. Lire la suite de Comment hiérarchiser les informations sur une fiche produit eCommerce ?

Analyse ergonomique de la nouvelle fiche produit Pimkie en 4 points.

Le site Pimkie.fr vient de lancer une nouvelle version de sa fiche produit et le site en avait bien besoin. Les couleurs étaient criardes, la hiérarchisation de l’information très moyenne etc.. Alors est-ce que cette nouvelle version améliore t’elle ? Est-elle adaptée au responsive et aux nouveaux moyens de consulter internet ? Un début de réponse en 4 points. Bonne lecture.

Une hiérarchisation de l’information améliorée.

La première chose qui saute aux yeux quand on arrive sur cette nouvelle fiche est une impression de « douceur ». L’utilisation de couleurs pastels à la place des couleurs flashy fait du bien aux yeux, et surtout, on a une impression de sim-pli-cité ! On a donc une meilleure organisation de l’information avec une fiche produit séparée en 2 colonnes : à gauche les images et à droite les informations nécessaire à l’acte d’achat (Prix, description, tailles, quantité, couleurs…). On passe d’une image centrale avec les informations tout autour, à une lecture de gauche à droite; c’est un excellent point. Le marketing n’est plus coincé entre le logo et le moteur de recherche mais sur une large zone en haut de la fiche, pour annoncer comme ici les e-card personnalisée. Cet emplacement est parfois ignoré des utilisateurs La réassurance devient plus intéressante grâce aux onglets de description et des réseaux sociaux mieux intégrés après la refonte :

 Pimkie-refonte-fiche-produit-ergonomie-analyse-fauveaux-mathieu

Voici l’ancienne version : Lire la suite de Analyse ergonomique de la nouvelle fiche produit Pimkie en 4 points.