Catégorie : Cas d’études

L’optimisation ergonomique passe par les tests A/B

Depuis plusieurs mois, Wexperience a lancé une offre d’optimisation de l’ergonomie à la performance. Plusieurs clients nous ont déjà suivi sur ce terrain (Okaidi, Unigro, n°2 de la VAD en Belgique, Prisma, Tikamoon).
A travers cette offre, nous sommes en train de démontrer qu’il est possible d’améliorer la performance commerciale globale du site en améliorant son ergonomie.
Cette amélioration passe par la mise en oeuvre de tests A/B ou multivariés sur les sites de nos clients. Chaque test permet de détecter quelle version de page convertit le plus, mais aussi de générer du chiffre d’affaire supplémentaire. Ainsi, pour un test de 2 semaines, nous avons été capable de générer 100 k€ ttc en travaillant sur l’ergonomie des boutons du tunnel de commande. Ce qui, vous le reconnaîtrez n’est pas anodin.

Une vraie méthodologie

Pour obtenir de tels résultats, il n’est évidemment pas question de travailler au hasard et l’étape des tests n’est que l’aboutissement final d’une forte phase d’analyse quantitative et qualitative :

• Analyse du site par inspection ergonomique : ce sont nos experts qui regardent votre site sous la loupe de l’expérience et de leur connaissance du web
• Tests utilisateurs : ce sont vos utilisateurs qui passe votre site à la loupe (avec la complicité de notre écran de eye-tracking)
• Web analytics : les web analytics viennent compléter notre analyse en permettant de minorer ou de majorer les défauts détectés fonction du trafic

Cet ensemble de données permet d’établir une feuille de route de plusieurs mois (en général un an) permettant de lancer des campagnes de tests d’optimisation.

Wexperience « libère » vos équipes techniques

Wexperience utilise Visual Website Optimizer, une solution de tests A/B  puissante, capable de s’adapter à toutes les tailles de trafic, et surtout libérant entièrement vos équipes de développement à d’autres tâches. En effet, une fois VWO implanté sur votre site, il n’est plus nécessaire de requérir à vos équipes techniques pour l’intégration des tests. Tout se fait à distance par Wexperience.
Chaque test dure environ 2 semaines (sachant que plusieurs peuvent être lancés en même temps) et permettent d’obtenir des résultats en temps réel (CA supplémentaire, mais aussi augmentation du taux de transfo). Ne sont gardées en ligne que les meilleures versions, celles générant la meilleure valeur par visite (et non pas seulement la meilleure augmentation du taux de transfo).
Cerise sur le gâteau : il est possible de faire tourner les tests sur 100% du trafic le temps de mettre en place l’implémentation technique par vos équipes. Ainsi, vous profitez de notre optimisation sans avoir à recourir immédiatement à du temps homme interne ou externe.
Si vous souhaitez en savoir plus, n’hésitez pas à me contacter directement sur mon portable au +33 6 59 38 92 92 ou par email à olivier@wexperience.fr
A bientôt !

Après avoir abordé les problèmes de pagination sur les pages liste ayant une large gamme de produits dans mon dernier article, il me semblait pertinent d’évoquer un second problème posé par cette abondance de produits sur ces pages.  Une offre importante implique davantage de moyens mis en oeuvre pour guider l’utilisateur.

Mise en situation
Muriel est à la recherche d’une paire de ballerines noires. Parmi les 200 produits présents sur la page, il n’y aucune raison qu’elle ne trouve pas le produit de ses rêves. Il s’agit maintenant de chercher quelle sera la paire élue. Après une dizaine de fiches produit visitées, peut être même après une dizaine de pages liste visitées,elle est heureuse de pouvoir dire : « Ça y est mon choix est fait, il s’agit de la cinquième paire que j’ai vue… »  C’est à ce moment là qu’arrive le moment fatidique où elle va devoir retrouver LA paire de ballerines au milieu de toutes les autres.

Solutions possibles
Changer la couleur du lien sur la page liste pour indiquer à l’utilisateur les fiches produits déjà visitées, lui permettrait de retrouver plus facilement la fameuse paire de chaussures.
Il existe bien sûr des fonctionnalités telles que l’ajout aux favoris ou encore les derniers articles consultés qui permettent à l’utilisateur de retrouver facilement son produit, mais il ne l’utilise pas toujours. C’est pour cette raison que cette simple règle qui nous aide tous les jours lors de nos recherches sur Google et autrefois présente sur tous les sites, mériterait de revenir au goût du jour…
Certains sites possèdent des produits qui sont très semblables ou plus techniques, lesquels sont plus difficiles à différencier à l’aide de la photo ou du nom du produit sur la page liste. Il est d’autant plus important sur ces sites de bien différencier les pages visitées des autres.
Ici, un exemple : Office easy qui vend des articles de téléphonie modifie la couleur des intitulés des produits consultés.

La pagination pose régulièrement des problèmes sur les sites que nous testons. Beaucoup proposent une large gamme de produits. Afin d’affiner ces listes, des filtres sont proposés. Il est aussi possible de changer le nombre d’articles par page, diminuant ainsi le nombre de pages rayon proposées.
Cependant les utilisateurs n’utilisent pas tous les filtres, de peur de manquer une partie de l’offre. Et certains n’aiment pas non plus augmenter le nombre d’articles par page de peur de se retrouver avec une liste de produits  interminable où il est difficile de rester concentré jusqu’à la fin. Dans ce cas-là, il n’est pas rare de se retrouver face à une dizaine de pages rayon… et c’est là qu’une mise en forme pertinente de la pagination prend toute son importance.
Des exemples de pagination qui ne facilitent pas la recherche des utilisateurs :

Il est important de mettre en place une pagination adaptée à l’offre de son site. Si l’utilisateur peut se retrouver devant une quantité non négligeable de pages rayon il faut alors lui permettre de retourner le plus facilement possible à chacune des pages. La méthode qui a pour l’instant fait ses preuves lors des tests est le menu déroulant. L’utilisateur peut ainsi naviguer de pages en pages et retourner sur celles de son choix à tout moment. De plus, l’utilisation du menu déroulant ne surcharge pas la page.

Exemple de pagination sous forme de menu déroulant :

Proposer des vendeurs sur un site internet comme dans un magasin physique c’est possible et Jimmy Fairly l’a fait. Ce site spécialisé dans la vente de lunettes solaires et de lunettes de vue propose une fonctionnalité de chat qui  permet à tout moment de la navigation d’entrer en relation avec un « vrai » opticien.

Cette fonctionnalité de chat est présente sur toute les pages dans le header et sous forme d’onglet à droite de la fiche produit. Elle est visible mais n’est pas particulièrement mise en avant.
Petit bonus : si un « fairly opticien » est présent au moment où vous vous connectez, il se peut que ce soit lui, qui au bout de quelques temps de recherche, vous interpelle pour savoir si oui ou non vous avez besoin d’aide. Ce qui peut se révéler très pratique dans le cas où vous n’auriez pas vu la fonctionnalité et que vous auriez des interrogations plein la tête.
La fenêtre de chat s’ouvre alors en bas de page, n’est pas intrusive et ne perturbe absolument pas la navigation. Certaines fonctionnalités sont proposées afin de pouvoir mémoriser la conversation (imprimer, recevoir par mail) ce qui permet de garder les informations fournies par l’opticien. Il est aussi possible d’augmenter ou de rétrécir la taille de la police d’écriture.
De plus, afin de ne pas encombrer la page, la fenêtre se ferme automatiquement lorsque la conversation est arrêtée depuis un certain temps (Un message prévient l’internaute à l’aide d’un petit décompte !) . On peut néanmoins accéder de nouveau à la discussion très simplement au cours de sa navigation.

L’offre de ce site se prête tout particulièrement à ce genre de service. L’achat d’une paire de lunettes de vue sur internet n’est pas forcément rassurant pour l’utilisateur et peut amener à se poser de nombreuses questions.
Une aide qui devrait être appréciée et encourager les internautes à faire une bonne action 😉 : chez Jimmy Fairly, une paire de lunettes achetée = une paire de lunettes offerte à une personne dans le besoin.

Aujourd’hui faisons un zoom sur une fonctionnalité vue récemment sur la page d’accueil du site Archiduchesse.com. Pour rappel, ce site a fait le choix de présenter une de ses catégories de produit en page d’accueil. Exit donc les sempiternelles offres commerciales et autres constituant la première page du site. Bien sûr c’est un choix qui se justifie par rapport à l’offre produit et qui ne peut pas être adopté à tous les sites marchands.

Une déclinaison de l’offre impliquant une évolution ergonomique.

Jusqu’à récemment les produits étaient présentées de la manière suivante sur la page d’accueil.

La disposition des tailles, permettant d’ajouter directement une paire au panier, convenait très bien jusqu’à ce que l’offre produit évolue. Proposant désormais des chaussettes pour enfants*, le choix de taille est passé de 3 à 7. L’interface a donc dû évoluer pour accueillir cette offre supplémentaire. Evolution que voici :

Une augmentation de l’offre nécessite des options de tris.

Vos yeux experts n’ont pas manqué de remarquer qu’outre la nouvelle disposition des tailles très bien intégrée graphiquement, le site propose désormais un filtre de taille. L’offre augmentant, il est nécessaire de proposer aux utilisateurs du site des moyens de faire le tri pour l’aider dans sa navigation et dans sa sélection d’achat.
= Expérience utilisateur +1
En sélectionnant sa taille, le site enlève les couleurs non disponibles dans la taille demandée et réagence dynamiquement les vignettes produits selon leur ordre chromatique. C’est très bien fait. De plus ce ré-agencement joue le rôle de feedback, le site informe l’utilisateur sur l’efficacité de son action.
= Expérience utilisateur +2

Petit bémol : avec une résolution de 1024px de large, les filtres se superposent sur la dernière colonne.
Comment trouvez-vous cette évolution ?
———-
* : petit coup de pouce pour le référencement car j’aime bien le site ^^

Camaïeu.fr, Unigro.be, Amataï.fr et CG59.fr ont confié leurs tests utilisateurs et audits de site à weXperience.

Unigro.be : Basé en Belgique, UNIGRO distribue l’ensemble les biens d’équipement de la maison et de loisir pour le groupe 3Suisses International. Nous avons le plaisir de travailler une seconde fois pour ce e-commerçant.

Amatai.fr : Spécialiste en vêtements de grande taille ce nouveau client souhaitait obtenir une vision globale de l’utilisabilité de son site. Wexperience, spécialiste des tests utilisateurs en eye tracking, réalise également des audits ergonomiques. Deux ergonomes web ont analysés l’ensemble des pages du site pour produire un document de synthèse relevant les axes d’amélioration de la navigation pour l’optimisation de la transformation.

Camaïeu.fr : Nouveau client ayant craqué pour un Test Utilisateur. Une innovation weXperience qui propose de réaliser un test utilisateur sur une partie d’un site, une nouvelle fonctionnalité, une nouvelle fiche produit ou le tunnel de conversion. Le test utilisateur est économique, rapide et adapté  pour tester vos évolutions avant leur mise en ligne. Moins de surprise c’est plus de transformation.

Conseil Général du Nord : Le site institutionnel du Conseil Général du département du Nord est très riche en contenu et souhaitait obtenir une vue précise de son architecture d’information. L’inspection ergonomique a fourni une nouvelle approche plus cohérente dans le cadre d’un projet de refonte.

Quels que soit votre problématique, avec ses tests utilisateurs et ses audits ergonomiques, weXperience optimise votre transformation et l’organisation de votre contenu web pour une meilleure expérience utilisateur.

Vous cherchez à augmenter la performance de votre site ?
Contactez Emmanuel au 09 81 02 61 93 ou via notre formulaire.

Lors des derniers tests mutualisés qui se sont déroulés dans les locaux de Wexperience la semaine passée, un élément a fait la différence en terme de ressenti lors de la navigation sur les 4 sites de vente en ligne testés… il s’agit de la réactivité de l’interface !
De plus en plus habitués à l’outil web, les utilisateurs ne savent plus attendre et leur patience est très vite épuisée lors de leur séance de shopping sur internet… Pourquoi surfent-ils pour acheter ? Pour aller plus vite et non pour attendre que le site veuille bien réagir ou non à leurs actions…
Il est évident que concevoir une interface rapide n’est pas toujours évident, il est alors nécessaire dans ce cas de proposer un feed back immédiat à l’utilisateur pour  l’avertir que son action a bien été prise en compte par le système et de ce fait éviter les nombreuses erreurs qui pourraient être commises et qui ne feront qu’exaspérer davantage vos internautes.
Par exemple, nous avons pu remarquer que sur certains sites que le temps de rechargement des pages suite à la sélection de filtres de tri pouvait être long. Dans ce cas il serait pertinent de griser la page pour montrer que toute action est inutile ainsi que de proposer un message précisant que la page est en chargement, ceci les fera patienter et leur permettra d’améliorer leur expérience sur votre site.
De bons exemples :
Jules.fr :


Monshowroom.com

La création des formulaires demande une attention toute particulière. Bien que de nombreuses dispositions puissent être prises (indiquer les champs obligatoires, mettre en place des exemples à côté des champs à remplir), il est difficile de se mettre à l’abri des erreurs commises par les utilisateurs.
Suite à des tests effectués sur un site de vente à distance, je me permets de mettre en avant l’importance d’avoir une bonne gestion des erreurs pour améliorer l’expérience des utilisateurs sur un site. Une mauvaise gestion peut amener l’utilisateur à abandonner en désespoir de cause, ce pourquoi il était venu.
Quoi de plus frustrant que de valider un formulaire suite à une saisie, et de ne pas comprendre pourquoi on ne passe pas à l’étape suivante, même après avoir vérifié 3 fois sa saisie.
Il est donc important que vos messages d’erreur soient bien visibles. Il est préférable de les indiquer à l’endroit où se situe l’erreur, en décrivant de manière claire et précise quel est le motif de l’erreur.
Une bonne pratique : Le formulaire de demande de prêt de GE MONEY BANK  vérifie la saisie des utilisateurs en temps réel et fournit toutes les indications nécessaires à la bonne complétion du formulaire. Un choix audacieux qui permet aux utilisateurs de garder leur sang froid et de gagner du temps…