Le design d’ex­pé­rience uti­li­sa­teur : pour une uti­li­sa­tion optimale

Si vous avez déjà cherché dé­ses­pé­ré­ment l’icône menu d’un site Web, vous savez à quoi ressemble le contraire d'une bonne ex­pé­rience uti­li­sa­teur, appelée aussi UX design. Comment est-il possible d’améliorer ce type de problèmes ? Qu'est-ce que le UX design et pourquoi est-ce si important ? Quelle est la dif­fé­rence entre UX et UI (interface uti­li­sa­teur, de l’anglais user interface) ?

Voici les es­sen­tiels à connaître sur l’ex­pé­rience uti­li­sa­teur, ainsi que des exemples réussis d’UX design.

Le terme ex­pé­rience uti­li­sa­teur est depuis longtemps in­con­tour­nable chez les Web designers. Cependant, il manque une dé­fi­ni­tion simple qui mettrait tout le monde d’accord. Mais afin de fournir à vos uti­li­sa­teurs une ex­pé­rience parfaite avec votre logiciel ou sur votre site Web, vous devez d'abord savoir ce qu'est un bon design d'ex­pé­rience uti­li­sa­teur, et ce qu'est une ex­pé­rience uti­li­sa­teur : UX cor­res­pond à l’ex­pé­rience émo­tion­nelle vécue par un uti­li­sa­teur lorsqu’il navigue sur un site Web, une ap­pli­ca­tion ou un programme. Le design UX exige d’abord de connaître la cible à laquelle il s’adresse, ainsi que ses exigences, afin de combiner une interface uti­li­sa­teur at­trayante et une fonc­tion­na­lité orientée vers la cible.

L'ar­chi­tecte romain Vitruve (Marcus Vitruvius Pollio) avait déjà identifié, au premier siècle avant Jésus-Christ, les ca­rac­té­ris­tiques qu’un produit doit avoir pour garantir une bonne ex­pé­rience uti­li­sa­teur. À cette époque, il mentionne les trois termes suivants : firmitas (force ou fermeté), utilitas (uti­li­sa­bi­lité) et venustas (beauté), comme com­po­santes né­ces­saires pour apprécier plei­ne­ment un bâtiment. Bien qu’il n’ait évi­dem­ment pas utilisé nos nouveaux termes à l’époque, le principe est identique à celui d'un bon design d’ex­pé­rience uti­li­sa­teur, et s'ap­plique toujours plus de 2000 ans plus tard, que l’on souhaite lancer un site Web, faire une ap­pli­ca­tion ou pro­gram­mer un jeu vidéo.

1. C’est d’abord la fonc­tion­na­lité qu’il faut prendre en compte. Ceci signifie sim­ple­ment que votre produit doit fonc­tion­ner. Les bugs, les temps d'arrêt et les attentes in­ter­mi­nables lors du char­ge­ment sont interdits pour une bonne ex­pé­rience uti­li­sa­teur ! L'uti­li­sa­teur doit pouvoir compter sur votre produit. Si ce n’est pas le cas, il cherchera des al­ter­na­tives qui, à l'ère du Web 2.0, se trouvent en quelques secondes grâce aux moteurs de recherche. Il existe en effet d'in­nom­brables al­ter­na­tives pour presque toutes les ap­pli­ca­tions, tous les usages et tous les sites Web. Si votre produit ne fonc­tionne pas, ou du moins ne fonc­tionne pas comme la cible le voudrait, il ne recevra pas de re­com­man­da­tions dans l'App Store, et votre site Web ne sera pas partagé.
    
2. L'étape suivante est la con­vi­via­lité : votre site Web ou votre ap­pli­ca­tion doit offrir à l'uti­li­sa­teur une valeur ajoutée per­ti­nente. Dans une boutique en ligne, par exemple, il peut s'agir des produits dif­fi­ciles à trouver. D'autres sites Web exigent un bon contenu, qu'il soit in­for­ma­tif ou di­ver­tis­sant. Les règles générales pour un bon contenu sont résumées dans cet article. De plus, ceci implique par ailleurs que l’ap­pli­ca­tion soit facile à utiliser : la na­vi­ga­tion dans les menus doit être intuitive et logique. Les titres doivent être ac­cro­cheurs tout en étant faciles à mémoriser. Le domaine fonc­tion­nel doit répondre aux exigences de la cible, être à jour et, dans l’idéal, s'adapter aux habitudes de l'uti­li­sa­teur.
   Voici par exemple des cas dans lesquels un produit ne fonc­tionne pas. Un programme graphique qui cache la fonction de recadrage d'une image dans trois sous-menus et qui n'offre pas de rac­cour­cis est inutile pour la cible. De même, un logiciel d'écri­ture qui n’affiche pas clai­re­ment les boutons gras, italique et souligné n'offre pas, a priori, une bonne ex­pé­rience uti­li­sa­teur.

3. Enfin, pour une bonne ex­pé­rience uti­li­sa­teur, il convient de ne pas négliger l’aspect es­thé­tique de votre produit : dans ce domaine, nombreux sont les pièges à éviter. Les normes es­thé­tiques peuvent être très dif­fé­rentes selon la culture, le domaine et la cible visée. Les in­co­hé­rences ou les sur­charges sont tout aussi dis­sua­sives qu'une con­cep­tion qui ne tiendrait pas compte de la cible. Par con­sé­quent, la con­cep­tion ne doit pas seulement être fonc­tion­nelle mais aussi per­ti­nente pour la cible.

UX et UI : quelle est la dif­fé­rence ?

On confond parfois user ex­pe­rience (UX) avec user interface (UI). Bien que les deux termes soient étroi­te­ment liés, il existe des dif­fé­rences sig­ni­fi­ca­tives. Elles peuvent être résumées en une règle empirique : si l'ex­pé­rience uti­li­sa­teur désigne tout ce que les uti­li­sa­teurs res­sen­tent, le terme interface uti­li­sa­teur fait référence à tout ce que les uti­li­sa­teurs per­çoi­vent vi­suel­le­ment. L'in­ter­face uti­li­sa­teur désigne en effet la surface sur laquelle les uti­li­sa­teurs agissent, ou sur laquelle se produit un échange entre l'homme et la machine. Il s’agit donc davantage d’un terme technique, tandis que l’UX est plus stra­té­gique. La con­cep­tion de l'ex­pé­rience uti­li­sa­teur est le résultat d'une bonne interface uti­li­sa­teur, mais comprend également des domaines tels que l'ar­chi­tec­ture de l'in­for­ma­tion, la con­vi­via­lité ou des aspects purement es­thé­tiques. Par con­sé­quent, l'ex­pé­rience uti­li­sa­teur désigne un domaine général dont l'in­ter­face uti­li­sa­teur, d'autre part serait, en quelque sorte, une catégorie.

Nous avons fait le tour de la théorie, mais à quoi ressemble une bonne ex­pé­rience uti­li­sa­teur en pratique ? Il s’agit tout d’abord d’évaluer la situation de votre en­tre­prise ou votre offre : avez-vous déjà mis en place une identité visuelle ou d'im­por­tantes di­rec­tives de design dans un guide de style ? Ceci constitue votre base pour les étapes suivantes. Vous bé­né­fi­ciez ainsi d'un travail préalable et vous assurez une pré­sen­ta­tion uniforme et fiable sur tous vos canaux de com­mu­ni­ca­tion. De cette façon, vous êtes re­con­nais­sable par vos uti­li­sa­teurs et vous évitez le danger d’éven­tuelles erreurs de con­cep­tion.

Ensuite, il convient de vous demander qui vous souhaitez atteindre avec votre produit, qu’il s’agisse d’un site Web ou d’une ap­pli­ca­tion. Quels sont les souhaits et les exigences de votre cible ? Qu'at­ten­dez-vous de votre offre ? Un UX design est toujours adapté à une cible spé­ci­fique. C'est la seule façon pour vos visiteurs ou uti­li­sa­teurs de bé­né­fi­cier d’une ex­pé­rience parfaite. Par exemple, le site Web d'un groupe gothique doit être com­plè­te­ment différent de celui d'une ma­nu­fac­ture de por­ce­laine. Les dif­fé­rentes ac­cep­ta­tions de l'ex­pé­rience uti­li­sa­teur ne fonc­tion­nent par con­sé­quent que pour certaines cibles dont le goût doit être connu au préalable. Ceci nécessite des tests, des enquêtes ou même des études de cible à grande échelle.

Il est re­com­mandé de se con­cen­trer sur l'es­sen­tiel : une con­cep­tion sur­char­gée et ex­tra­va­gante n'est souvent pas efficace ; au contraire, elle distrait, voire irrite l’uti­li­sa­teur. Il vaut mieux s’appuyer sur un design de l'ex­pé­rience uti­li­sa­teur simple et clair ; un site Web doit notamment comporter des espaces vides pour permettre à l'œil de traiter le contenu. Si la mise en page est sur­char­gée, l'uti­li­sa­teur est ra­pi­de­ment débordé. Il faut également prévoir des distances suf­fi­santes entre le texte, l'image et les éléments de na­vi­ga­tion, sans toutefois gaspiller de l'espace inutile.

Par ailleurs, il convient d’har­mo­ni­ser les couleurs, les polices et la mise en page de votre contenu, et d’éviter les ruptures sty­lis­tiques dans votre design UX. Les uti­li­sa­teurs peuvent ra­pi­de­ment se sentir débordés s'ils sont cons­tam­ment con­fron­tés à de nouvelles polices ou couleurs. De plus, l'in­co­hé­rence dans le design de l'ex­pé­rience uti­li­sa­teur a toujours un effet néfaste. Là encore, les goûts de la cible sont toujours décisifs.

Une fois que tous les aspects es­thé­tiques ont été définis, l'ob­jec­tif est d'op­ti­mi­ser l'ac­ces­si­bi­lité et la con­vi­via­lité. Un bon design d’ex­pé­rience uti­li­sa­teur implique en effet des temps de char­ge­ment réduits, guide ra­pi­de­ment l'uti­li­sa­teur vers sa des­ti­na­tion, et lui fournit sans détours les fonctions les plus im­por­tantes. La na­vi­ga­tion grâce à des menus imbriqués est donc fortement dé­con­seil­lée. Au contraire, il vaut mieux concevoir un chemin intuitif et ac­ces­sible, qui facilite con­si­dé­ra­ble­ment la tâche pour vos uti­li­sa­teurs.

Il faut également prendre en compte les uti­li­sa­teurs les moins ex­pé­ri­men­tés qui, malgré tous les efforts des dé­ve­lop­peurs pour optimiser un design UX élégant, ne sont pas toujours en mesure de trouver ra­pi­de­ment ni les fonctions les plus im­por­tantes, ni de l’aide si né­ces­saire. Pour ce faire, il est possible de proposer un bouton d'aide central. Ceci permet aux uti­li­sa­teurs d'être guidés pas à pas dans le programme : par exemple, le bouton d'aide les conduit di­rec­te­ment à un recueil cliquable, dans lequel sont expliqués tous les termes et fonctions im­por­tants. Un forum, un for­mu­laire de contact ou même une hotline pour les demandes té­lé­pho­niques peuvent également con­tri­buer à une bonne ex­pé­rience uti­li­sa­teur.

L'ob­jec­tif du design de l'ex­pé­rience uti­li­sa­teur est d'offrir à la cible, à tout moment, la meilleure ex­pé­rience possible. Cela signifie que vous devez con­ti­nuel­le­ment améliorer votre site Web ou votre logiciel, afin de suivre l'évo­lu­tion des besoins de votre cible. Voici un exemple simple : il y a quelques années, les sites Web clas­siques étaient encore tout à fait adéquats, tandis qu’aujourd’hui, ceux qui n'offrent pas un design responsif pour les appareils mobiles, ou une ap­pli­ca­tion native pour iOS et Android, perdent de nombreux uti­li­sa­teurs, et par con­sé­quent des revenus, dans la mesure où la con­cur­rence offre une meilleure ex­pé­rience uti­li­sa­teur. Nous vous ex­pli­quons comment adapter votre site Web à l’affichage mobile ici.

Prendre en compte le retour des uti­li­sa­teurs et étudier ses cibles

Pour maintenir à jour votre design UX, il est né­ces­saire de bé­né­fi­cier d’un retour régulier des uti­li­sa­teurs. Si l’on peut évi­dem­ment iden­ti­fier et corriger soi-même de nom­breuses in­co­hé­rences, il est également fréquent de ne pas voir certains défauts d’un projet sur lequel on a passé tant de temps. Il est donc pré­fé­rable de re­cueil­lir des opinions in­dé­pen­dantes, grâce à des sondages ou des tests auprès des uti­li­sa­teurs. Pour leur donner envie de se prêter à ce type d’exercice, il peut être in­té­res­sant de proposer des ré­com­penses aux par­ti­ci­pants, par exemple des versions d'essai gratuites de votre offre premium ou des produits dérivés.

Si votre ap­pli­ca­tion se trouve dans la boutique Google Play Store ou sur l’App Store, il n'est pas toujours facile d’échanger avec les uti­li­sa­teurs. En effet, ce sont les in­sa­tis­faits qui s’expriment en majorité, par le biais de critiques rapides et sans détours ; ceci présente à la fois des avantages et des in­con­vé­nients. D'une part, les retours clients sont im­por­tants pour l'op­ti­mi­sa­tion continue de l'ex­pé­rience uti­li­sa­teur, et d'autre part, de nom­breuses réactions négatives peuvent ra­pi­de­ment nuire à votre ré­pu­ta­tion. Il est re­com­mandé, dans la mesure du possible, de réagir ra­pi­de­ment aux critiques et d’offrir son aide pour améliorer la situation. L’idéal reste d’effectuer en amont des tests UX complets et in­dé­pen­dants, et de minimiser ainsi les risques po­ten­tiels. Diffuser des rapports publics indiquant que tous les bogues ont été corrigés est également un bon moyen de rassurer les uti­li­sa­teurs.

Si vous disposez d'un compte sur un forum et/ou sur les médias sociaux pour votre offre, vous pouvez fa­ci­le­ment tenir les uti­li­sa­teurs et prospects informés. Les ac­tua­li­tés con­cer­nant les mises à jour en dé­ve­lop­pe­ment, les bugs corrigés ou l’op­ti­mi­sa­tion de votre design de l'ex­pé­rience uti­li­sa­teur seront lus avec plaisir, con­nec­te­ront les uti­li­sa­teurs à votre offre et leur donneront la pos­si­bi­lité de réagir aux chan­ge­ments. Enfin, une politique d'in­for­ma­tion trans­pa­rente garantit une bonne ex­pé­rience uti­li­sa­teur à long terme.

UX design : mesures grâce au eye tracking

Les mesures UX sont certes coûteuses mais également pleines de promesses. C’est par exemple le cas de l'analyse heatmap. Il s’agit d’une carte de chaleur pour vi­sua­li­ser la con­vi­via­lité d'un site Web. L’eye tracking est une technique éprouvée pour créer une carte thermique. Des lunettes spéciales, des webcams ou des té­lé­mètres externes à distance en­re­gistrent la durée et la fréquence d'ob­ser­va­tion des uti­li­sa­teurs.

Les données re­cueil­lies peuvent être utilisées pour optimiser le design de l'ex­pé­rience uti­li­sa­teur. Par exemple, si vous constatez que les uti­li­sa­teurs perdent de plus en plus de vue ce qu'ils re­cherchent dans un menu, vous obtenez des indices im­por­tants pour optimiser l'ex­pé­rience uti­li­sa­teur et per­son­na­li­ser le design.

Pourquoi devrait-on faire tous ces efforts et supporter les coûts d’une op­ti­mi­sa­tion de l'ex­pé­rience uti­li­sa­teur ? Après tout, des phases de test étendues, coûteuses et longues peuvent être né­ces­saires avant le lancement d'un logiciel ou d'un site Web. Les raisons d'in­ves­tir du temps et des efforts pour une ex­pé­rience uti­li­sa­teur réussie sont pourtant multiples et évidentes :

• Le design UX met l'uti­li­sa­teur au premier plan.
• Il offre au design du site Web ou de l’ap­pli­ca­tion une base ob­jec­ti­ve­ment mesurable : la sa­tis­fac­tion des uti­li­sa­teurs.
• L'ar­bi­traire n’a pas sa place dans le processus créatif.
• Ce processus favorise un travail d'équipe axé sur les objectifs.
• En vous appuyant di­rec­te­ment sur un design d’ex­pé­rience uti­li­sa­teur moderne et fonc­tion­nel, vous éco­no­mi­sez des coûts de dé­ve­lop­pe­ment pour les cor­rec­tions, l’as­sis­tance et le service client.
• Les tests continus et l'op­ti­mi­sa­tion de l'ex­pé­rience uti­li­sa­teur con­dui­sent à des in­no­va­tions et des designs modernes. Votre offre se distingue ainsi de la con­cur­rence.
• Des designs es­thé­tiques attirent l'at­ten­tion et en­cou­ra­gent les uti­li­sa­teurs à continuer à regarder votre site Web ou votre ap­pli­ca­tion.
• Lorsque les uti­li­sa­teurs ont une ex­pé­rience avec l'ap­pli­ca­tion, votre offre reste dans leur esprit plus longtemps, et ceci contribue à renforcer votre marque.
• Un niveau élevé de sa­tis­fac­tion des clients connecte les uti­li­sa­teurs, génère des likes et des re­com­man­da­tions, et augmente le taux de con­ver­sion.

Afin de garantir aux uti­li­sa­teurs une véritable ex­pé­rience sur un site Web ou avec un logiciel, il est né­ces­saire, outre une bonne maîtrise de la réa­li­sa­tion (fonc­tion­na­lité), de faire preuve de créa­ti­vité (es­thé­tique et con­vi­via­lité), faute de quoi votre projet risque de tomber dans l'oubli. Si les temps de char­ge­ment sont iné­vi­tables pour une ap­pli­ca­tion ou un site Web complexe, pourquoi ne pas les intégrer dans la con­cep­tion de l'ex­pé­rience uti­li­sa­teur ? Même si vous n'ex­pli­quez que les éléments à charger, l'ex­pé­rience uti­li­sa­teur s'amé­liore : les uti­li­sa­teurs savent ce qui se passe et quand commencer. Les exemples suivants montrent comment créer de vraies ex­pé­riences alliant in­no­va­tion et créa­ti­vité.

Sur la page originale de Wikipédia, la même image apparaît en bas de page, con­si­dé­ra­ble­ment réduite. L'il­lus­tra­tion est nettement moins ex­pres­sive ici, tandis qu’en arrière-plan, elle suscite im­mé­dia­te­ment l'intérêt du lecteur, et lui donne envie de lire l'article. Rendre cette œuvre im­mé­dia­te­ment visible présente également un intérêt pé­da­go­gique, car rien qu’en survolant l’article, on est en contact avec une certaine idée de la re­pré­sen­ta­tion de la beauté en Occident, selon des normes d’ailleurs toujours exis­tantes au­jour­d'hui.

Tout ceci n'est possible que grâce à une image placée dif­fé­rem­ment, en arrière-plan. Bien entendu, ce principe vaut également pour d'autres articles. Qu’il s’agisse d’un article sur le tigre blanc ou sur l’océan, on retrouve en arrière-plan une image adaptée et parlante ; de cette façon, les visiteurs du site peuvent im­mé­dia­te­ment voir de quoi il s'agit. Ce principe applique fi­dè­le­ment la devise très connue mais toujours d'ac­tua­lité : une image vaut mieux qu’un long discours.