Agence WEX

Auteur/autrice : olivier

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

  • UX : 5 choses que vous ne devez plus faire en 2019

    L’UX (user experience, l’expérience utilisateur) fut sans doute un des termes les plus à la mode en 2018 dans le digital. Recouvrant plusieurs réalités, sa définition exacte parait quelque peu obscure. Et je ne vais pas vous faire l’affront ici de me lancer dans des explications qui risqueraient d’être longues et confuses.

     

    A l’inverse de cela, je vous propose de vous dire ce que n’est pas l’UX. Ou plutôt de vous prévenir contre les fausses idées sur ce qu’elle est. En 2019, il y a encore bien des idées reçues et il n’est jamais trop tard pour les balayer joyeusement du revers de la main !

     

    En 2019, ne faites plus tester votre site par votre grand-mère ou votre collègue de bureau

     

    Il est désormais admis et indispensable même de faire tester un site ou une application avant de la mettre sur le marché. Et quand je dis tester, c’est avec de vrais utilisateurs, neutres, sélectionnés parmi un panel proche de votre cible client et selon un protocole rigoureux que seuls des experts UX peuvent mettre en oeuvre.

     

    Oubliez les tests conduits à la va vite sur le coin d’un bureau avec les collègues de l’étage, ou avec le stagiaire de la compta, ou bien encore avec votre grand-mère, qui parce qu’elle est impotente, fera une très bonne représentante de la cible senior de 50 à 85 ans ! Tester en amateur n’est pas tester et s’improviser UX Researcher est à peu près aussi périlleux que de s’improviser pilote d’hélicoptère. Alors, pour ne pas crasher votre belle application aux yeux du monde entier, renseignez-vous un peu avant de faire vous même des tests.

     

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

     

    En 2019, ne confondez plus design graphique et UX design

    design-graphique

     

    Non ! L’UX, ce n’est pas QUE concevoir des interfaces. Et ce n’est pas parce que Jean-Michel, votre DA, fait du web depuis 30 ans qu’il est un bon UX designer.

     

    L’UX est un métier avec des connaissances théoriques (lois de la Gestalt, critères de Bastien et Scapin, et j’en passe et bien d’autres encore), une nécessaire et indispensable expérience du terrain, et surtout une capacité à comprendre et à fédérer tous les acteurs d’un projet autour d’un produit. L’UX ne consiste pas qu’à dessiner des plans de site ou d’appli, mais à créer des interactions, des expériences, et à rendre efficients vos interfaces pour remplir des objectifs commerciaux. Au milieu de cela, le design graphique n’est qu’une mince pellicule de savoir-faire dont le seul but est de faire coller votre plateforme de marque d’un point de vue esthétique à des interactions très complexes.

    En 2019, ne parlez plus de la règle des 3 clics

    En 2018, je pensais que plus personne ne me parlerai jamais de cette règle. Et pourtant, ça m’est encore arrivé il y a un moins d’un mois.

     

    Disons-le une fois pour toute. En ergonomie (en UX, comme vous préférez), il n’y a pas de règles des 3 clics. C’est, tout au plus, un concept marketing. Au pire, une escroquerie. Même sur Amazon et son bouton en 1 clic, il vous faut plus que 3 clics pour passer une commande.

     

    En design d’expérience, ce n’est pas le nombre de clics qui compte, c’est le vécu de l’utilisateur. S’il fait 1000 clics pour arriver à son but et qu’il l’a fait avec grand plaisir, alors votre objectif est rempli ! C’est le but premier de l’UX : la satisfaction utilisateur !

     

    En 2019, arrêtez de croire que les jeunes sont rapides et efficaces et les vieux, lents et mous

    Ne préjugez pas de vos utilisateurs ! Si vous créez une app pour une cible jeune, ne vous méprenez pas ! Testez la avec un panel bien représentatif. Si vous vous adressez à une cible senior, faites pareil ! Ne concevez plus vos interfaces à coup de clichés, mais bien à partir d’observations. Car ce que vous pensez de vos utilisateurs s’avère souvent faux (et nous sommes, malgré notre expertise, les premiers à l’avouer). Les humains sont ainsi faits qu’ils sont imprévisibles et toujours surprenant. Il n’est donc jamais possible de concevoir une application sans les observer. En UX, il n’y a pas un projet qui puisse être mené sans test utilisateurs. Ou alors, vos utilisateurs sont des robots ! 🙂

     

    En 2019, ne copiez plus vos concurrents

    Copier, ce n’est pas les chinois qui diront le contraire, permet du gagner du temps. Si ce précepte est vrai dans beaucoup de domaines, il l’est beaucoup moins en UX.

     

    Certes, avec le digital, il est facile de copier plus que dans n’importe quel autre domaine. Mais pas en le faisant de manière idiote. Il y a beaucoup de raisons à cela, mais la principale est que copier sans expertise et sans comprendre les tenants et aboutissants d’une interface peut vous mener à des grosses erreurs. D’abord, parce que rien ne vous dit que l’ergonomie que vous copiez est bonne. Ensuite, parce qu’en e-commerce, comme dans tous les domaines du digital, rien n’est jamais pareil d’un acteur à l’autre. Il y a toujours des ajustements à faire. Et des qu’il y a des ajustements, il vous faut des experts pour le faire.

     

    Article à lire sur le sujet : Ergonomie d’un site : pourquoi copier vos concurrents peut être une (très) mauvaise idée

     

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

     

    Conclusion

    Vous me direz que je ne suis pas neutre dans l’affaire. Que mon métier est de vendre de l’UX et que j’ai intérêt à vous convaincre. Mais vous auriez tort. Cela fait plus de 10 ans que je m’occupe d’évangéliser sur l’UX. J’ai écrit beaucoup d’articles sur le sujet. Et je fais partie du bureau de la principale association française des professionnels de l’UX. Je connais bien mon marché et mes clients. Et je sais aussi le temps et l’énergie que l’on perd parfois à réexpliquer des concepts simples qui sont en application depuis longtemps aux Etats-Unis

     

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

  • Design de site ecommerce : le retour au minimalisme ?

    Les sites de ecommerce doivent-ils se simplifier au point d’abandonner toute prétention « artistique », toute prétention au « design » et à la séduction ? Quelques exemples radicaux montrent que certaines marques n’hésitent pas à abandonner les tendances mainstream du design pour se replonger dans la simplicité des années 1990 (années où il était difficile de parler de design graphique pour les sites webs).

     

    C’est Balenciaga qui avait déclenché les hostilités. Et voici deux sites qui n’hésitent pas à jouer des codes informatiques du début de l’ère de l’Internet avec à la fois, un certain courage, mais peut-être aussi avec un réalisme qui veut que pour se distinguer, il faut « disrupter » le design, le simplifier et mettre de côté toute la complexité technologique qui s’était accumulée comme de la mauvaise graisse dans les lignes de codes des sites de business ces dernières années..

     

    Bizarre, bizarre, non ? Dimeshome.com, un site de meubles où tout semble fait pour perturber l’utilisateur. Design graphique presque sans feuille de style. Photo coupée où l’on ne voit pas le mannequin. Efficace ou pas ?

     

     

    Kioskkiosk.com, un modèle économique disruptif, avec un site qui ne l’est pas moins. Pas de promo en vue, pas de cross-selling, pas de racolage. De la simplicité, c’est tout.

     

     

    Quand Balenciaga avait sorti ce site, il y a un an, nous avions tous cru à une blague. Et pourtant, non ! C’était sérieux et le site n’a pas changé depuis.

     

     

    Lowtechmagazine.com : un des premiers sites à faire l’apologie du minimalisme et de la préservation des ressources énergétiques par son design.

     

     

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

     

    Pourquoi simplifier le design ?

    Ces exemples ne peuvent sans doute pas s’appliquer tel quels à des sites de marque plus généralistes et plus mainstream. Qui voudrait abandonner sa plateforme de marque où tout est orienté vers le plaisir des sens pour faire ressembler son site à un écran de Minitel ?

     

    Pourtant, il y a un réel intérêt à s’intéresser à un design épuré, à la fois au niveau de l’apparence, mais aussi au niveau du code (comme je l’avais déjà expliqué dans : 11 conseils pour optimiser la vitesse de votre site).

    Car design et poids des pages sont intimement liés. Plus le design est épuré, moins il y a d’animation, plus les images sont compressées, et plus le site est rapide à télécharger. Et plus il est rapide à télécharger, plus il est performant, commercialement parlant.

     

    C’est un sujet qui est chez Wexperience une véritable préoccupation. Chez nous, le design n’est pas qu’une question d’apparence, mais bien de performance !

     

    Alors essayez-nous 😉

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

  • Tous les sites de ecommerce doivent-ils nécessairement se ressembler ?

    Peut-on vraiment encore créer des expérience utilisateurs digitales innovantes sur les sites de ecommerce ?

    Après tout, ces sites font tous la même chose et, à peu de choses près, on y trouve toujours les mêmes fonctionnalités. Pas étonnant qu’ils finissent tous par se ressembler. Le noir et blanc sobre dans la mode, les sites colorés et criards chez les discounters. Les menus de navigation en haut au centre, les listes produits en colonnes ou en lignes. A peu de choses près, l’internaute finira toujours par retrouver les mêmes schémas d’interface, la même prototypie (pour comprendre ce terme, lire notre fameux article Walmart vs Amazon).

    Avantage : en adoptant la même structure d’interface, les sites de ecommerce sont plus faciles à utiliser et à comprendre pour les utilisateurs, car ils utilisent tous les mêmes canons. Le temps d’apprentissage pour l’utilisateur devient quasi nul et il peut se concentrer sur l’offre, pas sur comprendre comment fonctionne l’interface.

    Inconvénient : plus les sites se ressemblent, moins ils ont de personnalité et moins ils ont de capacité à se différencier.

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

    Et, à vrai dire, les marges de manoeuvres pour créer une expérience originale, neuve, inventive et efficace ne sont pas énormes. Pourtant, on peut encore y arriver ! La preuve avec Greatjonesgood.com et Femmeandfierce.nl, deux sites de retail « qui font bien le job », si je puis m’exprimer ainsi. Voyons voir donc par quels subterfuges graphiques et interactifs, ils y parviennent :

    La couleur, nouvel éminence suprême de l’expérience utilisateur

    Première différence qui saute aux yeux, la couleur n’est plus bannie. Elle s’affiche en fond de page, sans complexe, et vient chasser le sempiternel blanc, couleur neutre par excellence, que l’on trouve encore sur la plupart des sites. Il a même disparu des photos de Femmeandfierce.nl, remplacé par des teintes pastels et chaleureuses, « girly » ? Pire encore ! Le sacro-saint noir des typos a été outrageusement remplacé par un rouge bien primaire, sorti tout droit d’une affiche vintage des années 70 !

    Page d’accueil Femmeandfierce.nl : ça détonne un peu avec ce qu’on voit d’habitude. Et le petit côté « amateur » de la mise en page est trompeur sur la réelle qualité du site.

    Greatjonesgood.com est moins audacieux, mais parie sur une palette vintage à souhait, rappelant (le pire ou le meilleur) de l’âge des pantalons à pattes d’éléphant.

    Le monde est-il prêt par une telle débauche visuelle ? Sans doute pas sur les grands sites mainstream, mais sans doute oui, sur tout ceux qui voudront faire autrement que leurs concurrents, tant qu’ils ne sont pas encore dans les sentiers du commerce de masse.

    Greatjonesgoods.com : du vintage en veux tu en voilà !

    La typo, principal élément de l’identité visuelle, se fait plus douce

    Retour aux basics ! Ou plutôt aux rivages anciens de l’affiche imprimée et de ses caractères fondus au plomb et légèrement approximatifs, arrondis par l’usure, onctueux dans la forme, souples et féminins. Sus aux typos dures ou trop « UX », trop parfaites ! Voici des typos nouvelles, qui tranchent avec les habitudes clean des design system à la Google et font croire à un design simili-vintage, simili-bio. Bref, à un retour à plus de douceur.

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

    Des petites animations, juste pour le plaisir !

    On n’avait pas vu ça depuis les pages de gifs animés de la fin des années 90 : des animations qui ne servent à rien, qui ne sont là que pour le plaisir des yeux, qui ne cherchent pas à vous impressionner ni à vous vendre quelque chose, mais qui sont simplement bonne à vous procurer du plaisir, de l’amusement et de la joie. C’est juste rustique, simple et drôle. Et on en redemande encore !

    Surprise ! Ici, un bon exemple d’animation intégrant de l’illustration et de la photo pour rendre plus amusante l’expérience utilisateur
    De l’animation qui n’apporte rien en tant qu’information, mais qui rend la navigation plus légère, plus amusante

    De la photo et du dessin

    Qui l’eut cru ? Le dessin, ou plutôt les éléments dessinés, reviennent en force. Avec assez d’habileté sur Greatjonesgoods.com où ils viennent se superposer à la photo ou même la remplacer. Soulevez le couvercle des marmites et vous serez surpris. Encore une fois, il ne s’agit pas de ces illustrations, chères à Google, policées, trop honnêtes pour être authentiques, calibrées au pixel près, mais bien de bons vieux dessins tracés à la main, sans algorithme pour lisser le trait, peut-être, scannés, puis collés comme des images de classe sur un grand Canson coloré. On peut aimer ou pas, mais l’effet est réussi. Voilà enfin quelque chose de nouveau et de différent qui donne un petit ton amateur sympathique, et accroche le regard.

    Pour une fois que de l’illustration ne ressemble pas à le l’illustration bien léchée et trop propre.

    Des photos « gorgeous » !

    Même s’il n’y a rien de nouveau sous le soleil, place est faite à la beauté des photos, à la pêche visuelle et à l’éblouissement du regard. C’est vrai sur les deux sites et encore plus particulièrement sur Greatjonesgoods.com. Les photos d’illustration sont somptueuses (presque trop) et submergent le cerveau d’émotions. Si vous n’avez pas faim en regardant ces photos, c’est que vous venez juste de déjeuner, non ?

    Que ce soit sur Femmeandfierce.nl ou Greatjonesgoods.com, les photos sont superbes !

    Simplicité, toujours la simplicité

    Point commun des deux sites. La simplicité que l’on retrouve partout. De la page d’accueil jusqu’à a fiche produit. Et même dans le tunnel de commande. Les deux sites proposent des tunnels sans création de compte, permettant un achat en 2 étapes ! C’est de l’optimisation pure ! Et enfin, l’abandon du compte client, qui, dans le fond, ne sert plus vraiment à grand chose aujourd’hui.

    Page de commande de Femmeandfierce.nl : la commande se fait en deux étapes, et il n’y a pas de création de compte.

    En conclusion

    Ces deux sites renouvellent le genre en terme d’expérience utilisateur. Ils proposent une interface, certes, organisée de façon classique, mais avec un habillage graphique qui tranche avec les grandes tendances habituelles. Oui, il est donc possible de créer de nouvelles expériences dans le commerce détail en jouant sur des facteurs différenciants sans pour autant abandonner les canons habituels des interfaces de sites ecommerce.

  • Le drôle de phénomène de l’attention sélective

    La question est : pourquoi certains de vos utilisateurs ne voient parfois pas ce qui est juste devant leurs yeux

    En ergonomie, il est vraiment essentiel de comprendre une chose : il n’est pas possible de porter son attention sur deux choses à la fois.. Et c’est particulièrement vrai lorsqu’il s’agit du regard. De toute évidence, à moins de souffrir d’un grave défaut de strabisme, vous ne pouvez pas regarder à deux endroits en même temps. Mais beaucoup plus étonnant encore, vous pouvez très bien aussi ne pas voir une information qui se trouve juste devant vos yeux.

    C’est le phénomène de l’attention sélective !

    Lorsque le cerveau traite les informations qu’il reçoit par les yeux, il est capable de reconstituer l’ensemble des éléments d’une scène et d’en former un tout intelligible et possédant un sens. Montrez une photo de sapins, de maisons, et de vallées à quelqu’un et il sera immédiatement capable de vous dire ce qu’il s’agit d’un paysage de montagne, même, éventuellement, en n’en regardant qu’une partie. (c’est la capacité du cerveau à imaginer quelque chose qu’il ne voit pas, mais dont il est capable d’évaluer la probable signification).

    Le cerveau possède des capacités étonnantes d’extrapolation. Ici, une image partielle d’un héros de série américaine sera considérée comme un tout compréhensible, alors que de nombreux éléments importants de l’image manquent.

    Ce travail du cerveau, simple en apparence, est en réalité extrêmement complexe et s’accomplit en quelques millièmes de secondes sans même que nous en ayions conscience. Avant que nous réalisons ce que nous voyons, notre cerveau le sait déjà. Cette capacité cognitive exceptionnelle fait que nous nous servons essentiellement de nos yeux pour nous déplacer dans notre environnement et interagir avec lui.

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

    Et pourtant, malgré cette incroyable capacité, nous pouvons quand même rester totalement aveugle à quelque chose qui est placé devant nous. Parfois, un utilisateur peut « ne pas voir » un message d’alerte écrit en gros et en rouge en plein milieu d’un écran !!! Et c’est un fait très fréquent !

    Dans la vidéo suivante, il est demandé à une utilisatrice de se créer un compte sur un site de jeu en ligne. Malgré une taille conséquente et un placement optimum, elle ne voit le bouton qu’au bout de quelques longues secondes.

    [youtube width=800]https://youtu.be/h-CqKihZ3tY[/youtube]

    Ce phénomène curieux, cette incapacité apparente, s’explique en réalité très bien et est due au fait que notre capacité à traiter une information de manière consciente est très limitée.

    Pour le dire simplement et très approximativement, nous ne pouvons voir consciemment qu’une seule chose à la fois sur un point précis et limité de notre champ de vision.

    Faites donc l’expérience en vidéo ci dessous et vous vous en rendrez très vite compte.

    [youtube width=800]https://youtu.be/ubNF9QNEQLA[/youtube]

    Un objet en plein dans notre champ de vision peut très bien ne pas être vu du tout !

    Et quand on est designer, ne pas connaître ce mode de fonctionnement de notre cerveau peut conduire à d’importantes erreurs de conception. Et à ne pas faire voir de message important à certains moment du parcours utilisateur ou bien à ne pas arriver à attirer l’attention de ce même utilisateur.

    Comment doit-on déjouer les pièges de l’attention sélective ?

    L’attention sélective peut nous jouer des tours dans plusieurs cas.

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

    Lors de l’envoi de message d’erreur.

    C’est typique des problèmes de conception d’un formulaire. Un utilisateur remplit un formulaire, il le valide. Et rien ne se passe. Du moins en apparence. Car, en vérité, un message d’erreur a été affiché à un endroit où son regard ne portait pas, et il ne l’a pas vu.

    Pour éviter ce biais, il est donc indispensable de trouver un moyen d’attirer son regard sur un autre point de l’écran, à l’endroit du message.

    Pour des raisons de sélection naturelle, l’être humain repère très bien des changements dans son champ de vision. Cette faculté lui permettait, à une certaine époque, pour des raisons de survie, de repérer une proie dans la savane ou de repérer un danger. Cette capacité doit être exploitée en provoquant un changement dans l’interface qui lui fasse changer son point d’attention.

    En général, les designers se contentent d’afficher un nouvel élément (le message d’erreur de notre formulaire), mais cela peut ne pas suffire. En effet, le cerveau est plus ou moins doué et repère plus ou moins bien certains changements.

    Un changement de forme ou de couleur, par exemple, est nettement moins bien perçu qu’un mouvement.

    C’est pour cela que si vous voulez vraiment attirer l’attention d’un utilisateur sur un endroit de l’écran hors de son point de focal, vous devez utiliser une petite animation. C’est par exemple le cas lorsqu’un utilisateur ajoute un produit au panier. On peut envoyer à son cerveau le fait que son action a bien été prise en compte en agitant légèrement et brièvement le panier.

    Dans la vidéo ci-dessous, le panier s’agite légèrement afin, à la fois, de confirmer la bonne prise en compte de l’action de l’utilisateur, mais également d’attirer son regard vers un autre point de focalisation.

    [youtube width=800]https://youtu.be/9IYFEdC7ZH4[/youtube]

    Pour un formulaire, cet artifice n’est pas le meilleur. La bonne méthode en la matière est de faire scroller l’écran automatiquement à l’endroit de l’erreur et d’y afficher un message (dans une couleur d’alerte) à côté de l’endroit où l’erreur doit être corrigée. Vous utilisez le mouvement et le changement de couleur pour focaliser l’attention et déjouer le problème de l’attention sélective de l’utilisateur.

    Retenez également que ces micro-animations sont moins utiles sur smartphone. En effet, un écran plus petit rentre plus largement dans la zone de focalisation de l’attention et nécessite moins d’artifices pour obtenir les mêmes résultats que sur un grand écran plat.

    Le cas des bannières invisibles

    Lorsque l’on connait le fonctionnement de l’attention sélective, on peut être tenté de la déjouer pour s’en servir à ses propres fins. C’est le cas de la publicité, par exemple. Alors qu’une personne est en train de lire un texte dans une page, vous pouvez être tenté d’attirer son attention avec une bannière publicitaire.

    Pour cela, le meilleur moyen est de placer cette bannière sur son parcours oculaire. Dans un article de blog, par exemple, en plein milieu de l’article. Cela revient exactement au même que d’imposer une page de pub au milieu d’un film. Mais dans le digital, les choses se passent un peu plus subtilement qu’à la télévision.

    Car, paradoxalement, plus vous tentez d’attirer l’attention par les moyens usuels : clignotement, mouvement, couleurs tranchantes et criardes, visuels sexys, plus vous risquez, au contraire, de détourner le regard. C’est le phénomène depuis longtemps décrit de « banner blindness », d’aveuglement aux bannières.

    En 2007, NN Group publiait un article qui montrait l’invisibilité des bannières publicitaires sur les pages de journaux en ligne. L’effet d’aveuglement à la capacité autonome du cerveau de détourner de notre attention les éléments qui n’ont aucun intérêt pour nous.

    De la même manière qu’un cerveau ne peut pas voir un élément hors de son champ d’attention sélective, il peut tout aussi bien se rendre aveugle à quelque chose qu’il a pourtant devant les yeux. Le processus ne relève pas du même mécanisme, mais plutôt d’un apprentissage culturel qui fait que les humains apprennent des interfaces. Et apprennent notamment à éliminer de leur champ d’attention tout ce qui a peu de chance de les intéresser. Comme de la publicité, par exemple. Ou plutôt comme quelque chose qui ressemble à de la publicité.

    Cela devrait vous faire vraiment réfléchir à la manière dont vous essayez d’attirer l’attention sur quelque chose dans un site.

    La capacité du cerveau a détourner votre attention de ce qu’il ne juge pas utile est épatante !

    Dans les sites de ecommerce, il n’est pas rare de voir ce que l’on appelle des bannières publicitaires internes, censées vous renvoyer sur une promotion interne du site. Or, ces bannières souvent produisent l’effet inverse que celui désiré. A cause de la capacité du cerveau à trier instantanément ce qui l’intéresse ou ne l’intéresse pas, ces bannières sont automatiquement ignorées si elles ressemblent trop à de la publicité et deviennent, en quelque sorte, invisibles, même si l’utilisateur a le nez dessus.

    A contrario, plus une bannière ne ressemble pas à une bannière, plus elle a de chances d’être repérée et d’intéresser l’utilisateur. C’est le principe des publicités Adwords qui se « camouflent » en lien « naturel » pour être cliquées. C’est ce qui a fait et fait encore la fortune de Google.

    Une bannière publicitaire qui ressemble à un résultat de recherche. La bannière prend volontairement la forme d’un contenu pour être visible. Si elle ressemblait à une bannière de pub, il y a de fortes chances pour qu’elle ne soit pas vue.

    Autre exemple, sur le site de Skift, un magazine spécialisé dans le marketing du voyage, des bannières d’abonnement à l’email sont systématiquement placées dans les textes des articles de blog. Leur mise en forme sans fioriture, sans animation, sans intention d’attirer l’attention, possèdent, contre toute attente, un fort potentiel d’attention, justement parce qu’elles ne ressemblent pas à des bannières.

    Bannière d’inscription à la newsletter sur le site Skift.com. La mise en forme graphique, très rudimentaire, proche d’un simple formulaire, est sans doute plus efficace qu’une popin tournoyante au milieu de l’écran ou un visuel plus complexe.

    Sur les sites d’information, on trouve désormais de manière systématique des publicités « déguisées » en accroche d’article. Leur objectif étant de se faire cliquer, cette approche, comme nous l’avons déjà vu, se révèle efficace. Mais jusqu’à un certain point. Avec le temps, il est toutefois probable que les internautes apprennent à ne plus voir ces publicités. Leur emplacement récurrent, la typologie des accroches textuelles, le petit panneau « publicité » seront autant de signes pour le cerveau pour apprendre à les éviter et à passer dessus le regard sans en prendre conscience.

    Beaucoup de sites d’information tentent de faire cliquer sur des publicités en les faisant passer pour des articles. Il y a de fortes chances pour que les utilisateurs apprennent peu à peu à déjouer ces faux contenus et les ignorent.

    Conclusion

    Comprendre les mécanismes cognitifs du cerveau devrait être la base du métier d’UX Designer. Or, beaucoup ne les connaissent pas. Et pourtant, les maîtriser est fondamental pour créer des interfaces calibrées au millimètre qui répondent à des objectifs parfaitement clairs et permet à un site ou une application de remplir son rôle au sein d’un business model.

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

     ;

    Savoir attirer l’attention sur un point particulier de l’interface, éviter d’avoir des éléments fondamentaux rendus invisibles par de mauvais artifices graphiques, sont des techniques qui s’apprennent et s’expérimentent en fonction de chaque cas. Comme le montre l’effet des banner blindness, les apprentissages humains sont permanents et la capacité de ces derniers à repérer et à déjouer les pièges cognitifs que les designers leurs proposent également permanents. En design, s’il existe des règles de bases fondamentales, il faut toujours y ajouter une couche culturelle de comportements qui viennent systématiquement contrebalancer les mécanismes primaires du cerveau humain.

    C’est d’ailleurs l’intérêt principal des tests utilisateurs que nous pratiquons sur chaque projet chez Wexperience, que d’arriver à détecter ces mécanismes automatiques qui naissent des pratiques quotidiennes du digital. Ne pas s’appuyer sur ces observations issues du réel finira toujours par vous entraîner vers des erreurs de conception.

  • Vers un design écologique ?

    Le design de sites webs peut-il prendre en compte des préoccupations écologiques ? Et si oui, pourquoi faudrait-il le faire ?

    Je ne sais plus où j’ai lu ça, mais il paraîtrait que lancer une requête Google consommerait autant d’énergie que de presser une orange. Quand on connaît le nombre de requêtes quotidienne sur Google, on se dit que ça fait beaucoup de jus d’orange. Et beaucoup de jus d’orange pour rien quand on connaît le niveau intellectuel général de ces requêtes 🙂

     

     

    En fait, cet exemple bien connu n’est que la partie visible de la consommation d’énergie du digital (en 2025, Internet consommerait 20% de l’électricité mondiale). La multiplication des serveurs et des objets connectés depuis 20 ans ne trahissent pas une vérité pourtant évidente : le digital consomme énormément d’énergie et, sans doute, pour la plus grande quantité, pour une utilité fort douteuse (si vous n’êtes pas convaincu par cette idée, consultez un peu le niveau de conversation sur les réseaux sociaux).

     

    De fait, les sites webs qui sont créés de nos jours sont de plus en plus énergivores. Quand on regarde le poids des pages des sites des années 90, à celui d’aujourd’hui, il s’est multiplié par plus de 15 fois. La faute au raffinement graphique qui est permis aujourd’hui grâce au CSS, au poids des scripts qui sont attachés aux pages, mais aussi aux médias eux mêmes, la vidéo en particulier, qui en devenant consommés à haute dose encombrent la bande passante du web et génèrent une consommation électrique énorme.

     

    Evolution du poids des pages webs de 1995 à 2014

     

    Mais cela engendre un autre inconvénient : la quantité de données utilisées pour afficher une page web de nos jours finit par impacter négativement la performance de ces pages. Plus une page est lourde et utilise de scripts, plus elle est lente à télécharger et moins bonne est l’expérience utilisateur. J’en avais déjà parlé sur ce blog. Faire la chasse au poids des sites internets devrait être une obsession.

     

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

     

    Mais quel rapport avec le design ?

     

    Plus un design est simple, plus il améliore l’expérience utilisateur, moins il consomme d’énergie

    Le design est totalement lié à ce poids des pages.

     

    En somme, plus un design est simple, moins il contient d’animations, d’image hautes déf et nécessite de scripts, plus il est rapide à télécharger et à utiliser. Et, in fine, plus il est écologique. C’est une nouvelle fois la démonstration qu’il faut tendre vers la simplicité (cf notre article comparatif entre Walmart et Amazon).

    C’est pourquoi, et même si il ne faut sans doute pas atteindre à un tel extrême, le site Lowtechmagazine.com devrait pouvoir servir d’inspiration à votre design.

     

    Ce site est un modèle de déconsommation. Un code HTML simple. Pas de scripts. Pas de requêtes serveurs. Un design sobre et simple. Et, si vous voulez tout savoir, un site « qui s’éteint » quand il n’y a plus assez d’énergie solaire pour alimenter le serveur qui l’héberge (je vous l’avais dit, c’est extrême).

     

    Lowtechmagazine.com : le site le plus écologique du monde

     

    C’est peut-être trop, mais vous le constaterez par vous même, Lowtechmagazine.com est extrêmement facile à utiliser. L’organisation de la page est réduite à la plus grande simplicité et les temps de téléchargement sont quasiment instantanés. Pareil pour la version mobile.

     

    Le premier site écologique au monde. Et sans doute surtout un site comme on en faisait autrefois 🙂 Et il n’empêche qu’avec l’augmentation la bande passante, de la puissance des ordinateurs et des smartphones, il est probable que la plupart des sites actuels sont plus lents que ceux des années 90. Le patron de Snapchat ne s’est-il pas plaint lui même que son app fonctionnait plus vite il y a quelques  années sur son iPhone 4S que aujourd’hui sur son iPhone X dernière génération ? (lire : Snap CEO Sets Goal of Profitability in 2019 ou sur notre blog : Peut-on réussir sans design d’expérience ?)

     

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

    Pour moi, le web design, en général, est allé trop loin et à profité des progrès technologiques pour se laisser paresser dans l’outrance en oubliant la performance et l’expérience utilisateur. Et c’est bien pour cela que chez Wexperience, désormais, nous nous attachons à créer des pages dont le design permet un affichage plus rapide. Et, du coup, à créer des sites plus écologiques !!!

     

    Il y a toujours une bonne raison à faire toujours plus simple.

     

    Via Fastcompany

    Photo du jus d’orange par Pâmela Lima sur Unsplash

  • Peut-on réussir sans design d’expérience ?

     

    Quand on s’appelle Snapchat, un défaut d’UX coûte cher, très cher

    Que montrent les aveux « fuités » du CEO de Snapchat sur le redesign raté de son app en 2018 ?

    Comme il le dit lui même, Snapchat n’a pas assez testé, s’est précipité et n’a pas écouté assez ses utilisateurs en mettant sur le marché une nouvelle version . Sachant que pour une société comme Snapchat, c’est la fréquence d’usage qui compte. C’est l’addiction des utilisateurs. Lorsque l’on souhaite qu’ils utilisent 10 à 15 fois par jour une application, celle-ci dépend d’une expérience utilisateur irréprochable. Dans laquelle il ne doit y avoir aucun grain de sable, aucune crispation, aucun frein. Lorsqu’un ado utilise Instagram, il ne doit pas réfléchir. Tout doit lui paraître fluide et instantané. Ses seuls efforts doivent être concentrés sur sa créativité et sa seule récompense doit être le plaisir.

    Mais Snapchat s’est plantée et n’a pas tenu compte assez de ceux-ci, résultant en une fuite massive, probablement chez le voisin d’en face… Instagram.

     

    Quand les habitudes sont un business model

    Cette histoire est inspirante, car elle rappelle à bon escient l’importance de bien comprendre ses utilisateurs et de savoir prendre en compte leurs habitudes.

    Comme vous l’aurez peut-être constaté pour vous même, il est extrêmement difficile de changer d’habitudes. Même quand on est jeune.

    Les perturber conduit souvent au désastre et j’ai déjà vu des refontes de site qui avaient complètement échoué, car elles avaient fi des habitudes de leurs utilisateurs fidèles.

     

    Quand nous attaquons une mission de refonte de site chez Wexperience, nous constatons toujours le même phénomène : avec le temps, nos clients finissent toujours par détester leur site ou leur app. A force de l’améliorer jour après jour. A force d’en parcourir les moindres recoins et d’en connaître tous les défauts, il n’en ont plus qu’une image complètement distordue et négative. D’où le besoin exprimé de refondre. Pas forcément justifié pour les bonnes raisons.

     

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

     

    Les tests utilisateurs pour tout comprendre

    Pour mieux comprendre ce qui se passe sur un site, en plus des web analytics (dont nous nous occupons aussi via notre agence parisienne, Digitaleez,), nous conduisons un test utilisateur sur l’existant.

    Cela permet à nos équipes de prendre contact avec l’expérience vécue par les utilisateurs du site et de mieux connaître la marque. Mais pas seulement.

    C’est aussi, tout d’abord, le moyen indispensable pour savoir ce qui ne va VRAIMENT pas sur le site, ce que les utilisateurs ne comprennent pas, n’arrivent pas à faire, ou n’aiment pas. C’est ce qui nous sert d’inspiration pour la suite.

    Mais c’est aussi, et c’est important, de savoir ce qui va BIEN. Ce que les gens aiment sur un site. Ce à quoi ils sont habitués et qu’ils n’ont pas envie de voir changer. Ce qui est satisfaisant pour eux.

     

    Je me souviens du temps où j’étais un habitué des logiciels Power Point, Word et Excel. A une époque, chaque nouvelle version amenait une nouvelle interface qui me faisait maudire Microsoft. Je ne m’y retrouvais jamais. Et dès que j’ai pu m’échapper leur écosystème, je l’ai fait.

     

    En ecommerce, on ne peut pas se permettre de laisser s’échapper ses clients en changeants leurs habitudes. Il n’y a qu’un clic de souris ou un toucher de doigt pour aller chez le concurrent.

    Pour ces raisons, il est absolument indispensable de ne jamais se lancer dans une refonte de site ou d’application sans faire de tests utilisateurs. Car c’est le seul moyen pour connaître les VÉRITABLES usages de vos clients et d’éviter de trop s’en éloigner lors d’une refonte. Les webs analytics ne permettent absolument pas d’avoir cette connaissance, contrairement à ce que beaucoup de gens pensent.

    Un site n’est JAMAIS  totalement à jeter à la poubelle

    Et ce n’est pas parce que vous n’aimez plus votre site que vos clients ne l’aiment plus non plus. Vous seriez même très étonné.

    Et pourtant, c’est exactement l’erreur qu’a humblement reconnu le PDG de Snapchat. Cette erreur lui a coûté très cher, parce que tout son business model est basé sur l’expérience utilisateur. Heureusement, ça n’est pas aussi vrai lorsque vous vendez des chemises ou des pantalons. Ceci étant, écouter et respecter ses utilisateurs compte quand même beaucoup et vous ne devez JAMAIS faire l’économie de vous intéresser à eux ans le moindre détail. L’expérience utilisateur aujourd’hui est bien plus que de mettre de l’huile dans les rouages, c’est parfois les rouages eux mêmes ! Et ce ne sont pas des AirBNB, Uber, Amazon ou Apple qui me démentiront !

     

    PS : cette semaine, je vous parlerai aussi de l’influence de la marque sur l’expérience utilisateur. Question : la marque compte-elle moins que l’expérience utilisateur ?

     

    Photo par Thought Catalog sur Unsplash