Agence WEX

Catégorie : Cas d’études

  • Améliorez l’expérience utilisateur grâce au persona design

    [7min de lecture]

     

    Rendre plus humaine la relation client, n’est-ce pas tout, ce que nous recherchons, pour améliorer la performance de nos sites ? Mais comment le faire depuis des interfaces fonctionnelles sans saveur, froides ?

     

    C’est à ce stade qu’intervient le persona design qui est une technique qui vient ajouter une couche émotionnelle à l’expérience utilisateur en venant humaniser, un cran au dessus, une interface.

     

    Qu’est-ce qu’un persona design ?

    C’est un outil qui va permettre aux collaborateurs amenés à travailler sur la conception et la maintenance d’un produit digital d’améliorer sa capacité à produire de l’émotion. Concrètement, il s’agit d’inventer un personnage qui va être la véritable personnalité de votre site, comme s’il s’agissait d’une personne vivante.

     

    Cette technique a été inventée par le designer Aaron Walter pour la société Mailchimp et est depuis utilisé très souvent sur beaucoup d’autres sites américains.

     

    C’est donc bien un outil de conception comme le mot design le signifie en anglais. (Pour en savoir plus sur la conception de personas, cliquez ici 👈)

    Comment définir un persona design ?

    Il n’y a sans doute pas qu’une manière de définir un persona design et je pense que les possibilités pour le faire sont variées, même si elles doivent reposer sur quelques paramètres de base.

    Donnez lui un nom

    Comme il s’agit donc d’imaginer un personnage, la première chose à faire est sans doute de lui donner une apparence et un nom, comme c’est le cas pour Mailchimp. C’est le meilleur moyen pour que les personnes amenées à travailler avec le persona voient leur imagination stimulée et leur acceptation du persona meilleure. On s’attache plus à quelque chose de figuré qu’à des notions abstraites.

     

    Freddie, la mascotte et le persona design de Mailchimp, une solution d'emailing
    Freddie, la mascotte et le persona design de Mailchimp, une solution d’emailing

     

    Apprenez-lui à parler

    La deuxième chose à faire est de s’attaquer à ce qui va, en réalité, constituer l’essence même du persona, c’est à dire son vocabulaire, sa manière de s’exprimer.

     

    Les mots, dans le digital, comptent beaucoup plus qu’on ne l’imagine souvent. Et la tournure des phrases, leur clarté, le vocabulaire utilisé seront les principaux vecteurs de la personnalité du site. C’est grâce à la définition de la manière de s’exprimer que le persona va être le mieux défini.

     

    Qu’on y pense bien : un site est parsemé de phrases courtes qui orientent, guident, incitent un utilisateur à agir. Et le plus souvent, les phrases utilisées relèvent toutes d’un même style plat, anonyme, sans saveur, voire parfois technocratique (dans le cas des messages d’erreur) qui, s’ils ne sont pas ennuyeux, peuvent même aller jusqu’à provoquer des erreurs dans la navigation ou bien même tromper l’utilisateur dans la compréhension d’une offre.

    Très peu de designers s’attachent à réaliser ce travail de rédaction qui consiste à regarder l’ensemble des phrases « utilitaires » d’un site et à leur donner une saveur particulière, un ton, un style, qui généreront de l’émotion chez l’utilisateur et le rendront plus réceptif, plus réactif, plus éveillé pendant sa navigation.

     

    Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

     

    Exemple :

    Un message d’erreur tel que : « Votre email comporte une erreur. Veuillez le corriger. » constitue le pire de ce qu’on peut faire en terme d’expérience utilisateur.

    • Il est imprécis, car il n’explique pas ce qu’est l’erreur. Et donc, n’aide pas l’utilisateur.
    • Il est froid, car son vocabulaire est extrêmement technique et ne soulève aucune émotion.
    • Il est impérieux, car il n’utilise aucune précaution oratoire et aucune formule de politesse.

    Alors que : « Ah ! Je crois qu’il y a un petit problème avec votre email. Il y manque un arobase. Rajoutez-le et ça ira beaucoup mieux ! » institue immédiatement une connivence avec l’utilisateur, grâce à une petite dose d’humour et de légèreté qui dédramatise l’erreur.

     

    Avoir du cadre

    Bien évidemment, on ne peut pas écrire de telles phrases sans avoir un cadre au préalable. Un cadre qui définira le ton, le style, le vocabulaire employé et pour quels buts. Ce persona devra donc être défini d’abord par des traits de caractère. Et ces traits de caractères évidemment doivent être inspirés par le rôle que l’on va attribuer au persona.

     

    Est-ce que ça sera un vendeur ? Un animateur ? Un ami ? Toute la question sera de savoir ce que vous voulez incarner avec ce persona en fonction de votre marque. Ses traits de caractères en découleront entièrement. Et tout en retenant une chose, c’est que ce persona sera aussi votre ambassadeur, donc votre premier contact avec vos clients.

     

    Quels traits de caractères peut avoir un persona design ?

    Tout simplement ceux de la personne, qui, en magasin ou à l’accueil d’un établissement, établira le contact avec le client, et l’accompagnera tout au long de ses interactions avec la marque. La question alors à se poser sera : comment saluera-t-il ses visiteurs, sur quel ton leur parlera-t-il ? Les tutoiera-t-il ? Leur tapera-t-il dans le dos ou sera-t-il plutôt distant ?

     

    Ces gifs traduisent bien la notion de persona design. Chacun de ces personnages souhaite la bienvenue à sa façon, traduisant chacune personnalité de site différente.

     

    A ce stade de mes explications, vous devriez commencer à voir comment on compose un persona. Et quand on y songe, c’est plutôt assez facile, en fait. Il suffit de se mettre à la place de nos clients et de se demander comment nous aimerions être accueillis.

    Le cas Zarko + April Moto

    Avec Wexperience, nous avons été amenés avec l’un de nos clients à réfléchir à un persona design afin d’améliorer la conversion.

     

    April Moto est une filiale du groupe April qui, comme son nom l’indique, est spécialisée dans l’assurance des motards. Métier difficile, car le risque ici coûte cher à assurer. April Moto dispose d’un site qui met en avant ses offres et permet de souscrire en ligne.

     

    Sur ce site, il y a de la complexité. Les motards ne sont pas une famille unie et homogène, contrairement à ce qu’on pourrait penser, mais bien une cible segmentée allant du simple gamin, pilote de scooter, au cadre à la retraite se prenant pour un biker et roulant sur une Harley. Bien évidemment, il est impossible de s’adresser à tous ces différents publics de la même manière. Et cela entraîne une complexité difficile à gérer sur le web qui est : « Comment s’adresser de la même manière à un public varié avec des attentes différentes, un vocabulaire différent, sans se tromper de ton et de proposition de valeur ? »

     

    Johan Zarko est l'ambassadeur de la marque April Moto
    Johan Zarko est l’ambassadeur de la marque April Moto

     

    Avec l’IA et la personnalisation, il serait possible de trouver une réponse complexe à cette question difficile, mais pour l’instant, nous n’en sommes pas là. Et, quoiqu’il en soit, cela n’évacue pas la question de l’identité de marque et de la manière dont un site « s’exprime » face à un client. Trouver un ton et une manière de parler, comme je l’ai expliqué plus haut permet d’améliorer l’empathie de l’utilisateur vis à vis du site et d’installer un meilleur dialogue et de meilleures interactions.

     

    Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

    C’est alors que Johan Zarko est apparu ou plutôt nous est apparu comme la solution à l’amélioration de l’expérience utilisateur. Champion du monde de moto, Johan Zarko est aussi l’ambassadeur de marque de April Moto. Et, comme tous les champions, son personnage véhicule énormément de valeurs positives et fédératrices. Pourquoi, dès lors, ne pas s’en servir pour communiquer avec les clients et les visiteurs du site ? A partir d’un tel persona, il est évidemment facile de créer des dialogues et des interactions sortant de l’ordinaire courant du web.

     

    Voici, par exemple, comment Zarko a été intégré au formulaire de demande de devis d’assurance. J’ai choisi de vous afficher le processus complet de conception pour que vous compreniez bien les changements qui ont été introduits et l’utilisation du persona.

     

    Formulaire avant refonte et sans Zarko
    Formulaire avant refonte et sans Zarko

     

    Proposition de maquette réalisée par Wexperience. A ce stade, l'intégration du persona n'est pas encore visible. En revanche, le travail d'optimisation ergonomique a déjà été réalisé, suite à des tests utilisateurs.
    Proposition de maquette réalisée par Wexperience. À ce stade, l’intégration du persona n’est pas encore visible. En revanche, le travail d’optimisation ergonomique a déjà été réalisé, suite à des tests utilisateurs.

     

    Proposition de maquette graphique (on voit encore le logo de copyright de l'image de fond). Le personnage de Zarko a été intégré ici à deux niveaux de la page. Dans le début du formulaire, mais aussi dans la partie latérale de la page, en mode conseil)
    Proposition de maquette graphique (on voit encore le logo de copyright de l’image de fond). Le personnage de Zarko a été intégré ici à deux niveaux de la page. Dans le début du formulaire, mais aussi dans la partie latérale de la page, en mode conseil)

     

    Comme vous le voyez ici, l’utilisation du pilote de moto, comme mascotte du site, est importante. Mais ne vous méprenez pas ! Persona ne veut pas dire mascotte ! C’est le cas ici, car Johan Zarko est suffisamment fédérateur pour l’utilisateur comme guide dans le site. Mais un persona design de site peut-être beaucoup plus abstrait et ne se manifester que par un ton de voix, des couleurs, des styles d’interactions. Si vous créez un persona design, ne vous trompez donc pas : il ne s’agit pas de créer une mascotte !

     

    Et d’ailleurs, c’est exactement ce que nous avons décidé de ne pas faire pour BrandAlley, un autre de nos client dans le secteur de la mode. Dans ce dernier cas, nous étions confronté à une problématique d’identité de marque, mais aussi d’amélioration des parcours utilisateurs. Un atelier a été conduit afin de déterminer les caractéristiques du persona design et ces éléments ont ensuite permis à un graphiste, notamment, de travailler le design du futur site. Mais ici, pas de mascotte : juste des indications de style, de couleurs, de ton de voix.

     

    Un atelier interne a nécessité de mieux comprendre et travailler le positionnement de la marque afin de définir le persona design. Au final, deux pistes avaient été retenues.
    Un atelier interne a nécessité de mieux comprendre et travailler le positionnement de la marque afin de définir le persona design. Au final, deux pistes avaient été retenues.

     

    Les déclinaisons de ces positions peuvent ensuite donner lieu à la rédaction de textes de site par un UX Writer.

     

     

    Conclusion

    Construire un persona design ne s’improvise pas. Comme pour tout, cela requiert de la méthode et de l’organisation. Pour chaque projet mis en oeuvre chez nos clients, nous faisons appel extensivement soit directement aux utilisateurs finaux, soit aux équipes internes marketing lors de workshops afin de définir les contours du persona design.

     

    La création du persona est ensuite effectué par un concepteur rédacteur accompagné d’un directeur artistique. Un UX writer vient compléter la paire pour l’écriture du phrasé du site.

    Un document complet est créé et est ensuite livré et présenté aux équipes concernés par le sujet.

     

    VIDEO : NCD #5 | Le Persona Design ou l’art de donner une véritable personnalité à votre site

  • Le secret d’un design réussi : plateforme de marque et persona design

    [5mn de lecture]

     

     » Le design n’est pas de l’art, c’est une méthodologie avant tout. « 

    La question revient souvent avec nos clients lorsque nous faisons une refonte de site. « Quel design allons-nous adopter ? A quoi va ressembler notre site après ? Est-ce qu’il va plaire ? Est-ce que nous allons l’aimer ? » sont parfois les questions qu’ils se posent.

     

    Contrairement à une croyance qui semble profondément ancrée, le design de site n’est pas la résultante d’une inspiration réussie d’un designer, mais le fruit d’un travail qui mêle plateforme de marque, expérience utilisateurs, et tendances.

     

    Concevoir un design : une fusée à quatre étages

    FUSEE-ARTICLE-WEX

     

    La base : la plateforme de marque

    Son rôle est majeur dans la définition du design de votre site. Soit vous l’avez déjà défini et elle servira de base de départ à la conception d’un persona-site. Soit, avant de vous livrer à quelque travail de conception graphique, vous aurez à la définir. Ce n’est pas le propos de cet article, mais il est important de rappeler à quel point cette plateforme joue un rôle essentiel dans la réussite du design d’un site. Sans plateforme de marque, vous risquez de passer à côté des fondamentaux qui bâtiront votre succès.

     

    Pour nous, elle permet de nous poser les bonnes bases pour la conception graphique d’une interface, et notamment la création du persona site, comme vous allez le voir après.

     

    Exemple de plateforme de marque pour un client Wexperience. Ce document, accompagné d’autres spécifications, permettra d’engendrer le document de Persona Design, indispensable pour confectionner le futur site à créer

     

    Le premier étage de la fusée : le persona design

    Lorsque la plateforme de marque est parfaitement définie, il est alors possible de passer à la définition du persona design qui définira l’ensemble des éléments de langage visuels et textuels (voire sonores) du site. C’est un outil extrêmement important de la conception d’interface et qui est souvent négligé par les agences.

     

    L’intérêt du persona design est de pouvoir générer un outil collaboratif définissant un ensemble de règles sur la manière de communiquer d’un site (cela est vrai aussi pour une app, bien sûr).

     

    Le travail de référence pour les persona design est celui réalisé par le designer Aarron Walter, responsable du design de la société Mailchimp, une solution d’emailing grand public.

     

    Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

     

    Comme il le propose lui même, un persona design se décline en 7 éléments clés :

    • Une image personnalisée
    • Une vue d’ensemble
    • Les traits de caractères de la marque
    • La carte de personnalité
    • La voix
    • Des exemples de textes
    • Les méthodes d’engagement

     

    Le persona design : un travail collaboratif

    Pour chaque marque, ces règles sont déterminées par un travail d’atelier ou les équipes marketing, les clients parfois, et des experts interagissent ensemble pour créer un persona, un véritable personnage, qui sera la personnalité du site.

     

    Faire ce travail permet d’avoir une approche beaucoup plus riche de la conception. A l’intérieur d’un persona design sont définis tout ce que voit, entend, lit et écoute un utilisateur. La manière de s’exprimer du site, par exemple… son apparence physique, son caractère : est-il gai, léger ? Ou sérieux ? Rassurant ? Ou tout cela à la fois ? Il définit en quelque sorte l’image que l’on veut projeter de soi à ses clients et à ses prospects.

     

    Le persona design devrait être le premier travail pour réaliser un site ou une application avant même toute phase de conception.

     

    Extrait du persona design de Mailchimp, une société d’emailing.

    Avantages du persona design

    • Un outil simple pour définir les règles de gestion des éléments du langage visuel et textuel
    • Une vision partagée de ce que doit être le site, mais aussi de tous les éléments qui vont permettre de communiquer avec vos clients et prospects : email et réseaux sociaux
    • Une homogénéisation des contenus (cet outil vient vraiment en complément du design system)
    • Un outil marketing qui permet de créer plus d’affinité avec votre marque en donnant une véritable personnalité à votre site

     » Le persona design donne une véritable personnalité à votre site, renforçant le lien de proximité avec vos clients et vos prospects « 

     

    Ces éléments étant entièrement définis, il devient dès lors beaucoup plus simple de savoir quel ton adopter sur votre site et comment communiquer avec vos clients.

     

    Dans les maquettes de conception (wireframes), il devient possible de détailler les différents textes de l’interface et de pouvoir dès lors les tester auprès de vos utilisateurs finaux

     

    Dans la phase de conception graphique, les éléments de charte seront définis sur des éléments tangibles (couleurs choisies en fonction des intentions de la marque, de l’image qu’elle veut véhiculer / pictogrammes en accord avec le ton du site). Créer un persona permet aussi aux équipes en charge du site de mieux se projeter dans l’ADN de la marque et de mieux la retransmettre.

     

    Le logo et la typo du logo font aussi partie du persona design (surtout dans le cas d’un pure player comme Mailchimp)

     

    Le deuxième étage de la fusée : la conception UX

    Je ne m’étendrai pas inutilement sur cette partie qui constitue le coeur de notre métier et que Wexperience pratique au quotidien avec ses clients.

     

    Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

     

    Brièvement : la conception UX se décline alternativement entre deux activité. Celle de l’audit par les utilisateurs et celle de la conception par un UX Designer.

     

    La conception se matérialisant par des wireframes (maquettes fil de fer de conception détaillée). Elles permettent de positionner et de définir rapidement tous les éléments d’une interface. Durant cette phase, un expert technique de la plateforme de développement, un expert SEO et un UX Writer (personne chargée de la rédaction de textes de l’interface) viennent apporter chacun leur compétence afin de répondre à toutes les contraintes de la conception.

     

    Souvent, un prototype est livré à mi-parcours et un test utilisateur réalisé sur un nouveau panel afin de parfaire la conception.

     

    La phase de conception UX est matérialisée par des maquettes fil de fer (ou wireframes), comme ici dans le logiciel Sktech

     

    Troisième et dernier étage : la conception graphique

    La conception graphique sera la résultante de tous les éléments précédents. Elle s’appuiera à la fois sur la plateforme de marque, le persona site et les maquettes UX. Souvent, elle comprend également une réflexion issue d’un benchmark de sites concurrents ou inspirants.

     

    De ce travail ressort le design du site, et, plus concrètement, exactement ce que verront les utilisateurs futurs du site. C’est à ce point qu’il devient possible de répondre à la question de départ. Ce design, sur lequel nous nous sommes longuement interrogé, va ressortir naturellement et s’imposer comme une évidence étayée et argumentée par les nombreux travaux de recherche et de conception en amont.

     

    En fonction de cela, un site pourra ressembler à un Amazon ou un Zara, sans que personne n’ait à discuter son apparence. La notion d’esthétique, vous le voyez bien, prend beaucoup moins d’importance à ce stade. Au final, l’important, puisque l’on parle de e-commerce, est d’être arrivé à conjuguer des facteurs psychologiques d’appréciation d’une marque, de son offre, à des facteurs commerciaux ou marketing qui en feront « une machine de guerre ».

     

    Des maquettes graphiques mobiles pour le site Linvosges.fr

    Conclusion

    Le design de site n’est pas un art, mais une science, un métier, dont le produit est un design graphique répondant à un cahier des charges business mêlant ADN de marque, UX, offre, et spécifications techniques. Pour y réussir, un projet doit, selon une méthodologie et une organisation rodée, faire collaborer un ensemble de compétences et de métiers, conduit par un chef de projet polyvalent, capable de les comprendre tous. Chacun des projets livrés par Wexperience répond à cette exigence.

  • Les 4 objectifs clés d’une app ebusiness

    Aujourd’hui, après le cas Walmart, Electrodépôt ou celui d’Asos, nous allons avoir comment construire une app en relation avec une stratégie business.

    Il s’agit de Hopper, une app de réservation de billets d’avion, dont la société mère vient de lever 100 millions de dollars et qui est désormais valorisée à 780 millions de dollars !!!

    La promesse d’Hopper (qui n’est pas originale) est d’aider ses utilisateurs à trouver les meilleurs prix sur des billets d’avion. Vous entrez une ville de départ, une destination, et hop ! L’application se décarcasse et vous trouve tous les tarifs de toutes les compagnies en mettant en avant les meilleures offres.

    Gros avantage de Hopper : pendant que vous êtes occupé à faire autre chose, l’app continue à chercher les prix les moins chers et vous alerte quand une offre à ne pas manquer apparait.

    Respecter les 4 objectifs d’une app e-business

    Construire une telle app doit se faire en définissant des objectifs clairs et simples. Pour Hopper, ce sont les suivants :

    • Séduire : attirer l’attention par le design, au delà de l’offre, pour obtenir le plus de téléchargement possible
    • Convertir : ne pas décevoir à la première utilisation, permettre d’obtenir un résultat rapidement afin de convaincre l’utilisateur d’employer plus d’une fois l’app
    • Retenir : l’expérience utilisateur, grâce à une bonne ergonomie, doit être la plus fluide possible, et ne pas créer de freins pendant les usages
    • Fidéliser : créer de nouveaux besoins, suggérer des destinations pertinentes, pour faire revenir aussi souvent que possible l’utilisateur sur l’app

    Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

    1 – Séduire par l’apparence graphique

    La séduction passe essentiellement par le design graphique, sous-tendu par une organisation de l’information simple et facile à comprendre.

    L’apparence de de votre app dans l’appstore sont exactement comme le packaging d’une boîte de Corn Flakes dans un rayon de supermarché. Non seulement, vous devez être à hauteur des yeux, mais aussi sortir du lot, et enfin, plaire. Cela fait beaucoup !

    Un logo à la couleur tendance (le fameux rouge corail de Pantone)

    2 éléments sont à noter sur la présentation de Hopper dans l’App Store d’Apple : le logo et les écrans présentés

    Le logo n’est pas un élément à négliger dans le design d’une app. Non seulement, il est votre identité de marque, mais il est aussi un vecteur de la décision de téléchargement. Un logo peu dynamique, ou trop compliqué visuellement, réduira l’attention de vos utilisateurs potentiels. Et, point tout aussi, important, sera plus difficile à mémoriser ou à retrouver sur l’écran de votre smartphone au milieu de nombreuses icônes d’application.

    Le choix de la couleur n’est pas anodin non plus. Ici, c’est le rouge corail, désigné comme la couleur Pantone de 2019 qui est utilisé. Ce n’est pas un hasard, car il y a des chances que cette couleur ait un potentiel de séduction plus important que d’autres couleurs. Pour une marque qui n’existe qu’online, ce n’est pas un problème de céder aux tendances.

    Les screenshots (capture d’écran de l’app) reflète les promesses de l’offre… Surtout que ce ne sont pas les screenshots de l’application ! En réalité, il s’agit d’un montage destiné à promouvoir la promesse de l’app. En 4 écrans, sont déclinés 4 sous-promesses de l’offre :

    • le prix : « Payez le moins cher possible »
    • la découverte : « Nous allons vous vendre des choses que vous ne connaissiez même pas »
    • le contrôle : « Achetez quand vous voulez »
    • la primauté : « Soyez notifiés en temps réel des meilleurs offres et profitez-en immédiatement »

    Comme vous le voyez : plutôt que montrer l’app elle même, Hopper a créé de faux écrans qui encouragent l’internaute à agir et à télécharger l’app grâce à des messages incitatifs excitants (sur la version desktop).

    • Un mot sur le choix du design graphique pour finir. Vous aurez remarqué qu’il est presque enfantin. Ne soyez pas étonné : la cible visée par Hopper sont les jeunes millenials. Comme pour le reste, ce parti-pris participe à la décision de l’internaute de télécharger ou pas l’app.
    Sur mobile, le dispositif de séduction est un peu moins efficace
    Sur mobile, le dispositif de séduction est un peu moins efficace

    2 – Convertir à l’utilisation par la simplicité

    C’est un précepte absolu. Si vous ne voulez pas que votre app soit rejetée après la première application, il faut arriver le plus vite possible à fournir un résultat satisfaisant à l’utilisateur. C’est le meilleur moyen de l’encourager à revenir.

    Comme vous pouvez le voir dans la vidéo ci-dessus, la conversion à l’utilisation se fait de deux manières :

    1. Par la présentation d’écrans d’introductions à l’app qui n’ont pour but que de vous faire accepter les notifications (onboarding)
    2. Par l’incitation à agir grâce à une interface simple, coloriée et incitatives

    Les règles de la conversion à l’utilisation sont :

    • la rapidité : il faut que ça aille vite, moins d’une minute pour obtenir une premier résultat et une preuve que le concept marche
    • la simplicité évidemment : tous vos écrans doivent être clairs et parfaitement compréhensibles sans que l’utilisateur ait besoin de réfléchir. C’est le fameux Don’t make me think de Steve Krug
    • la qualité du résultat : il faut non seulement qu’il soit pertinent, mais, comme c’est le cas ici avec Hopper, qu’il y en ait beaucoup, de manière à provoquer une sensation d’abondance infinie dans l’esprit de l’utilisateur. N’oubliez pas que le choix, c’est la liberté.

    Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

    3 – Retenir grâce à une bonne ergonomie

    Une telle app est destinée à être utilisée le plus souvent possible. Pour que cela se fasse, il faut éviter toute friction dans la navigation, tout doute, toute interrogation dans l’usage de l’interface, et bien sûr, tout temps d’attente.

    Mais une bonne ergonomie, ne se décrète pas ! Elle se travaille en permanence ! Pour l’améliorer, vous devez mettre en place un processus d’observation/amélioration continu où chaque itération améliorera l’UX de votre app.

    Pour y parvenir, fixez vous des objectifs :

    • Mesurez la satisfaction de vos utilisateurs grâce à un outil comme UX.care à chaque test
    • Fixez des kpi spécifiques à l’UX. Par exemple, comptez le nombre d’erreurs de taps de l’utilisateur lorsqu’il doit trouver un billet et tentez en permanence de diminuer ce nombre d’erreurs
    • Diminuez tous les temps de latence (comme je vous l’ai expliqué dans l’article : 11 conseils pour optimiser la vitesse de votre site mobile). Rappelez-vous : 1/10e de seconde est déjà considéré comme lent par le cerveau humain.
    • Introduisez une note de « fun », surtout si votre cible est appétente à cela. La recherche a démontré que l’UX et la performance d’une app étaient améliorées si, en plus d’une bonne ergonomie, il y avait de l’amusement à l’utilisation d’une app.
    • Intégrez le parcours au maximum à votre app : contrairement à d’autres apps du même type, l’achat de billet se fait directement dans Hopper et l’utilisateur n’est pas renvoyé sur un site tiers
    Le lapin est un élément clé de l'UX de Hopper. En fonction du résultat, il sourit ou il fait la tête (quand le prix du billet n'est pas une bonne affaire). Introduire un personnage emblématique est une manière de créer du fun, de l'émotion dans ce qui n'est qu'une application de recherche de prix. C'est un moyen de parler différemment à l'utilisateur et de dédramatiser l'achat d'un billet d'avion (qui peut être stressant quand vous devez dépenser 600€/ personne)
    Le lapin est un élément clé de l’UX de Hopper. En fonction du résultat, il sourit ou il fait la tête (quand le prix du billet n’est pas une bonne affaire). Introduire un personnage emblématique est une manière de créer du fun, de l’émotion dans ce qui n’est qu’une application de recherche de prix. C’est un moyen de parler différemment à l’utilisateur et de dédramatiser l’achat d’un billet d’avion (qui peut être stressant quand vous devez dépenser 600€/ personne)

    4 – Fidéliser en stimulant l’utilisateur

    Une bonne ergonomie est un vecteur de fidélisation, mais ne suffit pas, si votre offre ne se renouvelle pas suffisamment. Mais comment le faire quand on vend du voyage ?

    Lorsqu'un prix est une bonne affaire, Hopper, grâce à son analyse permanente des prix du marché, vous le dit. Et le petit lapin est content !
    Lorsqu’un prix est une bonne affaire, Hopper, grâce à son analyse permanente des prix du marché, vous le dit. Et le petit lapin est content !

    Utilisation de l’IA

    Tout comme Netflix (voir l’article à ce sujet), Hopper fait un usage intensif de l’IA pour suggérer des voyages auxquels les utilisateurs n’auraient pas pensé. Et, d’après Frédéric Lalonde, le fondateur de Hopper, c’est plutôt une réussite :

    Le taux de conversion des offres suggérées par l’IA est 2,6 fois supérieur à celles cherchées par les utilisateurs

    25% des commandes sont le fruit de suggestions faites par l’IA

    Conseiller l’utilisateur

    Une fonctionnalité particulièrement appréciable de Hopper est la manière dont il pousse les offres. Si le tarif n’est pas assez attractif ou s’il peut y avoir une meilleure affaire à faire, il vous le signale. Ainsi, Hopper vous transforme en client intelligent qui ne se jette pas sur la première offre venue.

    Notifier

    Vous ne découvrirez rien si je vous dis que Hopper utilise les notifications pour faire revenir ses utilisateurs et que cela fait évidemment partie du système de stimulation. Hopper encourage l’abonnement aux notifications au moment de la phase d’onboarding.

    Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

    Conclusion : une app presque parfaite grâce à l’ergonomie et l’IA

    Dans l’interview qu’il a accordé récemment à Techcrunch USA, Frédéric Lalonde apportait une précision très intéressante. Hopper n’est accessible qu’à travers une app. Pas de site web, ni de site mobile. Cela montre à quel point  sur continent Nord Américain le mobile est en train d’effacer presqu’entièrement le commerce sur ordinateur de bureau. Une tendance qui va atteindre aussi l’Europe. Et une option qui n’est pas si folle quand on connaît le coût de développement et de maintenance d’un site web et d’une app en même temps.

    Reste une question quand même : pourquoi ne pas s’être alors tourné vers la technologie des PWA qui réunit le meilleur des deux mondes ? Cela aurait été sans doute une solution encore meilleure. Mais qui est peut-être dans les cartons de Hopper.

    Excellente journée !

  • Play Guitar Hits : une nouvelle application designée par Wexperience

    Appsteel nous avait confié le redesign graphique de son application d’apprentissage en vidéo de la guitare. Voici le résultat ! Si vous aussi, vous cherchez un prestataire pour le design graphique et UX d’une app, contactez-nous !

    (Application disponible sur l’appstore)

    PLAY-GUITAR

    PLAY-GUITAR2

  • E-commerce : Pour convertir plus, hiérarchisez l’information !

    Analyse du cas Electrodepot.fr

    Refondre une page unique de site est toujours une mission complexe, car il est toujours difficile de s’attaquer à une seule partie d’un site sans avoir la tentation d’en modifier d’autres. C’était pourtant bien la demande d’Electrodépôt, une marque du groupe Mulliez, spécialisée dans la distribution de produits électroniques grand public.

    Avant une refonte, toujours faire un test utilisateur !

    La première chose à faire est de soumettre cette page à un test utilisateur. 12 personnes ont donc été convoquées par nos soins pour utiliser le site d’Electrodépôt sous notre oeil sagace. Ce test, qui a duré 2 jours, nous a permis d’établir une cartographie complète complète de l’UX sur la fiche produit, ainsi que d’autres éléments du site (la navigation, la page liste, etc.).

    12 testeurs représentent environ 12h d’enregistrements vidéos qui sont ensuite analysés, minute par minute, pour déterminer les points forts et les points faibles de l’objet de l’étude.

    Plus de cent pages de rapport ont été rédigées suite à ce test. Dans les grandes lignes, le principal défaut que nous avons pu relever sur l’ancienne fiche produit d’Electrodépot.fr était un manque d’organisation et de hiérarchisation de l’information. Dans le domaine de l’électronique/électroménager, ce peut être très pénalisant. Les produits techniques nécessitent beaucoup d’informations pour satisfaire, intéresser, rassurer l’utilisateur. Et quand il y a beaucoup d’informations, le risque est grand de créer de la confusion et de perdre l’utilisateur. C’était le cas ici.

    Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

    Parmi les défauts relevés :

    • Des codes couleurs non cohérents (le rouge est utilisé avec plusieurs sens sémiologiques)
    • Des photos produits trop petites
    • Pas d’incitation à aller en magasin
    • 1 affichage 3 colonnes lourds et compliquant la lecture
    Ancienne fiche produit Electrodepot.fr

    Décryptage de la nouvelle version

    Il existe beaucoup de moyens d’organiser et de hiérarchiser l’information sur une page. L’important, pour pouvoir bien le faire, est de déterminer quels sont les éléments les plus primordiaux pour la majorité des utilisateurs et de les mettre correctement en avant sans rendre, pour autant, leur lecture compliquée.

    3 améliorations principales

    Maquette de la nouvelle fiche produit d’Electrodepot.fr, telle qu’elle a été proposée par Wexperience

    1) Une meilleure prototypie

    En ecommerce, sur une marque généraliste, il ne faut pas réinventer la poudre. Tous les sites d’électronique/éléctroménager obéissent à peu près à la même organisation. C’est normal : en utilisant ainsi une prototypie (un squelette général) similaire, ils font gagner du temps à leurs utilisateurs, qui « s’y retrouvent ». La photo produit est toujours à gauche, le bouton « Ajouter » en bas à droite, etc… Ainsi, le site ne prend pas le risque de dérouter les utilisateurs, de les obliger à apprendre une nouvelle organisation d’interface.

    2) Plus de clarté grâce à 4 principes de l’UX

    Premier principe : Réduire le nombre d’éléments visibles

    En ces temps de surinformation et de saturation visuelle, les internautes sont à la recherche de simplicité et de clarté. Pour les satisfaire, il faut arriver à essentialiser l’interface, réduire le nombre d’éléments visibles en même temps, aérer la page en les espaçant suffisamment.

    Deuxième principe : bien regrouper ensemble les éléments en sous-groupes facilement identifiables. Ce principe fait appel à deux lois de l’ergonomie qui veut que des éléments proches et similaires forment un tout cohérent. Dans la nouvelle fiche produit d’Electrodépôt, surtout pour la version desktop, nous avons essayé de faire qu’il y ait un minimum de zones visibles et qu’elles soient rapidement identifiables : le bloc photos, le bloc prix et choix des options, le bloc description, etc.

    Organiser la page en blocs clairs permet à l’internaute d’aller plus vite dans la lecture de la page. Cela n’a l’air de rien à l’échelle d’une page, mais à l’échelle d’une navigation, comprenant plusieurs pages, cela lui fait gagner beaucoup de secondes et de minutes.

    Troisième principe : utiliser des codes couleurs conventionnels et limiter leur nombre.

    Plus il y a de couleurs à l’écran, plus d’efforts cognitifs sont demandés au cerveau. Pour cette raison, une interface doit limiter au maximum leur nombre. Pour les textes, elles doivent respecter les règles d’accessibilité (être suffisamment grandes et suffisamment contrastées avec le fond pour être bien lues). Pour les couleurs ayant un sens symbolique (comme le vert et le rouge) : ne pas induire l’utilisateur en erreur en lui envoyant de faux signaux (le rouge ici est utilisé pour mettre en avant un élément et signaler son importance). Le vert vient ici donner un sens positif à certains textes (« LIVRÉ SOUS 2 JOURS »). Ces couleurs viennent jouer dans un sens positif sur les impressions de l’utilisateur. Notez que le bouton d’ajout au panier n’a pas de couleur, mais sa position dans la page, conventionnelle, sa taille assez importante, l’espace qui l’entoure le rendent proéminent et indiquent qu’il est le point principal de l’action de la page.

    Quatrième principe : placer les éléments importants en haut de page

    Les tests nous ont permis de faire des choix sur la hiérarchie de l’information. Sur écran d’ordinateur, les avis clients ou le descriptif produit sont renvoyés plus bas dans la page. Au dessus, ils auraient été en trop. Le bouton « Ajouter » doit donc toujours apparaître au dessus de la ligne de flottaison. Le choix du mode de livraison a également été renforcé. Et le mode « retrait en magasin » est « forcé ». Visuellement, il apparait plus fortement que le mode de livraison à domicile (gris sur fond gris, au lieu de noir sur fond blanc).

    Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

    3) Une meilleure mise en avant du visuel produit

    Au cours du test, plusieurs personnes nous ont fait remarquer que les photos produits n’étaient pas assez grande et ne permettaient pas de voir assez de détails sans zoomer. Nous avons donc décidé d’agrandir la zone dédiée à la photo produit et nous avons également simplifié l’interaction du zoom, qui n’était pas assez instinctive.

    Version mobile

    La fiche produit sur le mobile met très fortement en avant le visuel produit pour un meilleur impact émotionnel

    Bien évidemment, le mobile a été une de nos préoccupations principales. La conception s’est faite en même temps  pour tous les types d’écran. Contrairement à ce qu’on entend souvent, on ne conçoit pas d’abord pour le mobile et ensuite pour le desktop. Cela permet d’avoir une réflexion plus approfondie et plus globale sur les deux types de taille d’écran.

    Et le SEO ?

    Une experte  SEO est intervenue dès la phase amont de la conception. Elle a été intégrée dans la boucle pour vérifier en deux étapes que la nouvelle fiche produit soit conforme aux guidelines de Google.
    1. La première étape était de s’assurer que l’on conservait bien des points SEO importants dans cette nouvelle fiche : fil d’ariane, titre du produit, avis clients, cross-selling, etc.
    2. La deuxième étape consistait à vérifier que les nouveautés apportées n’allaient pas à l’encontre des recommandations Google : par exemple l’utilisation d’un bouton « Voir plus » au niveau des caractéristiques du produit pouvait cacher du contenu à Google (ce qu’il déteste !).
    Le but de l’experte SEO était de trouver un juste milieu entre l’expérience utilisateur et ce qu’attend Google pour référencer correctement les pages.

    Conclusion :

    Refondre une page ne se fait pas uniquement par une analyse d’expert, mais passe systématiquement par un test utilisateur. Celui-ci nous aide à comprendre ce qui est important où ne l’est pas pour eux. Et cela au delà des règles ergonomiques standards.

    Plusieurs métiers sont également intégrés à la conception afin d’assurer le succès de la mise en production du point de vue SEO, mais aussi du point de vue technique (un développeur front-office est systématiquement intégré aux réunions de conception afin d’apporter son point de vue technique sur la faisabilité des éléments d’interface).

    Enfin, il est essentiel de pouvoir mesurer le succès de nos actions. Ici cela a été fait en interne par l’équipe d’Electrodepot.fr, même si, dans d’autres cas, ce sont les équipes de notre partenaire Digitaleez qui s’en chargent.

  • Asos.fr : 3 points forts du meilleur site ecommerce de l’année

    ASOS a remporté le trophée du meilleur site ecommerce hier soir à la Nuit des Favor’i 2019, organisée par la FEVAD (Fédération du E-commerce et de la Vente à Distance). Et son ergonomie n’y est sans doute pas pour rien. Mais qu’est-ce qui fait qu’un site pour la mode est meilleur que d’autres à ce niveau ? Essayons de voir cela avec ASOS.

     

    Page d’accueil ASOS sur mobile

     

    ASOS est taillé pour le mobile

    C’est assez évident lorsqu’on regarde le site sur un écran d’ordinateur. Beaucoup de place (sur la page d’accueil) est mal utilisée ou perdue pour convenir à une organisation de l’information plus adapté au mobile. Et, en effet, lorsqu’on regarde le site sur un écran de smartphone, tout semble rentrer dans l’ordre. Les choses sont beaucoup plus construites, structurées et cohérentes. C’est un défaut que l’on retrouve souvent sur les sites pensés « mobile first » : la version mobile est plus cohérente que la version « desktop ». Est-ce un problème ? Disons que cela dépend de votre ROI par canal et de vos coûts de maintenance. Il est tout à fait possible de ne pas optimiser à 100% sa version « desktop » si plus de 70% de votre trafic passe par le mobile.

     

    Page d’accueil de ASOS version desktop : le manque de structure visible de l’organisation de la page trahit son mode conception « mobile first »

     

     

    Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

     

     

    De la couleur et de la gaité

    C’est une tendance qu’on avait déjà repéré sur certains sites hors de France (lire notre article : Tous les sites de ecommerce doivent-ils nécessairement se ressembler ?).On n’est plus obligé de faire du noir et blanc dans la mode. Loin de là ! Pour arriver à se distinguer, c’est même le contraire ! Il faut oser la couleur, les tons décalés, les graphismes à la main et les animations « inutiles ». On n’en est pas encore là chez ASOS, mais force est de constater que la page d’accueil a pris le chemin de cette nouvelle orientation graphique. Phase encore transitoire, sans doute, car le reste du site demeure encore assez classique à cet égard.

     

     

    De la belle photo et de la vidéo

    Depuis longtemps, ASOS a misé sur la photo et la vidéo. On retrouve là un de ses points forts en terme d’expérience client. Et sur un bel écran de smartphone, ça marche très bien. Les mannequins sont « shootées » de plein pied, on voit leur visage. Les vidéos sont simples, rapides, et donnent vraiment de l’information supplémentaire sur le produit. C’est une vieille recette, mais qui marche. De ce point de vue, on a une grande homogénéité sur toute l’offre, ce qui donne des pages listes agréables à regarder et crée une cohérence qui manque souvent à d’autres sites. Ici, l’ensemble des photos homogènes, de qualité, et donnent la même impression que lorsque vous entrez dans un magasin et que les rayons sont bien rangés. Et c’est un véritable plus !

     

     

     

     

    Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

     

     

    En conclusion

    On peut toujours améliorer l’ergonomie et l’expérience utilisateur d’un site de ecommerce. Surtout dans la mode où la prototypie des sites est très déterminée (beaucoup de sites se ressemblent et fonctionnent avec la même architecture d’information). Classique, ASOS utilise pourtant de vieilles recettes bien éprouvées et qui marchent. Un exemple à suivre, donc !

  • Retour de projet : VIVESCIA et la refonte de son extranet

    Dans le cadre d’un vaste projet de transformation digitale, le groupe VIVESCIA, 1er Groupe Coopératif céréalier en France (3,5 milliards d’euros de CA par an), a fait appel à Wexperience pour la refonte de son “extranet”, pour l’améliorer, le moderniser, et le rendre pratique à utiliser autant sur ordinateur que sur mobile.

    Retour sur un projet extraordinaire !

    Qui ?

    Premier acteur en France et 3ème à l’échelle européenne, VIVESCIA assure le lien entre les 11.000 agriculteurs de leur réseau qui produisent les céréales, et les multinationales de l’alimentaire qui les transforment et les mettent sur le marché.

     

    VIVESCIA s’appuie sur un extranet qui fonctionne comme un site de bourse : les agriculteurs adhérents au Groupe VIVESCIA ont accès à cette interface web qui leur permet d’acheter et de revendre leurs graines / céréales. Cet outil représente donc un enjeu business fondamental pour VIVESCIA .

     

    Besoins de la refonte

    Développé il y a plus de 10 ans, l’extranet était jugé comme trop technique, désuet, inefficace, et non conforme aux besoins du marché actuel et futur.

     

    L’objectif pour Wexperience était donc :

     

    • De rendre les interfaces beaucoup plus faciles à utiliser pour les agriculteurs
    • Moderniser le design
    • Créer un extranet pratique à utiliser autant sur desktop que sur mobile.

    Réponse de Wexperience

    Pour réaliser cette mission, nous avons proposé de mettre en place un processus de refonte structuré et basé sur une démarche centrée utilisateurs. Cette mission s’organise en 3 temps

     

    1. la phase d’immersion / préparation
    2. La phase de conception et de Direction Artistique
    3. Le maquettage graphique et l’intégration html/CSS

     

    Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

    1/ La phase d’immersion et de préparation

     

    Si VIVESCIA connait parfaitement son métier et est en contact permanent avec son réseau, nous avons commencé la mission par des ateliers internes avec les équipes marketing et commerciales pour mieux comprendre le métier et l’offre de VIVESCIA, et avoir une première connaissance des profils des agriculteurs du réseau.

     

    Pour cela, la technique des Proto-Personas nous permet de construire des archétypes de clients, représentatifs des profils sociaux démographiques des utilisateurs de l’extranet, mais aussi permet d’inventorier leurs usages et besoins, et leur façon d’interagir avec VIVESCIA , et leur “maturité digitale”.

     

    Autre étape essentielle de cette 1ère phase, l’organisation de Tests Utilisateurs sur l’extranet existant avec des agriculteurs dont les profils ont été soigneusement choisis pour correspondre aux différents profils d’utilisateurs.

     

    À travers des entretiens individuels, le principe est de leur faire réaliser des tâches comme dans la vie réelle, et d’observer leur navigation, pour identifier ce qui fonctionnait bien et ce qui posait problème.

     

    Les tests utilisateurs sont filmés et enregistrés, puis analysés. Tout est pris en compte, y compris les mouvements oculaires des testeurs. Notre matériel d’eye-tracking permet d’identifier des problèmes ergonomiques dont les testeurs n’ont même pas conscience !

     

    Pour VIVESCIA, cet audit a été réalisé auprès de 10 testeurs, avec des entretiens individuels de 45 minutes par personne.

     

    L’outil Hotjar a également servi lors de cette première phase de tests pour identifier les zones de clics, la façon dont les utilisateurs scrollaient dans les pages, et disposer de données quantitatives sur la façon dont les utilisateurs naviguaient sur l’extranet.

     

     

    À l’issue de ces 1ères études, nous avons pu construire un diagnostic très détaillé de la situation, et développer des convictions communes avec VIVESCIA sur les transformations à réaliser sur le nouvel extranet. Des convictions non pas basées sur une vision personnelle, mais sur l’observation des utilisateurs, c’est ce qui fait toute la différence, et permet d’engager toute l’entreprise dans le projet de transformation !

     

    Importance des tests utilisateurs :

     

    Le recours à la méthodologie des tests utilisateurs occupe une place centrale dans notre démarche, et pas seulement lors des refontes. Que ce soit en amont de la refonte, ou pour vérifier les performances de nouvelles interfaces, les tests utilisateurs sont la méthode reine pour identifier de potentiels problèmes d’ergonomie, et en mesurer l’importance.

    Cela nous permet de comprendre surtout comment les utilisateurs raisonnent, et comment organiser et hiérarchiser les informations dans les parcours, pour atteindre le plus simplement et le plus rapidement possible les objectifs des utilisateurs.

     

     

    Snapshot de restitution de TU avec le problème, les explications, et la recommandation

     

    Livrable -> restitution des tests utilisateurs

     

    2/ Phase de conception et de Direction Artistique

     

    À la suite de ces tests, nous avons pu concentrer nos travaux sur l’organisation de l’arborescence, la navigation, et la structuration de l’information et des parcours dans l’extranet. Cette conception est réalisée sur wireframe (des maquettes n’intégrant pas le design, avec une déclinaison desktop et mobile de tous les écrans.

     

     

    Sur la base de ces wireframes, nous avons pu construire un prototype animé dans Invision, et vérifier son bon fonctionnement dans cadre de nouveaux tests utilisateurs. Le but ? valider les parcours, l’ergonomie, les choix visuels proposées, et pouvoir corriger des choix de conception mal compris.

    En parallèle de cette conception, nous avons pu retravailler l’intention graphique. Tout en respectant les codes graphiques de la marque, nous avons pu développer une identité digitale nouvelle, cohérente avec les objectifs de simplicité et de modernité qui étaient chers à l’équipe de VIVESCIA .

    Le travail graphique consiste à la fois à construire l’univers graphique, mais aussi créer une dynamique sur le site à travers les interactions pour faciliter la compréhension du site et la navigation (call to action, comportement au survol des éléments cliquables, loaders…)

     

     

    Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

    3) Maquettage graphique et Intégration HTML/CSS

    La phase de maquettage graphique consiste à fusionner les wireframes et la nouvelle identité graphique. Pour VIVESCIA, ce sont plus de 200 maquettes qui ont été créées. L’objectif de ces maquettes est de préparer le travail d’intégration html/CSS, tache durant laquelle les intégrateurs ne doivent avoir aucune question à se poser sur les écrans.

     

    L’intégration html/css est la phase finale de notre intervention

    En respectant les règles W3C, l’intégration est calée pour fonctionner parfaitement sur les navigateurs habituels, avec un accent mis sur la performance du site (vitesse de chargement), et respect des règles d’accessibilté.

     

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

    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.

     

    Hotjar : outil d’analyse comportementale qui nous a permis de récolter de l’information qualitative – tout ce qui n’est pas comptabilisable. Nous parlons ici des « points chauds » ou heatmaps du site, de l’enregistrement du comportement des utilisateurs et des entonnoirs de conversion.

     

     

     

  • Roadtripper : comment créer une expérience de marque à travers une app ?

    Ou comment une app transforme l’expérience d’achat en expérience de voyage ?

    Sur le papier, il y a des idées qui ont l’air parfaite ! Mais quand il faut passer à la mise en pratique, les choses deviennent souvent bien plus compliquées. Beaucoup de créateurs de startup connaissent ce gouffre qu’il y a de l’idée à la réalisation. Voyons voir comment s’en sort une application de voyage originale.

    Roadtripper est une application de planification de voyage itinérant. C’est-à-dire qu’elle vous permet de découvrir des lieux et de planifier leur visite le long d’un trajet. C’est une idée simple et géniale, car aucun guide de  voyage papier ne peut  prétendre pouvoir aider aussi finement un voyageur dans la préparation ET dans l’accompagnement de son voyage.

    Problème : comment créer une interface qui permette de combiner l’aspect découverte de l’application (c’est le conseil), mais aussi son aspect informationnel sans surcharger l’interface (c’est l’utilisabilité). Si l’on parle d’un écran d’ordinateur portable, le challenge reste encore assez facile. Si l’on parle d’écran mobile, les choses deviennent beaucoup compliquées. Et compter sur la passion et la bonne volonté des utilisateurs, dans ces cas là, ne peut pas absolument pas suffire.

    L’écran de planification de Roadtrippers.com

    Challenge dans une app : offrir de la gratification instantanée, mais sans lasser

    Il faut savoir créer une interface qui, non seulement, permette d’atteindre un premier niveau de satisfaction. C’est ce que j’appelle le retour immédiat, ou la gratification instantanée. Mais qui, dans ce cas, précis, ne transforme pas la planification d’un voyage en épreuve répétitive et lassante. Car c’est là, le principal risque.

    Roadtripper n’est pas une application one-shot. C’est un outil qui pourra être utilisé de façon récurrente par ses utilisateurs et de manière assez intensive. Prendre en compte cet aspect est extrêmement important pendant la phase de conception d’une telle interface. Vous ne pouvez pas vous contenter de créer une fonctionnalité qui marche une fois, mais réfléchir à créer une fonctionnalité qui soit aussi agréable à utiliser à la première utilisation qu’à toutes les autres utilisation. Et dans un cas comme Roadtripper, ce nombre n’a pas de limites.

    Apparté : pourquoi une marque de caravane s’est offert une app de voyage ?

    Roadtripper a été acheté l’année dernière par Airstream, le légendaire fabricant de caravanes américaines. Peu connue en France, la marque a failli disparaître, mais, à la faveur d’un vent de « hipsteritude » et de « boboitude », entrainé par la Sillicon Valley, est rené de ses cendres et nombreux sont les jeunes couples américains aujourd’hui à parcourir les routes américaines, « armés » de leur petite (ou très grande) caravane Airstream.

    Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

    On le voit, Roadtripper fait partie d’un arsenal de digitalisation, indispensable à toute marque aujourd’hui. On peut le résumer ainsi pour Airstream : grâce au digital, la petite firme de l’Ohio ne vend pas des boîtes à roulettes, mais des expériences de voyage, ce qui n’est pas sans rappeler les propos de Rebecca Sincalir d’Airbnb (Comment AirBNB a entièrement changé sa stratégie grâce au Design thinking).

    Airstream, c’est ça ! Vous connaissez sûrement ces légendaires caravanes en inox brillant !

    Partant de cette constatation, on comprend que Roadtripper n’est pas qu’une simple application, mais plutôt la pierre angulaire de l’expérience client de Airstream. Il ne s’agit pas de fournir des fonctionnalités, mais bien d’enchanter radicalement l’expérience de voyage avec un outil qui permette de profiter avec un maximum d’intensité de son road trip. Dans la société actuelle, il est considéré comme mal vu de perdre son temps.

    Et quand vous partez sur la route une semaine, vous n’avez pas envie de perdre votre chemin, ni de manger dans un mauvais restaurant, ni de visiter un endroit inintéressant. Vous voulez profiter au maximum de votre temps de voyage. Le maximiser, dirait-on dans le marketing. Et quand on connait le nombre très restreints de jours de congés que prennent les américains, on peut comprendre ce besoin exacerbé. Avec moins de 5 semaines de congés par an, chaque minute du voyage doit être « rentabilisée » en terme d’expérience. Il ne doit pas y avoir un moment d’ennui. Et c’est donc là toute la promesse de Roadtrippers. Ne perdez pas votre temps, composez-vous le meilleur voyage (comme on compose une salade au salad bar) et amusez-vous !

    Concrètement, comme tout cela se traduit-il sur une interface ?

    Cet article vous est offert par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

    Une app réussie mais demandant à être optimisée

    Et d’abord, pourquoi avoir fait une application ?

    C’est justifié. Pour tout produit destiné à être utilisé souvent, une application est souvent préférable à un site web. Et même si les PWA commencent à être bien répandues aujourd’hui, on peut tout de même se demander, pourquoi ce choix n’a pas déjà été fait (pour rappel, les PWA sont des sites webs mobiles ayant les avantages d’une application mobile et les avantages d’un site mobile. Lire notre article à ce sujet).

    L’écran de Roadtrippers sur mobile. Des filtres sont appliqués. Et l’on voit déjà que l’application fait face à une certaine complexité de l’architecture d’information.

    Rien de tel d’un gros bouton pour « engager » !

    Pour une app, la première bonne chose à faire est d’arriver à engager immédiatement l’utilisateur. A ce moment crucial, il ne doit se poser aucune question, mais agir immédiatement et profiter. Pour cela, rien de tel qu’un gros bouton. Et ici, c’est exactement le cas. A partir de votre géolocalisation, sur un écran simple, un grand bouton vert vous invite à composer votre premier voyage. Notez (ci-dessus) comme il est isolé du reste des éléments de la page et comment il est positionné de manière centrale. C’est cela qui va augmenter son attractivité. En le faisant ressortir au maximum. Plus il sera visible, plus les utilisateurs seront tentés de tapoter dessus.

    Une fois touché, l’app demande à l’utilisateur de saisir une destination pour qu’il puisse commencer à composer son voyage.

    Comme vous le voyez, le process est fait de telle manière que les utilisateurs ne se posent pas de questions et puissent obtenir rapidement un résultat.

    Ce résultat, s’il est satisfaisant, sera le passeport de l’app auprès de l’utilisateur. Dans le cas contraire il la rejettera.

    Ecran de résultat de recherche sur Roadtrippers : plutôt que de surcharger la carte, les concepteurs ont fait le choix d’un affichage sélectif et progressif

    Satisfaire le plus vite possible

    Le deuxième challenge pour une app est de pouvoir rendre ses premiers résultats exploitables. Ici, la problématique réside dans le fait qu’il est possible d’en afficher beaucoup dans un tout petit écran. Ce qui va créer très certainement des problèmes d’encombrement et dégrader l’utilisabilité de l’interface. Le choix de plus logique de présentation est une carte (c’est aussi le plus expérientiel).

    Elle est évidemment toute petite. Comment dès lors afficher tous les points d’intérêts sans surcharger l’écran ? Simplement en ne les affichant pas tous. A un premier niveau de zoom, seuls les points d’intérêt les plus saillant sont affichés (sur quels critères, je ne sais pas, mais une chose est sûre, les concepteurs de l’application on fait un choix, un compromis, pour éviter d’arriver à la surcharge).

    Ensuite, il est assez facile, en zoomant, d’arriver à un deuxième niveau d’information. D’autres points peuvent apparaitre et il est alors possible d’en tapoter un et d’afficher l’information qu’il contient.

    Fiche détaillée d’un point d’intérêt. On retrouve le bouton vert d’incitation à l’action présent sur l’écran d’accueil de l’app

    Un principe pour une app réussie : ne jamais laisser l’utilisateur s’ennuyer

    Dans cette application, les designers ont constamment fait des compromis. Ainsi, en bas de la carte de l’itinéraire se trouve systématiquement mis en avant UN point d’intérêt. Il s’agit là encore d’exciter l’intérêt, de fournir constamment de l’information à l’utilisateur, de ne pas le laisser s’endormir, de nourrir son cerveau en permanence, comme dans un jeu. Notez ce fait. Sur une app : ne jamais laissez l’utilisateur s’ennuyer.

    Chaque point d’intérêt peut donc être vu de manière parfaitement détaillée, à la manière d’une fiche d’hotel sur Booking.com ou d’un appartement dans AirBNB. Sur un tout petit écran, on retrouve énormément d’informations et c’est presque un exploit d’avoir mis autant de choses sur une surface aussi petite sans donner l’impression d’encombrement.

    Et c’est aussi à ce stade que l’on peut découvrir un des points forts du concept de Roadtripper, la co-création. Car non seulement, Roadtripper s’érige en guide de voyage, mais aussi la communauté des internautes qui l’utilisent. Et qui créent des contenus pour enrichir l’app (photo et avis). Tout cela permet de constituer en temps réel un guide de voyage dynamique et constamment à jour ! Autant dire que les bons vieux guides papiers sont morts !

    Lorsqu’un point d’intérêt vaut le coup de faire partie de votre voyage, il ne vous reste plus qu’à l’ajouter à votre « shopping list » 🙂 Et ainsi de suite !

    On aurait aimé un peu plus de fantaisie dans l’app, comme ici avec une barre de loading animée

    Conclusion : de la marque à l’interface, une seule ligne droite

    Je pourrais continuer ainsi à passer en revue toute l’interface, l’étudier sur sa version « desktop », mais ce n’est pas le but de cet article. En réalité, il était de montrer comment transformer une promesse de marque, somme toute complexe, en expérience utilisateur simple. Ce qui me semble être plutôt une réussite dans le cas de Roadtrippers.

    Je me demandais quand j’allais enfin tomber sur l’application de composition de voyage idéale, et je crois que je l’ai trouvée. J’avais déjà essayé Google Trip. Mais son interface à la Google, trop standardisée… son design froid et un peu anonymé ne m’avaient pas enchanté. Et surtout, il y manquait une réelle couche conseil que semble proposer en beaucoup mieux Roadtrippers. Ici, c’est une véritable communauté d’internautes passionnés qui alimentent les contenus (et, en plus, ils payent pour ça). L’impression qui s’en dégage est une qualité de produit bien meilleure.

    Je pense qu’il y a plusieurs enseignements à tirer de Roadtripper.

    Il est certain que l’application demande certainement encore à être améliorée et optimisée. Parmi ses points faibles : elle est encore très lente et encore très compliquée visuellement.

    En revanche, elle est déjà très complète et offre un service de qualité. C’est plus un ressenti qu’un fait établi. Mais en UX, les impressions comptent. Donner l’impression qu’il y a beaucoup de contenus est une bonne chose. Donner l’impression que l’on va s’amuser (comme c’est le cas, grâce à son design) fait aussi partie de la conception de l’UX d’une app.

    Et non seulement, l’app est complète, mais elle remplit parfaitement l’objectif pour lequel elle a été créée. Et de ce fait, elle risque de devenir extrêmement fidélisante pour les caravaniers de Airstream. Vous me voyez venir ? Plus une application est fidélisante, plus elle permet de proposer des nouveaux services et de créer de nouvelles opportunités de sources de revenus.

    Roadtripper montre ce que le terme de digitalisation veut dire pour une vieille compagnie comme Airstream. L’app a été rachetée et développée pour parfaire encore plus la promesse de Airstream. Sur la page d’accueil du fabricant, il est écrit : « Take a little Adventure ». Une aventure, oui, mais sécurisée et optimisée, une aventure dans le sens Disney du terme 🙂 Sûre, préparée à l’avance, et fun, forcément fun. C’est une offre tout en main : un logement, roulant et vintage avec une touche de modernité, pour voyager. Avec une app qui vous emmène dans les meilleurs endroits d’Amérique. Magique, non  ?

  • Syndic One et la mutuelle GSMC fiers de leurs nouveaux sites !

    La refonte de site, un art difficile !

    On ne cesse de le dire, la refonte de site, est un chantier long et compliqué qui présente de nombreux risques. Elle induit un certain nombre de risques qui génèrent de l’angoisse et de l’appréhension :  risque de dépassement indéfini des délais, risque de perte de trafic lors du passage en production ainsi que le risque de non-maîtrise des coûts. Pour assurer la réussite de ce projet, il faut savoir mettre en place une méthode bien rodée.

     

    Après plus de 5 refontes de sites majeures en France, nous vous partageons dans cet article nos deux dernières refontes. Vous y découvrirez dans le détail notre méthodologie et les équipes qui ont permis de parvenir à ces résultats conforme aux attentes du client. On y parle bien évidemment de tests utilisateurs, de conception centrée utilisateur, de wireframes et de méthodes collaboratives entre les équipes IT & SEO. Bonne lecture 😉

     

    Le cas  Syndic One :

     

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

     

    Le cas de la mutuelle GSMC

     

    HOMEPAGE-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é.

     

     

     

  • Comment recrutons-nous nos testeurs ?

     

    Que ce soit pour un test utilisateur, un focus group ou bien atelier de co-création, Wexperience fait toujours appel à des « pures âmes innocentes » pour s’accompagner dans ses démarches UX de conception et de design. C’est notre crédo que de reposer toutes nos réflexions sur les comportements et les besoins réels des utilisateurs finaux d’un site web ou d’une app.

    Et c’est d’une importance capitale si nous voulons bien les cerner.

    Mais recruter des « testeurs » dont les comportements ou les intentions ne sont pas biaisés n’est pas si facile et il faut, pour y parvenir, utiliser une méthodologie de recrutement bien rodée.

    La définition de la cible

    Le plus important pour un projet est de définir aussi précisément que possible la cible utilisateur.

    Lorsqu’il s’agit de tester une application métier pour une société en particulier, c’est assez simple, puisque les utilisateurs cibles sont peu nombreux (inférieur à quelques milliers, mais dans la plupart des cas, un nombre beaucoup moindre) et qu’ils sont nommément identifiables. La difficulté dans le recrutement consiste alors non pas à les identifier, mais à les libérer de leur travail courant pour les amener à nous consacrer une heure ou plus. Dans ce cas, impossible de ne pas passer par la hiérarchie, d’expliquer notre démarche et de négocier ces heures de manière à pouvoir mener nos opérations.

    Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

    Dans les autres cas, lorsque la cible n’est pas identifiable nommément, il faut alors mener un premier travail qui est de définir qui nous allons recruter et selon quels critères.

    Etant donné que les tests utilisateurs utilisent au maximum une quinzaine de personnes, il faut oublier le but d’avoir un panel parfaitement représentatif. En revanche, il faut garder à l’esprit que plus l’on se rapprochera de ce panel exact, plus les enseignements de l’étude seront riches.

    Choisir les critères

    Le plus important, dans la définition de la cible, est de déterminer les critères discriminants.

    Naturellement, cela peut-être le genre, l’âge, l’expérience digitale, le fait d’être utilisateur ou pas du produit étudié. Mais d’autres critères plus spécifiques peuvent être appliqués. Quand vous êtes dans le BtoB, vous pouvez, par exemple, avoir à recruter des professionnels (nous avons déjà recruté des DRH, des agriculteurs) et cela crée des segmentations fortes qui entraînent encore l’apparition d’autres critères.

    Ceci étant dit, sur d’aussi petits panels, le nombre de critères doit rester limité à 5 ou à 6, sous peine d’atomiser trop les profils recherchés et de rendre caduque la variabilité recherchée.

    Ces critères peuvent aussi être fortement affectés par les objectifs du projet en lui même. Pour un seul site, plusieurs types de public peuvent être adressés et, comme il arrive souvent, ça n’est qu’une partie de ce site qui est étudiée. Le recrutement en sera alors restreint à la cible de cette partie. Exemple, si l’on teste un tunnel de commande de site d’e-commerce, ce sont les prospects qui seront favorisés par rapport aux clients. S’il s’agit de tester un compte client, alors, par définition, le panel sera presqu’exclusivement composé de clients.

    Dans le domaine dans lequel nous travaillons – essentiellement la vente et les services – , il faut savoir mêler subtilement, d’une part, les critères qui peuvent avoir un impact sur la capacité d’utilisation d’un point de vue purement ergonomique, et, d’autre part, les critères sociaux-économiques et marketing.

    La savante alchimie qui consiste à sélectionner ces critères est déterminée par un recueil de données et des entretiens avec les équipes marketing du produit à étudier. Des arbitrages sont parfois à effectuer, mais la difficulté de recruter un profil n’entre jamais en ligne de compte dans ces arbitrages. Par exemple, lorsqu’il s’agit de recruter un directeur des achats d’un grand groupe, nous savons que cela est presque impossible, mais nous nous y tenons quand même en imaginant des solutions de repli au cas où le recrutement serait impossible.

     

    Recruter

    La définition des profils validée, le recrutement démarre. Celui-ci se fait par email et avec un questionnaire de screening sur une base d’utilisateurs volontaire. En complément, quand c’est nécessaire, le recrutement peut se faire sur une base de clients en interne à la marque. Ce dernier est plus difficile, puisque les personnes sollicitées ne sont pas dans une démarche déclarée de participation à des études. Nous ne faisons que très rarement appel aux réseaux sociaux pour recruter, à cause de leur imprévisibilité et du manque de sérieux qui peut en découler.

    Lorsque les profils sont très complexes à trouver, pour des raisons de temps de disponibilité, de distance ou d’argent, nous faisons appel à un cabinet de recrutement spécialisé.

    Que ce soit pour la France ou l’international, le procédé de recrutement est le même. Nous pouvons ainsi facilement recruter des testeurs dans toute l’Union Européenne pour des études en local ou à distance (nous n’hésitons pas à nous déplacer dans une ville étrangère lorsque les contraintes de l’étude l’exigent et, de la même, manière, nous n’hésitons pas à déplacer nos équipes dans toute la France pour des études où la localisation va avoir un impact fort sur le résultat).

     

    Rémunération

    Quelque soit la nature de l’étude, une rémunération sous forme de bon d’achats est allouée aux utilisateurs volontaires. Leur montant peut varier de 15€ à 150€ et même plus dans le cas où le recrutement exige un engagement fort ou bien lorsque les testeurs doivent abandonner une partie de leur rémunération professionnelle pour y participer. La rémunération est donnée en fin d’étude. Celle-ci prend très rarement la forme de cadeau, car ce moyen est souvent peu apprécié des utilisateurs.

     

    Temps de recrutement

    Selon la forme de l’étude, le temps incompressible de recrutement varie en une et trois semaines, pour les profils les plus compliqués à recruter. C’est cette phase qui, souvent, allonge le délai de production d’une étude.

     

    Désistement

    Les désistements sont rares. Toutefois, nous prévoyons systématiquement des options de remplacement, soit par du surbooking, soit en faisant appel en urgence à des utilisateurs déclarés sur notre base. Dans 100% des cas, nous arrivons à assurer les quotas nécessaires au panel.

     

    Vérification

    Certaines personnes recrutées ne sont pas « sérieuses ».

    Pour y parer, nous appelons par téléphone la veille de l’étude tous les participants pour leur rappeler le rendez-vous et s’assurer de leur présence.

    Lors de l’étude, si nous remarquons qu’une personne a menti sur son profil, nous ne la prenons pas en compte dans les résultats et la remplaçons par un autre profil que nous recrutons dans la foulée.

    Ainsi, nous préservons toute la qualité de nos panels.

    Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

     

    Pourquoi tant d’efforts ?

    Wexperience attache une importance primordiale à la compréhension de ce qui se passe sur un site et sur la manière dont les utilisateurs interagissent avec. Choisir soigneusement ses testeurs revient au même que sélectionner les joueurs d’une équipe de foot. Une bonne composition vous permettra d’obtenir les meilleurs résultats. Et non seulement vous connaîtrez tous les défauts d’un site, mais aussi tout ses points forts (voir l’article d’Olivier Sauvage à ce sujet). Une agence qui ne vous promettrait pas cette approche centrée sur l’humain passe à côté de beaucoup d’enseignements et ne peut pas vous promettre de concevoir un site VRAIMENT  adaptée à ses utilisateurs.

     

    Visuel : Photo by Ryoji Iwata on Unsplash.