UX et UI : quelles différences ?

1. Objectifs

   • Définir l'UI et la distinguer de l'UX
   • Classer une décision de conception du côté de l'UX ou de l'UI
   • Expliquer pourquoi une belle interface ne garantit pas une bonne expérience
   • Diagnostiquer un écran à l'aide de la matrice UX / UI
   • Situer le travail UX et UI dans les étapes d'un projet
   • Citer les principaux livrables et métiers de chaque domaine

1. Présentation

   • Les deux sigles sont souvent réunis dans « UI/UX », au point que beaucoup de personnes les emploient l'un pour l'autre. Pourtant, ils ne répondent pas à la même question.
   • Dans la leçon précédente, nous avons vu que l'expérience utilisateur couvre tout ce qu'une personne perçoit et ressent. Nous allons maintenant préciser la place de l'interface dans cette expérience. Savoir les distinguer vous aidera à poser le bon diagnostic : un parcours trop long ne se corrige pas en changeant une couleur.

• Nous continuons avec BiblioCampus, l'application fictive de réservation de livres. Pour les activités, créez le dossier 02-ux-et-ui/ dans votre dépôt GitHub ui-ux-design-bts.

1. Qu'est-ce que l'UI ?

   • L'interface utilisateur, ou UI (User Interface), désigne les éléments par lesquels une personne voit un produit et agit sur lui : écrans, textes, couleurs, icônes, boutons, champs, animations…
   • Le design UI consiste à choisir et à organiser visuellement ces éléments pour qu'ils soient lisibles, cohérents et agréables.
   • L'UX, elle, part du besoin de l'utilisateur et du parcours qui permet d'y répondre. Pour résumer :
     • l'UX demande : « Est-ce que cela fonctionne pour l'utilisateur ? »;
     • l'UI demande : « Est-ce clair et agréable à voir et à manipuler ? »

1. Exemple 1 : le restaurant

   • Une sortie au restaurant permet de bien sentir la différence :

1. Comparer UX et UI

   • Voici les principales différences entre les deux approches :

• Cette séparation sert surtout à raisonner. Dans la réalité, l'UI fait partie de l'expérience: un texte trop pâle est un choix d'UI, mais la difficulté à le lire est un problème d'UX.

1. Exemple 2 : une UX, plusieurs UI

   • Le wireframe est un schéma simple qui fixe l'emplacement des éléments, sans se préoccuper de l'apparence. Vous apprendrez à en créer au chapitre 08. Le même wireframe de BiblioCampus peut recevoir des apparences très différentes :

• Dans les trois cas, le parcours reste le même : voir le livre, choisir le jour de retrait, réserver. L'apparence change, mais elle peut quand même influencer la lisibilité et la confiance.

1. Exemple 3 : un bouton

   • Même un petit élément demande les deux types de réflexion :

1. La matrice UX / UI

   • Comme les deux sont distincts, un produit peut être fort dans l'un et faible dans l'autre. Cette matrice aide à poser un diagnostic :

• Dans le cas « belle mais décevante », refaire les couleurs ne changera presque rien : il faut d'abord raccourcir le parcours. Dans le cas « efficace mais austère », un travail sur l'UI peut suffire à améliorer nettement l'impression générale.

1. UX et UI dans un projet

   • Le travail UX prépare souvent le travail UI, mais le déroulement n'est pas une simple ligne droite :

• Les intitulés varient selon les entreprises. Dans une petite équipe, une même personne peut faire tout cela : d'où l'intérêt, pour un développeur, de comprendre ces notions.

1. Idées reçues

   • Ces confusions sont fréquentes :

1. Activité 1 : UX ou UI ?

   • Classez chaque décision du côté de l'UX ou de l'UI:
     • supprimer la création de compte avant la réservation ;
     • choisir une police plus lisible ;
     • interroger cinq étudiants sur leurs besoins ;
     • remplacer un bouton gris par un bouton violet ;
     • regrouper les étapes de paiement sur une seule page ;
     • dessiner un jeu d'icônes cohérent ;
     • observer une personne qui réserve un livre ;
     • ajouter une courte animation quand un bouton est pressé.
   • Vérifier : les décisions 1, 3, 5 et 7 relèvent surtout de l'UX, les décisions 2, 4, 6 et 8 surtout de l'UI.
   • Choisissez une décision d'UI de la liste : quel effet peut-elle avoir sur l'expérience ?

1. Activité 2 : analyser deux écrans

   • Un étudiant veut connaître sa moyenne. Comparez ces deux écrans :

• Pour chaque écran, notez une force et une faiblesse, d'abord en UX, puis en UI. Placez-les ensuite dans la matrice.
• Vérifier : l'écran A est soigné, mais ses libellés ne disent pas où trouver les notes. L'écran B donne directement la réponse, avec une présentation sommaire. Le A se place donc plutôt dans « belle mais décevante » et le B dans « efficace mais austère ».
• Si vous n'aviez qu'une journée de travail, quel écran corrigeriez-vous, et comment ?

1. Activité 3 : poser un diagnostic

   • Choisissez deux applications ou deux sites que vous connaissez et réalisez une tâche précise dans chacun.
   • Placez chaque produit dans la matrice et justifiez avec un fait observé pour l'UX et un autre pour l'UI.
   • Vérifier : chaque justification décrit un fait précis (« il faut quatre clics », « le texte gris est peu lisible ») et non un simple avis.
   • Quel changement aurait le plus d'effet pour chacun de ces produits ?

1. Activité 4 : changer l'UI sans toucher à l'UX

   • Reprenez le wireframe de BiblioCampus présenté dans cette leçon. Sur papier ou dans un outil de votre choix, proposez deux apparences différentes.
   • Pour chacune, indiquez la couleur principale, la typographie et la forme des boutons. Ne changez ni les éléments ni le parcours.

• Vérifier : les mêmes éléments apparaissent au même endroit, et le texte reste bien lisible sur chaque couleur.
• L'une de vos deux UI donne-t-elle plus confiance ? Pourquoi ?

1. Activité 5 : corriger selon le diagnostic

   • Pour chaque remarque d'utilisateur, indiquez si le problème concerne plutôt l'UX ou l'UI et proposez une solution :
     • « Je ne trouve jamais comment annuler ma réservation. »
     • « Je n'arrive pas à lire le texte gris sur fond blanc. »
     • « Je dois saisir mon nom à chaque visite. »
     • « Les boutons n'ont pas tous la même forme, je ne sais plus lesquels sont cliquables. »
   • Vérifier : les remarques 1 et 3 touchent surtout l'organisation et le parcours (UX), les remarques 2 et 4 l'apparence et la cohérence (UI). Les solutions doivent répondre à la cause, pas seulement au symptôme.
   • Pourquoi la remarque 4 est-elle aussi un problème d'expérience ?

1. Activité 6 : déposer votre travail sur GitHub

   • Rédigez dans 02-ux-et-ui/README.md vos réponses aux activités, avec votre définition de l'UI et de l'UX en deux phrases. Ajoutez une photo ou une capture de vos deux UI de l'activité 4, puis envoyez le tout :

git add 02-ux-et-ui
git commit -m "Ajoute la leçon 2 : différences entre UX et UI"
git push

• Vérifier : le fichier README.md et votre image apparaissent bien sur la page GitHub du dépôt.

1. Erreurs fréquentes

1. À retenir

   • L'UX concerne l'expérience complète : besoins, parcours et structure.
   • L'UI concerne l'interface : textes, couleurs, typographie, icônes et composants.
   • L'UI fait partie de l'expérience : un mauvais choix visuel peut créer un problème d'UX.
   • Une belle interface peut cacher une mauvaise expérience, et l'inverse existe aussi.
   • Le diagnostic vient avant la solution : on ne corrige pas un parcours en changeant une couleur.
   • UX et UI progressent ensemble, avec des tests et des retours en arrière.

L'UX décide où doit mener le chemin, l'UI le rend visible et agréable : l'utilisateur, lui, ne vit qu'une seule expérience.