Comprendre UI et UX en 6 minutes chrono 

Avec l’analogie du restaurant


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.


Pour mieux maîtriser ces deux termes et leur importance, prenons l’exemple d’une expérience dans un restaurant dans lequel vous allez dîner.

Un restaurant avec une UI et une UX correctes
(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.


Maintenant, pour démontrer la relation forte entre ces deux composantes, voyons d’autres variations en suivant notre exemple du restaurant.

✅ UI impeccable mais ❌ mauvaise UX

Un autre restaurant avec une UI impeccable mais une mauvaise UX : notez la lumière en pleine face, l’assiette à l’opposé du client et les fleurs qui chatouillent les narines
(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é.

Par exemple, le serveur qui ne s’excuse pas peut être assimilé à l’affichage dans l’application d’un message d’erreur incompréhensible ou inexistant pour l’utilisateur—cela le frustre alors que l’erreur provient de l’application.

👉 Adoptez une tonalité de parole complice et rendez intelligible le message affiché—mieux encore, masquez complètement le message si cela ne concerne pas l’utilisateur et trouvez une solution.

Aussi, l’expérience désagréable du temps d’attente peut être assimilé à l’absence d’un message d’attente ou d’une icône animée pendant le chargement d’un contenu.

👉 Enrichissez l’expérience de l’utilisateur durant ces écrans de transition : affichez une anecdote du site, montrez avec un contenu factice à quoi va ressembler la page en train de charger afin que l’utilisateur puisse être prêt à naviguer, valorisez la mascotte de votre application…

Enfin, le serveur qui renverse votre verre peut être assimilé à l’affichage soudain d’un popup recouvrant le contenu actuellement consulté par l’utilisateur.

👉 Pensez en permanence à l’expérience de l’utilisateur et non à l’expérience seule de votre application : si vous souhaitez promouvoir un produit, le popup intrusif va à la fois ruiner la fluidité de l’expérience de l’utilisateur et affecter votre image de confiance.

À 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

Un restaurant dont l’UX est impeccable (bon service) mais avec une UI inadaptée : notez les cartons cale-table, l’ampoule qui flotte dans l’air et le magnifique bouquet Shutterstock encadré sur la table
(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.


Pour construire l’expérience utilisateur d’une app ou d’un site (UX) ainsi que les écrans qui les composent (UI), il existe bien sûr des méthodes et des outils. Chez nod-A, on utilise l’AppMaker. Ce kit, accessible à tous, quelque soit le niveau de connaissances en UX design, propose une série d’exercices pour concevoir une application en équipe. Un guide accompagne pas-à-pas dans les différentes étapes pour bien définir l’expérience et des tablettes-ardoises permettent de maquetter très rapidement des écrans à l’aide d’un jeu de magnets.

De quoi co-construire ses interfaces autrement ! 👍

L’AppMaker, un outil de la gamme Makestorming

On espère que ce nouvel article vous a plu ! N’hésitez pas à nous contacter, venir prendre un café (à Lyon, Paris ou Montréal) ou à partager votre propre expérience !

Suivez l’actualité du #Makestorming sur Twitter, Facebook, Instagram et Medium

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.