Retranscription des conférences

Améliorer le Design pour améliorer l'UX Laurent Demontiers

Laurent Demontiers est UX/UI designer et il nous a fait l’amitié d’ouvrir le troisième UX Deiz avec sa conférence « Améliorer le Design pour améliorer l’UX ».

L’objectif de cette conférence était de parler de l’évaluation du design dans le contexte un peu plus global de l’expérience utilisateur (UX). Elle s’articulait autour de deux axes :

  1. D’une part, la volonté de confirmer ou d’infirmer les mythes autour de l’UX, à travers une approche métier plus adaptée à notre contexte qu’un cours magistral ;
  2. D’autre part, la présentation d’outils pour effectuer des tests utilisateurs, pour l’instant très peu utilisés en France. Laurent nous a proposé une traduction française du questionnaire meCUE, un outil d’évaluation de l’UX, que vous pouvez télécharger à la fin de cet article.

Première partie : pour en finir avec les process web d’il y a 20 ans

Nombreuses sont les entreprises produisant des sites web fonctionnant selon le schéma suivant :

Étapes de validation du design (approche AMOA)
Étapes de validation du design (approche AMOA)

Or, Laurent nous a démontré que cette approche orientée AMOA, qui considère les besoins du commanditaire/du client comme prioritaires par rapport aux besoins des utilisateurs, est forcément vouée à l’échec.

A contrario, une approche orientée UX, prenant en compte les besoins des utilisateurs, est une méthode plus efficace.

Conception orientée AMOA vs. conception orientée UX
Conception orientée AMOA vs. conception orientée UX

Actuellement, les designers web subissent des process de conception irrationnels :

Imaginez que, dans un restaurant, le serveur impose au cuisinier de recommencer 3 , 4 ou 5 fois les plats destinés aux clients en fonction de ses goûts personnels. Imaginez que, durant ces allers et retours entre le serveur et le cuisinier, le client ne soit jamais questionné sur ses goûts ou ses désirs. Imaginez qu’on serve au client un plat qui ne correspond pas à ses goûts mais à ceux du serveur. Ça serait absurde n’est-ce pas ?

C’est pourtant la situation que vivent les designers sur la plupart des projets.

Les créations du designer sont généralement évaluées et modifiées par des « passe-plats » : un chef de projet, une ou plusieurs ressource(s) chez le client/commanditaire, un dircom, un responsable des ventes, une DSI… bref des ressources qui ne sont ni formées ni compétentes pour émettre un avis objectif sur le design et ses qualités hédoniques.

Au mieux leurs avis ou leur demandes de modifications seront orientées métiers, éditoriales ou fonctionnelles, au pire elles seront subjectives et arbitraires. Ce type d’organisation ne permet pas de penser le design dans de bonnes condition, il bride le designer et se construit sur des considérations qui ne viennent pas des utilisateurs.

Un problème structurel

Cette approche descendante, où un commanditaire décide des fonctionnalités du site, valide le design et impose ça aux utilisateurs en espérant qu’ils le gobent, c’est du web comme on le faisait il y a 20 ans.

Il faut savoir que 70% des projets web ne voient pas le jour. La phase de validation du design, qui est souvent prétexte à l’expression des égos, n’y est souvent pas étrangère. Laurent racontait qu’il avait travaillé pendant cinq mois sur un projet de 300 000€ de budget, où toute l’architecture de l’information et tout le contenu étaient validés, mais personne n’a validé la composition graphique, et le projet a capoté.

Ce type d’organisation descendante n’est donc pas souhaitable. En cas d’échec, tout le monde s’accorde pour dire que le responsable, c’est le designer et ses compositions graphiques, alors que le problème est structurel :

Quand tout part en vrille…
Quand tout part en vrille…

Pour une conception web orientée UX

La conception UX (User eXperience, expérience utilisateur) est à l’inverse de ce modèle obsolète : on recueille les besoins utilisateurs et on essaye de comprendre leurs modèles mentaux (on observe pour cela comment les gens interagissent avec une interface). C’est une approche montante : on part des utilisateurs et de leurs besoins, de leurs réponses émotionnelles et de leurs comportements pour construire un produit adapté.

Dans ce contexte Laurent plaide pour un abandon des séquences de validation du design par les « passe-plats ». Les subjectivités individuelles ne doivent pas piloter la conception.

Par ailleurs, Laurent fait ici un aparté et remarque que beaucoup d’agences se lancent dans la conception orientée UX en sous évaluant son impact sur les processus de production. Les processus centrés utilisateurs transfère le pouvoir décisionnaire des « chefs de », un peu vers les UX designers, mais surtout vers les utilisateurs. Beaucoup de commanditaires ne sont pas prêts à céder leur pouvoir de décision et à abandonner leur approche descendante. À l’instant des prestataires qui pratiquent les méthodes agiles, les UX designers ne peuvent appliquer leurs méthodes de conception centrées utilisateurs qu’avec des commanditaires convaincus de leurs bénéfices.

La nature des retours client

Quand on travaille avec l’ancien modèle, et que les créas sont validées par des personnes qui ne sont pas les utilisateurs finaux, on peut facilement évaluer les comportements de ces personnes et la manière dont ils sont empathiques vis-à-vis des utilisateurs.

Quand vous présentez des créas à un client qui n’a pas les compétences pour les comprendre et les valider, son comportement va en dire long :

Nature des retours client
Nature des retours client

Travailler dans le domaine du design offre une opportunité de choix pour observer l’effet Dunning-Kruger : c’est un biais cognitif selon lequel les personnes les moins qualifiées dans un domaine surestiment leurs compétences (et prennent les décisions, dans notre cas).

L’ère de la conception pilotée par les émotions/cognitions

Lorsqu’on parle de subjectivité, il y a un phénomène très connu en psycho cognitive, c’est le phénomène de la première impression. Quand on présente une composition graphique à un client, ce stimuli va être interprété par la personne de manière 100% émotionnelle, non consciente, et surtout en quelques millièmes de secondes.

La première impression dépend :

  • Du vécu émotionnel ;
  • de l’expérience ;
  • de la capacité d’extrapolation ;
  • de la culture (familiale, sociale, …) ;
  • de la capacité mémorielle ;
  • de l’inconscient.

C’est donc souvent un petit drame pour le designer qui a bossé plusieurs jours, voire plusieurs semaines sur un univers visuel, et qui voit son travail jugé en quelques instants.

Le propos de Laurent n’est pas de plaindre les designers, mais de dire que :

  • D’une part la subjectivité des utilisateurs et leur « première impression » sont inévitables. « Ça n’est pas la raison qui génère et pilote l’expérience utilisateur, mais bien l’émotion », nous dit-il.
  • D’autre part, il faut considérer les réponses émotionnelles des utilisateurs dans les processus de conception. C’est une matière première pour concevoir des produits adaptés. On ne peut pas éviter la perception des utilisateurs, par contre on doit l’analyser, en tenir compte et l’utiliser.

Schtroumpf grognon n'aime pas le bleu

Schtroumpf grognon exprime un avis subjectif. Son avis doit-il prévaloir sur la perception moyenne des utilisateurs cibles ?

Processus d’amélioration de la perception

On ne peut pas non plus changer une conviction dictée par l’émotion. Par contre, on peut essayer d’améliorer la perception de l’utilisateur. Pour cela, Laurent a mis au point un petit framework en quatre étapes.

  1. Recherche : c’est une phase pendant laquelle on recherche les moments où les émotions et les cognitions négatives apparaissent dans un parcours de navigation. Des tests ont montré que pour l’utilisateur, les moments les plus agréables sur un site web sont les moments de recherche et d’exploration ; mais que le moment le plus désagréable est (sans surprise) est le règlement du panier. Les émotions évoluent donc au fur et à mesure du parcours de navigation de l’utilisateur.
  2. Évaluation : on va ensuite identifier la nature et l’intensité des émotions et cognitions ressenties, puis analyser cette perception dans le temps. Un site peut provoquer certaines émotions, mais si l’utilisateur a l’habitude de visiter ce site, ses émotions peuvent évoluer dans le temps.
  3. Hypothèses : une fois ce travail effectué, on émet des hypothèses sur ce qui cause ces émotions et cognitions négatives.
  4. Implémentation : enfin, on imagine et on implémente des solutions pour corriger ces problèmes de perception.

Penser l’UX plus que le fonctionnel

Les chercheurs Van Boven et Gilovich ont établi que la consommation d’expériences génère plus de plaisir que la possession de biens. D’autres remarquent qu’on est passé d’une ère de consommation matérialiste à une ère de consommation expérientielle.

Ce qui fait la différence entre deux systèmes aujourd’hui, ce n’est pas pas le fonctionnel mais bien la qualité de l’expérience vécue.

Nous, concepteurs d’interfaces, devons donc passer d’une conception pilotée par le fonctionnel à une conception pilotée par les émotions, puisse que c’est ce qui compte pour l’utilisateur. Il faut qu’on s’attache davantage aux émotions des gens, à leur expérience vécue ; le fonctionnel n’est pas le plus important : ça participe à l’expérience, mais ce n’est pas l’essentiel.

Usability vs Delight : quand je vais au restaurant, je n’ai pas simplement envie de manger un plat comestible. Si je vais au restaurant, c’est pour vivre une expérience délicieuse et mémorable.

De la même manière les concepteurs ne peuvent plus se cantonner à concevoir des sites juste utilisables et fonctionnels. Ça n’est pas suffisant. Il faut intégrer une dimension émotionnelle, la perception de l’expérience vécue par les utilisateurs, et chercher à l’améliorer pour leur proposer des expériences toujours plus mémorables.

Classification des émotions

Pourquoi est-ce difficile de recueillir les émotions ?

  • Il faut un contexte d’usage réaliste pour générer les mêmes émotions et les mêmes cognitions qu’en usage réel. C’est donc nul de tenter de reproduire en laboratoire des conditions d’utilisation réelles.
  • L’expérience est subjective et compliquée à recueillir, en particulier si on travaille avec des enfants.
  • L’expérience est compliquée à exprimer/verbaliser pour l’utilisateur.
  • L’expérience utilisateur est dynamique (elle évolue avec le temps) et doit être étudiée sur le long terme.
  • Les émotions doivent être correctement interprétées.

Pour recueillir les émotions perçues lors d’une expérience d’usage, idéalement, il faut donc :

  • De « vrais » utilisateurs.
  • Des scénarios d’usages réalistes.
  • Pas d’ajout d’instruments physiques sur l’utilisateur (attention aux casques ou lunettes d’eye tracking).
  • Un contexte physique non restreint.
  • L’utilisateur doit garder son intégrité physique.
  • Le chercheur/modérateur ne doit pas être visible, ou bien, l’utilisateur ne doit pas être conscient qu’il est observé.

Seconde partie : Quelques outils

Les outils d’échelle de l’UX

Les questionnaires d’auto évaluation font parti des instruments les plus utilisés pour évaluer l’UX. Grâce à ces échelles, on sait rapidement si le système que l’on a conçu est perçu par les utilisateurs comme attractif, efficace, claire, fiable, stimulant, ou encore innovant.

Les outils d’échelle les plus connus sont :

  • Attrakdiff.
  • Le questionnaire meCUE (l’acronyme signifie : Modular Evaluation of the User Experience Components, soit « Évaluation Modulaire des Composantes de l’Expérience Utilisateur » en français). Ce questionnaire est modulaire car il contient plusieurs lots de questions.
  • Le User experience questionnaire.

Ces questionnaires sont standardisés, c’est à dire que leurs qualités psychométriques sont validées et fidèles aux objectifs visés par le test.

AttrakDiff

L’AttrakDiff est un questionnaire standardisé d’évaluation de l’expérience utilisateur (UX). Il a été développé par Hassenzahl, Burmester et Koller en 2003. Il est basé sur le modèle théorique d’Hassenzahl.

AttrakDiff est actuellement exploité par la société allemande User Interface Design GmbH, qui propose la passation en ligne gratuitement (en allemand et en anglais) sur son site.

La version française de l’AttrakDiff a été réalisée et validée par Carine Lallemand et ses collègues en 2015.

Le modèle théorique d’Hassenzahl

Selon ce modèle théorique, les utilisateurs perçoivent les produits interactifs selon deux dimensions :

  • Les qualités pragmatiques : capacité à soutenir l’accomplissement de « do-goals » (tâches / objectifs d’action).
    • Focus sur le produit (utilité, utilisabilité, réalisation des tâches).
    • Un produit perçu comme ayant de bonnes qualités pragmatiques sera structuré, clair, contrôlable, efficace, pratique, etc.
    • Exemples « do-goals » : passer un appel, trouver un livre dans une librairie online, commander un article…
  • Les qualités hédoniques : représentent les capacités à soutenir l’accomplissement de « be-goals ».
    • Focus sur le soi (pourquoi on possède et on utilise un produit particulier).
    • Un produit perçu comme ayant de bonnes qualités hédoniques sera original, créatif, captivant (versant hédonique – stimulation) ou encore présentable, professionnel, de bon goût, qui me rapproche des autres (versant hédonique – identification).
    • Exemples « be-goals » : être compétent, être en relation avec les autres, être spécial, se sentir fort ou intelligent, ou encore populaire …
Le questionnaire meCUE

Développé en 2013 par Minge et Riedel, le questionnaire meCUE est basé sur le modèle des composantes de l’UX de Thüring et Mahlke (CUE model – 2007) et comporte 34 questions répartis en 4 modules :

  • Perception du produit (15 questions) : utilité, utilisabilité, esthétique, statut, engagement.
  • Émotions (12 questions) : émotions positives, émotions négatives.
  • Conséquences de l’usage (6 questions) : intention d’usage, loyauté au produit.
  • Évaluation globale (une question) : jugement global.

Questionnaire meCUE

Les questions sont présentées dans un ordre spécifique, selon un format spécifique, et suivant des règles spécifiques pour produire des métriques basées sur les réponses des participants.

Ne manquez pas les slides de Laurent pour voir des exemples de passation et de notation.

Traduction française du questionnaire meCUE

Laurent a réalisé une traduction libre des 34 questions du questionnaire meCUE que vous pouvez télécharger.

Attention cette traduction est une traduction « libre » ; les qualités psychométriques de cette traduction n’ont pas été vérifiées. L’utilisation de cette traduction relève donc de la responsabilité de chacun.

  • Dans le fichier 2016-04-07_atelier-meCUE_Passation.candidats.pdf vous trouverez les indications de passation destinées aux testeurs.
  • Dans le fichier 2016-04-07_infos.passation-meCUE.pdf vous trouverez les indications de passation réservées aux modérateurs.
  • La feuille de calcul 2016-05-30_datas-meCUE-FR.xls permet de calculer automatiquement les scorings.

Conclusion

Il existe toujours une controverse sur la façon dont les émotions humaines peuvent être recueillies ou analysées. Par exemple, un utilisateur qui connaît l’interface testée va avoir un rapport émotionnel différent avec l’interface que celui qui vient juste de débarquer. Cependant, les tests proposés aujourd’hui n’en tiennent pas encore compte. Laurent est rarement content des outils de tests existants. Tous demanderaient une adaptation au contexte du test en cours.

Cependant, même incomplètes et controversés les scorings donnent aux concepteurs des informations sur les propriétés expérientielles des produits. Il vaut mieux des tests incomplets que pas de tests du tout.

Pensez aussi à corréler vos résultats grâce à plusieurs méthodes de collecte de données (principe de la triangulation).

Faites des tests, utilisez les méthodos et outils UX pour aider à concevoir des choses bien mieux que ce que ce que vous faites aujourd’hui. Il faut arriver à produire un design justifié devant ses clients, en garantissant que le design proposé est meilleur que le précédent.

Ressources :

UX et cycle de vie produit Frédéric Coquelin et Stéphanie Chaussé-Vaillant

Stéphanie Chaussé-Vaillant et Frédéric Coquelin sont respectivement web designer et développeur front-end chez RegionsJob, éditeur de sites dédiés à la recherche d’emploi.

Ils nous proposent de les suivre dans leur process de travail et l’intégration de l’expérience l’utilisateur avec leur conférence UX et cycle de vie produit.

Un produit, deux profils d’utilisateur

Chez RegionsJob, ce sont deux utilisateurs aux attentes très différentes qui se retrouvent au sein des même produits : les candidats à une proposition d’emploi et les recruteurs. Totalement développés en interne, leurs produits sont réalisés par une équipe composée d’un chef de produit, d’un web designer, d’un développeur front-end et enfin d’un à trois développeurs back-end.

Il faut savoir que ce fonctionnement en équipe produit n’a pas toujours été la norme. Au départ chaque métier travaillait de manière très segmenté, aussi bien du point de vue de la méthodologie (fonctionnement en silo) que leur emplacement « géographique« .

Les web designers dans leur bureau, les développeurs back-end de leur côté et les front-end de l’autre. Une segmentation qui impactait fatalement la qualité du produit final et démontrait bien les limites d’une organisation par métier (plus de latence, moins de communication, moins de valorisation des expertises de chacun).

Changer son workflow pour améliorer l’UX

À la lumière de ces limitations, ils ont du imaginer une réorganisation fédératrice, afin d’avoir une équipe unie tout au long du cycle de vie produit. À présent Stéphanie et Frédéric travaillent côte à côte, sur un plateau qui réunit développeurs, chefs produit et web designers.

Le worflow de Région Job

Outre l’avantage de resserrer les relations naturelles entre les métiers, ce fonctionnement fluidifie de beaucoup les échanges sur les questions de faisabilité, qu’elles soient techniques, interactives ou graphiques. Issue des méthodes Agile, chaque matinée commence de plus par une « mêlée », échanges informels permettant de savoir qui travaille sur quoi en permanence.

Explorer le comportement des utilisateurs

Après ce petit (mais crucial) point organisationnel, Stéphanie et Frédéric sont entrés dans le vif du sujet en nous exposant le cycle de vie de leurs produits et sa première étape de travail : l’exploration.

Le cycle de vie d'un produit

Une phase d’exploration qui vise à connaître les utilisateurs et leur usages, de plusieurs manière :

  • Avoir des chiffres sur les pages d’entrée, de sortie, les supports de navigation utilisés, les pages qui ont le plus grand taux de rebond, grâce à Google Analytics.
  • Visualiser ces comportements grâce à Yandex, moteur de recherche russe proposant des outils d’analyse gratuits, comme des cartes de chaleur, de clic, de scroll.
  • Enfin, analyser des comportements utilisateurs grâce à des tests utilisateurs.

Même si pour le moment, il n’y a pas de budget alloué aux tests utilisateur chez RegionsJob, Stéphanie et Frédéric réussissent tout de même à en organiser. Fort de la centaine de salariés présents au siège et de leurs profils très différents, ils arrivent à sélectionner ceux qui correspondent à leurs utilisateurs, en fonction de chaque produit. La masse de profils permettant de ne jamais interroger deux fois la même personne.

Ensuite, c’est la création des personas, ces utilisateurs types en fonction de chaque produit, afin de garder une trace de leurs besoins tout au long du projet.

Concevoir de multiples solutions

Grâce à ces analyses, il est temps de réaliser des wireframes, maquettes fonctionnelles totalement dénuées de tout élément graphique (choix de typo ou de couleur). Tout simplement pour attirer l’attention sur le fonctionnel et éviter l’effet trop bien connu du « j’aime pas le vert ».

Sur ces wireframes, on va s’atteler à travailler le fonctionnel, et Stéphanie et Frédéric nous recommandent de commencer sur le… papier ! Car il permet de schématiser beaucoup de choses très rapidement, de poser les premières idées, d’échanger, de commenter. Surtout, le combo papier/crayon, tout le monde sait l’utiliser ! Pas de problème de frein à l’utilisation d’outils trop évolués, ainsi tout le monde participe.

Des exemples de wireframes papiers

Bien sûr des outils informatiques existent (Balsamiq par exemple) et permettent de repérer des choses que l’on n’avait pas vues sur le papier, afin d’affiner encore les aspects fonctionnels.

A ce stade, Stéphanie et Frédéric nous expliquent qu’ils peuvent faire de nouveaux tests utilisateurs, mais pas systématiquement. Tout dépend des évolutions qu’ils veulent apporter au produit. Dans le cas d’une refonte totale, il y aura beaucoup plus de tests que s’ils souhaitent améliorer une fonctionnalité unique.

Encore une fois, ils soulignent le fait qu’il est très important que tout le monde communique les uns avec les autres au sein de l’équipe, pour avoir la meilleure traduction possible du produit par rapport aux attentes utilisateurs qui ont été définies.

Construire l’interface

Un fois cette boîte à outils bien garnie, c’est l’heure de la production de l’interface. Le partage de cette phase s’effectue grâce à l’utilisation d’InVision, application web permettant de faire prendre connaissance des maquettes aux développeurs (front et back) très tôt. Précédemment, ils recevaient les pages intégrées statiques sans avoir vu aucun écran, ce qui évidement posait de multiples problèmes de communication quand à la concrétisation des idées initiales.

Un exemple de styleguide

Autres outils récurrents à présent pour Stéphanie et Frédéric, les guidelines, soit une encyclopédie de l’ensembles des styles et interactions du site, et les styles guides, rassemblant les différents blocs qui composent le site. Toujours dans cette optique de communication, car permettant aux développeurs (là aussi front comme back) de piocher les éléments dont ils ont besoin, en concertation avec le designer.

Analyser les résultats… et recommencer !

À nouveau, Stéphanie et Frédéric nous sensibilisent à la possibilité de tests utilisateurs : vérifier si le wording est bon, que les messages sont bien compris, que la navigation se passe bien, afin de pouvoir ajuster l’ensemble avant la mise en ligne.

Une fois cette dernière effectuée, il est temps de passer à la phase d’évolution du produit grâce à une phase d’analyse, permise grâce à des tests A/B, permettant de challenger deux versions d’une fonctionnalité, voire d’une page entière. Kameleoon par exemple est un outil idéal pour conduire ce type de test.

ab-testing

Le produit est en ligne, il y a sûrement également des statistiques à analyser (comme précédemment, via Google Analytics et Yandex par exemple). Une hygiène importante pour démystifier certaines légendes : contrairement à ce qu’on croit par exemple, les articles sur internet sont lus et les gens cliquent énormément sur les liens contenus dans le corps des articles.

Et voilà, en un mois de travail tout le cycle de vie a été réalisé. Il est important de comprendre que L’UX intervient pendant plusieurs étapes de la vie produit, ce n’est pas juste une brique que l’on pose au début du projet. Et chaque étape fait intervenir l’ensemble de l’équipe, ce n’est pas le travail d’une seule personne.

L’exemple de Cadreo

Stéphanie et Frédéric ont souhaité terminer sur un exemple projet, la refonte du compte utilisateur de Cadreo. Ils s’étaient rendus compte que le site ne parlait pas à l’utilisateur, et qu’il y avait de gros problèmes de performances.

À l’époque où ça communiquait moins en interne, le design était joli mais le designer n’avait pas idée de tout ce que cela impliquait en terme de performance d’affichage. Grâce à l’application de leur cycle de vie produit, ils communiquent beaucoup plus désormais, ce qui a permis de réaliser une nouvelle interface plus intuitive et performante, à travers des messages plus humain à destination de l’utilisateur ainsi que des éléments graphiques forts immédiatement compréhensibles.

Résultat : aujourd’hui sur Cadreo, c’est 97% des comptes utilisateur qui sont validés, contre 77% auparavant, grâce notamment à la façon dont ils parlent aux candidats dans l’interface et dans les e-mails qu’on leur envoie… Une manière différente de parler pour Cadreo qui semble bien lui réussir.

Quelles évolutions pour demain ?

Au-delà de ce cycle produit qui place l’utilisateur au centre de sa conception, aura-t-on un jour un web différent en fonction de nos comportements ? Le site ne s’adressant pas à moi de la même façon au fur et à mesure de mes visites par exemple. C’est ce qu’Adrien, développeur back-end chez RegionsJob — et convaincu de la démarche de design UX — a commencé à explorer. Il nous a notamment parlé d’eye tracking, une technique qui permettra de proposer des interfaces et des contenus différents en fonction de nos précédents comportements sur le site web.

Le temps des questions

Cela passera aussi par des offres d’emploi recommandées en fonction de celles qui ont déjà été consultées; Par exemple : si un utilisateur a postulé à une offre, c’est évidemment beaucoup plus fort que s’il l’a simplement lue. Par conséquent, sur la page d’accueil du produit, il sera possible de mettre en avant un bout d’interface qui sera différent en fonction cette expérience précédente.

Ressources :