Mettre en place l’expérience utilisateur : une étude de cas
Par Simon White
Quand de vieilles habitudes sont bien installées, il n’est pas facile d’appliquer de nouvelles méthodes : chaque étape d’un processus devient une nouveauté pour les parties prenantes. Certaines personnes aiment la nouveauté, d’autres non. Mais tout le monde doit embarquer dans le même bateau pour qu’une nouvelle approche de travail fonctionne.
Voici une analyse de comment nous avons mis en place l’expérience utilisateur dans ma société.
L’illustration 1 montre notre progression à partir de l’ancienne page jusqu’au prototype que nous avons testé pour la nouvelle page.
Illustration 1—Évolution de l’expérience utilisateur
J’ai été récemment recruté pour monter une équipe chargée de l’expérience utilisateur pour un site e-commerce français majeur.
Avant mon arrivée, l’expérience utilisateur était vaguement le fait de quelques volontaires. L’équipe comprenait des chefs de projets, des rédacteurs de spécifications fonctionnelles et techniques et un graphiste freelance auto-proclamé expert en ergonomie. Quand ce comité était incapable de trouver un consensus sur un design final, certaines décisions étaient soumises à un vote, et les autres étaient acceptées par défaut car il ne restait plus de temps pour des itérations dans le temps alloué au développement. Aucun plan ou processus n’avait été établi pour un design centré sur l’utilisateur — ni pour des itérations de design ou de test.
L’expérience utilisateur est une discipline qui peut s’appliquer partout. Mais pour que l’expérience utilisateur gagne assez de terrain et qu’une structure ait une équipe UX respectée, il faut d’abord surmonter quelques obstacles.
Il serait inexact de dire qu’avant la création d’une unité de gestion de l’expérience utilisateur dans une structure, aucun travail n’était fait à ce niveau. Toutefois, le travail était probablement hétérogène et décentralisé.
Rassembler une équipe dédiée à l’expérience utilisateur, créer un esprit d’équipe et faire une priorité pour l’équipe est un processus lent et constant. Vous ne pouvez pas simplement vous lancer et espérer que tout fonctionne bien du premier coup.
Avec la mise en place d’une équipe dédiée à l’expérience utilisateur, certains pourraient s’attendre à ce que d’une certaine manière, toutes les réponses qu’ils cherchaient apparaissent soudain comme par enchantement. Adopter une démarche d’expérience utilisateur ne se réduit pas à simplement trouver des réponses, ce serait plutôt de proposer des méthodes de travail et de créer des structures pour un meilleur processus de design.
Donc, pour commencer, j’ai beaucoup écouté durant les réunions à propos des prochaines échéances de livraison et j’ai travaillé avec le graphiste préposé.
Il est important d’identifier qui tient les ficelles de la prise de décision, et qui tire dessus le plus souvent. Il est également crucial d’apprendre à connaître le marché cible, d’éviter les obstacles qui vous empêchent de faire des recommandations économiquement viables — et prendre note de ceux à franchir — et en cours de route, de travailler avec les équipes informatiques ou les architectes logiciels.
En assistant à toutes ces réunions et en écoutant attentivement, j’ai pu prévoir plusieurs cas de figure. J’ai ensuite effectué des suivis avec les équipes proches de l’UX, surtout le chef de produit et l’équipe des développeurs front-end —ceux qui sont chargés des choses comme le HTML, le JavaScript et les CSS. Alors que je commençais petit à petit à comprendre qui travaillait déjà sur l’expérience utilisateur, j’ai réussi à embaucher dans mon équipe un consultant en ergonomie (spécialisé dans les études d’eye-tracking et d’utilisabilité), qui travaillait sur un autre projet interne, ainsi qu’un autre employé du service Marketing qui travaillait sur des tests sur les bonnes pratiques en termes d’interface utilisateur.
Avec ces nouvelles recrues dans l’équipe UX, nous avons commencé à avoir une certaine reconnaissance et à pouvoir traiter plus de demandes relatives à la recherche sur l’expérience utilisateur et aux services de design. Nous avons ainsi pu commencer à centraliser notre processus de design.
Les piliers de l’expérience utilisateur
Pour le e-commerce, il y a trois piliers pour rendre opérationnelle une équipe UX : l’architecture de l’information, l’ergonomie et le design graphique. J’avais maintenant deux de ces compétences couvertes et je devais donc justifier le recrutement d’un architecte de l’information. J’ai fait une présentation qui montrait comment mon équipe pouvait améliorer notre processus de design et de validation en ajoutant cet élément.
En utilisant comme éléments de départ l’ensemble des exigences du marketing qui définissent le rédactionnel, les images et les priorités pour chaque information, l’architecture de l’information nous permettrait de livrer des wireframes de pages et de préciser leurs zones de contenu. Ensuite, les ergonomes feraient des études d’utilisabilité, nous permettant de faire des recommandations pour améliorer les interactions. Enfin, nos designers pourraient concevoir les maquettes finales. Une fois notre architecte de l’information engagé, j’avais donc les différents rôles/métiers de la chaîne de design dont j’avais besoin.
L’étape suivante consistait à communiquer et activer la méthodologie que je voulais implémenter. J’ai fait quelques calculs simples et présenté un dossier pour le recrutement d’un concepteur graphique en interne, à la place d’un important budget pour un freelance. Nous payions de toute façon un graphiste freelance pour un quasi temps-complet, mais avions rarement des moments de confrontation directe avec lui. Cela signifiait que nos efforts pour présenter nos résultats de recherche pouvaient être désynchronisés de nos objectifs. Un bon concepteur graphique en interne peut faire une grande différence pour la réputation d’une équipe UX car le résultat final que nous produisons doit être en adéquation absolue avec l’identité de l’entreprise et la philosophie de l’expérience utilisateur.
Bouleversement des cultures
Une fois notre équipe UX en place, le difficile processus du changement de culture commençait. Nous avions besoin de modifier les attentes à propos des livrables fournis à chaque étape du projet.
Lors de mon arrivée dans l’entreprise, les distinctions entre les différents rôles étaient floues : on attendait d’une seule personne de l’équipe qu’elle puisse remplir tous les rôles. Les designers avaient toujours livré des maquettes de page avec un aspect fini car « c’est la seule façon de pouvoir réagir à votre travail ».
Je sais qu’il est difficile pour beaucoup de personnes sans expérience du design de réagir à des croquis non définitifs et des wireframes, mais j’ai commencé à vendre la valeur de ces brouillons de travail comme un moyen de terminer les itérations de conception initiale, sans considérations étrangères comme les palettes de couleurs (un choix toujours délicat), le positionnement précis des éléments dans la page et des éléments graphiques aboutis.
Cela a permis d’expliquer que valider des wireframes n’est pas la même chose que valider un design final. Car en fin de compte, les prototypes et les wireframes ne déclenchent pas autant de réactions qu’une maquette finie. Ils aident surtout les gens — y compris les utilisateurs qui participent aux tests d’utilisabilité — à réagir aux problèmes majeurs, mais également à fournir de vrais contenus avant de représenter les pages dans un format qui prennent à notre seule ressource — le designer graphique — plus de temps à modifier.
Le véritable changement, c’est qu’on ne se focalise plus sur la seule conception graphique mais vers une méthodologie centrée sur l’expérience utilisateur. Beaucoup d’agences françaises ont une excellente réputation et de superbes créations graphiques à leur actif. Les produits de luxe et de la haute couture ont une forte composante visuelle où les images de qualité dominent. Passer de cette tradition à des sites web utilisables est, à mon avis, un métier à part entière.
La conception du scénario de navigation doit faire passer l’utilisabilité et les fonctionnalités avant la forme ; les contenus complexes doivent s’appuyer sur des compétences éditoriales ainsi que sur une profonde compréhension des contraintes du média Web.
Au final, il est bien plus simple de créer des mises en page fluides, une architecture de l’information solide et des scénarios de navigation avant d’ajouter la touche graphique.
Traditionnellement, les agences vendent d’abord un concept visuel, sur lequel il peut être étonnamment difficile d’ajouter à posteriori une bonne expérience utilisateur malgré une belle apparence graphique. Bien sûr, le débat sous-jacent de la prévalence de la forme sur le fond n’est pas limité au web. (Nous pouvons tous tirer des enseignements du design industriel, en particulier des interfaces utilisateur des systèmes embarqués et, bien sûr, des modèles classiques de télécommande, des interfaces dans l’électronique et des tableaux de bord des voitures.)
Tests itératifs et design
Avec des wireframes, vous n’êtes plus esclave de la perfection au pixel près comme le montre l’illustration 2. Leur aspect inachevé fait partie de leurs avantages. Les tests utilisateurs avec les wireframes nous ont permis d’identifier des obstacles potentiels et des pièges dans les designs avant d’avoir investi beaucoup de temps dans Photoshop.
Avant mon arrivée, l’entreprise considérait typiquement que les tests d’utilisabilité étaient la dernière étape avant l’intégration du design final, ce qui permettait de valider avec succès le design de l’interface, l’apparence et l’ambiance générale. J’ai fait le forcing pour déplacer les tests utilisateurs plus en amont du processus.
En fait je pense que les tests d’utilisabilité sont bien plus efficaces pour pointer ce qui ne marche pas, plutôt que ce qui marche. C’est pour cela que tester à la fin d’un cycle de développement est plus à même d’apporter de mauvaises nouvelles et de mettre tout le monde en panique.
Illustration 2— Du wireframe au design final
Pour tirer le meilleur des tests d’utilisabilité — même si des tests au mauvais moment sont toujours mieux que pas de tests du tout — il faut non seulement tester tôt mais aussi tester souvent. Les outils de design sont assez souples pour permettre des changement rapides et faciliter des tests fréquents. Comme bon nombre de collègues nous utilisons Axure, ce qui nous permet de l’utiliser pour d’autres aspects, en particulier lors de la phase de spécifications. Sur certains projets couronnés de succès, nous avons été en mesure d’utiliser Axure pour valider un grand nombre d’hypothèses grâce aux tests d’utilisabilité et donc de passer plus de temps sur le design final, sans avoir à jongler entre les différents modèles d’interactions.
Nous sommes même parvenus à changer des modèles d’interaction et à modifier des élément du design qui clairement ne marchaient pas, après avoir testé un modèle avec seulement deux utilisateurs — juste avant qu’un troisième ne rejoigne la séance de test. Vous pouvez constater que quelque chose fait barrage pendant un processus d’achat si vos deux utilisateurs deviennent hésitants et s’arrêtent au même endroit devant l’écran, en disant des choses similaires à son propos — souvent quelque chose comme « Je ne comprends pas. Je ne suis pas sûr de savoir ce que je dois faire pour terminer cette étape. »
Identifier qui étaient vraiment les décideurs haut placés pour les problèmes de conception et retarder un peu plus leur intervention dans le processus de conception a beaucoup aidé aussi. Trop de retours sur des détails mineurs pendant les premières étapes peut vraiment ralentir le processus de design et augmenter les coûts.
Par exemple, avoir beaucoup trop de texte sur une page peut susciter une réponse comme « Nous pourrions créer plein d’icônes ». Le design d’icônes est un travail spécifique et le faire correctement demande beaucoup de temps — c’est particulièrement du au fait que chaque icône que vous produisez doit passer la chaîne de validation et être testée pour s’assurer que les utilisateurs la comprennent.
Concevoir des icônes est un art difficile. Vous devez créer de petites représentations symboliques de quelque chose et de parvenir à trouver un consensus universel quant à leur signification, comme le montre l’illustration 3. Plus une opinion viendra d’en haut de la hiérarchie, plus il sera difficile de ne pas ajouter cette opinion sur une liste de variantes que vous devrez tester.
Illustration 3—Concevoir les icônes
Consolider et rationaliser
Avec quelques petites victoires comme la création de wireframes en couleur, l’utilisation judicieuse des croquis sur papier et le travail en amont de la chaîne de conception alors que la gestion de produit était encore en train de rédiger les spécifications, nous avons progressivement réussi à gagner du terrain sur le planning du projet.
Il est essentiel que l’UX soit consulté très tôt dans un projet. Faute de quoi vous pourriez hériter de décisions de design malheureuses ou même de maquettes à part entière que d’autres auront créés et qu’on vous demande juste de valider.
Parfois il n’y a rien à redire au travail livré par un autre service, mais quand ce n’est pas le cas il est difficile d’annoncer à quelqu’un que son travail ne va pas, même si vous vous appuyez sur des guides de design graphique ou de bonnes pratiques de conception d’interface utilisateur. Nous avons commencé à documenter ces aspects car ils aident à expliquer les défauts dans un modèle de navigation ou à montrer comment un modèle existant pourrait fonctionner au moins aussi bien tout en étant compatible avec d’autres pages. (Malheureusement, nombreux sont ceux qui aiment réinventer la roue.)
Au début, vous aurez probablement à laisser partir en ligne certains projets mineurs auxquels l’équipe UX n’aura que très peu contribué pour concentrer votre énergie sur la prochaine itération et la consolidation de la cohérence globale des éléments du site.
Par exemple, en fonction d’où se trouvent les utilisateurs sur notre site, il y avait différents designs de formulaire qui demandaient la même information. L’ordre des champs était différent, les règles typographiques et les alignements partaient dans tous les sens. Dans un résumé des articles commandés qu’on retrouvait sur différentes pages, l’affichage n’était pas le même pour des produits similaires. Les nouveaux styles issus des projets récents cohabitaient avec les anciens styles sur le site.
Nous avons consolidé cette information et proposé un modèle qui fonctionnerait partout, qui pourrait évoluer sur l’ensemble du site par la même occasion et qui procurerait une expérience utilisateur fluide pour les clients qui naviguent sur différentes pages du site, en fonction de la tâche en cours.
La charte graphique
Changer l’apparence de la totalité du site … nous a donné l’opportunité de travailler sur la charte graphique et sur l’identité de l’entreprise — et plus particulièrement en ce qui concerne les styles appliqués au web.
Alors que nous commencions à rationaliser certaines pratiques de conception des interface utilisateur, un gros projet est arrivé : redesigner la totalité du site. Cela nous a permis de travailler sur la charte graphique et l’identité de l’entreprise — en particulier sur les styles appliqués sur le web. On pourrait dédier un gros budget à une agence de communication pour créer l’identité de l’entreprise, mais il est rare que de tels documents de conception — qui distillent l’essence d’une marque et sont un travail difficile, d’où leur coût — couvrent tous les aspects d’un site web. Nous avions déjà créé quelques documents de référence, rationalisé certains éléments de l’interface utilisateur comme des patrons de conception (appelés design patterns). En utilisant la nouvelle identité de l’entreprise, nous avons enrichi la charte de conception avec des motifs de design d’interface utilisateur, inclus des références de couleurs comme le montre l’illustration 4, des modèles de références, et des jeux d’icônes.
Illustration 4— Création d’une palette chromatique
Un autre document, créé en collaboration avec l’équipe de développement de l’interface, couvre les détails plus techniques ; notamment une FAQ sur l’accessibilité et notre charte graphique officielle. L’expérience utilisateur doit prendre en compte les personnes qui se connectent depuis différents terminaux, y compris les lecteurs d’écran ou les plages Braille. Il est important de prendre en compte l’accessibilité numérique aussi tôt que possible, et les guides d’accessibilité doivent devenir un sous-ensemble de nos bonnes pratiques UX.
La création d’un tel document signifie que nous pouvons répondre à un nombre de questions croissant en pointant vers une page du wiki regroupant des articles de référence. Nous avions couvert suffisamment de terrain dans la charte graphique pour pouvoir expliquer pourquoi nous avons fait certains choix devant un public qui ne cesse de grandir. Cela a permis de promouvoir progressivement notre méthodologie UX, en particulier en incluant l’équipe UX et la réflexion sur le design aussi tôt que possible dans les réunions sur les nouveaux projets.
L’équipe UX est le point central pour les compétences liées à l’expérience utilisateur, mais nous n’avons pas le monopole des réflexions en terme de design. Tout le monde doit penser en terme d’expérience utilisateur et j’ai invité d’autres personnes à utiliser nos documents. Tant que nous somme consultés avant la mise en ligne de ce qui s’éloigne de nos recommandations, nous n’avons aucune raison d’être considérés comme un goulot d’étranglement pour le développement du site.
Renommer l’équipe pour la France
Comme les termes « Architecture de l’information » et « Expérience Utilisateur » ne signifient pas grand-chose pour les autres équipes de l’entreprise, mon équipe s’appelle maintenant « Design et UX ». Je ne pense pas qu’il soit nécessaire de distinguer les deux disciplines, et design est un mot que les gens comprennent mieux.
Aux États-Unis, on connaît bien certains vice-présidents de l’Expérience Utilisateur : Marissa Mayer chez Google et Margret Schmidt chez TiVO, par exemple. Des postes de management d’un tel niveau deviennent de plus en plus répandus, et les postes de CXO (Chief Experience Officer, Directeur de l’Expérience en Chef) deviennent courants.
Au Royaume-Uni, Site Manager et maintenant User Experience et Site Optimization sont des postes clés, et ces responsabilités existent comme entités indépendantes. Auparavant, je travaillais avec le groupe Travelocity en tant que Site Manager pour la France sur lastminute.com et, par conséquent, j’étais dans le cadre d’un business model US/UK où le Web est probablement plus mûr.
Sur le marché français où je travaille désormais, promouvoir l’expérience utilisateur est un challenge. Comme je l’ai évoqué plus tôt, la culture du design n’est pas le problème, mais plutôt le marché qui, dans son ensemble, est en retard lorsqu’il s’agit de formaliser les méthodes UX pour le design web. C’est pourquoi j’ai eu un réel plaisir à travailler avec voyages-scnf.com — une belle marque avec un produit simple, mais si complexe à vendre en ligne — et à y promouvoir l’expérience utilisateur, pour permettre à leur profonde connaissance de l’industrie et à leur offre de briller en ligne.
http://uxmatters.com/mt/archives/2011/09/bootstrapping-ux-a-case-study.php