Un bon UX design doit toujours aller plus loin que le simple « C’est bien »
Je trouve qu’en UX, on se contente trop souvent d’appliquer des bonnes règles, des bonnes méthodes, et qu’on s’estime trop souvent heureux lorsque l’expérience utilisateur est fluide et que les choses se passent sans trop d’anicroches.
Mais pour moi, un bon UX design doit aller plus loin que cela et doit arriver à aboutir le plus possible à transcender l’expérience client en réinventant les concepts auxquels nous sommes habitués. Cela veut dire : fournir la même fonction, la même utilité, mais en transformant la façon de le faire par l’utilisateur, de manière à provoquer chez lui la surprise, enchantement et le ravissement. Et que ces trois émotions lui donnent envie de revenir à votre site web, de réutiliser encore une fois votre app. Bref, qu’il tombe amoureux de votre produit 🙂
Cela n’est pas simple, je vous l’accorde. Et atteindre ce nirvana demande nécessairement de déployer une énergie qui nous est rarement accordée. Pourtant, travailler à cette réinvention permanente de l’expérience client (ou utilisateur) sera ce qui vous permettra de toujours proposer une expérience meilleure que celle de vos concurrents.
Exemple.
Réinvention de la calculatrice
https://imgur.com/QrG8v8g
On ne peut pas dire que les interfaces de calculatrice aient beaucoup évolué au fil du temps. Un clavier de calculatrice de 1968 ressemble exactement à un clavier de calculatrice de 2018. Et ce n’est pas la digitalisation des écrans qui y a changé grand chose. Prenez votre smartphone, lancez la calculatrice, et vous découvrirez ni plus ni moins que le bon vieux clavier que vous avez sûrement découvert pendant votre scolarité.
Alors si on vous demandait aujourd’hui de réinventer le clavier de la calculatrice, comment vous y prendriez-vous ? Et pensez-vous que vous pourriez y arriver ? La plupart des gens vous répondraient : pourquoi s’embêter ? Il n’y a rien de nouveau à faire dans le domaine du calcul et ça n’aurait aucun intérêt : une calculatrice sera toujours une calculatrice.
Eh bien, détrompez-vous !
En 2014, Microblink, une société croate, lançait Photomath, une application qui pourrait bien « révolutionner » la manière de faire des maths, dirait Steve Jobs s’il était encore parmi nous. « Révolutionnaire », peut-être pas, mais bluffante, oui. Dans Photomath, il n’y a plus de clavier. Le clavier, c’est l’appareil photo. Vous scannez une formule sur un bout de papier et Photomath vous la résout presque instantanément ! Ça a un côté presque magique vraiment et c’est très amusant.
Que se passe-t-il lorsque vous utilisez Photomath ?
Vous continuez à faire du calcul, mais la façon de le faire change entièrement.
Vous n’utilisez plus le clavier (même si vous pouvez et devez parfois encore le faire). Vous vous concentrez sur votre feuille de papier, vous la grattez avec frénésie en tentant de résoudre un problème. Et quand vous avez besoin de faire un calcul, vous sortez votre app, et sans avoir rien à taper au clavier, celle-ci vous sort un résultat.
Même résultat qu’avec une calculatrice, mais expérience différente. Et expérience innovante !
Je ne sais pas si Photomath est un hit, mais ce que je sais, c’est qu’elle montre parfaitement qu’on peut toujours « disrupter » les choses (même si j’ai horreur d’utiliser ce mot là, tant on en abuse). Et cette possibilité de « disrupter » existe toujours et dans tous les cas. Que vous fassiez un site de ecommerce, une app d’informations, il existe toujours une possibilité de faire mieux et de nouveau que ce qui existe. Et de faire quelque chose qui surprenne vos utilisateurs.
Rappelez-vous de cette phrase de Rebecca Sinclair, l’ex Directrice UX de AirBNB : « Vous devez savoir avoir le courage de créer quelque chose de mieux que ce que le client aurait imaginé lui même« .
Le « courage ». Retenez bien ce mot, car c’est celui dont vous aurez souvent le plus besoin lorsque vous devrez convaincre votre client de « changer les choses », d’inventer quelque chose de différent. Bref, de faire du nouveau. Car souvent la nouveauté fait peur et implique de prendre des risques. Et peu de gens aiment prendre des risques.
Il est toujours possible de « réinventer la roue »
Photomath nous montre qu’il est toujours possible de « réinventer la roue ». Cette possibilité n’est pas toujours présente. Elle n’est pas toujours spectaculaire. Elle peut souvent ne concerner qu’une toute partie de l’expérience utilisateur/client que vous offrez. Mais elle existe toujours. Et il faut que vous sachiez la découvrir et mettre en oeuvre les moyens de la découvrir. Le Design Thinking et la conception centrée utilisateur n’ont pas été inventés pour rien.
Innover ne veut jamais dire « écouter son imagination ». Innover veut dire : savoir observer, connaître la technologie, faire collaborer les cerveaux autour de vous, co-concevoir avec vos clients, tester et tester encore. Et alors, souvent, apparaitra la lumière. Celle qui fera surgir des solutions innovantes, nouvelles, transcendantes qui feront que l’expérience utilisateur sur votre site ou votre app sera « inoubliable », « mémorable », et que vous pourrez tirer les bénéfices qui découlent de ces deux mots, comme une pluie d’or sur votre chiffre d’affaire 😉
Pourquoi les horodateurs de la ville de Brive se moquent de l’ergonomie et pourquoi vous ne pouvez pas faire la même chose avec votre site web
Horodateur dans la ville de Brive : quand le design est fâché avec l’ergonomie.
Quand je vois l’interface de cet horodateur, croisé pendant mes vacances du côté de Brive la Gaillarde, en Corrèze, je me demande bien comment les ingénieurs qui l’ont conçu, ont pensé à son design. Et j’imagine bien les réunions qui ont donné lieu à ce cauchemar ergonomique :
« Et le clavier, on le met où le clavier ?
– Ben, là, en bas, y reste de la place.
– Mais ça rentre pas.
– Pas grave, tu changes la forme et ça rentrera.
– Ok. Et les boutons ? On met pas de libellés ?
– Non, on les mets sur l’écran, comme ça on peut écrire en plusieurs langues.
– Ah super, mais c’est pas très intuitif du coup.
– Mais si, il suffit de le savoir.
– Ah ouais, t’as raison.
– Par contre, on est obligé de mettre autant de textes sur un petit écran ?
– Ah, je sais pas, moi, c’est le cahier des charges !
– Ok ! »
Un cas d’école pour les ergonomes
Si l’on voulait montrer tout ce qu’il ne faut pas faire en ergonomie, cet horodateur constituerait un très bon cas d’école. Prix cachés, instructions incompréhensibles, guidage nul, clavier non conventionnel : la liste des erreurs perpétrées bat des records. Et pourtant, nul doute que la ville de Brive, qui tire des revenus de ces affreuses machines, n’en soit pleinement satisfaite. Ce qui n’est pas surprenant. Lorsque vous voulez garer votre voiture et rester dans le droit chemin, payer 1€ pour 1h de stationnement vaut bien un effort. Un effort qui n’est rien comparé à la somme dont vous devriez vous acquitter si vous vous retrouviez en flagrant délit de non paiement pour stationnement. Et tant pis si vous devez passer deux ou trois minutes pour y arriver.
Ce raisonnement , ce calcul, c’est amusant, c’est exactement le même que celui que vous faites lorsque vous décidez d’acheter quelque chose en ligne. Plus votre désir (ou votre obligation) est grand, plus vous êtes prêt à franchir les obstacles pour l’assouvir. Si vous voulez acheter le dernier iPhone X, rien ne vous arrêtera ! Pas même le tunnel de commande sans fin de Apple.com
Dans les deux cas, vous répondez à une injonction, une injonction si forte que vous êtes prêt à tout faire pour y répondre.
Nous sommes la proie de nos désirs
La différence est que, sur un site de ecommerce, votre injonction n’est pas de risquer de prendre une amende. En revanche, il est, dans ce cas, celui de ne pas pouvoir assouvir votre sacro-saint Désir consumériste ! Ce dernier téléphone à la mode. Ce voyage. Cette jupe. Tous ces objets que les fabricants font reluire dans les vitrines des magasins et des sites webs provoquent en vous un besoin irrésistible : celui de posséder, comme dans la vidéo de la célèbre série IT Crowd, ci dessous.
Et lorsque l’objet de vos désirs vous aura mis le grappin dessus, le seul obstacle qu’il y aura entre vous et lui, hormis le contenu de votre porte-monnaie, sera l’effort que vous serez prêt à accomplir pour le posséder. A ce sujet, vous noterez qu’on peut prendre le désir dans les deux sens : il peut être une attirance. Mais il peut aussi être une crainte : ne pas voir à temps le dernier film à la mode, rater une super promo, ne pas assister au concert de [mettez le nom de votre idole préférée].
C’est le principe même du marketing que de créer ce désir. Et, par conséquence, c’est rôle de l’ergonome (ou de l’UX designer), de permettre de l’assouvir le plus rapidement possible.
Il est possible de se passer d’ergonomie, mais…
Et pourtant, on le voit bien, il est possible de se passer d’ergonomie pour faire « cracher les gens au bassinet ». Ce n’est pas la ville de Brive qui me démentira. Mais alors pourquoi tant de sociétés continuent quand même à investir des millions dans l’UX et l’ergonomie ?
Parce qu’un site web n’est pas un pré carré. Un acheteur aura toujours le choix d’aller voir ailleurs, sans aucun effort supplémentaire. Et non seulement, il risque de trouver moins cher, mais en plus, si c’est plus facile à faire, alors il le fera chez votre concurrent.
Ça vous dit quelque chose ?
Eh oui, c’est exactement sur ce principe que fonctionne Amazon. Meme si les offres n’y sont pas toujours les meilleures, c’est pourtant chez le géant américain que finissent une bonne part des achats en ligne en France.
Et l’ergonomie joue une grand rôle là dedans. On ne le répétera jamais assez : l’expérience utilisateur/client est une obsession chez Amazon. Et des années d’investissements dans ce domaine depuis sa création ont fait de ses sites et de ses apps de redoutables machines à cash. Demandez à votre entourage pourquoi ils achètent chez Amazon. La réponse, la plupart du temps, sera : « Parce que c’est pratique. »
L’UX/l’ergonomie n’est pas un investissement d’un jour
Alors, évidemment, il n’est pas question de vouloir concurrencer Amazon. Vous ne disposez certainement pas de ses moyens, ni de ses budgets, et vous n’avez certainement ni les ressources humaines, ni le temps, pour arriver au même niveau d’expérience utilisateur. Mais, en revanche, vous pourrez toujours faire mieux que vos concurrents qui ne s’intéressent pas à l’UX/l’ergonomie et qui pensent, comme les designers des horodateurs de la ville de Brive, qu’on n’a pas besoin de s’en occuper, puisqu’il y aura toujours des clients qui seront prêts à faire des efforts pour payer.!
C’est fou ce qu’un horodateur peut être inspirant, non ?
Attendez, ne partez pas !
Et à propos d’Amazon, n’oubliez pas de venir me rejoindre le 26 septembre à Lille pour une présentation gratuite et exclusive de la première étude UX sur les assistants vocaux commercialisés en masse désormais en France : Amazon Echo et Google Home. Vous serez surpris ! Inscription ici !!!
PS : Et pour ceux que ça intéresse, la photo de fond de l’article est une vue de la Vallée de la Dordogne, près de Brive 🙂
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).
Cet article vous donne de nombreux conseils pour améliorer la vitesse réelle et perçue d’un site mobile.
Comment optimiser la perception de la vitesse d’un site web mobile
D’après Google, la perception de la vitesse de chargement d’une page, de son affichage, de la vitesse de réaction d’une interface et de sa fluidité font partie du critère le plus important de l’expérience utilisateur.
Qu’elle soit bonne ou mauvaise, dans tous les cas, elle a un impact significatif sur l’engagement des utilisateurs et sur leur satisfaction. Meilleure est cette perception, meilleure sont les performances du site.
comment les humains perçoivent la vitesse quand ils surfent sur un site web mobile
comment optimiser la perception de vitesse et de fluidité d’un site web mobile
La perception de la vitesse dépend de plusieurs facteurs extérieurs
Assez curieusement, la perception de la vitesse de l’application peut être perçue différemment selon les situations. Certaines personnes vont avoir l’impression que le site est plus long qu’il ne l’est réellement. Pour d’autres, ça sera l’inverse.
L’étude de Google et Awwwards dénombre 4 facteurs extérieurs affectant la perception de la vitesse :
L’état émotionnel
L’âge
Le lieu d’utilisation
Et, ce qui est appelé dans l’étude, l’Effective Use, c’est à dire le moment où un site semble effectivement utilisable
Les personnes en mouvement ou en état de stress ont tendance à percevoir la vitesse plus lente qu’elle ne l’est en réalité. Il y a ainsi une différence de plus de 30% dans la perception de la vitesse entre des personnes pressées et des personnes calmes. Le facteur âge influe également cette perception et les différences sont déjà de 23% entre des personnes de 18 à 24 ans et des personnes de 35 à 44 ans.
Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici
D’un point de vue factuel, il apparait tout de même que la plupart des humains réagissent de la même manière à la vitesse et à la réactivité d’une interface. Plus ces temps sont longs, plus les chances d’abandon sont grandes. Le plus simple est de retenir ce chiffre : 53% des utilisateurs abandonnent un site si les temps de téléchargement ou de réaction excèdent 3s.
Temps d’affichage de l’information et réaction des utilisateurs. Plus le temps d’affichage d’informations pertinentes et d’objets d’interfaces utilisables est long, plus les chances sont grandes que l’utilisateur abandonne sa navigation.
Google a pu déterminer une corrélation directe entre la perception de la vitesse et certains indicateurs très intéressants :
Meilleure est la perception de la vitesse, plus grande sera la propension d’un utilisateur à retourner sur un site
11 conseils pour optimiser la vitesse de votre site
N°1 : Affichez d’abord le contenu au dessus de la ligne de flottaison
C’est une pratique très courante sur les sites de ecommerce. Une étude de Norman Nielsen Group a récemment montré que 74% passée du temps sur une page l’était sur les les deux premières hauteurs d’écran. Optimisez le code d’une page de manière à afficher en priorité ce qui se trouvera tout de suite visible à l’écran. Travailler sur cette optimisation demande beaucoup de connaissances techniques et de réglages fins du code et si, nous pourrions en dérouler le détail ici, nous préférons vous orienter, avant d’aller plus loin dans cet article, vers cet excellent document de travail : Time to First Meaningful Paint, à consulter gratuitement.
L’art de la page d’accueil consiste à afficher rapidement quelque chose d’intéressant et d’actionnable au dessus de la ligne de flottaison dès la première seconde d’arrivée sur la page
N°2 : Activez plus rapidement le « tap »
Toujours dans l’optique de parer à l’impatience de l’utilisateur, une autre technique consiste à pouvoir activer plus rapidement le « tap ». Par défaut, il existe un délai d’environ 350ms qui suit toujours un « tap » (un toucher de l’écran du bout du doigt). Ce délai existe pour que l’écran puisse éventuellement recevoir un « double-tap », mais cette fonction n’étant pas systématiquement nécessaire, il est dès lors possible de la retirer parfois.
Cela peut se réaliser très simplement en modifiant le code de la page.
Ainsi, en ajoutant dans l’entête de page, la balise :
Vous parviendrez au résultat attendu. Ce code n’est pas le même pour tous les navigateurs. Renseignez-vous !
N°3 : Rendez l’utilisateur actif
Google a séparé les utilisateurs en 2 types : les passifs et les actifs. Il est primordial de faire passer les « passifs » en « actifs », les premiers ayant tendance à sous-estimer la vitesse et la réactivité de l’interface de 36% par rapport à ce qu’elle est réellement. L’état passif se déclenche lors de temps d’attente prolongés, qu’il est possible d’estomper selon Google. Plusieurs techniques existent pour lutter contre cet effet :
Affichez un petit jeu vidéo ou une petite animation interactive pendant un temps de traitement long est un bon moyen de garder l’utilisateur actif. Exemple : ce palmier que vous pouvez secouer avec votre souris sur un site évènementiel (désolé, on n’a pas trouvé d’exemple sur mobile, mais vous saisissez l’idée).
Animez vos feedbacks : les feedbacks sont des signaux émis par le système pour montrer qu’il a bien réagi à votre demande. Souvent, ces feedbacks n’apparaissent pas assez rapidement et laissent l’utilisateur s’impatienter. Il est pourtant simple grâce au css et au js de créer des mini-animations qui transformeront les feedbacks en moment de plaisir visuel et réactiveront votre utilisateur.
Utilisez la bonne barre de téléchargement : pour les temps de téléchargement les plus courts, utilisez les spinners (vous savez, ces petites animations tournoyantes). Elles ne sont pas indispensables, mais permettent une continuité de l’expérience utilisateur. Dans le cas de temps de téléchargement plus long, utilisez alors une barre de téléchargement.
Il n’est pas interdit d’ajouter un peu d’originalité à votre barre de téléchargement
N°4 : Utilisez les techniques de démarrage préemptives
Ces techniques de démarrage consistent à démarrer une tâche avant même que l’utilisateur ne la démarre. En voici quelques exemples.
Téléchargez de assets sur la page de login. La page de login demandant toujours un peu de temps à l’utilisateur pour parvenir à son but, il est très facile d’en profiter pour commencer à télécharger des éléments de l’écran suivant pour gagner du temps.
Téléchargez des contenus sur des états précédents. Lors de tâche ou de processus longs, vous pouvez anticiper le téléchargement d’éléments suivants en sachant que l’utilisateur passera forcément dessus. Cette technique s’applique très bien à des formulaires. Un formulaire à plusieurs pages pourra être chargé pendant que l’utilisateur remplit les champs.
N°5 : Anticipez la complétion d’une page avec des images progressives
Une autre technique pour donner l’impression de fluidité à l’utilisateur est de commencer à montrer des éléments d’interface avant qu’ils ne soient totalement chargés. C’est une vieille technique du web qui est revenue à la mode avec l’arrivée du mobile.
Des images progressives sont des images compressées avec un algorithme (comme le jpg) qui charge l’image en strates successives. Oui, oui, vous savez, ce sont ces images affreusement pixellisées qui s’affinent au fur et à mesure du temps (et qui ont donné lieu à pas mal de blagues).
N°6 : Utilisez le design optimiste
Le design optimiste est une technique de design un tantinet audacieuse qui consiste à présenter une tâche non terminée comme terminée ! Oui, tout à fait ! L’avantage est qu’elle donne l’impression à l’utilisateur que la tâche a été exécutée avec succès immédiatement, alors, qu’en réalité, elle est reportée à plus tard. Evidemment, il ne faut pas que le système plante !
C’est exactement ce que fait Twitter, par exemple. Lorsque vous likez un tweet, cette action n’est pas stockée directement en base de donnée, mais seulement quelques instants plus tard. Cela permet de ne pas ralentir le « flow » utilisateur tout en prenant en compte une action qui requiert du temps de requête.
Mais mieux qu’un « like », un téléchargement « optimiste » est une action encore plus belle 🙂 Plutôt que de faire attendre un utilisateur le téléchargement d’un fichier (en mode ascendant), faites-lui croire que le fichier a été presqu’immédiatement téléchargé et laissez le continuer à faire ce qu’il a à faire ensuite. Cette technique peut être réalisée grâce aux Web Workers qui sont des script javascript qui exécutent des scripts en tâche de fond dans une page HTML.
Evidemment, cela suppose que l’utilisateur ne quitte pas trop vite la page et qu’il soit informé comme il se doit en cas d’échec du téléchargement.
N°7 : Créez des animations fluides et optimisées
Pour qu’une animation soit perçue comme totalement fluide, chaque image ne doit pas apparaître plus de 16ms, ce qui veut dire qu’une bonne animation doit être réglée à 60img/s. C’est un premier point, mais ça n’est pas le seul.
Tout étant question de psychologie comme nous l’avons vu au début de cet article, il y a un autre moyen de jouer sur la perception de la fluidité et de la vitesse des animations. Comme nous le rappelle Awwwards, il existe quatre type de transitions de mouvement (« easing », en anglais, c’est quand même beaucoup plus court).
L’easing linéraire : c’est un mouvement sans accélération ni décélération ni au début ni à la fin du mouvement. C’est l’easing, par défaut. Assez désagréable et sans saveur, il est ressenti comme mécanique et peu humain.
L’ease-in : L’animation commence lentement et accélère
L’ease-out : l’animation commence très rapidement et décélère
L’ease-inout : c’est la conjonction des deux animations précédentes
En fonction des circonstances, il est recommandé de jouer sur ces différents types d’accélérations.
Pour ce qui concerne les interactions avec l’interface :
L’ease-out est recommandé pour tout ce qui requiert une réaction instantanée : menus, boutons.
L’ease-in est recommandé pour les fenêtres d’alerte.
Pour ce qui concerne les animations :
L’ease-inout est recommandé pour les animations courtes. Lors d’animation longues, elles donnent l’impression
Par ailleurs, ce type d’effet ne doit pas dépasser les 200 à 500ms pour ne pas être perçues comme trop longues.
Exemple de easeout sur le site de Bonobo. La fenêtre de côté arrive rapidement puis ralentitUne utilisation subtile des effets d’accélération et de décélération pour créer un effet d’élasticitéUn exemple de menu utilisant des effets d’accélérations et de décélérations. Notez comment ils tendent à rendre l’interface plus naturelle, plus animée de mouvement comme de l’eau ou de la matière élastique.
N°8 : Optimisez le code de vos animations
Le travail d’ergonomie des animations ne se fait pas que dans la composition de l’animation, mais aussi dans le code. Voici encore quelques recommandations, toujours d’après Awwwards, pour y voir clair.
Certaines propriétés sont plus gourmandes en ressources, mais également en temps d’exécution. Pour l’animation de propriétés CSS, Awwwards recommande de n’utiliser sur mobile qu’exclusivement les propriétés : opacity et transform.(rotate, translate, scale).
N’animez pas les propriétés qui affectent les layers : width, height, padding, margin.
N’animez pas les propriétés qui affectent le Paint : color, background, background-image, border.
(attention, ça va devenir un peu technique)
Le javascript peut également être optimisé. Voici les conseils que donnent Awwwards.
Utilisez RequestAnimationFrame
Evitez SetTimeOut et setInterval
Evitez de changer les styles inline sur chaque image de l’animation
Déconnectez les évènements des animations
Evitez les boucles de reflow et de repaint
Utilisez les accélérations de la carte graphique avec les transformations 3DMatrix
Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici
N°9 : Adoptez une stratégie de conception collaborative
L’optimisation de la perception de la vitesse semble être essentiellement un travail d’optimisation du code. Ce n’est pas ce que nous dit Awwards. Selon eux, il semble, au contraire, essentiel, de sensibiliser très en amont les UI/UX designers à ces problématiques. Et je pense qu’ils ont tout à fait raison. Les obliger à penser en terme de performance les fera envisager leur contribution au projet d’une autre manière et participer à une performance globale qui affecte également la performance business d’un site.
Mais pour parvenir à cette implication, il semble nécessaire de créer un Budget de performance.
Le budget de performance pour rendre vos sites aussi rapides qu’une fusée
Le budget de performance est un ensemble de contraintes que vous allez pouvoir appliquer à vos pages en fonction de votre cible utilisateurs et du matériel dont elle dispose (des vieux Android achetés en supérette ou des iPhone X dernier cri).
Plutôt que d’entrer dans la théorie, je vous propose d’aller calculer vous même ce budget en vous rendant sur performancebudget.io. Saisissez le temps de téléchargement que vous estimez nécessaire à obtenir la meilleure expérience utilisateur, puis saisissez le type de connexion sur laquelle surfe vos internautes et hop, c’est parti !
Voici le résultat :
Calculateur de budget de performance, étape 1Calculateur de budget de performance, étape 2 : le résultat. Vous pouvez facilement faire varier les paramètres.
Voilà, vous avez compris ! Comme vous pouvez le constater, avec des données aussi faciles à mesurer, tout le monde peut participer, le but du jeu étant de ne pas dépasser le poids indiqué (600ko). Amusez-vous bien !
N°10 : Utilisez les bonnes pratiques des apps
Les vrais apps (développées pour iOs et Android) recèlent des bonnes pratiques qu’il peut aussi parfois être utiles de réemployer pour encore améliorer la perception de fluidité d’usage d’un site.
Barre de progression de chargement lorsque le site est affiché en plein écran
Les Progressive Web App (PWA : nous reviendrons sur ce sujet prochainement) permettent d’afficher un site web en plein écran. Cela implique très notablement que les boutons du navigateur ne sont alors plus affichés. Pour cette raison, il devient intéressant d’afficher des barres de chargement qui viennent pallier à ce manque et qui, si elles ne sont pas présentes, risquent de rendre l’expérience utilisateur moins fluide, l’utilisateur n’ayant pas de feedback sur les moments où des pages se chargent ou pas.
Continuité de chargement en utilisant des templates squelettes
Oui, des templates squelettes ! C’est un peu curieux comme terme, mais ça définit assez bien de quoi il s’agit.
Un des problèmes de nombreux sites web est le temps de latence d’affichage d’une page lorsque l’utilisateur clique sur un bouton. En général, la page reste affichée de manière statique tant que le contenu de la page suivante n’a pas commencé à être envoyée. Ce qui peut être extrêmement énervant pour l’utilisateur.
Pour éviter cet effet, essayez toujours de donner la sensation que la structure du site web est stockée entièrement sur le terminal utilisé et que seul le nouveau contenu est téléchargé à chaque requête.
Pour simuler cette impression, c’est là que les templates squelettes font leur office. Affichez-les en premiers avant de télécharger le contenu final de la page (ces templates ayant été téléchargés au préalables avant même que le bouton n’ait été cliqué).
Sauts de page intempestifs
Mais oui, vous les connaissez ces sauts de pages intempestifs, lorsque vous téléchargez une page et qu’au fur et à mesure de l’apparition des images, toute la page saute. Cela est due au fait que la dimension des images n’a pas été incluse dans le code HTML qui la décrit et doit être « devinée » par le navigateur lorsque l’image est finalement réellement téléchargée, provoquant ce fameux saut de page intempestif.
N°11 : Optimisez et priorisez les scripts css et javascript
L’habitude a été prise depuis longtemps d’accompagner chaque page HTML d’une farandole de scripts CSS et javascript. Si cela ne pose, à priori, pas de problème, pour les ordinateurs les plus rapides avec de bonnes connexion, comme l’explique Addy Osmani, ingénieur chez Google, en revanche, cela est moins vrai sur des machines moins évoluées avec des connexions moins rapides, et notamment sur mobile. Les script prennent du temps à télécharger et du temps à être compilés. Sur certains vieux appareil, cela peut entraîner un temps d’activation de la page allant jusqu’à plus de 19s, C’est donc un point crucial à aborder avec attention.
Pour cela, Awwards nous fournit plusieurs bons précieux conseils :
Ne téléchargez que le code minimal nécessaire. Tronçonnez votre code javascript et CSS en blocs et ne téléchargez dans certain cas que les blocs absolument nécessaires.
Préchargez sur la page les éléments critiques. Pour cela, utilisez la balise <link rel= »preload »> et décidez quels sont les médias à télécharger en priorité.
Intégrez le code CSS le plus indispensable à votre page directement dans le header de la page.
Conclusion
L’optimisation de la perception de la vitesse est un vrai sujet : à la fois design et à la fois technique. Pour les sites à fort volume de trafic, c’est un enjeu essentiel, car il peut se chiffrer directement en CA effectif. Pour tous les autres sites, n’oubliez pas que Google indexe désormais les pages en fonction de la vitesse, et que votre capacité à fournir dans toutes les situations des pages dans des conditions acceptables pour l’utilisateur, influera sur votre positionnement. Tout le monde est donc concerné par cette problématique. Alors, qu’attendez-vous pour vous mettre au travail ?
Les notices IKEA sont des chef-d’oeuvres d’expérience utilisateur
Je me suis toujours demandé comment IKEA s’y prenait pour arriver à me faire faire une des choses que je déteste le plus dans ma vie : me mettre des outils dans les mains et monter une étagère ou une table-basse. Je déteste ça et, si j’en avais les moyens, je préférerais me faire livrer des meubles en entier et regarder tranquillement dans mon canapé en sirotant un verre, des livreurs en train de s’en occuper à ma place. Mais comme je ne suis pas Jeff Bezos, ni Mark Zuckerberg, ni Bill Gates, je peux encore attendre avant que cela ne se réalise.
En attendant, je suis comme tout le monde, et je dois bien me débrouiller avec cette fichue notice, ridicule avec ses schémas qu’on dirait fait pour des recalés au brevet des collèges et ses bonhommes niais qui voudraient absolument vous faire croire que le bonheur, c’est de monter une étagère Billy (sans doute l’étagère la plus célèbre au monde).
Mais lorsque je me suis retrouvé ce weekend à monter des meubles de cuisine qui n’étaient pas des meubles IKEA, j’ai compris !
Monter un meuble IKEA équivaudrait à une bonne séance de méditation (on plaisante, bien sûr)
J’ai compris comment IKEA était devenu le plus grand fabricant et marchand de meubles du monde et comment il avait pu convaincre des dizaines de millions de personnes comme moi d’aller chez lui et pas ailleurs.
Parce que les notices de montage IKEA, croyez-moi, et malgré tout ce qu’on peut leur reprocher, sont des chef-d’oeuvres d’expérience utilisateur !
Et là où encore de nombreuses marques pensent que la notice de montage n’est qu’une grâce accordée à des manchots du bricolage à peine digne d’être meublés, IKEA a compris que tout le secret tenait dans la notice de montage (pas que… mais bon, en partie…). Et c’est amusant, parce que faire une bonne notice de montage, c’est comme créer une bonne expérience utilisateur.
Je l’ai vécu ce weekend en suivant les instructions d’une notice dont je me demandais si elle n’avait pas été conçue à dessein pour me mettre dans un état de rage tel que j’en ai détruit 3 tournevis, cloué la queue de mon chat sur une façade de meuble, et écrasé un de mes enfants avec une pile de carton.
Or IKEA sait, depuis longtemps, que fournir une bonne notice fait non seulement partie de l’expérience utilisateur, mais qu’elle est une des clés du succès. Si les notices d’IKEA étaient compliquées à lire, IKEA ne serait pas IKEA et je n’aurais sans doute jamais écrit cet article.
Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici
Les notices de montage IKEA sont centrées utilisateurs
Chez IKEA les notices sont testés par ceux qui les conçoivent. Un designer de notice monte et démonte le meuble lui même plusieurs fois pour vérifier si sa notice permet effectivement de réaliser les opérations que des millions de personnes devront ensuite réaliser sans appeler le support d’IKEA. Réalisez la quantité d’économies que cela fait faire au fabriquant de meubles suédois.
Les notices sont prévues pour être pratiques à utiliser
Un des points importants de la notice est l’utilisation des angles de vues qui sont toujours les mêmes de manière à ce que le monteur de meuble ne se retrouve pas à devoir la tourner dans un sens ou dans l’autre pour la comprendre. Les concepteurs de notice chez IKEA les conçoivent en tentant de minimiser au maximum les mouvements du monteurs, de façon à ce qu’il s’y retrouve toujours des pièces dessinées sur la notice et des vrais pièces étalées en vracs devant lui sur la moquette ou le plancher de son salon.
Dans les notices IKEA, le langage de communication adopté est visuel
Tout le monde le sait : il n’y a pas de textes dans les notices IKEA. Pour une bonne raison : les meubles étant vendus dans le monde entier, les traduire aurait présenté un risque. Celui de ne pouvoir contrôler exactement le « wording » des instructions et dégrader la compréhension de la notice. Le langage utilisé est donc visuel. Les outils sont représentés de telle façon que n’importe qui dans le monde peut en comprendre le symbole. Les geste à ne pas réaliser sont barrés d’une grande croix. Tout est réduit à un langage compréhensible du Japon jusqu’au Pérou en passant par le Tadjikistan. Pas de coûts de traduction. Simplicité universelle du langage.
Dans les notices IKEA, les gens sont gentils
Avez-vous remarqué l’apparence des gens et des bonhommes sur les notices IKEA ? Ils ont l’air gentils. Et ce n’est pas pour rien. L’effet psychologique de leur visage est extrêmement important pour rassurer le lecteur de la notice, le mettre en confiance. Ça s’appelle jouer sur les émotions. Et tout site Internet ou application devrait faire ça : rendre sympathique les choses. Mettre en confiance les gens. Cela permet de les apaiser, de les rendre plus conciliants et plus prêts à accepter les erreurs qu’ils vont rencontrer (car, ils vont en rencontrer. Qui n’en a jamais « bavé » un peu avec une notice IKEA ?)
Monter un meuble IKEA fait partie de l’expérience client d’IKEA. Ce moment là doit bien se passer, car il est stratégique pour la marque. Si les gens acceptent de monter des meubles pour les payer moins cher, ils ne toléreraient pas que ce petit effort qu’on leur demande soit désagréable. IKEA l’a compris avant tout le monde et est resté le maître dans ce domaine (excepté, peut-être pour Lego, mais c’est encore un autre sujet). Ça n’a l’air de rien, en apparence. Mais faites l’essai d’une autre marque et vous comprendrez la différence.
Penser comme IKEA
Lorsque vous créez un site web, une app ou un logiciel, vous devez exactement penser comme IKEA le fait pour vos utilisateurs :
Leçon n°1 : faites toujours essayer votre site, votre app ou votre logiciel par vos utilisateurs jusqu’a ce que toutes les interactions soient fluides et qu’il n’y ait plus de questionnement, plus aucun frein. Cela passe essentiellement par des séries de tests utilisateurs que vous pouvez facilement mettre en place (ou passer par nous).
Leçon n°2 : le simple et l’utile prédominent sur le beau. Acheter en ligne, utiliser une app ou un logiciel, n’est pas un jeu (contrairement aux lego) et vos utilisateurs n’en auront que faire de vos fioritures graphiques, de vos superbes animations, de vos vidéos fond d’écran, car, au fond, ils ne viennent pas voir votre site ou votre app, ou votre logiciel pour l’admirer, mais pour s’en servir. Tout comme une notice de montage IKEA. Même si votre site doit refléter l’esprit de votre marque, n’oubliez pas que vos utilisateurs ne viennent pas pour admirer votre logo, mais pour acheter un produit, utiliser un service, ou bien simplement travailler.
Leçon n°3 : utilisez le moins de mots possibles sur vos interfaces, car un maximum de messages devraient passer par des symboles, des icones, des formes, des couleurs ou des bons emplacements. Sachez jouer avec tous ces éléments pour limiter au maximum tout ce qui est texte (je ne parle pas des contenus, descriptifs produits, etc.). Tendez à créer une sorte de langage universel.
Leçon n°4 : soyez sympathique ! Notre besoin de reconnaissance est immense. Sachez toujours « sourire » à votre utilisateur. Remerciez-le, récompensez-le, encouragez-le ! Par des petits messages, des images. Adoptez un ton convivial et simple. Faites que votre interface soit un gentil personnage, plutôt qu’un type bougon et obtu, comme c’est souvent le cas, sur de nombreux sites. Par exemple, soignez vos messages d’erreur. Ce sont souvent les pires, car ils sont, en général, écrits par des développeurs qui n’en ont cure de l’utilisateur final.
Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici
Conclusion en forme de conseil
IKEA n’a pas inventé le web, mais a sûrement inventé l’expérience utilisateur avant l’heure. Du magasin jusqu’au montage, chaque geste, chaque mouvement du client a été pensé en respectant des piliers fondamentaux : l’universalité, la simplicité, le plaisir. D’un bout à l’autre de sa chaîne de production de valeur, on retrouve ces fondamentaux qui l’ont conduit au succès que l’on sait. Lorsque vous créez un site, une app ou un logiciel, vous devez vous placer dans la même position qu’IKEA et surtout vous donner les moyens d’y parvenir. Car il ne s’agit pas de n’avoir que des préceptes en tête, encore faut-il les appliquer !
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 :
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)
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.
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 !
Deux nouvelles signatures pour Wexperience en ce chaud mois de juillet !
Création de site de protection pour les étudiants en mobilité à l’étranger
La MIS Santé, une des plus grande mutuelle étudiante de France, vient de confier à Wexperience la création de son nouveau site de marque World Pass, un service de protection pour les étudiants en mobilité internationale. Pour cette mission, MIS Santé a demandé à Wexperience d’apporter son savoir-faire :
Mieux comprendre ses clients digitaux à l’international, c’est l’objectif de la mission que Promod nous a confiée. Au programme des entretiens utilisateurs en langue étrangère et en français. A l’issue de celle-ci, et en mixant données quanti et quali, Wexperience sera amenée à créer de nouveaux personas UX pour la marque.
Comment savoir utiliser une vieille technologie pour offrir une meilleure expérience utilisateur ?
Arrivé à Rouen pour un rendez-vous client, je cherchais une borne pour m’acheter un ticket de métro jusqu’à ce qu’on me dise soudain d’acheter mon titre de transport par SMS. Surpris et curieux, car c’était la première fois que je pouvais acheter un titre de transport ainsi, j’essayais l’achat et le paiement par cette méthode et… 30s plus tard, en ayant envoyé un simple SMS, j’avais mon titre !!
Pas de borne, pas d’interface compliquée à utiliser, pas besoin de sortir ma CB, pas besoin d’avoir de monnaie sur moi, en un geste simple, sûr, j’avais mon titre de transport !
Je dois vous le dire, j’ai trouvé ce service extrêmement efficace ! Et je me demande encore pourquoi aucune autre ville que je connaisse n’a mis en place le même système (il y a sans doute des travers, mais je ne les connais). A première vue, c’est une solution vraiment très appréciable !
La preuve qu’une excellente Expérience Utilisateur (UX) ne repose pas toujours sur les dernières technologies
En tant que designer d’expérience, j’en tire une grande leçon : si l’on veut vraiment offrir les meilleures expériences, il ne faut pas avoir qu’un excellent background de concepteur UX, il faut aussi être au fait et connaître toutes les technologies qui sont à notre disposition pour pouvoir imaginer de nouveaux dispositifs.
Mais il le faut également – et c’est la deuxième leçon que j’en tirerais – pour pouvoir inventer des solutions d’utilisation qui ne font pas appel forcément à des technologies « sexy » ou à la mode, mais qui sont bien implantées dans les habitudes utilisateurs. Le SMS n’a rien de nouveau ni d’affriolant, mais tous les gens s’en servent en toute confiance, sans appréhension et avec aisance.
Bien sûr, le SMS n’est pas appelé à devenir la nouvelle panacée des services numériques. Mais pour peu que l’on soit un minimum pragmatique, il peut être la solution peu onéreuse à des problèmes compliqués.
Dernière leçon : une bonne UX ne fonctionne que si l’utilisateur en a la connaissance
J’ajouterais enfin une dernière remarque à ce sujet. Une technologie n’est jamais isolé de son environnement et lorsqu’on conçoit un service, il est indispensable de le prendre en compte. Tout le monde sait envoyer un SMS, mais tout le monde, arrivant à Rouen sait-il qu’il peut le faire ? Si vous voulez que cette information soit sue et que le service soit utilisé, il faut aussi savoir la communiquer simplement et s’assurer qu’elle est bien captée. Un sacré challenge dans notre monde de rareté d’attention !
Les tests utilisateurs « faits maison » pêchent souvent par manque de méthodologie
De l’humble avis des spécialistes de l’UX, rien ne vaut un test utilisateur, la meilleure méthode pour bien comprendre et analyser une interface de site web ou d’application (ou d’intranet). De plus en plus employés dans les grandes entreprises, les PME-TPE restent méfiantes vis à vis d’un outil qui leur paraît coûteux et lourd à mettre en oeuvre. Et souvent la tentation est grande pour elles de faire soi même le test avec les moyens du bord.
Personne ne nie la valeur d’une approche « guerilla », comme on se plait à le dire, mais que cela n’empêche pas d’adopter un minimum de méthodes ou de contraintes. C’est souvent là que les tests utilisateurs « faits maison » pêchent.
Le recrutement des testeurs est fait parmi les collègues
Aucun protocole de test n’est écrit
La récolte des données se fait sans prise de recul
La conduite des tests est faite sans respecter le minimum des bonnes pratiques en la matière
En apparence « facile », le test utilisateur nécessite beaucoup de préparation
Les biais sont nombreux et un simple article de quelques lignes ne suffirait à les énumérer tous. Et pourtant, il ne m’est pas si rare d’entendre encore des chefs de projets, des directeurs ou d’autres responsables, balayer du revers de la main une proposition élaborée de test utilisateur en affirmant haut et fort qu’ils le feront eux mêmes, comme si cela était aussi facile que de tirer un penalty au foot.
C’est une véritable erreur de penser qu’une personne non préparée à la conduite de test utilisateur pourra arriver à tirer des résultats sensés d’une méthode qui, à première vue, parait abordable à tout le monde, mais qui, en réalité, nécessite une bonne préparation, ainsi que des techniques de conduite d’entretien et d’analyse plus poussées qu’elles n’en ont l’air à première vue.
Pourquoi cela ?
Il suffit pour se rendre compte de la difficulté de mener un test de lire l’abondante littérature qui y est consacrée. Je ne citerai que deux ouvrages qui ont ma préférence, mais qui en disent suffisamment long sur ce qu’il faut faire et en pas faire en la matière.
Rocket Surgery Made Easy, de Steve Krug (malheureusement pas traduit en français)
Méthode de design UX, par Carine Lallemand et Guillaume Gronier. Excellente compilation de nombreuses méthodes UX
N’importe quel esprit intelligent se rendra compte alors de l’inanité de vouloir conduire un test sans connaître un minimum les méthodes qui permettent de recueillir des enseignements valables.
Faut-il être un spécialiste pour faire un test utilisateur ?
La bonne nouvelle est que : non. Bien au contraire ! Tout le monde peut faire des tests à conditions de suivre la bonne méthode. Et c’est même ce que nous recommandons pour peu que les personnes menant les tests aient conscience qu’il s’agit plus de tests de routine, de validation d’interface, d’exploration, que de tests permettant d’élaborer une feuille de route d’optimisation ou de réaliser un audit complet de site internet.
La frontière entre les deux est ténue, mais elle est bien perceptible.
Tester un prototype rapidement réalisé avec 2 ou 3 personnes étrangères à votre société peut être extrêmement enrichissant.
Tester un parcours de commande sur un site ecommerce avec quelques clients (même à distance) peut vous apprendre beaucoup plus que vous ne l’imagineriez.
Oui, une équipe non experte, peut tout à fait mener ce genre de projets. Que vous soyez dans une startup, une PME ou même une petite équipe projet au sein d’un grand compte, faites-le !
Pour tout savoir sur le sujet des tests utilisateurs, découvrez notre recette 5 étoiles by Wexperience ! Pour la télécharger, cliquez ici 👈
