Article publié le 27 Septembre 2017 sur :

Deux mots que vous avez peut-être déjà entendus et que vous entendrez certainement en atelier : l’UI et l’UX sont deux composantes essentielles d’une application ou d’un site web à clairement distinguer pour comprendre leurs champs d’actions respectifs.

UI et UX, définitions

LUI, en anglais User Interface, correspond à ce que VOIT l’utilisateur d’une application ou d’un site web, donc à l’interface visible par l’utilisateur. L’UI se caractérise alors par le choix des couleurs, l’aspect des boutons, la mise en page des textes et des images, la dimension des colonnes, le choix des typographies, le corps des textes, etc. En bref, l’interface utilisateur désigne tout ce qui est concrètement visible, ce qu’affichent les pixels de l’écran.

L’UX, en anglais User Experience, correspond à ce que RESSENT l’utilisateur d’une application ou d’un site web, donc à l’expérience de navigation de l’utilisateur. L’UX se caractérise alors par la fluidité du parcours utilisateur (nombre d’actions pour accomplir une tâche), la simplicité pour atteindre un but sur une application/site, la position la plus fonctionnelle/intuitive des boutons principaux, etc. En bref, l’expérience utilisateur est optimale lorsque l’utilisateur ne ressent aucune frustration en naviguant et accomplit son but rapidement et de manière évidente.

[ Analogie avec l’exemple du restaurant]

(UI) Le restaurant est mis en valeur dès l’entrée, avec une décoration sobre et soignée et une monumentale cheminée instaure une ambiance tamisée et intime. Le restaurant, sa carte, sa signalétique et ses accessoires sont en parfaite harmonie.

(UX) Le serveur vous accueille et vous installe à votre table, est ponctuel pour prendre votre commande et vous sert rapidement : il remplit votre verre de vin lorsque vous en avez besoin et se préoccupe même de vous pendant votre repas en vous demandant « Tout se passe bien ? ».

Vous remarquez qu’avec la combinaison d’une UI soignée et d’une UX optimale, vous obtenez une situation où l’utilisateur est accompagné sans frustration tout au long de son expérience.

UI impeccable mais mauvaise UX

[ Analogie avec l’exemple du restaurant]

(UX) À votre arrivée dans ce beau restaurant, le serveur vous néglige du regard et se comporte de manière indifférente voire désagréable face à vos sollicitations. Pour commander puis recevoir votre plat, vous attendez longtemps le serveur. Vous devez tendre le bras vers la table d’à côté pour récupérer le poivrier et, comble de la situation, le serveur renverse votre verre de vin sur la table pendant votre repas sans s’excuser.

Le restaurant est toujours aussi élégant (UI) mais l’expérience est désastreuse (UX). À peine exagéré, cet exemple vous montre qu’une interface réussie n’est pas suffisante pour garantir une expérience riche : l’utilisateur doit être guidé d’un point A à un point B avec la plus grande fluidité et la plus grande efficacité.

À savoir : l’UX d’une application est à construire selon des principes à définir en amont. Que vous souhaitiez que votre application serve à consommer ou à utiliser un produit rapidement (analogie : fast-food) ou qu’elle serve à prendre le temps d’explorer des contenus (analogie : restaurant aux plats locaux faits maison, slow-food) ou encore qu’elle serve à faciliter les échanges sociaux (analogie : bar), vous élaborerez l’expérience utilisateur en conséquence avec des codes bien définis.

UI inadaptée mais UX impeccable

[ Analogie avec l’exemple du restaurant]

(UI) Malgré l’accueil irréprochable du patron et la qualité des plats, la modeste décoration ne vous réjouit pas : l’éclairage est terne et inadéquat pour un restaurant. Pas une chaise ne ressemble à une autre, les serviettes de table semblent être récupérées d’une autre enseigne et la table Ikea qui fait office de comptoir ne met pas en valeur la prestation du restaurant.

Le restaurant propose toujours une expérience riche (UX) mais le cadre de vie et les conditions de cette expérience sont médiocres (UI). Ici aussi, cet exemple vous montre qu’une expérience réfléchie et pertinente peut être affectée par une interface peu convaincante ou hors propos : l’interface est essentielle pour véhiculer la tonalité de l’application et pour incarner l’expérience.