Agence WEX

Étiquette : usertest

  • Retour sur la refonte d’un site spécialiste du syndic en ligne collaboratif : le cas Syndic One

    Il y a maintenant 8  mois, Syndic One, le spécialiste du syndic collaboratif en ligne confiait la refonte de son site à Wexperience. Il s’agissait surtout de clarifier l’offre proposée par Sergic mais aussi de moderniser le site.

    syndicone-a-la-une

    Qui est Syndic One ?

    Filiale du groupe Sergic, spécialiste de l’immobilier, Syndic One est le leader du syndic en ligne dédié aux petites copropriétés. 

    Objectifs de la refonte

    • Besoin de clarifier l’offre proposée par Sergic, souvent mal comprise sur le site
    • Besoin de remettre au goût du jour la charte du site
    • Besoin d’augmenter la prise de lead

      Réponse de Wexperience

    À chaque projet, sa réponse propre, mais avec des méthodologies centrées utilisateurs.

    1) Comprendre les besoins, les attentes et juger la performance du site actuel

    Après plusieurs projets de refonte de sites effectués par les équipes Wexperience, c’est en 3 phases que nous avons piloté ce nouveau projet. Dans un premier temps, des tests utilisateurs d’une durée de 30min avec 6 testeurs ont été réalisés sur l’interface actuelle à savoir l’ancien site (cf ci-dessous). Le principal objectif de cette phase d’immersion et de préparation a été de juger la compréhension de l’offre. Lors de ce test, un questionnaire UXM de mesure de l’UX de notre solution UX.Care a également été soumis aux testeurs.

    ancienne-version-syndicone
    Ancienne homepage du site Syndic One

     

    Nous nous sommes rendus compte que de nombreux utilisateurs ne saisissaient pas les contours de l’offre. L’interprétation était floue et aucune réponse à leurs questions n’était réellement fournie. Hotjar, et sa solution de Clic Map & Scroll Map a également été utilisée en début de projet, afin de suivre et comprendre les habitudes réelles de navigation des utilisateurs. 

     

    Si les web analytics  ou les questionnaires permettent d’avoir une idée, dans les grandes lignes, de ce qui ne va pas à un endroit d’un site ou d’une app, les tests utilisateurs sont comme la loupe surpuissante de voir exactement POURQUOI ça ne va pas !

     

    Cela ne veut pas dire que nous avons négligé l’information fournie par les web analytics. Bien au contraire, un audit analytics réalisé par notre agence partenaire Digitaleez a été plus qu’important à ce stade du projet pour comprendre la provenance du trafic, et pour disposer d’informations sur les internautes, leur navigation et la conversion. Google Data Studio, permettant de rendre les données plus visuelles  s’est également ajouté à cet audit analytics.

     

    Syndic One s’est donc vu recevoir un rapport complet de leurs données web, entièrement personnalisé, plus facile à lire et à partager.

     

    2) Conception du site avec prise en compte des enseignements des tests utilisateurs 

    Une seconde vague de tests utilisateurs sur la base de wireframes a, par la suite, été réalisée (durée de 20min). Nul besoin de rappeler l’importance des wireframes qui permettent à la fois de réduire les incertitudes et de se concentrer sur l’architecture de l’information. Grâce à un travail de retouche de la structure et des contenus du site, l’offre est devenue beaucoup plus claire pour les utilisateurs. 

     

    Cette seconde phase a surtout permis de valider les orientations prises sur les choix de conception faits, sur les parcours et les nouvelles pages.

     

    wireframe-homepage
    Phase de prototypage faite sur Invision, qui permet simplement de dynamiser les wireframes, dans leurs versions mobile, desktop et tablette.

     

    Conception de nouveaux parcours : 

    La page offre qui était auparavant présentée sous forme de texte brut a complètement été revue. Un tableau suffit à  la clarifier désormais.

     

    Avant / Après avec une offre plus claire présentée sous forme de grille

     

    La section dédiée à la réalisation du devis a également été améliorée avec un tout nouveau parcours en 5 étapes, bien plus clair et simplifiée que le formulaire qui était proposé.

     

    parcours-devis-syndicone

    3) Direction artistique et Intégration HTML/CSS

    À la suite des phases de direction artistique (DA), ce sont 2 versions du site qui ont été proposées à la marque. Plus moderne, plus proche de la cible des utilisateurs, plus humaine, claire et fidèle à la marque, découvrez à cette adresse la version gagnante :

     

    Après quelques aller/retour et la sélection de la version gagnante, nous avons procédé à la réalisation des pages du site.

    Les objectifs de l’identité graphique :

     

    – Permettre, avant toute chose, une identification rapide de l’offre et de la marque

    – Améliorer et faciliter la navigation et la lecture

    – Rendre le site plus humain et proche de ces utilisateurs

     

    Intégration HTML/CSS + Développement

    Pour finir, c’est aussi les équipes Wexperience qui ont piloté l’ensemble du développement et l’intégration du site sous le système de gestion de contenus (CMS) WordPress ainsi que le développement du formulaire (directement relié à Salesforce) 

     

    Livrable -> Code HTML de tout le site et maquettes graphiques de tout le site

     

     

    Méthodologie de projet :

    Agile et centrée utilisateur : un processus que nous adaptons à une majorité de nos projets et qui alterne phase de conception et test utilisateurs. Par une approche d’amélioration continue du projet, cela permet de produire un site en meilleure adéquation avec les besoins utilisateurs et de réduire, par la suite, les coûts de maintenance corrective.

     

    Quant aux tests utilisateurs, ils permettent d’avoir le point de vue objectif des utilisateurs finaux. Nous réalisons généralement nos tests dans des salles dédiées : dans nos locaux à Lille, ou à Paris, ou même ailleurs, si le client le souhaite. Dans tous les cas, nous invitons également nos clients  à assister aux tests.

     

    Outils

    Pour assurer la qualité de nos prestations, plusieurs outils nous permettent d’optimiser les coûts et les temps de conception.

     

    Invision : pour le partage d’informations et les discussions sur le projet. Invision est également utilisé pour le prototypage

     

    Sketch : outil de conception, qui permet de gagner du temps en production. Avant de passer à la conception de maquettes graphiques, celles-ci sont conçues sous la forme de maquettes « fil de fer » (wireframes) qui permettent de se concentrer d’abord sur l’architecture d’information avant l’apparence graphique du site. La légèreté de l’outil permet également de gagner du temps de production en favorisant la mise en forme d’idées de manière plus rapide.

     

    WordPress : est le CMS que Syndic One utilise et sur lequel nous avons procédé à l’intégration.  

     

    Outils de développement utilisé : 

     

    – Bitbucket (git)
    – Docker

     

    Durée et budget du projet

    Durée du projet : 4 mois

    Prix : inférieur à 100k€

     

    Voir le site : www.syndic-one.fr

     

     

  • Refonte d’un site : le cas de la mutuelle GSMC

    En 2017, la mutuelle GSMC confiait la refonte de son site à Wexperience. Il s’agissait de remettre à jour un site qui avait trop vieilli et qui ne correspondait plus à la stratégie digitale de la société. Wexperience s’est donc vu confier la partie design de la refonte. Revue de détail !

     

    HOMEPAGE-GSMC

     

    Qui ?

    GSMC est une mutuelle indépendante

    Besoins de la refonte

    • Besoin de se remettre dans l’air du temps, le site « datait »
    • Changement de plateforme technique
    • Intégration d’une version mobile, alors inexistante
    • Démarrage d’une véritable politique digitale / préparation de l’avenir

      Réponse de Wexperience

    A chaque projet, sa réponse propre, mais avec les mêmes méthodologies centrées utilisateurs

    1) Acquisition de la connaissance client

    Wexperience possédait déjà une expérience du métier de l’assurance (ayant déjà travaillé sur la refonte de Smeno, Humanis, Matmut ou Just). Les équipes connaissent bien les problématiques de mutuelles ou d’assurance.

    La connaissance se fait également par des entretiens individuels sur site (tests utilisateurs) permettant de dresser un diagnostic de l’existant et de perfectionner sa connaissance utilisateur.

     

    Importance des tests utilisateurs : GSMC qui avait un à priori très négatif sur son site a pu découvrir, au contraire, des points forts qui l’ont surpris et ont pu être réintégrés dans le nouveau site. Lors de ce test, nous avons également mis en oeuvre, notre questionnaire de mesure de l’expérience utilisateur UXM via notre solution UX.Care.

    Livrable -> retour des tests utilisateurs / retours des web analytics (par notre filiale Digitaleez)

    2) Conception de l’identité graphique

    A partir des éléments constitutifs de la marque, Wexperience a fait plusieurs propositions d’identité graphique. Celle-ci, en plus de son rôle dans la valorisation de la marque, servant également à renforcer la perception de facilité d’utilisation du site. Cela a été un succès comme l’on montré les mesures de l’expérience utilisateur réalisée sur l’ancien site et le nouveau site

     

    Objectifs de l’identité graphique :
    permettre une identification rapide de la marque et véhiculer ses valeurs
    améliorer la perception de la facilité d’utilisation du site

    Intégré à cette phase : la conception d’animations et d’interactions visuelles destinées à améliorer le potentiel émotionnel de l’interface

    Livrable -> maquettes graphiques des pages les plus importantes du site

     

    3) Conception des pages

    La conception des pages est réalisée dans un premier temps sous la forme de maquettes fil de fer.

    Ce procédé permet d’accélérer la production des pages, mais aussi d’avoir plus de souplesse.

    Dans le cas de GSMC, les pages pour ordinateur ont d’abord été conçues, puis celles pour l’affichage sur téléphone mobile.

     

    WIREFRAME-PROJET2-GSMC

     

     

    A noter : cet ordre est interchangeable et dépend de la maturité du site. Un site avec beaucoup d’utilisateurs mobiles sera d’abord conçu pour les téléphones mobiles (« mobile first »).

     

    Après une première phase de conception, un test utilisateur a été conduit de manière à apporter de nouvelles améliorations et de nouveaux correctifs.

    A la fin de la phase de maquettage est appliquée la couche de design graphique. Celle-ci vient renforcer certains détails ergonomiques du site, en plus de poser l’identité de marque.

    Prise en compte du référencement naturel (SEO) : au cours de la conception, un expert SEO vient valider la conception des pages en prenant en compte les critères d’optimisation

    Livrable -> maquettes graphiques de tout le site

     

     

    PAGE-PRODUIT-GSMC

    4) Intégration HTML/CSS

    Avant d’être exploitable techniquement, les maquettes de page doivent être codées en HTML/CSS, le langage universel dedescription du Web.

    Livrable -> code HTML de tout le site

     

     

    Méthodologie de projet agile et centrée utilisateur

    Ce processus alterne phase de conception et test utilisateurs. Il permet, par une approche itérative d’amélioration continue du projet, de produire un site en meilleure adéquation avec les besoins utilisateurs et de réduire par la suite les coûts de maintenance corrective.

    Cela par rapport opposition à ce qui est appelé « le mode projet » où un cahier des charges est établi à l’avance et suivi sans aucune possibilité de correctif avant la livraison.

    Les tests utilisateurs permettent d’obtenir la vision des clients finaux au cours du processus de conception.

    Outils

    Pour assurer la qualité de nos prestations, plusieurs outils nous permettent d’optimiser les coûts et les temps de conception.

     

    Invision : pour le partage d’informations et les discussions sur le projet. Invision est également utilisé pour le prototypage

    Sketch : outil de conception, qui permet de gagner du temps en production. Avant de passer à la conception de maquettes graphiques, celles-ci sont conçues sous la forme de maquettes « fil de fer » (wireframes) qui permettent de se concentrer d’abord sur l’architecture d’information avant l’apparence graphique du site. La légèreté de l’outil permet également de gagner du temps de production en favorisant la mise en forme d’idées de manière plus rapide.

    Durée et budget du projet

    Durée du projet : 4 mois

    Prix : plus de 50k€

     

     

    Voir le site : www.mutuelle-gsmc.fr

     

     

  • Mesure de l’engagement sur le site d’ETAM

    La mesure de l’engagement est possible désormais

    L’émotion dicte nos choix beaucoup plus que nous ne voulons bien l’admettre. En e-commerce comme ailleurs. Mais comprendre ce que ressent un internaute face à une photo tient du domaine de l’impossible. Comprendre comment un visuel influence son comportement, de même.

    C’est pourquoi Wexperience s’est alliée à Perceptio Media, spécialisée dans la mesure de l’engagement, pour proposer à nos clients la possibilité de comprendre la perception émotionnelle des médias sur une page web. Afin de tester notre concept, nous avons mené une étude pilote sur le site d’Etam dont voici un aperçu des résultats.

    Exemples avec le site d’ETAM

    A) Comment deux offres peuvent-elles se concurrencer inutilement sur une même page

     

    Dans ce premier exemple, nous allons voir comment des utilisatrices cibles de la marque perçoivent une page d’offres, telle que « Love You Maman ». Il s’agit ici d’une analyse réalisé à la fois en utilisant l’eye-tracking et à la fois un outil de mesure émotionnel, en mode statique. C’est à dire que les participantes ne surfaient pas sur le site, mais il leur était demandé de regarder la page.

     

     

    Comme on peut le voir sur cette courbe d’attention/émotion, durant les 10 secondes d’observation. La page ne suscite que peut d’intérêt et d’émotion durant les 2 première secondes de visualisation, puis ces deux variables augmentent drastiquement à partir de la deuxième seconde. Pourquoi ? Analysons en même temps les parcours oculaires des utilisateurs.

     

     

    Les premières fixations sont mobilisées pour l’égérie et l’accroche « Love You Maman » qui provoquent un pic d’émotion et d’attention. Le visage de l’égérie provoque de l’attention (reconnaissance) plus une phase de recherche d’informations. L’émotion provoquée par le mannequin est une amorce émotionnelle. Après cette amorce, la mention « Love You Maman » prolonge l’émotion.

     

    Ensuite les participantes sont « activées » par la mention « Offert » située en bas à droite. Lorsque la mention « Offert » est parcourue visuellement, cela déclenche de l’intérêt et l’on observe un retour vers le « 1 haut + 1 bas = 10€ offerts » (tentative de rapprochement = incompréhension ?). Point de vigilance : 2 offres qui peuvent être distractrices l’une de l’autre.

     

    Enfin, le mannequin en robe et le prix sont regardés (attention + émotion) = projection dans l’achat.
    En revanche, la mention « Vive les robes » n’est pas lue.

    La mention « BE + » est peu saillante. C’est le mannequin en mouvement qui est regardé surtout à partir de la 8e seconde. Mais la mention « Gamme SPORT + » n’est pas lue.

    Comment une photo peut-elle séduire plus ?

    Autre cas de figure. Dans quel cas une photo peut-elle concourir à augmenter l’attractivité du produit ? Pour le savoir, nous avons analysé la page ci-dessous.

     

     

     

     

    La photo qui engage le plus émotionnellement est celle de gauche.
    Photo de gauche : le soutien-gorge est surtout regardé + le visage baigné de soleil + transfert des regards vers le maillot de bain avec rémanence de l’émotion.

     

    Ce transfert est efficace quand on constate que c’est un détail du produit, le nœud du soutien-gorge, qui provoque une émotion à la 9e seconde.

     

    On provoque une émotion par le mannequin et l’effet du halo solaire et ensuite on porte attention sur le produit en bénéficiant de l’amorçage émotionnel.

     

    NB : il est astucieux d’avoir masqué la saillance du visage du mannequin tout en reproduisant un effet « bain de soleil ». S’il avait été visible, le visage du mannequin aurait risqué d’empêcher de progresser vers le maillot de bain.
    La mention en haut à droite de la photo de gauche n’est pas lue.

     

    Engagement émotionnel et test utilisateur : le couple parfait pour analyser le merchandising d’un site

    L’analyse de ces pages a été, lors de l’étude, complétée par des tests utilisateurs où les testeurs interagissent par rapport à l’interface et ne sont plus statiques. Les deux méthodologies mixées entre elles ont pu fournir un bilan complet de la manière dont les internautes interagissent et réagissent au site Etam.com. De l’ensemble des résultats obtenus il a ensuite été possible de fournir des recommandations d’optimisation des parcours utilisateurs qui passent de corrections ergonomiques à des recommandations sur l’organisation du merchandising et sur le travail photographique.

     

    En comprenant l’influence, positive ou négative, des médias sur un site et en les corrigeant, il devient possible d’augmenter l’engagement des utilisateurs, non plus sur des critères d’utilisabilité ou des critères marketing, mais sur ce qui fait l’essence même de la décision du consommateur : l’émotion.

  • Refonte de site : cas de la SMENO

    Cet article vous dévoile les principales méthodes de refonte de site web et mobile par Wexperience.
    Page d'accueil de la Smeno après la refonte de site
    La refonte de site est un art difficile et ces types de projet sont souvent des pièges à délai qui s’étendent et qui s’étirent jusqu’à l’énervement total. Dans le cas que nous allons vous présenter, Wexperience a réussi à proposer une nouvelle interface en moins de 3 mois, ainsi qu’une mise en production inférieure à 6 mois, pour un site complexe où tout était à refaire. Dans cette article, je vous présenterai notre méthodologie et les équipes qui ont permis de parvenir à un résultat conforme aux attentes du client.

    Contexte de la refonte de site

    Il y a quelques mois, un de nos clients, la SMENO, Société Mutualiste des étudiants du Nord Ouest, nous demandait de retravailler entièrement son interface client pour répondre aux nouveaux objectifs de sa stratégie, mais aussi rafraîchir son image. C’est aujourd’hui chose faite et nous sommes fier du travail accompli. Mais ce qui vous intéressera sûrement autant que le résultat, c’est la manière dont nous y sommes parvenus.

    Une approche centrée utilisateur, mais pour de vrai

    Notre approche de refonte de site est élaborée et est toujours la même dans un tel contexte. Nous cherchons absolument à nous mettre dans la peau des utilisateurs cibles et tentons de comprendre leurs différentes réactions par rapport aux différentes propositions que l’on peut leur faire.
    Cette approche démarre dans tous les cas par la conception de personas, représentants en papier des différentes cibles du site. Ils ont été créés au cours d’un atelier comprenant les personnes de la relation client téléphonique et des agences, ainsi que l’équipe web en charge du projet. Dans le cas de la SMENO, nous avions bien sûr affaire à des étudiants et des étudiantes français, mais aussi, parfois, étrangers, ne parlant pas bien la langue. Nous avons également dû prendre en compte que c’était encore souvent les parents qui s’occupaient de démarches de protections sociales pour leurs enfants. Cela nous a permis de créer un panel de 5 personas qui nous ont ensuite aidé à tester les différents parcours utilisateurs que nous envisagions pour le site.

    Exemple de persona
    Plusieurs personas comme celui-ci ont été créés afin de pouvoir permettre aux concepteurs du site de se mettre plus facilement à la place du public cible.

    Ajouté à ces personas, nous avons eu également une approche web analytics. Quelles sont les principales landing pages ? Quels sont leurs taux de rebond ? Quels sont les taux de transformation des divers tunnels de conversion ? Par quel canal, quel type de mode de recrutement, etc ? Cette analyse nous a permis de détecter la saisonnalité de leurs produits.
    Ce travail a permis de détecter les pages les plus importantes du site et et de comprendre les besoins et les interrogations réelles des utilisateurs qui y arrivaient.
    Ensuite, tous les parcours utilisateurs sont testés et rejoués par notre équipe de conception qui note à chaque endroit les différentes opportunités d’améliorations de l’interface en cours de production, puis ensuite, celles à apporter à l’interface en cours de conception. La synthèse de ces parcours a été consigné dans des experiences maps qui sont un outil très pratique pour représenter de manière simple les parcours utilisateurs lors d’une refonte de site.
    Experience map pour la Smeno
    Cette experience map montre tous les parcours utilisateurs possible pour le site de la SMENO. Elle synthétise les parcours, les freins et les motivations des utilisateurs.

    Suite à ce travail de recherche et de préparation ont pu commencer parallèlement la conception graphique du site, basée sur des contraintes fournies par l’agence de communication de la SMENO, ainsi que le travail de conception de page à travers un ensemble de wireframes pour le desktop et le mobile. Ce travail de longue haleine a été entièrement mené en mode agile avec des sprints très rapides de 1 semaine, ce qui nous a permis d’achever l’entièreté de la livraison des maquettes graphiques en moins de 3 mois, du démarrage du projet jusqu’au début de l’intégration.
    Tableau de projet agile et personas
    Le projet Smeno a entièrement été mené en mode agile afin de serrer les délais et de répondre aussi précisément que possible aux besoins du client

    Tests utilisateurs

    Comme toujours chez Wexperience, des tests utilisateurs ont été réalisés sur des wireframes, mais aussi des maquettes graphiques (desktop et mobile). Ces tests ont permis d’obtenir un ressenti réel des utilisateurs finaux sur les parcours créés. Ils sont venus compléter de manière indispensable le travail de réflexion qui a été mené en amont.

    Un travail graphique primordial

    Le travail graphique a démarré par la création d’un persona design pour définir le ton de communication et la personnalité du site, ce qui permet de garder une cohérence de conception dans le design et la rédaction tout au long du site.
    Afin de donner une tonalité spécifique au site et pour répondre à un besoin de communication extrêmement bien défini, nous avons également proposé à la SMENO d’intégrer des illustrations pour permettre de créer plus d’affinités pour les utilisateurs avec les différents produits et services de la marque. Pour cela, plusieurs pistes ont été menées par notre illustrateur avant d’en faire une déclinaison graphique fignolée au poil près 🙂 Le résultat est visible sur le site.

    Esquisse illustration Smeno
    De nombreux crayonnés ont été nécessaires pour aboutir aux personnages définitifs de la Smeno qui seront aussi des éléments clés de la charte graphique du site

    De la même manière, toute la charte graphique a été créée par notre directrice artistique, puis déclinées par notre webdesigneuse/intégratrice HTML/CSS.
    Afin de mener à bien ce projet de refonte de site et dans des délais réalistes, notre mission a également été de rassembler autour de la table tous les intervenants : de la responsable digitale, à l’agence de communication en passant par le développeur du site. Notre organisation a permis de sortir un site complet en moins de 6 mois, en y réintégrant toutes les fonctionnalités et tous les flux de l’ancien site.
    Besoin d’une agence pour améliorer votre conversion ? Contactez-nous !

    A propos de la SMENO

    La SMENO, Société Mutualiste des étudiants du Nord Ouest a été créée en 1972. Elle assure la gestion du régime obligatoire de Sécurité sociale et la complémentaire santé pour les étudiants des académies de Lille, Amiens, Rouen et Caen.

    Elle adhère au réseau national emeVia, qui fédère l’ensemble des mutuelles régionales étudiantes.

    Avec 900 000 affiliés et 250 000 bénéficiaires d’une complémentaire santé, les mutuelles régionales représentent au niveau national, près d’un étudiant sur deux, affiliable à un centre de Sécurité sociale étudiant.

    La SMENO, quant à elle, gère la Sécurité sociale de plus de 148 07 étudiants et plus de 23 000 adhérents ont également choisi SMENO comme organisme de complémentaire santé.

    Visiter le site de la Smeno

  • Votre connaissance client vous permet-elle de proposer une bonne expérience utilisateur ?

    Technique très éprouvée : se mettre à la place du client, comme Louis de Funès dans l'Aile ou la Cuisse
    Technique très éprouvée : se mettre à la place du client, comme Louis de Funès dans l’Aile ou la Cuisse

    Améliorer l’expérience utilisateur sur un site web, une application mobile ou un parcours en magasin nécessite une bonne connaissance client. Cet article vous explique pourquoi.
    Je ne tiens pas à faire de généralités, mais il me revient, à chaque fois que Wexperience démarre une mission pour un client, un fait que ne se dément que rarement.
    Nos clients connaissent mal leurs propres clients.
    C’est assez paradoxal. Car pour vendre, n’est-ce pas, on a intérêt à toujours bien connaître son client.

    Connaissance client ? Etes-vous quanti ou quali ?

    Segmentation RFM : une façon de voir ses clients, mais pas très utile pour améliorer l'expérience utilisateur
    Segmentation RFM : une façon de voir ses clients, mais pas très utile pour améliorer l’expérience utilisateur

    Mais quand je dis connaître, n’entendez pas par là que je parle de tableaux, de chiffres, de graphiques, de segmentation RFM et autres babioles marketing qui permettent à des bataillons de marketeurs de mener leurs campagnes commerciales.
    Non, je parle plutôt de sa connaissance intime. De sa personnalité. De ses ressorts qui le font aller vers une marque plutôt que vers une autre. Qui lui font choisir un produit plutôt qu’un autre. Qui lui font acheter en magasin plutôt que sur le web.
    Un client, ce n’est pas une ligne dans un tableur. C’est d’abord une personne, un être humain, avec ses caractéristiques, qu’il faut absolument réussir à saisir si on veut lui vendre quelque chose.

    Et feriez-vous un bon vendeur ?

    Saurez-vous donner à votre site la tchatche de Will Ferell dans Anchorman ?
    Saurez-vous donner à votre site la tchatche de Will Ferell dans Anchorman ?

    Un bon vendeur, c’est une personne qui est capable de comprendre ce que veut son client et le lui proposer.
    Seulement pour le vendeur, ce processus de connaissance est inné. Ou disons plutôt qu’il l’a tellement intégré dans l’exercice quotidien de son métier qu’il n’a même plus conscience que son cerveau réalise en temps réel tout un travail qui va lui permettre de se mettre à la place de son client, de comprendre son besoin et de lui apporter une réponse qui le satisfera.
    Ce processus, évidemment, est impossible à reproduire en ligne. Ou alors, malheureusement, il est reste trop souvent abordé de manière massive ou globale. En traitant les clients comme une masse informe de personnes aux caractéristiques trop restrictives.
    En réalité, sur le web, on ne pense souvent aux clients qu’en terme d’une seule et unique personne.
    Mais cela change.

    Comment s’adresser à la masse sans lui parler comme à un troupeau de moutons ?

    parableofsheepLa segmentation permise par les tests AB, l’arrivée massive des outils de personnalisation et de recommandations, ne sont que là, en fait, pour pallier ce défaut de jeunesse du ecommerce : comment s’adresser à la masse sans lui parler comme à un troupeau de moutons ?
    Honnêtement, ça n’est pas facile.
    En tout cas, chez Wexperience la connaissance du client a toujours été une préoccupation majeure. Sans tomber dans les clichés marketing du user centric, nous avons mis en place dès notre création des tests utilisateurs avec eye-tracking qui nous permettent réellement de nous mettre à la place de ce fameux client. Nous utilisons aussi régulièrement des personas pour simuler les différents internautes qui viennent se frotter aux interfaces de nos clients.

    Être capable de s’abstraire de son regard d’expert

    Persona pour une compagnie d'assurance
    Persona pour une compagnie d’assurance

    Tout cela nous permet d’avoir une vue externalisée (et non pas experte) de ce qui se passe en réalité sur un site. Car, en décomposant ainsi l’utilisateur, ce sacro-saint utilisateur, en plusieurs types de clients avec des caractéristiques humaines propres (un âge, un sexe, une famille, une habitation, etc…), nous sommes mieux à même de cerner les différents besoins d’une interface pour répondre au mieux aux demandes de ces personnes.
    Certes, c’est un travail compliqué qui demande une grande capacité de synthèse, ainsi qu’une grande capacité à rassembler des éléments d’informations sur les personnes. Mais qui, à terme, devient extrêmement productif et permet de produire des interfaces adaptées aux clients et qui répondent exactement à la question à laquelle doit répondre l’ergonomie : Ne pas faire chercher, ne pas faire penser (pour les plus experts d’entre vous, ceci est une allusion au livre de Steve Krug, Don’t make me think).
    Aussi, il me semble important, lorsque vous travaillez à la refonte d’un site ou bien à la conception d’un morceau d’interface ou d’une fonctionnalité, que vous vous posiez les bonnes questions.

    Pour trouver les bonnes réponses, comment trouver d’abord les bonnes questions ?

    L'Experience Map est une synthèse visuelle des parcours utilisateurs. Ici, un exemple, dans le domaine de l'assurance
    L’Experience Map est une synthèse visuelle des parcours utilisateurs. Ici, un exemple, dans le domaine de l’assurance

    Et ces bonnes questions ne peuvent être soulevées que si vous vous mettez réellement à la place de vos utilisateurs.
    Comment définir les profils de ces personnes ? Evidemment, cela ne doit pas partir de rien, mais bien de faits qui doivent être rassemblés à travers plusieurs médias : vos web analytics, des questionnaires en ligne, vos données internes et toujours un peu d’imagination pour amener une touche d’humain à votre cible. Par exemple, si vos clients sont majoritairement des clientes. Si elles ont une ou plusieurs moyennes d’âge. Représentez-les par, par exemple, deux personas différents. Une femme âgée et une femme plus jeune. Donnez leur un lieu d’habitation. Imaginez-le et vous verrez que cela vous amènera immédiatement d’autres indices. Ces femmes vivent-elles seules ? Est-ce que cela implique quelque chose ? Ces femmes ont-elles des enfants ? Est-ce que cela implique quelque chose sur leur emploi du temps ? Ont-elles un mari (un seul) et quel métier celui-ci exerce-t-il ? Etc, etc… Vous verrez qu’en faisant ce travail, vous décuplerez votre propre capacité à imaginer des solutions qui répondent à tous les segments de votre population de clients.
    Pour finir, je vous renvoie à cet article très intéressant dégotté sur Uxmag : Using « Dumb data » to Make Smart Design Decisions. Voilà un bon début pour mettre en pratique la théorie.

  • Test utilisateur du jeu vidéo Dofus, d'Ankama

    C’était une première pour nous. Ankama, éditeur de jeux vidéos, nous demandait cette semaine de réaliser un test utilisateur de son jeu le plus célèbre : Dofus. Non, pas tout le jeu, mais une partie seulement. Dofus est un jeu en ligne massivement multijoueurs qui compte plusieurs millions d’inscrits. C’est un jeu de rôle où l’on joue tour par tour, dans un univers fantastique type manga. Une première pour nous, donc !

    Non, vous n'êtes pas dans Enquête 90', mais bien dans un test utilisateur pour un jeu vidéo. Ici, un testeur de 14 ans. Le comportement ? Foncer, foncer, foncer, sans rien comprendre :-)
    Non, vous n’êtes pas dans Enquête 90′, mais bien dans un test utilisateur pour un jeu vidéo. Ici, un testeur de 14 ans. Le comportement ? Foncer, foncer, foncer, sans rien comprendre 🙂

    Pourquoi tester un jeu vidéo ?

    Bien sûr, il ne s’agissait pas de tester la jouabilité du jeu, ni son intérêt auprès des utilisateurs, ni modifier son concept, mais bien de vérifier que certains mécanismes de jeu sont bien compris, ainsi que son utilisabilité. Avec nous, l’équipe des concepteurs (designers, développeurs, etc.) était venue assister à ce test utilisateur pour pouvoir prendre du recul et découvrir, souvent avec stupeur, comment différents joueurs (de 13 à 25 ans) prenaient en main le jeu. C’était une expérience nouvelle pour certain et le eye-tracking, qui a été utilisé tout au long des tests, a été très apprécié pour suivre le cheminement des joueurs.

    Le recrutement

    Recruter des joueurs, très jeunes qui plus est, est un peu moins évident qu’il n’y parait. Dans le cahier des charges, par exemple, il a fallu trouver des joueurs qui n’avaient pas joué depuis plus de 2 ans à Dofus. En étant basé à Lille, ça n’était pas si facile que ça. Un recrutement hors du Nord (ou est basée Ankama) aurait simplifié la donne. Ajoutez à cela que les testeurs devaient être des joueurs réguliers, mais pas « addict ». La grille de recrutement était donc un peu plus compliquée que d’habitude, d’autant que les terminologies des critères sortaient de nos habitudes et de nos connaissances.
    Par ailleurs, des personnes mineures devaient aussi participer au test. Cela aussi était nouveau, mais notre partenaire recrutement n’a pas eu de mal à le faire. Notre plus jeune testeur (qui était une testeuse) de 13 ans était donc venu accompagné de sa maman, puis il est reparti avec un chèque de 30€. Etre payé pour jouer, ça c’est le pied !

    Déroulement du test utilisateur

    Les testeurs étaient convoqués à des entretiens individuels d’une heure en face à face avec le facilitateur. Il leur était demandé d’accomplir un certain nombre de tâches selon un plan de test établi au préalable et prétesté la veille sur un serveur en bêta (afin de procéder à de derniers ajustements). Ainsi, presqu’une dizaine de personnes ont participé à l’étude selon une ventilation de profils correspondant à la cible utilisateur du jeu.
    Pendant le test, chaque testeur doit exprimer à voix haute ce qu’il ressent et ce qu’il pense. Facile pour les plus âgés, moins évident pour les plus jeunes dont la propension au mutisme est très exacerbée !

    Collaborateurs d'Anakama dans la salle d'observation
    Collaborateurs d’Ankama dans la salle d’observation

    Le recensement des problématiques se faisait uniquement en prise de notes par les équipes qui étaient présentes en salle d’observation (une pièce insonorisée reliée par un écran en temps réel au poste de test). Comme d’habitude, nous avions utilisé le eye-tracking, qui permet de suivre le regard, mais aussi de faciliter la captation d’attention des observateurs. Sans eye-tracking, en effet, les tests utilisateurs peuvent être parfois ennuyeux à observer. Avec, on arrive presque à se mettre dans la peau du testeur. C’est bien plus excitant.
    Ensuite… vogue la galère ! Le test permet autant de détecter des problématiques d’ergonomie que des aspects fonctionnels du jeu ainsi que sa compréhension.
    Des questionnaires SUS ont été soumis à chaque utilisateur pour pouvoir donner une note de satisfaction à l’interface. Les enregistrements sont gravés et livrés à Ankama pour une analyse plus approfondie (analyse que nous conduisons nous même d’habitude).

    Enseignements

    Dévoiler les enseignements de ce test n’est pas possible ici, toutefois, certains schémas comportementaux qui sont apparus peuvent être cités :
    Sur une cible d’âge jeune et moins jeune (de 13 à 24 ans), les comportements utilisateurs sont beaucoup plus différents qu’entre une cible de 25 à 75 ans. Les jeunes utilisateurs se révèlent très immature dans leur utilisation du logiciel. Ils ne prennent pas le temps de lire, cliquent le plus souvent possible et n’apprennent les finalités du jeu qu’en utilisant le jeu, sans réflexion, à la manière d’une mouche tentant de franchir une vitre. Leur temps d’apprentissage est donc très long, sûrement beaucoup plus long que pour un jeune adulte.
    Pour un jeu, les règles d’ergonomie, ne sont, au final pas si éloignée que ça des sites webs. Le guidage reste extrêmement important, surtout en phase d’apprentissage, et les actions nécessitent des feedbacks très clairs (plus clairs encore que sur le web, selon moi). Les joueurs pouvaient ne pas comprendre une action parce qu’ils n’en voyaient pas le résultat.
    Comme dans le web, les meilleurs joueurs recherchent instinctivement l’utilisation au clavier plutôt qu’à la souris.

    Conclusion

    Cela aura été une très belle journée pour nous, car elle nous a permis d’aborder un autre aspect du test utilisateur dans un contexte que nous ne connaissions pas. Techniquement et méthodologiquement, tester un jeu est proche du test d’un site web en revanche, concernant les recommandations, il est certain que les critères à prendre en compte ne sont pas les mêmes.
    Si vous êtes éditeur de jeu ou de logiciel, n’hésitez pas à nous consulter. Car, nous pouvons aussi vous aider à avancer dans votre domaine.

  • Cas utilisateur : Locationdevoiture.fr

    Cet article vous explique comment Wexperience, à l’aide d’un test utilisateur, a aidé Locationdevoiture.fr, le leader de la comparaison de location de voiture en Allemagne, a optimiser l’expérience utilisateur sur son site.

    Locationdevoiture.fr un comparateur d’offre de location

    locationdevoiture-home
    La location de voiture est un marché assez vaste comprenant de nombreux acteurs et il est souvent difficile pour le client (particulier ou professionnel) de se retrouver dans la pléthore d’offre. Afin de bien comprendre la manière dont ses visiteurs appréhendait la manière d’utiliser son site, locationdevoiture.fr nous a demandé de réaliser un test utilisateur.
    Nous avons donc recruté un panel de 6 personnes, utilisatrices de site de comparaison de location de voiture, pour analyser et trouver des pistes d’optimisation pour locationdevoiture.fr. Les tests se sont déroulés dans notre studio de Roubaix et l’équipe de locationdevoiture.fr est directement venue d’Allemagne pour y assister (même si désormais Wexperience peut proposer de visualiser les tests à distance).
    Plusieurs objectifs avaient été assignés à ces tests, dont voici les principaux, expliqués par Benjamin Stut, le responsable ecommerce de locationdevoiture.fr.

    Test du lifting de la page d’accueil

    locationdevoiture-home-old
    L’ancienne version de Carigami. Lors de notre test, le site s’appelait encore locationdevoiture.fr

    « Nous voulions nous assurer que notre nouvelle version, plus moderne, ne posait pas de problèmes d’ergonomie ni ne choquait par rapport à l’ancienne, afin de préserver nos clients réguliers. Nous avons pu constater avec les tests que la différence entre les deux pages d’accueil n’était pas remarquée pas les utilisateurs (pas de choc, donc !) ni ne posait de difficultés particulières. Depuis, les tests a/b nous ont montré un gain de 2 points sur le taux de rebond, qui était pourtant déjà bon : c’est une belle performance. Nous procédons donc actuellement aux développements pour la mise en ligne sur tous nos canaux et nous préparons de nouvelles variations, sur la base ainsi définie. »

    La visibilité du message d’annulation gratuite

    locationdevoiture-messagepasvu
    De nombreux testeurs nous ont avoué ne pas avoir vu l’argument principal du site : l’annulation gratuite

    « L’un des avantages de notre site est l’annulation gratuite jusqu’à 24h avant la prise en charge du véhicule. C’est donc naturellement un argument de vente assez fort et que nous cherchons à mettre en avant. Il apparait à de très nombreux endroits sur le site. Quelle ne fut pas notre surprise de voir tous les participants répondre « non » à la question de la consultante ergonome de Wexperience, posée après la réservation : « Avez-vous vu que l’annulation est gratuite ? » !! La preuve qu’en e-commerce, la place du message importe au moins autant que sa formulation… Nous allons tester sous peu une première idée pour faire en sorte que ce message soit mieux perçu. »

    Notre nouveau concept de page de résultats

    locationdevoiture-resultats
    Notre analyse de la page de résultat lors du test
    « Nous avions élaboré un nouveau concept de présentation des offres. Nous voulions avoir une évaluation qualitative en même temps que les résultats quantitatifs de nos a/b tests. En particulier, l’usage d’icônes – nouveau pour nous – devait être vérifié. Les tests utilisateurs ont été gagnants. Cela a été particulièrement important par la suite, car nos tests ont été mitigés. La certitude des retours qualitatifs nous a permis d’analyser le test avec un autre regard et de comprendre que… le résultat avait sans doute une autre explication, lié à un autre problème d’ergonomie identifié lui aussi lors des tests. Nous avons donc mis le projet en attente et allons procéder à un nouveau test, une fois l’autre problème réglé. Il faut faire attention aux échecs d’a/b testing… qui ne sont pas toujours liés au concept lui-même et peuvent avoir d’autres explications.
    La nouvelle page de résultats après le test utilisateur et les tests A/B
    La nouvelle page de résultats après le test utilisateur et les tests A/B

    La concurrence

    « Nous avons fait tester aux utilisateurs deux sites concurrents. Ceci nous a montré des problèmes chez eux, parfois assez importants (cela fait toujours plaisir 🙂 mais nous avons surtout constaté que notre site sortait gagnant du jeu des comparaisons chez quasiment tous les testeurs. C’est une démarche très importante dans la mesure où elle permet de rendre plus intelligent nos efforts de benchmarking. Ce n’est pas parce que vos concurrents font quelque chose que c’est une bonne idée ! »

    Au cours du test, il était demandé aux utilisateurs de donner leur avis sur plusieurs sites concurrents. Bien sûr, ils ne savaient pas, au début du test, qui était le client, ce qui rendait leur avis tout à fait impartial.
    Au cours du test, il était demandé aux utilisateurs de donner leur avis sur plusieurs sites concurrents. Bien sûr, ils ne savaient pas, au début du test, qui était le client, ce qui rendait leur avis tout à fait impartial.

  • Tests utilisateurs : comment bien recruter ses testeurs ?

    Un des impératifs impérieux des tests utilisateurs est d’avoir la capacité à sélectionner un panel le plus représentatif possible de vos clients ou prospects.
    Ce n’est pas toujours facile.

    Le problème du profil social

    Quand il s’agit d’un grand compte de la grande distribution ou du e-commerce, cela ne pose, en généralement pas de problème, la cible est tellement large que les critères de sélection permettent de faire un recrutement rapide sans désistement.
    A l’inverse, quand la cible est spécifique – patrons d’entreprises, cadres de grand groupe, profession libérale – cela devient plus compliqué est il nécessaire d’ajouter un délai supplémentaire au temps de recrutement d’un test. Qui est habituellement de une à deux semaines chez Wexperience.
    Autre difficulté, le recrutement de personnes étrangères. Dans le cadre d’un test pour un pays comme la Belgique, par exemple, le recrutement se fait la plupart du temps sur 2 groupes : un néerlandophone et un francophone. Ce qui oblige aussi d’ailleurs à pouvoir faire travailler un facilitateur dans cette même langue.
    Mais d’autres freins peuvent apparaitre également. Comme la géographie.

    La géographie

    Si la plupart des tests que nous réalisons peuvent se dérouler dans notre bon vieux Nord Pas de Calais, qui est une zone sensiblement urbaine et rurale à la fois pour obtenir simplement un échantillon large de la population française. Certains sites exigent parfois de devoir travailler avec une population locale.
    Exemple : Evianchezvous.com. Ce site propose de la livraison d’eau minérale à domicile et ne livre que sur Paris. Les tests sont alors réalisés dans une salle spécialisée sur Paris avec un panel d’habitants de la capitale.
    Pourquoi s’astreindre à se déplacer dans un tel cas ? Parce qu’il est indispensable de se rapprocher le plus possible du réel. Si nous avions conduit ces tests dans le Nord, il est probable que les testeurs se seraient sentis nettement moins impliqués que des parisiens.

    Dispositif de test utilisateur avec eye-tracking. Il tient dans 2 valises et permet de réaliser des tests dans toutes la France avec le même confort que dans un studio.

    Comment bien réussir un recrutement ?

    1. Tout d’abord, envisager un délai suffisamment long entre le moment où les tests doivent avoir lieu et le démarrage du recrutement. Pour un panel de 12 à 20 personnes, nous comptons en moyenne 2 semaines.
    2. Bien définir les profils utilisateurs à recruter en étant suffisamment souple pour éviter les blocages. En général, quatre à cinq critères suffisent à définir un profil. La plupart du temps : l’âge, client/prospect, le sexe, la zone d’habitation, éventuellement la CSP. Plus vous ajoutez de critères, plus le panel est difficile à recruter.
    3. Se méfier des périodes de vacances. Même s’il n’est pas impossible de réaliser un test en plein mois d’août, certaines populations sont carrément impossible à recruter pendant ce mois : les étudiants.
    4. Disposer d’un matériel de test léger et mobile pour être capable de déplacer son environnement de test dans toute la France et plus.
    5. Appeler les testeurs la veille du test et leur rappeler leur engagement.
    6. Prévoir un incentive suffisamment important pour diminuer le taux de désistement (nous offrons en général un chèque cadeau de 30€ pour une heure d’entretien).
    7. Prévoir des testeurs en plus (faire du surbooking) si vous estimez que le risque de désistement est élevé.

    Bien sûr, si vous menez des tests utilisateurs, il vaut mieux faire appel à une agence extérieure comme Wexperience. Mais rien ne vous empêche de mener vos propres expérimentations, au contraire.
    Bons tests !

    Pour tout savoir sur le sujet des tests utilisateurs, découvrez notre recette 5 étoiles by Wexperience ! Pour la télécharger, cliquez ici 👈

  • 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.