Catégorie : Cas d’études

Découvrez les besoins de vos utilisateurs à l’aide des personas et de l’expérience map
Dans ce billet, découvrez comment créer des personas et des cartes d’expérience pour vous aider à trouver des points d’optimisation de votre interface de site ou d’application.
Si aujourd’hui les règles de création des sites ecommerce sont relativement bien connues, il en va tout autrement lorsque l’on s’attaque à la sphère des sites proposant des services innovants, sortant des habitudes des utilisateurs. Dans ces cas là, il devient difficile de prévoir la manière dont les internautes vont comprendre les offres et vont interagir avec le site.

L’exemple d’Elamp

Elamp.fr est un site de partage de services et de talents. Conçu par de jeunes ingénieurs basés à Lille, le site propose un service innovant qui permet à tout un chacun de partager ses talents avec d’autres. Problème : comment faire comprendre ce concept aux internautes ? Comment le rendre évident au premier coup d’oeil et surtout comment les satisfaire immédiatement ? Car, en effet, le succès d’un service (que ce soit sur un site ou une application) dépend expressément de la manière dont les internautes vont ressentir leur première visite.

Un concept innovant n’est pas si facile à faire comprendre

Si dès cette première visite, les internautes ressentent une vraie plus-value, s’ils arrivent à accomplir ce pour quoi ils étaient venus, alors la moitié du chemin est déjà faite, la voie du succès est proche.
Dans le cas de Elamp, il faut donc arriver lorsque internaute arrive pour la première fois sur le site à ce que :
- il comprenne le sens du service et quel bénéfice il peut en tirer
- il utilise le service et en retire un avantage immédiat qui lui procure de la satisfaction
Le parcours imaginaire de Benoit

Benoit est un jeune développeur qui travaille dans une grande société de service.
Il a appris par sa direction des ressources humaines qu’un service de partage de talents avait été mis en service dans sa société. Lors d’une réunion, on lui a brièvement expliqué de quoi il s’agissait et il a trouvé que c’était une très bonne idée. Il a donc envie de le tester, car il aurait besoin de quelqu’un qui s’y connaisse en automobile pour éventuellement lui faire un diagnostic sur sa vieille Renault qui est tombé en panne sur le parking de la société.
Arrivé sur la page d’accueil du site, il fait une première recherche.

Le système lui propose 2 termes de recherche « Etre mécanicien » et « Connaître mécanicien »
Benoit avoue qu’il ne comprend pas la subtilité qu’il y a entre les deux termes ni les icônes qui sont affichées.

2 erreurs classiques d’ergonomie

En effet, ces informations n’aident pas Benoit. D’une part, elles utilisent des termes trop proches. Les verbes « Etre, connaître » n’aident pas à comprendre quel type de résultat on obtiendra si l’on clique sur l’un ou sur l’autre de ces aides. D’autre part, les icônes sont insuffisamment signifiantes pour apporter une information supplémentaire sur ces deux termes. Une icône doit toujours être comprise, dans son contexte, quelque soit l’utilisateur qui la voit. Rares sont les symboles d’icones qui ont une portée universelle. Il faut toujours bien réfléchir à leur signification et se méfier de celles qui pourraient n’avoir de sens que pour un public spécialisée.
Résultat : Benoit « tente » une des deux solutions en espérant qu’elle l’amènera à ce qu’il cherche. Evidemment, c’est contraire aux bonnes règles de l’ergonomie, car en informatique, comme un web, un utilisateur ne doit jamais chercher à comprendre, il doit comprendre.

Les affordances erronées peuvent bloquer l’utilisateur

Après avoir choisi « Etre mécanicien », Benoit obtient 9 résultats. L’écran suivant s’affiche et Benoit décide de cliquer sur « Venez les découvrir » qui pourtant… n’est pas un lien.

Pourquoi Benoit a-t-il cru que « Venez les découvrir » était un lien ?
Parce que le terme et la position de la phrase, proche des résultats, incitaient Benoit à penser que cette zone était cliquable. Mais aussi à cause de la flèche noire à droite qui semblait lui indiquer également que cette zone était cliquable.
Résultat : Benoit essaie en vain de cliquer sur le lien et ne comprend pas ce qu’il doit faire. Cela à cause de ce qu’on appelle une mauvaise affordance.

Conclusion : un parcours perfectible

Cette analyse fastidieuse que je viens de réaliser est pourtant indispensable dans la compréhension de l’ergonomie d’un site et de son bon usage par les utilisateurs.
Comme vous l’avez vu, nous avons fait 3 choses :
1. Nous mettre à la place d’un utilisateur type, Benoit.
2. Parcourir le site en se mettant à la place de cet utilisateur type
3. Détecter des problèmes de compréhension de l’interface
De ce travail, nous serons ensuite capable de retirer des idées d’amélioration de l’interface et des parcours utilisateurs.
Bien évidemment, l’exemple que je vous ai montré n’est qu’un exemple minimum.
Pour que l’analyse soit complète, elle doit être réalisée avec plusieurs personas (personnages fictifs, comme Benoit) et selon plusieurs objectifs. Cela permet de parcourir dans toutes ses dimensions un site et d’en détecter tous les points d’amélioration.

Personas et carte d’expérience

Les personas

Les personas sont des modélisations simplifiées de votre cible utilisateur. Ils permettent de définir en 5 ou 6 personnages un ensemble de caractéristiques et de comportements qui représentent très exactement celle-ci. Ci-dessous, par exemple, un persona que Wexperience a créé pour le site de la Smeno, la sécurité sociale étudiante du Nord de la France. Comme vous pouvez le voir, cette fiche tient sur un format A4 et contient tout ce que vous avez besoin de savoir pour jouer un rôle et tester votre interface.

Ce persona représente la mère de famille typique qui doit se charger d’inscrire un de ces enfants à la sécurité sociale étudiante. Tout y est décrit : son âge, son lieu d’habitation, ses habitudes internets et surtout ses besoins qui vont permettre de définir quelles tâches elle doit accomplir sur le site.

Créer les personas demande à la fois un travail de documentation et un travail d’imagination.
Documentation parce que vous avez besoin de connaître l’âge, le sexe, les revenus, les habitudes, etc de votre cible. Imagination parce que vous avez besoin de créer des personnages fictifs qui rendront compte de la réalité.
Il n’y a pas de règle en la matière pour créer des personas. Essayez simplement dans un premier temps de vous demander qui sont les gens qui fréquentent votre site et pour quelles motivations. Vous pouvez créer des fiches plus ou moins détaillées. Disons que plus c’est simple, mieux c’est. Il faut arriver à trouver un équilibre entre détail et complexité. C’est pourquoi vos personas devraient tenir dans une feuille A4 en utilisant une police de caractère normale. C’est une façon de faire pour mesurer cet équilibre.

La carte d’expérience

La carte d’expérience permet de définir pour un persona et en fonction de toutes ses actions, ses pensées, ses questions et surtout, la manière de résoudre tout ce qui le freine dans sa progression.

La carte d’expérience est un outil très puissant pour détecter des opportunités ou des idées d’amélioration de votre site.
Elle consiste à jouer avec chacun de vos personas sur votre site ou application et de leur faire accomplir des tâches.
Vous verrez que ce n’est pas bien compliqué à faire si vous vous mettez bien dans la peau du personnage (un peu d’acting n’a jamais fait de mal à personne et je suis sûr que vous l’avez tous fait étant enfant, donc vous n’avez pas le droit de me dire que c’est difficile).
Au fur et à mesure du cheminement de ce persona vont apparaitrent des questions que vous ne vous posez pas en tant que concepteur d’interface. Des difficultés vont apparaitre, des interrogations, des points de blocages. Notez tout cela dans votre carte d’expérience et vous découvrirez bientôt de nombreuses idées qui vous permettront d’améliorer votre site.
Une fois ce travail réalisé, il ne vous restera plus qu’à faire la synthèse de toutes vos découvertes, et, hue dia en avant !, vous voilà avec plein de nouvelles opportunités pour augmenter votre taux de transformation.
Si tout cela s’avère assez simple en principe, prenez tout de même ce travail très au sérieux. Quelques heures d’intense simulations à partir de cette base vous aiderons sûrement à mieux comprendre le comportement de vos utilisateurs et à mieux répondre à leurs besoins.
Des questions ? Laissez-les nous en commentaire, nous y répondrons avec plaisir.
23 juin 2015
Méthode d’optimisation d’UX
Quelle méthode d’optimisation utiliser pour rentabiliser au maximum ses tests AB ? Comment établir un constat précis de ce qui fonctionne et ne fonctionne pas sur un site ? Comment ensuite déterminer des solutions d’amélioration ?
Chez Wexperience, nous adorons partir de l’utilisateur pour répondre à toutes ces questions et nous avons mis depuis longtemps en place plusieurs méthodes pour aider nos clients à améliorer l’expérience utilisateur sur le site web desktop ou mobile. Cet article vous montrera comment mettre en place une démarche simple pour vous aussi améliorer votre site de manière simple et efficace.

La compréhension de ce qui se passe sur un site

Malgré tous les outils dont dispose le webmaster d’un site, il lui est très difficile de comprendre exactement ce qu’il s’y passe. Les web analytics sont souvent mal posés et, qui plus est, pousser une analyse fine de la navigation des internautes requiert énormément de temps, temps qui est souvent une denrée rare et qui doit être rentabilisé par des tâches prioritaires.

Les tests utilisateurs

Un bon moyen d’aller vite et de comprendre ce qui se passe sur un site est tout simplement le test utilisateur.

Test utilisateur avec eyetracking du site Evianchezvous.com

Le test utilisateur consiste à mettre face à une interface une personne et de lui assigner des tâches afin de l’observer naviguer. Quatre testeurs peuvent suffire pour commencer pour détecter des informations intéressantes. Un test ne nécessite pas forcément des connaissances en ergonomie pour que des conclusions en soit tirées, mais si le conseil d’un pro ne sera jamais de trop. Mais, ceci étant dit, en quelques heures, vous pourrez espérer au moins en savoir plus sur les gros défauts de votre site.

Ici, un test sur tablette Samsung Android d’une application pour un e-commerçant

Je rappelle que l’intérêt de tels tests est surtout de pouvoir laisser la parole à des personnes neutres par rapport à votre société et n’ayant pas une vision professionnelle de votre site. Ce sont donc des outils très puissants pour se donner les idées claires sur ce qui ne va pas.

Analyse AIDA

L’analyse AIDA est un bon complément à la compréhension des problèmes d’un site aux tests utilisateurs. Elle permet, en se posant les bonnes questions, de détecter les points faibles d’une page.
C’est une méthode tirée de la vente directe et qui permet de décomposer en quatre étapes les actions d’un utilisateur par rapport à une page.
AIDA est l’acronyme pour Action Intention Désir et Action. Tout utilisateur d’un site web en passe par ces quatre étapes avant d’agir.

Par exemple, sur une fiche produit, si on veut qu’un utilisateur ajoute un produit au panier et clique sur le gros bouton orange (ou pas) qui se trouve en bas de votre page, alors il faut absolument que d’une manière ou d’une autre, on ait pu capter d’abord son attention (on parlera alors de séduction de la page), que l’on ait intéressé au produit par des arguments raisonné (intention), qu’on ait levé les doutes (ce qui permet d’augmenter le désir), puis qu’on le pousse à l’action par divers arguments parmi lesquels la couleur du bouton compte beaucoup (c’est une boutade, bien sûr).
AIDA permet de dégrossir l’analyse d’une page et de comprendre ce qui peut n’y pas fonctionner d’un point de vue marketing.
Croisée avec les résultats d’un test utilisateur, il devient alors facile de déterminer ce qu’il faut améliorer en priorité.

Analyse LIFT

LIFT est un moyen de trouver des idées de tests. Il est basé sur un ensemble de 6 critères de réflexions :
- La proposition de valeur
- La pertinence
- La clarté
- L’urgence
- L’anxiété
- La distraction
LIFT permet pratiquement et concrètement de trouver des idées supplémentaires pour augmenter le potentiel de conversion d’une page. Je vous invite à l’aller lire l’article de Wider Funnel pour en savoir plus.

Rassembler les méthodes d’optimisation

Il est possible qu’une fois l’analyse de votre site réalisé, vous vous retrouviez avec des centaines d’idées d’optimisation. Et comme il n’est pas question de tout mettre en oeuvre, il va bien vous falloir faire le tri.
Pour cela vous pouvez prendre en compte plusieurs critères :
Simplicité de l’optimisation : il est parfois plus rentable de changer un bout de texte ou la couleur d’un élément pour améliorer la conversion que de changer une grande fonctionnalité de votre site. Priorisez donc toutes vos optimisations en fonction de la complexité technique du test à réaliser.
Potentiel : même s’il est impossible de prévoir à l’avance le résultat d’un test (par définition), il faut tout de même se dire que certaines optimisations en fonction de leur emplacement dans le tunnel de commande sont plus rentables. Ainsi, il s’avère que plus l’on se trouve proche de la confirmation de commande, plus un test a de chance d’être rentable. Il est moins cher en trafic de test et une petite optimisation peut avoir de plus grand effet que sur une fiche produit ou une page catégorie.
Faisabilité : ajoutez à ces deux premiers critères le temps qu’il faudra ensuite pour appliquer sur votre site le résultat du test. Favorisez plutôt ceux qui seront les plus rapides à mettre en oeuvre.
That’s it, folks !
Bien sûr, nous n’avons fait qu’effleurer ce qui est en réalité un travail d’assez longue haleine.
Un site ne s’optimise pas en un tour de main. C’est un travail permanent. Pour une raison simple : l’environnement concurrentiel, les habitudes des internautes changent en permanence et votre site doit prendre en compte ces évolutions. Plus vous améliorerez l’expérience utilisateur, plus vous serez dans la course.
9 juin 2015
Création d’application e-commerce sur tablette : ne faites pas de fantaisie

Aujourd’hui, c’est journée de test sur tablettes. Ceci m’a rappelé un petit impératif dont il me semblait qu’il fallait faire un petit rappel.
Ce n’est pas parce que vous pouvez vous permettre des fantaisies en terme d’interaction qu’il faut vous les permettre !
On le sait : les langages de développement des applis pour tablettes permettent des interactions qu’il est difficile de réaliser en HTML. D’où une certaine créativité ! Du son, des animations, des effets spéciaux, etc. Si cela peut satisfaire le web designer et les créas en charge de sa conception, cela peut aller à l’encontre de l’utilisateur. Vous n’imaginez pas à quel point la moindre interaction innovante peut perdre l’utilisateur et le détourner de ses objectifs. Aussi, même s’il est tentant de vouloir tirer parti de toutes les possibilités d’interaction de ses applis, mieux vaut tout de même le faire avec parcimonie et surtout en respectant les habitudes des utilisateurs.
Et surtout, surtout, ne lancez pas une appli sans l’avoir fait tester par des utilisateurs finaux au préalable ! Vous ferez non seulement des économies en la modifiant à un stade où cela ne coûte pas encore trop cher, et, en plus, vous éviterez une phénomène de rejet massif si vous arrivez à détecter en amont « les loups » qui s’y cachent (et il y en a parfois plus qu’on imagine).
Tester est d’ailleurs également un bon moyen pour mettre tout le monde d’accord (direction, concepteur, web marketeur) sur ce qui va ou ne vas pas sur une application.

9 décembre 2014
Test A/B : n’arrêtez pas avant d’avoir assez attendu
Une des grandes questions que se posent nos clients lorsqu’ils font appel à nous est : « Quand est-ce qu’un test A/B ou multivarié doit s’arrêter ? » OU « A partir de quel moment est-on sûr d’être sûr du résultat ? »
Questions simples, mais réponses compliquées !
Première remarque : il est, la plupart du temps, malvenu d’arrêter un test en cours si ses résultats sont négatifs ou supposés négatifs. Mais c’est une réaction normale que l’on peut comprendre : voir la courbe d’un test s’effondrer peut signifier (en e-commerce) une perte de chiffre d’affaires. Grande est dès lors la tentation de stopper le test ou de le modifier et de passer à un autre test.

Première leçon : ne pas se fier aux apparences

C’est d’après moi une erreur.
Ou du moins, une erreur, tant que la question n’a pas été plus approfondie. Pour cela, il est indispensable de se pencher plus en avant sur les données dont on dispose. Je le montrerai à travers un exemple d’un test sur un site dont je ne peux citer le nom, mais qui prouve bien, cependant, qu’il faut savoir attendre, et pas seulement pour des raisons statistiques.
L’indice de confiance des logiciels de tests est intéressant dans la mesure où il donne une vue mathématique d’une expérience en cours. En gros, il considère qu’à partir d’un certain volume de données, le résultat peut être considéré comme fiable. L’inconvénient, ou en tout cas, l’erreur, serait de croire qu’il serait entièrement fiable d’un point de vue commercial, et cela pour une bonne raison : l’indice de confiance si le test n’est pas suffisamment calibré ne peut pas prendre en compte les différences intrinsèques du trafic testé.
Je m’explique. Dans le test dont je parle, le trafic n’était pas suffisant pour mettre en place un test multivarié alors que beaucoup d’éléments devaient être testés. Je me suis donc rabattu sur un test A/B en privilégiant une hypothèse précise. Il me fallait prendre tout le trafic possible pour obtenir suffisamment vite le résultat de mon test. Le but d’un test n’est pas, n’est-ce pas, de durer plusieurs mois.

Courbe de résultats du site testé

Au bout de quelques jours, comme vous pouvez le voir sur la courbe ci-dessus, la version gagnante semblait être la version de contrôle (et non pas la version de test). Mais en y regardant de plus près et en croisant les données avec Google Analytics, je me suis aperçu qu’il y avait beaucoup plus de visiteurs anciens dans le trafic de la nouvelle version que de visiteurs nouveaux, introduisant par là un biais dans le résultat. En effet, qui dit « plus de visiteurs anciens » dit plus de résistance au changement et donc propension à moins convertir. J’appelle ça l’effet d’accoutumance. Et malgré un indice de confiance suffisant de la part du logiciel de test, il fallait donc attendre que le trafic s’équilibre entre visiteurs anciens vs nouveaux.
Et effectivement, au bout de quelques jours, la tendance s’inversait définitivement au profit de la version B (la nouvelle version donc). Il me suffisait alors ensuite de contrôler à nouveau la répartition du trafic entre anciens et nouveaux visiteurs pour être certain de mon résultat.
Donc en cas d’un constat de moindres performances sur les variations testées, ne paniquez pas. Vous risquez d’arrêter le test trop tôt, de tirer des conclusions hâtives et de ne pas retirer les bénéfices de la version gagnante. Demandez-vous d’abord si le trafic impliqué dans le test est correctement distribué entre les versions. Regardez si les répartitions suivantes sont quasi-égales selon les variations : nouveaux visiteurs / anciens visiteurs, sources d’acquisition, résolution d’écran, navigateurs, dispositifs utilisés (ordinateurs, tablette, mobile), visites des pages promotions, utilisation du moteur de recherche, etc.

Deuxième leçon : toujours aller plus loin

Ceci étant dit, il me semble également très important d’ajouter qu’un test ne doit pas être regardé qu’à l’aune de son objectif principal.
Dans le cas précédent, il s’agissait de tester une fiche produit. Les indicateurs intéressants pour la fiche produit sont souvent le taux d’ajout au panier, puis, ensuite le taux de conversion et la valeur par visiteur. Cela permet de voir, si effectivement, une amélioration de la performance de la page a lieu.
Sans pouvoir vous dévoiler la maquette, voici les modifications auxquelles nous avions procédées.
- Augmentation de la visibilité des éléments de rassurance sous le bouton « Ajouter au panier »
- Amélioration de la visibilité du nom du produit
- Amélioration de la visibilité du stock
- Amélioration de la visibilité du prix
Ces quatres éléments, vous le constaterez avec moi, tendent vers une meilleure rassurance et une meilleure information sur la fiche produit. Ce sont des facteurs extrêmement important pour augmenter la conversion.
Les résultats à la fin du test ont été probants :
+ 14 % en taux de transfo et ce, malgré une baisse de 1,4% du taux d’ajout au panier
Que s’est-il passé ?
Premier point : malgré une baisse du taux d’ajout au panier, on constate une augmentation de 9% de la validation du panier pour les personnes ayant vu la nouvelle fiche produit.
Deuxième point : on discerne très nettement dans le trafic des visiteurs ayant la version de test une augmentation des visites vers les pages de rassurance (+15% environ). Effet indirect ou induit, ces mêmes testeurs vont moins solliciter la page de contact.
Troisième point : une meilleure information entraîne un meilleur engagement des visiteurs avec une très nette augmentation de pages vues par visites, ainsi qu’un taux de retour (de visite) en augmentation également.
Comme vous pouvez le voir, ce test simple nous a permis d’en apprendre beaucoup sur le comportement des utilisateurs et nous a permis de découvrir de nouvelles pistes d’optimisation : amélioration des informations sur les pages produits et services notamment.
Il nous a aussi montré qu’il n’est pas possible de ne pas attendre suffisamment longtemps la conduite du test, car trop d’éléments humains entrent en jeu pour se contenter d’un résultat obtenu en moins de 2 semaines.
Tester consiste donc à bien mesurer les effets de bord et à être patient.
7 août 2014
Leboncoin.fr, la bonne appli mobile !

Leboncoin le géant du web Français réalise un CA de 64M€ en 2011 et presque 4 millions de vues sur l’internet mobile au mois de mars 2013. Dans cet article nous intéresserons à son application mobile sur Android et à sa facilité d’utilisation ainsi que son efficacité. L’enjeu est de taille à l’heure du tout mobile et à l’exigence montante des utilisateurs.

Une page d’accueil efficace

Au démarrage de l’application, on arrive sur un premier écran simple avec le logo en haut à gauche, le menu à droite, une carte de France et un champ select. On retrouve l’esprit dépouillé et efficace du site web qui convient très bien à l’application mobile.
Pour sélectionner une région, l’utilisateur pourra au choix utiliser la carte ou la liste déroulante. Dès le clic sur une zone, celle-ci sera sélectionnée et amènera le particulier aux annonces de la région. En faisant plusieurs essais et différentes personnes, je n’ai pas eu d’erreur de sélection d’une région.

Navigation et recherche

Une barre de navigation est présente en haut de l’application et reste toujours visible même en descendant dans la page. Elle regroupe la pagination, le menu et le tri des résultats mais uniquement par ordre croissant. Le tri décroissant n’est pas disponible et n’est pas indiqué à l’utilisateur, ce qui peut être gênant dans certains cas. (suite…)

19 juin 2013
Oscaro : petites idées entre amis pour améliorer la conversion

Oscaro.com lancé en 2001 permet d’acheter des pièces automobiles en ligne. Ce nouveau filon intéresse d’autres acteurs du web comme le géant Amazon depuis mars dernier. Alors est-ce que notre pure-player classé 20e en France tient-il ses promesses de simplicité et d’efficacité ? Voici une brève analyse de sa fiche produit.

Une navigation difficile

En arrivant sur Oscaro, j’ai été surpris par l’absence d’un menu de navigation. Sur la page d’accueil, l’utilisateur est guidé et choisit une catégorie, puis une pièce mais une fois sur la fiche produit, comment retourner dans une catégorie ? C’est surprenant.
L’unique bouton de navigation « Retour » est placé à droite, ce qui n’a rien de conventionnel. L’utilisateur aura tendance à le chercher en haut à gauche et pourra avoir du mal à le repérer. Le fil d’Ariane n’est lui aussi pas présent pourtant bien pratique pour remonter dans les catégories rapidement. Pensez à toujours faciliter la navigation sur votre site.

Inciter à mettre au panier

L’objectif de cette page est d’amener l’utilisateur à ajouter le produit dans son panier. Ce bouton doit donc être l’élément mis en valeur ainsi que toutes les informations nécessaires pour exécuter cette action comme le prix, la disponibilité.
Ici l’utilisateur ne peut pas voir le prix du produit, ni le bouton d’ajout au panier à l’ouverture de la page. Le bouton est situé bien en-dessous de la ligne de flottaison repérée par la zone bleue claire. (Résolution entre 1024px et 1920px) (suite…)

12 juin 2013
Comment adapter rapidement un formulaire au mobile

Les formulaires sont inévitables sur un site eCommerce pour rechercher un produit, réserver un voyage ou pour renseigner son adresse de livraison dans le tunnel de commande. Depuis un mobile, ces formulaires mal adaptés deviennent des freins importants à la conversion. Alors faut-il s’adapter à ces nouveaux appareils et comme le faire ? Voici un début de réponse.

La manière de consulter internet évolue

La Fevad a indiqué que les ventes sur internet mobile ont augmenté de + 150% en 2012 et représentent 6% du chiffre d’affaires réalisé en 2012, soit presque 3 milliards d’euros.
Les ventes de PC chutent de 13,9% au premier trimestre 2013, la plus forte baisse depuis près de vingt ans selon l’institut de recherche IDC. Une des raisons possibles est la hausse impressionnante des ventes de tablettes tactiles qui aujourd’hui surpassent celles des ordinateurs comme le démontrent ces courbes :

Source

Le nombre d’utilisateurs mobile va selon une estimation dépasser les utilisateurs pc à partir de fin 2013 :

Source

S’adapter dès aujourd’hui est stratégique pour les années à venir. Imaginez votre business dans 2 ans avec un trafic composé de 40% d’utilisateurs mobiles, comment réagirait-il ? Pouvoir naviguer confortablement depuis n’importe quel type d’appareil va peut-être devenir un argument pour les internautes. (suite…)

6 mai 2013
Opodo : le bouton qui fâche

Après Air France et sa gestion des erreurs dans les formulaires, continuons notre série de tests utilisateurs sur les sites de voyage avec Voyage Opodo.fr. Opodo propose tout une gamme de produits qui vont du vol jusqu’à la location de voiture en passant par les croisières.
Lors de ce test nous avons demandé aux participants de réserver le voyage de leur choix.Vous allez voir dans la vidéo ci-dessous une utilisatrice qui filtre les résultats en utilisant certains critères (destination, durée, budget…) mais une action inattendue se produit :

Après avoir cliqué sur le bouton « Supprimer tous les critères » (00:35) l’utilisatrice ne comprend pas pourquoi ses choix se sont effacés. Le libellé du bouton est pourtant clair, alors pourquoi cette erreur ?

Lecture du bouton

Premier élément, l’utilisatrice ne prend pas le temps de lire le bouton et clique par réflexe. On peut voir sur l’eye-tracking que la personne regarde très rapidement le bouton (00:28) surement pour vérifier le positionnement de la souris avant de vérifier que les critères soient bien tous sélectionnés. Le bouton positionné en bas ou à droite d’un formulaire peut être rapidement assimilé à un bouton de validation.

Rechargement de la page

Second élément qui peut induire en erreur, rien n’indique que la page doit être rechargée pour valider un critère. En allant plus loin, on peut observer l’utilisatrice qui sélectionne rapidement le type de pension (00:26), puis le nombre d’étoiles et pour finir le bouton de suppression des critères (en pensant valider).
La page n’aura pas eu le temps de recharger entre ces différents critères et l’utilisateur ne s’en doute pas. Un œil averti notera le rechargement de la page avec les nouveaux paramètres dans l’url.

Visibilité des critères sélectionnés

Troisième élément il est difficile de repérer les critères déjà sélectionnés. La couleur utilisée pour représenter la sélection en plus de la croix est trop proche de la couleur d’un critère qui n’est pas sélectionné. Les critères sélectionnés apparaissent à côté du nombre de résultat affichés, trop bas dans la page et surtout trop loin de la zone de critères :

Il reste d’autres incohérences comme le fait de ne pas pouvoir sélectionner plusieurs critères dans une catégorie ou la compréhension du bouton « go » dans la partie budget. Ces petits détails peuvent avoir une influence importante sur l’expérience utilisateur et sur le taux de conversion du site en général.
Je finirai par : Tout est une histoire de détails en ecommerce.

3 avril 2013
DITTO l’achat de lunette en ligne

Acheter une paire de lunette est une aventure entre les différents choix de modèles, de formes (..), l’avis de ses proches et se termine souvent par un coup de cœur. Alors comment récréer cette séduction depuis un ordinateur avec toutes ces contraintes techniques ? La parade la plus simple est d’envoyer les lunettes à domicile mais cela à un coût pour l’e-commercant ou pour l’internaute; de plus cela créé un délai d’attente. Autre solution pour l’utilisateur, ~~téléverser~~ uploader sa photo ou se photographier avec sa webcam avant d’intégrer la paire de lunette par-dessus.
Le résultat n’est pas très reluisant et ressemble souvent à ceci :

Une expérience d’achat revisitée.

DITTO réinterprète la vente de lunette en ligne et réussi à créer ce moment de séduction avec un message clair : « The easiest way to find the perfect pair of glasses for you. » ( La meilleure façon de trouver votre paire de lunette parfaite. ). Aider l’internaute dans sa recherche avant d’afficher une liste de produit, c’est l’opposé de presque tous les sites du domaine !

Un tutoriel compliqué transformé en un jeu d’enfant.

Le visage est scanné sous tous les angles en 4 étapes reconnaissables par des visuels situés en bas de page. L’étape en cours est expliquée par une phrase en haut de l’écran et mise en situation dans une petite animation à droite. Ici David Groult, consultant Adwords chez Diginex, s’est prêté au jeu et doit placer son visage au centre du rond. Dès que la tâche est réussie, le cercle devient vert avant de passer à l’étape numéro 3. Facile !

Il doit tourner son visage de la gauche vers la droite en suivant l’animation du carré :

Véritable tour de force, DITTO réussit à transformer une étape délicate en quelque chose de ludique et de facile : calculer l’échelle du visage. Une simple carte – type carte bancaire – est utilisée. C’est intelligent puisque facile d’accès pendant la visite et identique partout dans le monde.

Le temps de traitement des données est un peu long après avoir sélectionné son budget, son style etc…

… mais pour un résultat impressionnant ! Vous pouvez tourner votre tête pour vous voir sous tous les angles.

D’autres lunettes sont disponibles comme sur n’importe quel site e-commerce depuis un listing.

C’est une bonne découverte avec une expérience d’achat réussie et surprenante. Et vous, qu’est ce que vous pensez de cet essai virtuel ? Votre prochaine paire viendra du e-commerce ?

5 mars 2013
Cas utilisateur : Smeno augmente de plus de 40% ses demandes de devis de mutuelle
A l’occasion du dernier salon VAD, Wexperience a eu l’occasion de présenter son travail en collaboration avec la Smeno dans le cadre d’une campagne d’optimisation ergonomique de son tunnel de conversion de demande de devis de mutuelle.
Faut-il le rappeler ? La SMENO est un des centre de sécurité sociale pour les étudiants de la région Nord de la France, mais c’est aussi une mutuelle et c’est dans ce cadre que Wexperience est intervenu avec un objectif plus que simple :
- Obtenir plus de demandes de devis
- Faire plus de ventes
- Emmener le trafic plus profondément dans l’entonnoir de conversion afin que les internautes voient le détail des fiches produits
Des résultats éloquents obtenus rapidement

Après 2 semaines de tests, les résultats furent éloquents :
- +40% de demande de devis
- +50% de conversion au téléphone
Ces résultats sont la résultante d’un travail d’analyse et d’une connaissance métier approfondie de la Smeno. Les parcours utilisateurs ont ainsi été interrogés et analysés au travers de tests utilisateurs, de webs analytics et d’une analyse par nos experts à travers l’usage de personas.

Dans cet exemple, on a constaté une augmentation du nombre de conversion (demande de devis) de plus de 37%, ainsi qu’une augmentation des appels de plus de 50%. En tout, pendant la période de tests, près de 200 ventes supplémentaires ont été réalisées. Le travail principal d’optimisation a consisté à améliorer le guidage sur la page et augmenter la rassurance. Une photo d’ambiance a permis également de désacraliser l’acte de demande de devis.

Suite à cette étude, nous avons ensuite pu mettre en place une série de tests A/B et ou multivariés sur les différentes étapes de l’entonnoir de conversion. Ces tests ont été réalisés au moyen de Visual Website Optimizer, dont Wexperience est un des partenaires certifiés.

Reporting dans Visual Website Optimizer. Plusieurs objectifs peuvent être assignés à un test. Ici, le nombre de clics vers les fiches produits, le nombre de clics sur les appels téléphoniques et le nombre d’entrées vers le tunnel de conversion.

VWO permet de recourir au minimum aux bons soins des équipes techniques pour plusieurs raisons :
- La pose d’un seul tag est suffisante pour analyser et tester tout le site
- L’intégration des différentes variantes des tests se fait ensuite intégralement par Wexperience (HTML et Design). Là encore, il n’y a pas d’intervention des équipes techniques sur le site pour réaliser les tests.
La modification de la page d’accueil des mututelles a permis d’augmenter le trafic de plus de 28% vers les pages produits et, parallèlement, d’augmenter également le nombre de contacts téléphoniques. Les renforts ont té mis plus en avant, l’espace perdu en haut de page éliminé et les call-to-action forcis.

Tous les tests donnent lieu à un reporting hebdomadaire des résultats. Les données peuvent, pour plus de confiance, être croisées avec un outil de web analytics comme Google Analytics ou Site Catalist d’Adobe. Après une rapide élimination des versions perdantes, seules sont gardées les versions gagnantes avec une analyse poussée des données permettant de départager les différentes versions.
Les tests ont été réalisés progressivement sur plusieurs pages en remontant dans l’entonnoir de conversion.
- En premier, le formulaire de demande de devis
- En second, les landing pages et les pagesproduits.
Ainsi, 9 pages ont été testées simultanément.

Les tests utilisateurs en eye-tracking ont permis de mieux comprendre le comportement des internautes au cours de leur navigation et de repérer les axes d’amélioration des pages. Ils permettent notamment d’accélérer la recherche de versions gagnantes pendant les tests et obtenir des résultats positifs dès les premiers essais.

Et après les tests ?

Après les tests, doit-on revenir à la version originale du site et attendre que l’équipe IT intègre les modifications du test ? Pas du tout. Grâce à VWO, il reste tout à fait possible de prolonger un test sur sa version gagnante à hauteur de 100% du trafic. Ainsi, pour un coût minimum, votre site continue à bénéficier de son optimisation (tout en continuant à mesurer des résultats) sans que du temps soit perdu avant la mise en production des modifications.

La fiche produit a également été retravaillée de manière à augmenter le nombre d’internautes allant vers la demande de devis. Les principaux éléments de la page ont été remontés au dessus de la ligne de flottaison et l’ensemble de la mise en page a été simplifiée pour permettre à l’utilisateur de se concentrer sur l’information produit (d’où la suppression de la colonne de droite en haut de page).

Pour en savoir plus :

>> Voir la présentation de la Smeno lors du salon de la VAD sur Slideshare.net <<
15 novembre 2012