Agence WEX

Catégorie : Cas d’études

  • UX Design : comment faire croire qu’on est fun et efficace quand on est compliqué et ennuyeux ?

    Le cas de l’assurance habitation Lemonade.com

    Qui a déjà souscrit une assurance en ligne en ayant compris toutes les conditions du contrat lève le doigt !

    Personne ?

    Bon.

    C’est normal.

    Les assurances font partie des produits dont on ne peut pas se passer, mais qu’on paye toujours en se demandant ce qu’on va y perdre.

    Les assureurs ont beau y faire, depuis qu’Hergé les a représenté sous les traits de Séraphin Lampion, leur image n’a pas vraiment changé

     

    Car, si vous êtes comme moi, vous vous dites toujours qu’avec une assurance, vous vous ferez avoir d’une manière ou d’une autre. Alors que vous leur donnez de substantielles sommes qui pourraient, je ne sais pas moi, vous permettre d’acheter le dernier iPhone, vous vous demandez toujours quelle astuce un assureur va trouver pour ne pas vous indemniser au moment où vous en aurez besoin.

    Et, franchement, ce ne sont pas les pubs à la télé, la plupart idiotes, qui vont vous rassurer.

    Alors, comment faire, quand on est assureur, pour transformer cette mauvaise image qui vous colle à la peau pour regagner la confiance des gens et devenir la « it » compagnie dans laquelle tout le monde veut s’assurer.

     

    Lemonade est un bon exemple de tentative de dépoussiérage du métier et offre un aperçu convaincant de ce que pourrait être l’assurance de demain. Comment ? Voyons voir cela en détail :

     

    Trouvez un ton différent : on ne dirait pas un site d’assurance

    La plupart des sites d’assurance ne sont pas fun. Et même si des tentatives sont faites pour alléger leur ton et leur image, on en revient toujours aux mêmes sempiternelles pages, bourrées de détail, d’explications complexes, d’images de photothèques de gens heureux (d’être assurés ?). Bref, c’est souvent l’ennui le plus total. A croire que faire sérieux est synonyme d’ennuyeux.

    Lemonade montre une tout autre voie. Dans laquelle, il est possible à la fois d’être léger, amusant, mais rassurant. Le design du site est frais, Le petit rose brillant des boutons fait penser à des petits bonbons délicieusement sucrés. Les dessins sont naïfs, mais carrés. C’est presque de la BD, mais pas tout à fait. Et c’est une manière de dialoguer qui dédramatise l’image des sinistres. Ok vous êtes inondé, mais gardons le sourire, nous disent-ils. Et pourquoi pas ? Comme nous dit le sage (je ne sais plus lequel), dans l’adversité, il faut mieux garder le sourire. C’est en général la seule chose qui nous reste après un sinistre. Et c’est exactement ce que nous suggère le design léger de Lemonade.

    On a beau être assureur, on n’en peut pas moins avoir de l’humour

    Promettez d’épargner de la sueur

    La promesse de Lemonade.com : gagnez du temps et de l’argent. Traduction : « Le tout instantané. 90 secondes pour être assuré. 3 minutes pour être payé. »

     

    Alors, on va être bien d’accord. Le site de Lemonade est destiné à générer des leads, pas à épater notre regard de designer. Et comment génère-t-on des leads en assurance ? En général, toujours de la même manière. Rentrez vos paramètres, obtenez un devis, et faites vous harceler par un conseiller téléphonique qui ne s’y connait pas plus que vous, mais possède un écran devant lui, bardé de phrases de relance et qui finira par vous convaincre qu’il est la bonne personne avec qui s’assurer.

     

     

    Donc, personne n’a envie de remplir un formulaire d’assurance. Et tout le monde angoisse à le faire.

    Là encore, Lemonade joue sur la carte de la légèreté. Grâce aux bonbons roses, on l’a déjà vu, mais surtout grâce à une interface dépouillée, allégée, qui nous suggère que, oui, chez Lemonade, souscrire à une assurance ne va pas nous voler quelques minutes de notre précieuse vie, mais, au contraire, va vous en faire gagner pour les années à venir.

    Comment est-ce possible ?

    En jouant la carte de la simplicité, l’interface suggère à l’utilisateur que le service va aussi être simple et clair que la page que vous voyez devant vous. Les techniques pour le faire croire explosent aux yeux ! Trouvez-moi une phrase de plus de 15 mots dans cette page. Tous les messages sont simples, clairs, directifs, engageants. Le ton adopté est direct, mais pas injonctif (il ne vous donne pas d’ordre). En somme, il est gai, joyeux, léger et vous fait dire qu’enfin, voilà une assurance, qui ne vous prend pas la tête.

    Vous en voulez encore ?

    Fractionnez le parcours utilisateur

     

    L’art de la conversion est subtil, il faut en convenir.

     

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

    Les américains partent souvent du principe de la satisfaction rapide et instantanée.

    Autrement dit, pour convertir, ils font tout pour ne pas vous faire réfléchir (c’est le fameux Don’t make me think, de Steve Krug, entre autres). Aussi, le tunnel de souscription de Lemonade est réellement réalisé dans cet esprit. Demandez à l’utilisateur le minimum d’informations, affichez-lui un prix, et faites le payer. C’est aussi simple que ça.

    Pour y arriver, Lemonade a carrément fait sauter le formulaire de souscription et l’a transformé en une sorte de quizz fun et parfaitement guidé dans lequel à chaque étape l’utilisateur s’enfonce un peu plus vers la conversion.

    Peu de choix : chaque question à l’utilisateur ne comporte que deux choix au maximum

    Peu de texte : l’image passe devant le texte. On s’adresse au cerveau droit (celui des émotions) pas au cerveau gauche (celui de la raison)

    Du rythme : du fait de la simplicité des questions, l’utilisateur avance dans le formulaire à un rythme rapide qui crée une sorte d’effet de « flow » (flux) qui évite de le faire trop réfléchir. Il est vraiment dans un tunnel où l’illusion consiste à ne surtout pas lui montrer de détail et à ne surtout pas s’embarrasser de questions futiles qui pourraient nuire à la conversion.

    L’aspect ludique de tout cela ne vous aura pas échappé. On croit jouer à une sorte de quizz idiot de magazine people à feuilleter sur les plages. En réalité, on est en train de souscrire à une assurance. Mais, le tour de force, c’est que ça ne parait absolument pas ! Magie du design !

    Soyez didactique et transparent

    Qui comprend le fonctionnement d’une assurance et comment se calculent les indemnités ?

    Usine à gaz obscure, mystères administratifs, dédale ubuesque, c’est un monde craint par les clients. Pour dédramatiser cette complexité, Lemonade.com fait le choix de la transparence. Et là encore, pas de longues explications, mais de simples schémas simples et faciles à comprendre.

    Le processus de demande d’indemnisation expliqué en image. Ça n’est pas compliqué, non ?

    Les petits plus qui font la différence

    Quand on regarde dans le détail l’interface de Lemonade, on finit par découvrir qu’elle est pleine de petits détails qui rendent l’expérience utilisateur totalement différente.

    Des petites animations subtiles : les nuages dans le ciel de New York qui glissent nonchalamment dans le ciel et créent une sorte de brise visuelle dans le fond de l’écran. Les images du formulaire qui se colorisent en fonction des choix.

    Une interface unifiée : ça n’a pas l’air, mais quelque soit le device que vous utilisez pour accéder à Lemonade (PC, smartphone, tablette) ou quelque soit le type de programme (site web ou app), c’est exactement la même expérience utilisateur qui est offerte. Simple, sous forme de chatbot, accessible, dynamique.

    Expérience personnalisée : on peut prendre le mot dans les deux sens du terme. Personnalisée, comme humanisée. Toutes les interactions se font avec Maya, une intelligence artificielle personnifiée par l’image d’une jeune femme avenante. Personnalisée, parce que la première chose que vous demande Lemonade, c’est votre nom, prénom. Une forme de politesse qui augmente l’affinité avec l’interface.

     

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

     

    Conclusion

    Le cas de Lemonade peut se décliner à d’autres métiers. Certes, son design graphique est fortement marqué par les canons de la Sillicon Valley, mais ce qu’il faut en retenir est son apparence presque enfantine avec ses traits simples et ses couleurs flashy. Cela peut contribuer, auprès d’une certaine cible utilisateurs et dans un contexte de surinformation, à favoriser l’attention.

    Mais plus important que le design est le parcours utilisateur vraiment pensé pour la consultation sur écran, et notamment sur smartphone. L’ensemble des interactions, le wording, et la transparence affichée permettent de promettre une autre relation à un service d’assurance que celui auquel nous sommes habitué. Et ce sont ces éléments qui y contribuent. La forme, ici, prime sur le fond. C’est cela qu’il faut retenir.

     

    Photo par Ruvim Noga sur Unsplash

  • Trulia, le Netflix de l’immobilier ?

    Découvrez comment Trulia crée des nouveaux contenus et utilise l’IA pour augmenter l’engagement sur sa plateforme

    Avec Internet, il est devenu naturel et normal de choisir son futur chez soi en parcourant en ligne les dizaines de sites spécialisés dans ce domaine. Aujourd’hui, une agence immobilière qui ne proposerait pas d’annonce en ligne via une plateforme se condamnerait à coup sûr à l’anonymat. Pour autant, la représentation d’un bien immobilier n’est pas chose facile et aider les internautes à se rendre précisément compte de ce qu’ils vont visiter une véritable difficulté.

    Trulia, une plateforme américaine d’annonces en ligne, filiale de Zillow, le numéro un américain, semble avoir fait quelques pas dans une direction intéressante.

    Le « quartier », fer de lance du contenu éditorial de la plateforme

    40% des américains se déclarent insatisfaits de leur achat de bien immobilier au bout de 3 ans. En cause, la plupart du temps, le quartier. On peut facilement se douter que celui-ci joue un rôle important dans la prise de décision d’achat, mais il faut bien avouer que les sites d’immobilier font largement l’impasse sur le sujet. C’est à cette question que Trulia a décidé de s’attaquer en proposant une nouvelle approche à ses clients.

    « Plutôt que de chercher un bien immobilier, cherchez d’abord un quartier qui vous va bien », affirme Trulia qui a tout mis en oeuvre pour rendre vrai cette injonction.

    C’est pour cela que l’on trouve dès la page d’accueil, en haut, des bannières d’accroche sur différents quartier qui pourraient intéresser le visiteur.

     

    Page d’accueil de Trulia : les quartiers sont placés au dessus des annonces

     

     

    Un clic sur une de ces bannières emmène sous une avalanche d’informations à propos de ce quartier. Et ça va très loin. Il est ainsi possible de trouver au même endroit non seulement les tendances de prix du quartier, mais aussi des photos d’ambiance, des avis des habitants sur différents sujets, comme les déplacements à pieds, l’acceptation des chiens, les différents services disponibles, écoles, commerces, etc, mais aussi même le taux de criminalité de ce quartier, le type de gens qui y habitent et bien plus encore !

     

    Une carte personnalisée donne en un point de vue l’ensemble des commerces accessibles dans un quartier

     

    Statistiques de crime d’un quatier sur Trulia. Les données statistiques sont appuyées par des votes des utilisateurs (à noter : la transparence sur la manière dont sont récoltées les données et leur représentativité)

     

    Verbatims quartier des utilisateurs de Trulia. Notez la simplicité de la mise en forme.

     

    La page mêle informations statistiques, infos factuelles tirées de la plateforme Yelp, mais aussi verbatim, savamment mis en avant, comme autant de petits micro-témoignages très humains, qui donnent un ton de vérité très fort à la page.

    Bien sûr, la page de présentation de quartier se termine également par la présentation des meilleurs biens (choisis par la plateforme), ce qui reste tout de même l’essentiel. Trouver un appartement ou une maison qui vous ressemble.

    Mais cela va plus loin.

    Car l’ambition de Trulia n’est pas que de vous informer sur un quartier en particulier, mais éventuellement de vous en faire découvrir de nouveaux, qui pourraient vous plaire aussi. Un peu à la manière de Netflix (voir mon article sur le même sujet : Analyse de cas, la stratégie de recommandation de Netflix), Trulia se veut aussi une plateforme de découverte pour aider l’utilisateur à aller plus loin que ce qu’il pensait avoir (c’est le fameux  effet de surprise dont j’avais parlé sur ce blog). Autrement dit, sachez surprendre vos utilisateurs en leur proposant du contenu qu’ils n’attendaient pas et séduisez-les !

    Trulia a mis en place un véritable écosystème de créations de contenus mêlant humain et IA

    Produire autant de contenus et d’informations pour Trulia est évidemment une tâche importante non prévue dans le cahier des charges de départ. Et pour pouvoir arriver à en produire autant, il a fallu recourir à différentes astuces.

    La première est simple, puisqu’il s’agit de l’intégration d’informations externes, comme on l’a vu avec Yelp. C’est également vrai pour la carte de criminalité ou bien celle de la circulation, tirées de données publiques en ligne.

    Mais Trulia compte aussi sur les milliers d’avis utilisateurs et remontées d’informations qu’elle traite par jour depuis sa plateforme de relation client. Beaucoup de témoignages sont ainsi réutilisés sur la plateforme pour enrichir les contenus éditoriaux sur les quartiers.

    En plus de ces approches traditionnelles, Trulia utilise aussi beaucoup l’intelligence artificielle et a développé ses propres algorithmes pour améliorer les contenus et les recommandations.

     

    Trois algorithmes ont été mis en place :

    • Un algorithme de reconnaissance d’image qui est capable de comprendre le contenu d’une photo. Par exemple, si une photo de cuisine est uploadée, l’algorithme est capable de déterminer automatiquement la couleur de la cuisine ou les matériaux utilisés. Ces informations permettant ensuite d’enrichir la plateforme de mots clés de recherche ou de classification. Ce même algorithme permet également de déterminer quelles sont les plus belles photos de la plateforme et de les mettre en avant dans le but d’augmenter l’engagement (plus les photos sont belles et grandes, plus elles augmentent l’engagement)
    • Un deuxième algorithme s’occupe de recommandation de quartier, comme nous l’avons vu tout à l’heure. Il se base notamment sur les visites de page que font les différents groupes d’utilisateurs et tente de proposer à un visiteur des quartiers qu’il n’aurait pas imaginé aller explorer. C’est un moyen nouveau de prolonger la navigation des utilisateurs en titillant leur curiosité et en leur proposant des idées qui peuvent les intéresser.
    • Le troisième algorithme est un algorithme prédictif qui permet à Trulia d’envoyer des notifications et des informations sur des biens et des quartiers à un utilisateur en augmentant la pertinence des contenus et des offres en fonction de cet utilisateur.
    Chaque fiche produit de Trulia présente également les informations de quartier

    L’ensemble de ces outils et de l’approche par quartier font de Trulia un site vraiment innovant qui cherche à coller au plus près au besoin des utilisateurs, tout en gardant les fondamentaux métiers. Le tout est servi par une ergonomie et un design qui rendent sinon sympathique le site, du moins sérieux. C’est d’ailleurs sans doute le point où Trulia pourrait s’améliorer : une meilleure mise en avant des contenus avec une approche encore plus magazine, comme on l’a vu pour le site de tourisme Miamiandbeaches.com, dont les photos pleines pages font vraiment la différence.

    Comment mettre en oeuvre une approche à la Trulia pour d’autres sites ?

    Pour moi, la bonne méthode pour apporter des nouveaux services et des nouveaux contenus à un site n’est pas de les imaginer dans un coin de son cerveau et de convaincre en interne que c’est une bonne idée., Comme nous le faisons toujours chez Wexperience, c’est d’abord connaître ses utilisateurs, dialoguer avec eux, comprendre et connaître leurs besoins, puis imaginer des solutions qui puissent améliorer l’expérience client en répondant à leurs problèmes ou interrogations. Tout cela à travers des méthodes d’UX design qui permettent de garantir l’efficacité des résultats à trouver.

    Mettre en place des enquêtes quali + quanti

    Ce travail de ce renseignement doit se faire à la fois de manière quantitative avec des enquêtes en ligne, par exemple, ou en recueillant des avis, via son propre site (avec un outil comme UX.Care), mais également d’une manière qualitative avec des tests utilisateurs ou bien des focus group. S’approcher au plus près de l’utilisateur permet d’affiner les réponses aux questions que le quantitatif apporte, en général. Et c’est bien l’approche que Wexperience a mis en oeuvre pour la mutuelle GSMC ou l‘agent immobilier Syndic One. Dans le cas de Trulia, c’est celui qui a permis de comprendre l’importance pour l’acheteur immobilier d’en savoir le plus possible sur un quartier avant de prendre la décision d’acheter un bien..

    Connaître les technologies

    Ensuite, il faut savoir tirer partie de la technologie à bon escient. Trulia a développé en interne ses propres algorithmes d’IA, mais il n’est pas toujours nécessaire d’aller aussi loin (et souvent trop onéreux). Dans la mode, par exemple, il existe déjà des algorithmes de reconnaissance d’image en Saas qui permettent d’améliorer la recherche visuelle. Une veille sur les outils technologiques existants devrait être systématiquement menée pour permettre d’imaginer de nouveaux mécanismes de recommandation, ou d’amélioration de l’expérience utilisateur.

    Utiliser les sources de données extérieures

    Utiliser les sources de données extérieures comme le fait Trulia permet à peu de frais d’enrichir les contenus d’un site. C’est souvent le cas en ecommerce, lorsque les avis clients proviennent d’une plateforme spécialisée. Mais il existe certainement d’autres sources d’informations qui peuvent être utiles à d’autres types de produits. Une recherche en ce sens devrait être systématiquement faite dans un projet de refonte de site,par exemple.

    Se servir des données clients

    Utiliser les verbatims clients. Une société récolte en permanence des verbatims clients, mais ceux-ci sont rarement utilisés. C’est pourtant ce qui fait la matière incontournable des sites de voyages comme AirBNB et Booking.com qui demandent systématiquement un retour client à ses utilisateurs. Il faut bien sûr mettre en oeuvre une telle politique de remontée d’informations, mais pourquoi se focaliser uniquement sur la qualité de ce qui a déjà été fait et ne pas s’interroger sur d’autres questions, plus périphériques au produit et au service. C’est ce qu’a fait Trulia pour s’intéresser au sujet des quartiers et a permis de créer une approche entièrement nouvelle du site immobilier.

    Mes conseils pour améliorer son site par de nouveaux contenus

    • Toujours rester à l’écoute de ses clients et mettre en place un véritable système de collecte et de tri des verbatims
    • Rester en veille sur les technologies émergentes et imaginer des moyens de les employer en accord avec les besoins utilisateurs
    • Organiser régulièrement des rencontres physiques avec ses clients pour découvrir de nouvelles opportunités de création de contenus et de services
    • Mixer quali et quanti pour avoir une vision des besoins clients la plus proche de la réalité
    • Continuer à lire le blog de Wexperience 🙂

    Excellente journée !

     

    Via : Fast Company et ZDNet

     

     

    Photo de l’article par Christopher Czermak sur Unsplash

  • Une nouvelle norme d’UX pour les sites de tourisme : Miamiandbeaches.com

    Pour séduire ses visiteurs, Miamiandbeaches.com déploie un arsenal impressionnant de bonnes pratiques

    Le nouveau site de l’office de tourisme de Miami fait partie de ceux repérés par le site Skift, site d’info référence dans l’industrie du tourisme. Beau, fluide, excitant, il est à l’avant-garde de ce que de nombreux sites de tourisme devraient faire. Pourquoi ? Comment ? Voyons voir ce qui en fait un site si différent.

    Miamiandbeaches.com en 5 points forts

    Pensé pour le mobile

    Miamiandbeaches.com reçoit environ 60% de son trafic sur mobile. La nouvelle mouture devait donc être parfaitement adaptée à ce média. Et c’est une réussite. Les photos sont en plein écran. La navigation fluide. Tout est propice à la découverte et à l’exploration sur téléphone portable.

     

    L’ergonomie du site a été pensé pour une navigation mobile avant d’être déclinée sur dekstop

     

    Envoûtant

    Ce n’est pas tant le design du site qui est envoûtant que les photos. 45 lieux clés de Miami ont été photographiés sous toutes les coutures par des professionnels. Le principe est l’immersion. Plus les photos sont grandes, plus vous plongerez dedans. Il y en a une énorme variété, sans compter les photos des réseaux sociaux, savamment intégrées parmi la masse. Un utilisateur qui ne connaîtrait pas Miami se laisserait vite prendre à leur éclat, à leur richesse visuelle et colorée.

     

    Simple

    On en revient encore à la simplicité (voir mon article sur Walmart). Le design du site se satisfait d’une mise en page élémentaire. La typo employée en lettres capitales et titres courts renforce cette impression.

     

    Le menu de navigation est simple, grâce à une grosse typo et un nombre d’items limités. Notez l’emploi d’un dégradé en couleur de fond, très tendance en ce moment.

     

    Riche

    Les contenus sont extrêmement nombreux. 20 rédacteurs ont été missionnés pour barder la plateforme de descriptifs accompagnant chaque lieu, chaque attraction, chaque point d’intérêt. Si c’est bon pour le SEO, c’est aussi bon pour l’utilisateur qui trouvera son saoûl d’informations sur sa destination de voyage.

     

    Malgré une grande richesse de contenus, Miamiandbeaches.com, grâce à un design simpliste est d’un abord très facile

     

    Personnalisé

    C’est l’argument fort de Miamiandbeaches.com. Un moteur de personnalisation vous permet de trouver des contenus en affinité avec vos goûts. Ajustez quelques réglettes, cliquez sur un bouton, et vous voilà face à une liste de résultats faits pour vous. Difficile de dire comment sont déterminés les critères de pertinence, mais l’intention est louable et améliore, de fait, l’expérience utilisateur en simplifiant l’effort de recherche.

     

    L’outil de personnalisation de Miamiandbeaches.com : de simples réglettes colorées qui permettent de générer des résultats de recherche en fonction des goûts des visiteurs

     

    Les résultats de recherche personnalisés permettent de mettre en avant les offres en affinité avec les goûts des utilisateurs. Malheureusement, il manque un ingrédient essentiel à ce système : les avis utilisateurs.

     

    Mon avis

    J’ai vraiment été séduit par l’expérience immersive proposé par Miamiandbeaches.com. La beauté des photos et leur mise en page en plein écran lui donne une très grande puissance d’engagement. L’envie d’aller voir plus loin est toujours présente. Je ne me suis pas plongé dans les textes, mais je ne doute pas qu’ils permettent de prolonger la visite. L’outil de personnalisation est un point fort, même s’il est dommage que son algorithme ne soit pas clair. Des avis utilisateurs en plus amélioreraient sans doute sa pertinence.

     

    Todo list

    Voici quelques suggestions qui pourraient encore améliorer l’UX sur Miamiandbeaches.com :

    • Un agenda visuel des évènements. Cela manque énormément, évidemment. Une page évènement existe, mais il n’est pas possible de la voir sous forme de calendrier. Cela aurait été un complément très pratique pour aider à trouver des activités.
    • Une connexion à un outil de planning. Miamiandbeaches.com propose un « trip planner », mais il n’est pas exportable. On ne peut donc pas s’en servir pour une autre application de voyage (ex : Google Trips)
    • Passer à la Progressive Web App : la refonte aurait été une opportunité pour transformer le site en PWA. Or, Miamiandbeaches.com n’est compatible PWA qu’à 45%. Ce choix technique aurait pourtant pu être largement justifié pour pouvoir accéder aux contenus du site « offline »

     

  • Ergonomie : La simplicité contre la complexité. Comment Walmart bat Amazon.

    Walmart.com avant et après sa refonte

     

    Il est de coutume de citer en exemple l’ergonomie d’Amazon, mais, à force de rester assis sur ses lauriers, le leader du ecommerce dans le monde, pourrait bien finir par se faire battre par Walmart, son principal rival. Ce dernier a refondu son site en avril et vu se ventes en ligne exploser au 2ème trimestre 2018. Profitons-en donc pour comparer, à travers la fiche produit, ce qui fait les points points forts et les points faibles des deux immenses géants de la distribution.

     

    Walmart, une page plus engageante, parce que plus simple

    Qu’est-ce qui fait qu’une page web est engageante ? Quels sont les attraits graphiques qui vont accrocher ou pas l’oeil de l’utilisateur ? Le cerveau humain, sans que l’on s’en rende compte, arrive à prendre des décisions beaucoup plus rapide qu’on ne le croit. Il est capable de se former une opinion en quelques millisecondes et de décider si quelque chose lui plait ou pas.

    Une étude américaine a montré récemment qu’il ne lui fallait pas plus de 17 à 50 millisecondes pour juger l’esthétique d’une page web. Pendant ce temps très court, tous les éléments qu’il voit d’une page vont l’aider à se forcer une opinion.

     

    Et si c’est opinion est bonne (et c’est ce qui est important), il va nous permettre de nous mettre dans un état beaucoup plus réceptif à toute information. Plus réceptif, mais aussi plus actif. Plus prompt à agir et à prendre des décisions. Une bonne première impression est un atout incomparable, même pour un objet aussi banal qu’une page web.

     

    Mais comment faire pour y arriver ? Comment rendre une page plus engageante en la rendant plus attractive ? Qu’est-ce qui préside à ces qualités ?

     

    Toujours selon cette étude, l’opinion que le cerveau forme à l’encontre d’une page dépend de deux facteurs : la complexité visuelle et sa prototypie. Plus faible est la complexité visuelle et plus « prototypique » est votre page, meilleur sera l’engagement de votre internaute.

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

     

    Prototypie et complexité visuelle, les deux mamelles de la bonne première impression

    La complexité visuelle réfère à un ensemble de critères comme la densité d’informations, l’homogénéité de la page, son nombre de couleurs, son ordonnancement. Pour faire simple, Cdiscount est complexe visuellement, tandis que Apple.com est simple.

    Quand à la prototypie, c’est une notion qui traduit notre capacité à appréhender le sens d’une page en fonction de sa structure et de la structure habituelle des autres pages de même type que notre expérience personnelle nous amène à rencontrer par ailleurs. C’est un peu ce qui nous permet de reconnaitre un visage humain. Tous les visages humains sont différents et pourtant ils répondent tous à la même architecture : un ovale, une bouche, un nez, des yeux, etc. Quand ces signes apparaissent, vous pouvez sans prendre risque dire que vous êtes face à un visage humain. Et c’est ce mécanisme cognitif dont nous parlons. Plus une fiche produit répond à un prototype de fiche produit, plus nous allons vite à l’identifier, et plus cela nous met à l’aise.

    Une bonne combinaison des deux facteurs nous permet donc de nous forger une bonne première impression de quelque chose.

     

    Versions mobiles des fiches produits d’Amazon (à gauche) et Walmart (à droite). Laquelle vous fait la meilleure impression ?

     

    Pourquoi la page de Walmart parait plus simple ?

    Grâce au travail qu’a accompli Walmart pour rendre son site plus amène, plus affable, plus sympathique. Il fait « bonne première impression ». Comparez-le à celui d’Amazon, pour exactement le même produit et demandez vous en toute honnêteté ce que vous ressentez. Vers quel site iriez-vous en premier ?


     

    Fiche produit sur le site de Walmart

    Le même produit sur le site d’Amazon, la différence est flagrante

     

    Dans le détail, il est assez facile d’analyser ce qui se passe.

    Moins de couleurs

    Tout d’abord, le nombre de couleurs. Il est nettement plus faible sur la page de Walmart. Un travail d’harmonie a été réalisé qui rend l’ensemble de la page homogène. Peu d’éléments de couleurs ressortent, et c’est tant mieux, parce que moins, il y en a, plus eux qui sont présents ressortent. Donnant la un précieux atout à la page. Il y est plus est facile de faire ressortir des éléments importants, comme le bouton d’ajout au panier ou bien la gratuité des frais de port. Le regard est guidé et il est très facile au cerveau de détecter rapidement des points particuliers.

    Plus de blanc

    Ensuite, la densité d’information est faible, comparée à celle d’Amazon.

    Les espaces sont grands entre les différents éléments d’interface. Tous les éléments de page sont placés sur une seule couleur de fond, le blanc, qui reste la couleur la plus favorable à la lecture.

    Moins d’éléments d’information

    Autre critère contribuant à la simplicité, la quantité d’informations visibles à l’écran. Là encore, la différence est flagrante si l’on prend simplement le contenu affiché au dessus de la ligne de flottaison. Sachant que le cerveau regroupe en blocs les différents types d’informations, ce nombre est beaucoup plus élevé sur Amazon que sur Walmart. Et plus il y a de blocs visibles, plus il faut de temps pour l’analyser. Ce qui contribue à augmenter la complexité visuelle.

    Moins de disparité, plus d’homogénéité

    Mais ce n’est pas fini. Un autre paramètre vient augmenter la complexité visuelle d’Amazon. L’hétérogénéité des éléments visuels. Non seulement, il y a plus d’éléments visuels, mais ces éléments ont tous des formes différentes. Là encore, c’est du travail supplémentaire pour le cerveau à analyser.

    Une page plus simple convertit-elle plus ?

    La simplicité est un vecteur de conversion, mais elle n’est pas suffisante. Dans le ecommerce, l’internaute n’est pas en train de jouer ou de prendre du plaisir à naviguer. Il déploie des efforts pour faire la meilleure affaire possible. A moins qu’il ne soit totalement impulsif, sa décision d’achat repose sur des critères rationnels et il a besoin d’informations. Et plus il en obtient, plus sa décision sera renforcée.

    De ce point de vue, les deux sites sont très riches en contenus. Et il y en a même plus sur Amazon si on prend en compte les avis clients. Cela lui donne une force que Walmart n’a pas. Et c’est seulement dommage que ces contenus soient si lourdement mis en oeuvre.

    Cela saute aux yeux si on regarde les  produits de cross-selling ou les avis clients. Bien qu’il y en ait plus sur Amazon, la mise en forme utilisée est particulièrement complexe :

    • Les titres produits sont trop longs ou tronqués
    • L’espacement entre les éléments trop faible
    • Les textes trop compacts

    Pour comprendre à quel point cela impacte l’efficacité du site, il faut se mettre dans le contexte de l’utilisateur qui ne va pas voir qu’une seule page au cours de sa visite, mais plusieurs. Et si l’effort peut être acceptable pour une page, il devient pénible sur plusieurs pages. Et décourageant. Et si vous avez une offre pléthorique, comme c’est le cas chez Amazon, tous ces défauts pèseront lourd sur la motivation et l’attention de l’utilisateur.

    La simplicité ne joue donc pas que sur une page, mais sur l’ensemble de la navigation. Et un autre critère vient renforcer cette simplicité chez Walmart, c’est l’homogénéité des pages. Quelque soit le produit, leur structure et leurs contenus restent homogènes. Contrairement à Amazon où ces contenus sont parfois hétéroclites (et notamment dans les descriptions). Ce dernier facteur sera encore un effort inutile supplémentaire demandé à l’internaute.

     

     

     


     

    La sobriété de l’apparence graphique des recommandations sur Walmart tranche avec l’illisibilité de son pendant sur Amazon.com

     

    L’apparence graphique des recommandations n’aide pas l’utilisateur. Les noms des produits sont trop longs ou tronqués et difficiles à lire. La répétition graphiques d’éléments comme les étoiles surchargent l’interface.

     

    La question de la vitesse d’affichage

    Tout est question de perception

    La vitesse d’affichage et sa perception jouent un rôle primordial dans l’expérience utilisateur. Plus les contenus au dessus de la ligne de flottaison s’afficheront rapidement et plus vite l’internaute aura l’impression qu’il pourra interagir avec la page, meilleure sera l’expérience utilisateur. Comprenez que cette perception est indépendante du poids totale de la page et que pour optimiser ce facteur, il ne s’agit pas que d’alléger les médias ou de réduire le code, mais d’optimiser ce même code pour afficher le plus vite possible un contenu intéressant pour l’utilisateur. C’est ce que j’expliquais dans mon article :,UX : 11 conseils pour optimiser la vitesse de votre site mobile (conseils aussi valable pour le desktop).

     

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

     

    Pour cet article, je me suis amusé à simuler l’affichage des deux pages dans les conditions du réel (une ligne ADSL à 5 Mbps). C’est ce que l’on voit dans les 2 animations ci-dessous. Et là, c’est Amazon qui affiche un contenu « utile » à l’utilisateur beaucoup plus rapidement que son concurrent. Et qui plus est, dans un temps relativement raisonnable, sachant qu’il est admis que 3 secondes de temps d’affichage sont acceptables et qu’au delà, le risque de quitter le site augmente de façon exponentielle.

     

    Dans ma simulation, il faut moins de 1,5s à Amazon pour télécharger le contenu de la page au dessus de la ligne de flottaison et rendre utilisable ce même contenu. C’est un peu trop, mais c’est mieux que Walmart

    Walmart est dans la limite haute du temps d’affichage acceptable. Ça n’est pas grave pour une page, mais cumulée sur plusieurs pages, cela devient vite inacceptable pour l’utilisateur.

    Conclusion : Walmart impose un nouveau standard

    La simplicité ne fait pas tout, mais elle contribue à la conversion. En théorie, une page plus simple améliore l’engagement de l’utilisateur, rend sa perception du site meilleure, et prolonge son temps de navigation. Mais ce facteur peut être contrebalancé et il n’est pas suffisant si un travail de fond n’est pas mené, en plus, sur les contenus et les performances techniques.

    La page produit d’Amazon, visuellement trop complexe, mériterait sûrement une simplification comme celle qui a été faite sur Walmart. Resterait en suspens une question : comment continuer à avoir autant d’éléments à l’écran, tout en donnant l’impression de simplicité ? Il y a là un véritable challenge pour les designers et les développeurs.

    Si on la compare avec l’ancienne version de son site, Walmart a joué un grand coup avec sa refonte d’avril. Cassant les codes, il a créé des nouveaux standards visuels pour la grande distribution, tandis qu’Amazon porte encore le poids d’une accumulation de fonctionnalités et de contenus sans réflexion globale.

     

    Excellente journée !

     

     

  • Expérience utilisateur : disruption d’une notice de montage IKEA

    Si vous ne l’avez pas déjà fait, lisez 4 leçons à tirer des notices de montage d’un meuble IKEA avant de lire cet article.

    Faut-il toujours utiliser la technologie pour améliorer l’UX ?

    Peut-on changer l’expérience utilisateur de la notice de montage d’un meuble IKEA ? Comme je l’avais montré, ce petit bout de papier, enrageant parfois, mais bien utile pourtant, participe entièrement de l’expérience client du fabricants de meubles suédois. Par sa simplicité, son efficacité, elle lui donne un avantage indéniable par rapport à ses concurrents. Pour autant, ne serait-il pas possible encore d’aller plus loin ? Et d’ajouter un peu de technologie à ce qui pourrait paraître pour un archaïsme dans notre beau monde plein de belles technologies ? 😉

     

    Deux étudiants et un designer se sont confrontés à cette question, en apportant, chacun à leur manière, une solution  « disruptive » (oh, comme je me méfie de ce mot là) à la notice de montage. La première n’est qu’un prototype et la deuxième plutôt une blague. Mais dans les deux cas, elles montrent une chose : la technologie n’est pas toujours la solution. Un bout de papier parfois reste et restera toujours plus efficace que la plus pointue des apps ou la plus puissante des machines. Car, en UX, ce qui compte, ce n’est pas la sophistication technique qui compte dans le résultat, c’est l’expérience vécue par l’utilisateur. Alors même si ce résultat n’utilise ni le wifi, ni l’électricité, ni le sillicium, et existe depuis plus de 2000 ans, ça n’est pas une raison pour le condamner.

     

    Et le travail des UX designers est exactement cela : créer la meilleure expérience utilisateur avec la technologie la plus adéquate, même si celle-ci date des prémisses de l’histoire ! 🙂

     

    Excellente journée !

     

    Disruption avec une app de réalité augmentée

    Cette idée est le travail dAdam Pickard, un designer canadien, Elle tire partie des possibilités de la réalité augmentée sur iPhone X et remplace intégralement la notice de montage d’un meuble IKEA, comme vous pouvez le voir sur la vidéo ci-dessous. Cette application n’est pas une commande d’IKEA, mais elle pourrait fortement intéresser le fabricant de meuble suédois. C’est une expérience intéressante, reste à voir si elle peut réellement se substituer à la simplicité du papier et du graphisme de ces fameuses notices. En tout cas, c’est un bon exemple de ce qu’on peut faire avec la réalité augmentée.

    Disruption avec un robot

    Ce n’est pas la solution la moins onéreuse… mais si vous voulez vraiment vous passer de la phase de montage d’un meuble IKEA, vous pouvez toujours demander à ces deux robots, qui feront, sans broncher, le travail à votre place !

  • 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

     

     

  • Analyse de cas : la stratégie de recommandation de Netflix

    Sur PC, la page d’accueil de Netflix est hautement immersive avec une vidéo plein-écran dès l’arrivée. Ce choix de dérouler automatiquement des vidéos ne finit-il pas par devenir énervant ?

     

    Comment faire revenir encore et encore ses utilisateurs sur sa plateforme ? Comment les aider à trouver la bonne série ? Comment les satisfaire toujours plus ?

    Comme toute plateforme de streaming, Netflix teste en permanence de nouveaux moyens de garder son audience. De l’IA, avec des algorithmes de recommandation élaborés jusqu’à l’UX avec des patterns de relance ou de découverte censés en permanence nous en donner pour notre argent. Mais le challenge n’est pas facile et j’en veux pour preuve mes longues séances personnelles de recherche de nouvelles séries ou de série souvent récompensées par l’échec.

    Netflix utilise différents « patterns » UX pour aider l’utilisateur à choisir une nouvelle série

    Il faut vraiment voir le site de Netflix sur PC comme une une énorme page de recommandation. Tout n’y est fait que pour vous permettre de trouver le plus rapidement possible une nouvelle série après l’autre.. Pour cela, plusieurs mécanismes sont employés. Tous reposant, en premier, sur l’IA de la plateforme. En fonction de vos visionnages, de vos goûts, Netflix est censé vous proposer toujours ce que vous allez aimer.

    Premier pattern : le rangement par critère

    Netflix me fait penser à une sorte d’immense rayon de vidéothèque. L’avantage, c’est que ce rayon peut s’agrandir indéfiniment, se réordonner automatiquement, changer d’apparence, s’animer, toujours pour vous satisfaire plus. Et en plus des vieilles catégories classique : humour, drame, science-fiction, etc. Le classement s’y fait sur d’autres critères plus psychologiques : « Parce que vous avez regardé… », « Tendances actuelles », « Les plus gros succès ». Les séries y sont présentées sous forme de vignettes permettant un parcours rapide du regard sur la page sans s’encombrer d’informations sans intérêt.

     

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

     

    Une sorte d’immense rayon de vidéothèque malléable à merci

     

    Ce premier niveau de présentation donne une double impression : celle de l’abondance. Plus on montre de choses à l’écran, plus on excite le désir de l’utilisateur. Celle de la qualité, avec des vignettes extrêmement travaillées graphiquement et qui font l’objet d’une personnalisation que peu d’utilisateurs perçoivent.

    Comme l’explique sur son blog l’équipe techno de Netflix, elles sont personnalisées en fonction des utilisateurs. Ainsi, contrairement à une vidéothèque, les jaquettes peuvent avoir différentes apparences, et cela, non seulement en fonction de votre personnalité, mais de vos visionnages précédents, de votre navigation, de vos avis, etc. En adoptant cette tactique mêlant graphisme et IA, l’interface est censée être plus pertinente pour chaque utilisateur.

     

    Les différentes vignettes de Stranger Things sont censées s’adapter à chaque type d’utilisateur (source : blog de Netflix)

     

     

    Deuxième pattern : la relance en fin de saison

    Très classique, ce mécanisme consiste à suggérer une autre série que vous serez censé aimer après en avoir regardé une et atteint son dernier épisode. Le générique se réduit dans une mini capsule et une page plein écran vous suggère une nouvelle série. On ne peut pas la rater et un call-to-action vous permet directement de continuer à vous baffrer 🙂

    Je ne sais pas si ce mécanisme est très efficace. Qui a envie de se lancer dans une nouvelle série après en avoir visionné une entière ? Ne serait-il pas mieux de pouvoir la mettre en favori pour la retrouver plus tard ? Et pourquoi une seule série ?

     

    Y a-t-il un rapport entre Better Call Saul et cette série ? Je n’en suis pas certain.

     

    Troisième pattern : la suggestion de séries dans la vignette de présentation

    Celles là, il faut les voir. Cachées dans un onglet parmi d’autres, les recommandations sont presque invisibles. Basées sur la similarité thématique d’une série avec une autre, elles permettent un autre type de navigation. Mais, vue sa complexité, celle-ci est-elle réellement utilisée par les utilisateurs ? On peu aussi se le demander.

     

    L’onglet Titres Similaires est tellement bien caché que je ne suis allé le voir que pour écrire cet article

     

    Quatrième pattern : la publicité intersticielle

    Ce pattern a été mené à titre expérimental pour mettre en avant les propres productions de Netflix, au détriment des autres. Similaire à des publicités dans Youtube, elles apparaissent entre les épisodes et il n’est pas possible de les escamoter avant quelques secondes de visionnage. Autant dire qu’elles ont laissé un avis mitigé parmi les utilisateurs de la plateforme.

     

    Cinquième pattern : la suggestion de recherche

    Cette caractéristique est plutôt originale, car elle permet de proposer des séries ou des films même pour une recherche n’ayant pas le résultat exact. C’est plus qu’un outil de recherche, c’est une machine à découvrir des oeuvres, sans doute plus performante que tous les autres patterns de recommandation.

     

    Le moteur de recherche vous aide à trouver des séries, même celles que vous ne cherchez pas.

     

    De l’IA pour renforcer la pertinence

    Netflix nous en apprend beaucoup sur la recommandation produit. Même si son cas est particulier (il n’y a pas tant de plateformes de streaming que ça), elle utilise de nombreux mécanismes cognitifs pour tenter de capter et de maintenir notre attention :

     

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

     

    • L’émulation : comme nous sommes des êtres sociaux et que nous aimons appartenir à un groupe, jouer sur la corde de cet appartenance est un vieux gimmick du marketing. Il est basé sur le précepte du « Les autres font ça, faites comme eux. » En découle des recommandations simples basées sur cette appartenance : « Tendances actuelles », « Les plus gros succès sur Netflix », « Films primés »
    • L’identification : par définition, nous aurons tendance à aimer des séries qui ressemblent aux séries que nous avons déjà regardées. Cette appétence pour le « connu » (nous aimons la nouveauté, mais la nouveauté fait toujours peur) est un filon aussi largement exploité par la phrase « Parce que vous avez regardé. » Ce mécanisme est aussi entretenu, comme nous l’avons, vu par la personnalisation des vignettes en fonction de notre profil.
    • Le syndrome de la corne d’abondance : plus il y a de choses dans la vitrine, plus on a envie de rentrer dans le magasin. La page d’accueil de Netflix semble pleine à craquer de séries prêtes à être dévorées. Mais c’est évidemment une illusion savamment entretenue. Beaucoup de séries sont proposées à plusieurs reprises dans différentes rubriques. Mais l’algorithme de rangement est tel qu’on ne le voit pas.

    Ces mécanismes sont renforcés constamment par des patterns « no-cul-de-sac ». Ce que je veux dire par là, c’est qu’il n’existe pas de fin de navigation dans Netflix et que pour l’internaute, il existe toujours un moyen de rebondir vers quelque chose de nouveau : la suggestion de séries à la fin d’une série et à l’intérieur d’une série. Il n’y a pas de 404 sur Netflix et il n’y en aura jamais.

     

    Enfin, l’arme atomique de Netflix, c’est bien sûr l’IA qui permet de créer en permanence des parcours entièrement personnalisés et totalement adaptés à chaque utilisateur pour lui permettre d’aller au plus vite à l’assouvissement de son désir. Chaque utilisateur de la plateforme a son propre magasin, en quelque sorte, et ce magasin se réorganise à chaque visite.

     

    90 secondes pour faire son choix

    D’après Nick Nelson, ex-responsable de l’expérience client de Netflix, il faut 90 secondes maximum pour convaincre un internaute de choisir une nouvelle série. Au delà de ce temps, il part faire autre chose. Ce délai est très court, surtout si on le compare au temps que l’on passait autrefois à choisir une K7 VHS dans une vidéothèque 🙂

    Le système de recommandation est donc aussi soutenu par un ensemble de micro-interactions à base d’animations fluides (voir mon dernier article sur l’importance de celles-ci) et surprenantes, déclenchées par des interactions demandant un minimum d’effort Chez Netflix, le rollover est privilégié par rapport au clic (sur PC), ce qui a tendance à rendre beaucoup plus vivante l’interface.

    Il permet de plonger l’utilisateur dans le « flow ». Un principe propre au jeu vidéo, mais que l’on retrouve ici, et qui consiste à maintenir en permanence à un haut niveau d’excitation le cerveau de l’utilisateur. Lorsqu’il est dans le « flow », il ne voit pas le temps passer et son plaisir est démultiplié.

     

    Deux anicroches pourtant :

    • le déclenchement quasi systématique et automatique des trailers vidéo. C’est assez insupportable.
    • les ouvertures de popin s’agrandissant au passage de la souris et masquant des éléments d’interfaces,

    Les deux ont tendance à casser ce fameux flow et le premier surtout augmente les chances de faire passer l’utilisateur d’un mode actif (la recherche) à un mode passif (le visionnage), peu propice à la découverte..

     

    Un système efficace ?

    Netflix s’y prend-t-il bien pour pousser de la recommandation à ses abonnés ? Mon expérience personnelle me montre que malgré toute cette artillerie, il n’est pas rare que je passe des minutes entières à essayer de trouver une série que je n’ai pas encore vue. Parfois cela marche. Très souvent, c’est plutôt décevant. Et ce n’est pas le taux d’affinité affiché en pourcentage à côté des titres de série qui m’y aide. IT Crowd, une série que j’adore, ne m’est recommandé qu’à 67% et je ne l’ai finalement regardé que parce que j’en avais entendu parler ailleurs. Et il semble que je ne sois pas le seul dans ce cas. Beaucoup d’utilisateurs de la plateforme découvrent des séries via leurs amis ou des critiques en ligne ou par d’autres moyens encore.

    Je m’interroge d’ailleurs sur la pertinence d’avoir effacé brutalement tous les avis utilisateurs de la plateforme la semaine dernière. Ceux-ci ne pouvaient-ils pas aider à se faire un avis, comme c’est le cas des sites de ecommerce (avis qui font la richesse d’une plateforme comme celle d’Amazon) ? Cette évacuation de la recommandation « humaine » me parait contreproductif et semble découler de choix financiers plutôt qu’une d’une véritable stratégie centrée utilisateur. Choix probablement dicté par le besoin de mettre en avant les séries Netflix, jugées moyennes par les américains, et que les utilisateurs auraient tendance à mal noter. Et c’est bien là tout le problème. La meilleure UX ne peut se substituer à une offre médiocre ou insuffisante.

     

     

    Photo de l’article par freestocks.org sur Unsplash

     

  • Shopdisney.fr : un site simple et efficace

    Disney France vient de mettre à jour son site web bureau et mobile. Un même site, responsive, pour les deux versions. Revue de détail.

    Un site au design épuré et efficace

    Simplicité et clarté

    L’équipe de Disney a beaucoup misé sur la simplicité et la clarté. Et c’est vraiment ce qui ressort de ce nouveau site. En version « desktop » (pour ordinateur de bureau), le site est aéré, simple, rempli de belles photos qui mettent l’accent sur l’offre plutôt que sur l’univers de la marque. Les fans s’y retrouveront facilement grâce à une organisation des rayons  bien travaillée que l’on apprécie à travers des menus de navigation bien pensés, que ce soit en version desktop ou mobile. Pour cette raison, le moteur de recherche, d’ailleurs, ne semble presque pas avoir d’utilité, même si lui aussi bénéficie de cette simplicité visuelle en apparence.

    La page catégorie fonctionne bien en version « desktop » avec un système de filtre très complet à gauche et des produits clairement présentés. Bien noter l’optimisation de l’espace : on a beaucoup de blanc autour des produits et entre les blocs d’informations. Par ailleurs, le design est assez épuré pour que l’utilsateur puisse bien concentrer son regard uniquement sur les produits.

    Les pages sont aérées et apparaissent légères grâce à un espacement assez large entre les éléments (textes et photos), à un nombre limité d’éléments visibles en même temps à l’écran (mobile et desktop), mais aussi à une limitation récurrente du nombre de couleurs, de polices de caractères ou de symboles. De page en page, le site bénéficie d’une grande homogénéité et d’une grande cohérence visuelle qui le rendent agréable à regarder.

    Les photos produits sont toutes détourées sur fond blanc, et cela contribue à renforcer cet apparence de légèreté. Un bon point également est l’absence de visuels tapageurs ou promotionnels qui auraient sans doute rendu l’interface plus difficile à lire.

    Le site est donc clairement orienté performance UX.

    La fiche produit respecte toutes les conventions des sites de ecommerce. Elle est très complète et est, elle aussi, très claire, très aérée, simple et efficace.

    Un défaut majeur, malgré une bonne mise en forme, est la taille et le mécanisme d’affichage du menu de navigation. Il est parfois trop grand et se déroule trop lentement au passage de la souris, ce qui bloque l’accès à tout ce qui se trouve sur l’écran.

    Version mobile

    Le site étant responsive, la version mobile découle directement de la version desktop. Et cela avec une interface moins fonctionnelle sur mobile que sur desktop. Les têtes de gondoles qui fonctionnent bien sur la page d’accueil du site desktop sont beaucoup moins efficaces sur la version mobile où il faut scroller, scroller, scroller sans cesse pour voir défiler toutes les accroches visuels, sans qu’un ordre réfléchi apparaisse. Sans doute que les images de cette page auraient gagnées à être moins grandes en hauteur pour pouvoir en voir deux ou trois par hauteur d’écran sur mobile.

    Sur mobile, la clarté et l’organisation qui font la force de la version « desktop », sont moins flagrantes. Par exemple, ici, les images de catégories ou sous-catégories, sont trop hautes. Il serait possible de les diminuer en hauteur afin d’en faire voir deux ou trois par hauteur d’écran. Cela permettrait d’accélérer la navigation.

    Un deuxième défaut découle directement de ce choix : sur mobile, les visuels produits sont vraiment trop petits, spécialement dans les pages listes où le choix de les afficher sur deux colonnes les minimisent au point de devoir faire un effort de concentration pour les regarder. Certes, cela, sans doute, n’affectera pas toutes les générations d’utilisateurs, mais peut-être quand même les plus âgés (au delà de 40 ans) et rendra la navigation plus pénible. Il serait intéressant de tester un affichage sur une colonne.

    Sur mobile, le responsive crée des pages catégories où les produits apparaissent vraiment tout petits. Une meilleure solution serait peut-être de tous les afficher sur une colonne avec deux ou trois produits visibles par écran.

    Défaut classique d’un site responsive : le descriptif de catégorie, trop haut, empêche de voir les produits sans scroller.

    Hormis cette grosse problématique, le site remplira sans doute son rôle avec efficacité grâce à une notoriété de marque tellement forte que les utilisateurs pardonnent plus facilement les défauts. La nouvelle interface permettra sans doute d’améliorer les performances de l’ancien site (que je n’ai pas vu) et constitue une bonne base pour de futures évolutions (passage en Progressive Web App notamment).

  • Les assistants doivent faire encore beaucoup de progrès, selon Norman Nielsen Group

    La célèbre agence d’UX américaine dresse un verdict sans appel des assistants vocaux

    Les assistants vocaux sont un peu la hype de l’année depuis que Amazon a lancé sur le marché français Echo, son fameux assistant vocal. Pour rappel, le géant américain a déjà vendu au moins 20 millions d’unité de son enceinte intelligente aux Etats-Unis. Fera-t-il aussi bien en France ?

    Mais Norman Nielsen Group, sans doute la plus célèbre agence d’UX au monde, vient de jeter un pavé dans la mare en dévoilant une étude sur l’utilisabilité de ces assistants. Et le résultat est sans appel : elle est très mauvaise ! Tous leurs tests  ont montré que ces appareils, faisant une utilisation extensive de l’IA, peinent à remplir leur rôle, même pour comprendre et exécuter de simples tâches. Quand à avoir « une véritable conversation » avec eux, il ne faut même pas y penser.

    Amazon Echo, Google Home et Apple Homepod, les enceintes intelligentes des trois géants de l’internet américiains

    Sommes-nous en face d’une mystification des GAFA ?

    Alors, sommes-nous en face d’une véritable mystification des GAFA ? Et y a-t-il tout à jeter dans ces assistants vocaux ? Ou bien n’en sommes-nous qu’à la préhistoire de ce qui sera dans quelques années notre manière principale d’interagir avec les machines ?

    Pour répondre à cette question, NNG a réalisé un test utilisateur sur 17 personnes aux Etats-Unis. Cela peut sembler peu, mais en ergonomie, cela est largement suffisant pour porter un jugement global sur une interface.

    Pour mieux évaluer les choses, NNG a décomposé les critères d’évaluation des assistants en 5 dimensions, chacune d’entre elles, hormis pour la première, n’a fourni de résultats satisfaisant, même pas à un faible niveau, faisant dire à NNG que nous en sommes retourné à « l’ère sombre des années 70 », aube de la microinformatique. Ce qui n’est pas bien gentil.

    Les différentes dimensions de l’UX vocale et les potentialités d’amélioration

    Technique d’interface Utilisabilité Potentiel
    Entrées vocales Bonne Devrait progresser rapidement et être capable de prendre en compte les accents La plupart des entrées sont correctement retranscrites, hormis pour, occasionnellement, pour les noms propres.
    Langage naturel Mauvaise Améliorations possibles, mais peu probables rapidement Les phrases à plusieurs prorpositions sont incomprises : les résultats différent selon les tournures. La compréhension des pronoms est limitée.
    Sorties vocales Mauvaise Utilisabilité fondamentalement limitée, sauf pour des informations très simples. Devrait s’améliorer. En dehors de certaines tâches (navigation, météo, etc.), les assistants ne sont pas capables de proposer systématiquement des réponses
    Interprétation Mauvaise Pourrait devenir meilleure, mais sera très difficile à accomplir Hormis de simples informations contextuelles comme la géolocalisation, les données de contact ou les lieux fréquemment visités, les assistant ne sont pas capables de retenir des informations contextuelles
    Utilisation de données externes Mauvaise Peut nettement s’améliorer Les assistants n’utilisent qu’un nombre très limités de ressources extérieures (comme le calendrier ou l’email) pour en déduire des nouvelles actions intéressants l’utilisateur
    Intégration Nulle Peut s’améliorer, mais nécessitera un travail acharné Les assistants ne s’interfacent pas bien avec les autres apps présentes sur un appareil et les interactions, permises par les « skills » et les « actions » (mini applications sur Alexa ou Google Home) tirent mal partie des autres environnements d’interactions

    Des utilisateurs bluffés, mais qui n’attendent pas de miracles

    Malgré ce sombre tableau, les usages, même s’ils restent très limités, selon NNG, demeurent tout à fait possibles. En réalité, d’ailleurs, les utilisateurs des assistants, même s’ils ont cru aux promesses des constructeurs, n’attendent pas des miracles et savent ou apprennent très vite qu’ils n’arriveront pas à avoir de réels dialogues avec la machine, ni même d’interactions aussi évoluées qu’on peut en avoir avec un écran, une souris et un clavier. La plupart des échanges se font sous la forme de phrase/question <-> réponse simple. Seul un domaine échappe à ce relatif désastre : la dictée. Très appréciée et relativement performante dans de nombreux cas.

    Parler aux assistants : fastidieux, mais possible

    Parler aux assistants est sans doute le seul point de satisfaction relevé dans l’étude de NNG, même si très rapidement, les utilisateurs prennent conscience qu’il va leur être impossible de s’adresser à eux comme des êtres humains. Faire une phrase complexe n’aboutit à rien, et très rapidement, ils apprennent à prononcer les phrases lentement, sans émotions et en les découpant en petits lots d’informations afin que la machine puisse les digérer.

    Recevoir de l’information de la part des assistants : très compliqué

    C’est dans la capacité à restituer de l’information que les assistants s’avèrent très mauvais.

    Premier point : les utilisateurs se plaignent de ce que les assistants parlent trop vite et renvoient souvent beaucoup trop d’informations pour la mémoire humaine. Phénomène aggravé par le fait qu’il est difficile d’arrêter un assistant dans sa logorrhée. C’est le cas, trop souvent, lorsque l’assistant fait une énumération. Le résultat est souvent irritant et impatiente l’utilisateur.

    Deuxième point : lorsque l’assistant n’est pas équipé d’un écran, les résultats restent très limités. En toute logique, les utilisateurs d’assistants attendent de ne pouvoir échanger avec lui qu’en vocal.  Mais les cas sont nombreux où la réponse vocale est très nettement inférieure à la réponse visuelle : pour une liste de produit, une énumération, ou même une phrase complexe. Certains assistants (ou téléphones) permettent donc d’afficher une réponse sur un écran, mais souvent le résultat est déceptif. L’utilisateur ne souhaite pas recourir à l’écran. Il n’a pas envie de scroller dans une liste. Et pire, les listes, comme c’est souvent le cas sur Siri, font sortir l’utilisateur de l’application où il était.

    Troisième point : l’incapacité des assistants à donner des réponses pertinentes ou simplement bonnes à l’utilisateur. Le nombre de réponses « à côté » semble faramineux à tel point que les utilisateurs prennent comme un miracle une réponse correcte ou approchante (« It felt like magic »).

    Quatrième point : la confiance manque. Le fait que les assistants peinent à donner des informations claires tendent à rendre méfiants les utilisateurs. NNG donne plusieurs exemples de réponses, considérées comme correctes par l’assistant, mais que l’utilisateur voudra vérifier tout de même. Dans ce cas, tout l’avantage de l’assistant vocal est perdu. Comme l’affirme un des répondants de l’étude : « I don’t trust Siri will give me an answer that is good for me. » (En gros : je n’ai pas confiance dans les réponses de Siri). Ce qu’une utilisation courante de Siri peut assez facilement confirmer.

    Enfin dernier point, les assistants vocaux ne sont vraiment pas doués pour le shopping. Leur principal défaut étant de ne pouvoir permettre facilement la comparaison entre produits.

    Nous avons déjà vu que l’énumération de liste était un problème, qui est encore plus pregnant lorsqu’un utilisateur fait une recherche produit (et les tests que nous, Wexperience, menons en ce moment en France tendent à le confirmer). Cette première constatation vient renforcer le fait que la comparaison de produit est difficile sans pouvoir visualiser l’information. Imaginez un tableau de caractéristiques : même un être humain essayant de vous le décrire vous barberait rapidement et votre cerveau même serait incapable de retenir toute l’information qu’il vous envoie. C’est exactement la même chose pour les assistants vocaux.

    L’article de NNG cite les nombreux cas où les utilisateurs devaient écouter les listes produits sans pouvoir les interrompre. Où il n’était pas possible de revenir en arrière ou d’aller en avant dans une liste. Où l’assistant leur demandait de retenir, comme un vieux serveur vocal d’antan, des numéros d’items dans une liste pour pouvoir les retrouver ensuite.

    Pire, tous les testeurs de l’étude ont fini par admettre que le shopping sans écran était une mauvaise idée et que les assistants vocaux (même avec un écran, comme nous même à Wexperience, l’avons tenté) n’étaient pas fait pour ça.

    Et les skills dans tout ça ?

    A l’instar des app stores, Google Home et Amazon Echo offrent tous deux un ecosystème qui permet à des tierces parties de développer des applications pour les enceintes intelligentes. Appelées « Skills » chez Amazon et « Action » chez Google, ces programment donnent aux entreprises le moyen (comme c’est déjà le cas en France) de donner accès à leurs services et à leurs offres via les assistants vocaux.

    Le fait même de trouver et déclencher une application tierce est un problème

    Hélas, d’après NNG, le résultat, à l’heure actuelle, même pour Amazon qui a pourtant déjà plus de 2 ans d’expérience dans le domaine, est catastrophique. Les skills ou actions sont la plupart du temps très difficiles à prendre en main par les utilisateurs.

    Ainsi, Amazon Echo aurait deux problèmes majeurs :

    1. Les utilisateurs doivent apprendre à mémoriser le nom précis d’un skill pour l’utiliser, ce dont il ne sont pas capables la plupart du temps (imaginez devoir retenir le nom de toutes les apps installées sur votre smartphone)
    2. Les utilisateurs doivent retenir la « phrase magique » pour déclencher le skill, ce que les utilisateurs n’arrivent pas à faire non plus.

    Google Home n’est pas épargné non plus par ce travers, mais en pire, selon NNG. Les actions n’arrivent pas à être déclenchées ou alors elles sont déclenchées par inadvertance. L’article cite un utilisateur qui cherchait des informations de guidage pour se rendre à la plage et se retrouva, sans comprendre pourquoi, avec l’indice UV de cette plage (via une application tierce).

    Des applications tierces extrêmement mal programmées

    Sans réelle surprise, et comme on pouvait s’y attendre, les applications tierces (les skills et les actions donc) se sont révélées être de véritables catastrophes ergonomiques. Pour une simple et bonne raison : la plupart des utilisateurs pensaient pouvoir utiliser leurs propres mots pour leur adresser la parole, alors qu’en réalité, seules des phrases précises permettent de les utiliser (à se demander à quoi sert vraiment l’IA dans tout ça). Ce fut l’écueil principal.

    Ce n’est pourtant pas faute de les aider, mais là encore les applications tierces scient elles même la branche qui auraient pu les rendre facile à utiliser.

    Afin d’aider les utilisateurs, beaucoup d’entre elles tentent d’aider l’utilisateur en leur énumérant, à la première utilisation, l’ensemble des phrases clés à utiliser pour un bon usage. Mais le résultat fut pire que mieux. Comme pour une notice d’utilisation, les utilisateurs sautaient systématiquement, pendant l’étude, cette étape pour utiliser directement l’application tierce.

    Seul le cas où l’application tierce pose des questions et demande à l’utilisateur de répondre brièvement permettait parfois d’aboutir à ce que l’on pourrait appeler un usage satisfaisant (et encore, avec beaucoup de réserves comme l’explique NNG).

    Enfin, un autre écueil est également rapidement apparu : la plupart des utilisateurs ne savaient jamais quand ils parlaient à une application tierce ou à Google Home ou Alexa (les deux programmes de parole principaux de Google et d’Amazon), rendant souvent les situations encore plus confuses.

    Des interactions bancales avec le reste de l’écosystème

    Dans l’étude de NNG, non seulement les enceintes intelligentes étaient testées, mais également les assistants vocaux sur smartphone (qui sont en fait les mêmes programmes).

    Les tests sur ces types de terminaux se sont aussi montrés extrêmement décevants pour les utilisateurs quand aux interactions avec les autres fonctionnalités et applications des téléphones.

    Ainsi, parmi les nombreux reproches exprimés par les utilisateurs à ce sujet, fut celui de l’enfermement dans les écosystèmes des GAFA. Pour écouter de la musique, par exemple, impossible de passer par une application tierce n’appartenant pas à la même  entreprise que celle du propriétaire de l’assistant vocal. Demandez à Siri (d’Apple) d’écouter de la musique vous forcera à aller vers Apple Music, même si vous êtes abonné à Spotify.

    Conclusion : il va falloir sortir de l’ère préhistorique

    NNG est considéré comme une agence très sérieuse et il n’est nul doute que les résultats présentés représentent exactement la réalité des usages quotidiens avec les enceintes intelligentes. De ce fait, on peut s’étonner du succès d’Amazon Echo pourtant déjà vendu à plus de 20 millions de foyers américains. Et aussi de la guerre commerciale qui est en train de se livrer en Europe avec ces terminaux.

    Oui, en réalité, leur usage est encore très limité, voire très déceptif par rapport à la promesse. Mais oui aussi, il y a certainement un « marché du vocal » et aucun doute sur le fait que dans les années à venir les conversations vocales seront un des moyens d’accéder à Internet et à ses nombreux services (voir mon long article à ce sujet).

    Prendre une place sur les plateformes d’agents conversationnels n’est donc pas une farce et devrait être une préoccupation véritable des directions digitales des grandes entreprises, même si les résultats et les apports sont encore très embryonnaires.

    Et même si NNG dit que nous en sommes au même niveau que les usages mobiles en l’an 2000 (oui, vous avez bien lu)), il est probable que les progrès des interfaces vocales vont être plus rapide que pour le smartphone. Je suis prêt à prendre le pari que d’ici 1 an, il existera de très bons services BtoC dans le vocal et des usages évolués dans le domaines des applications métiers et encore d’autres services non commerciaux.

    S’y investir maintenant n’est donc pas prématuré, mais comme je l’avais déjà dit, sans en espérer un ROI sérieux avant quelques temps.

    Et je le répéterai encore : devant la difficulté à construire des dialogues et une qualité de service de haut niveau, des développeurs de talent ne suffiront pas pour construire des skills ou des actions. Une véritable démarche UX devra également être mise en place. Notamment à l’aide de tests utilisateurs réguliers et d’un suivi permanent des interactions entre les utilisateurs et votre applications tierces.

    Via NNGroup

    Photo principale de l’article par Andres Urena sur Unsplash

  • Retour d’expérience : Auchandrive.fr, le nouveau site

    Auchandrive.fr vient de mettre en ligne une nouvelle version améliorée de son site web. C’est donc le moment pour faire une petite analyse de l’ergonomie et de l’expérience utilisateur de cette mouture qui s’annonce, à première vue, comme une bonne évolution.

    Une interface homogène et simple

    C’est plus clair

    L’impression qui prédomine est une impression de clarté. C’est bien sûr la grande tendance du moment. Moins d’éléments visibles à l’écran, plus de blanc, plus d’espace, des éléments d’interfaces transparents (les boutons du menu principal en mode fil de fer), du gris clair pour les textes (trop clair sans doute). Les listes produits sont allégées. Toute la surface de l’écran n’est pas utilisée et on n’a pas cette sensation de « bourrage » qu’on peut avoir sur de nombreux sites ecommerce. Même sensation sur les fiches produits où le fond blanc prédomine et, une fois de plus, donne une sensation de légèreté et d’espace, propice à une longue navigation.

    Globalement, les pages sont plus claires, plus allégées, grâce aux choix d’un fond blanc et d’un liseret gris clair que l’on va retrouver sur la plupart des pages.

    Du bon usage des couleurs

    Outre cette sensation de clarté, se dégage également une sensation de gaité, du à un usage parcimonieux et bien codifié des couleurs. Hormis le fameux rouge d’Auchan, enfin on sort des couleurs trop criardes et trop franches, si caractéristiques de la grande distribution. Les teintes sont un peu plus pastels, un peu plus douces, ce qui rend l’interface attractive, mais pas trop dissonante.

    Une iconographie simplifiée

    Le mobile est passé par là. L’iconographie des boutons ou des pastilles d’information ont été simplifiées pour être bien lisibles sur une interface mobile (celle que j’ai testée). Un soin a été apporté à leur espacement, toujours dans ce même souci d’espace.

    Des couleurs primaires, certes, mais pas que. Les icônes font dans la simplicité et les tons variés et subtils rendent l’interface plus sympathique. Les icônes restent bien lisibles sur interface mobile.

    Navigation et recherche

    Sur un site avec une étendu de gamme très grande, le défi est d’arriver à faire trouver facilement un produit. De ce point de vue, ça m’a l’air réussi aussi.

    Un menu avec des images, c’est bien ?

    Le menu principal donne accès aux produits rayons par rayon. Un choix a été fait de présenter les catégories principales par des photos. Cela permet d’égayer le site, mais je ne suis pas sûr que ça soit ce que veulent forcément les utilisateurs du site quand ils sont pressés et cherchent simplement à constituer une liste (mon avis sur ces menus dans une présentation à télécharger sur Wexperience.fr). N’empêche qu’un effort sur la clarté a aussi été fait ici avec des espacements importants entre les items du menu, mais, attention, aux libellés : au premier niveau, ils sont vraiment petits.

    A nouveau des images dans le deuxième niveau de navigation, mais là encore, je ne pense pas que les images apportent beaucoup à l’identification des catégories. Je ne sais pas si un test utilisateur a été réalisé sur cette nouvelle interface (ou un test AB), mais il m’est avis qu’il serait possible de le « radicaliser » en les enlevant et en agrandissant les textes pour un meilleur confort de lecture. C’est d’ailleurs ce qu’on retrouve au 3ème niveau de navigation. C’est certes « plus aride », mais dans le rush de la navigation, c’est peut être aussi plus efficient pour l’utilisateur.

    Le menu principal de navigation remplit bien la surface de l’écran, les items de menus sont bien espacés entre eux. Les photos apportent-elles quelque chose à l’expérience utilisateur ? Certainement en terme d’impression ressenti, peut-être moins en terme d’efficacité pour l’utilisateur.

    Un bon système de filtres et de tri

    Indispensable aujourd’hui, le système de filtres et de tri représente exactement ce que j’aime bien : des filtres peu nombreux, clairs, tenant sur une longueur d’écran et sans manipulation complexe. Ça n’est pas très sexy visuellement, mais c’est efficace pour l’utilisateur et c’est tout ce qui compte. Le seul petit point faible du système, c’est un bouton « Affiner » tellement petit qu’on le voit à peine. Pas très grave sur un site amené à être utilisé souvent, mais un véritable défaut.

    Un moteur de recherche efficace ?

    Choix assez étrange (enfin, pour moi), le champ de recherche n’est pas directement visible en haut de l’écran. Il faut cliquer sur une icône loupe, placée près du menu de navigation, pour le dévoiler. Pour la suite, il se comporte comme tout moteur de recherche, même si on a le droit à quelques surprises (voir captures d’écran). A ce sujet encore, je vous invite à télécharger la présentation que j’ai faite des moteurs de recherche sur Wexperience.fr.

    A l’heure où Google reçoit de plus en plus de recherches vocales et où cette façon de faire est en train de devenir une habitude, je trouve presque dommage que Auchan n’ait pas plus favorisé la recherche en mettant en avant un grand champ bien visible en haut de l’écran, voire en permettant directement la recherche vocale (j’avoue que je ne sais pas si c’est possible sur une interface mobile HTML, mais mon petit doigt me dit qu’avec les Progressive Web App, ça le sera très prochainement).

    Une recherche sur les bières IPA (pour mon barbecue) semble ne donner aucun résultat.

    Et pourtant ! 😉

    Passer commande, ça n’est toujours pas un jeu d’enfant 🙂

    Oui, là, je vais être dur, mais il faut être réaliste, le passage de commande devrait être aussi simple que de cliquez sur le bouton d’achat en un clic d’Amazon. Autant dire qu’on en est très loin. Des clics inutiles sont nécessaires pour arriver au paiement. Exemples : une page pour choisir la carte de paiement, deux pages panier au lieu d’une. La page de finalisation de commande est encore un peu fouillis et pourrait être sans doute améliorée.

    La dernière page du panier avant paiement est un peu confuse et graphiquement semble être en décalage avec le reste du site. La confusion est au summum avec les 3 cases à cocher en bas qui mélangent allègrement les CGV avec des options marketing.

    Faut-il vraiment en passer par cette page ? En face, je le rappelle, il y a le paiement en un clic de chez Amazon. 🙂

    Conclusion : un site qui évolue bien

    Saluons le travail qui a été fait par les équipes d’Auchan sur ce sujet (et je n’ai essayé que la version mobile) et espérons que le site continue à s’améliorer. Si améliorations il y a, c’est sans doute du côté du moteur de recherche qu’elles doivent être faites, mais également dans la capacité qu’à l’interface à rendre plus efficient l’utilisateur pour constituer une liste de courses. Et si il y a un point noir, c’est sans doute dans le tunnel de commande. Je n’avais pas de carte de paiement enregistrée, il est vrai, et tout le processus m’a paru extrêmement long et fastidieux. Il y a sûrement beaucoup mieux à faire !

    Photo principale par Bernard Hermant sur Unsplash