Sur cette page
Publié le : Mise à jour le :
L’UX et l’UI
UX veut dire user experience, l’expérience utilisateur. UI veut dire user interface, l’interface utilisateur.
L’UX, l’expérience
L’UX couvre ce que vit une personne avant, pendant et après l’utilisation d’un produit. Un ou une UX designer :
- Comprend les besoins et les attentes des utilisateurs.
- Conçoit leur parcours et organise l’information.
- Interroge des utilisateurs et leur fait tester le produit.
- Vérifie que les utilisateurs arrivent à faire ce qu’ils souhaitent.
Ce travail commence avant la conception et se poursuit après la mise en ligne.
L’UI, l’interface
L’UI est la partie visible du produit :
- Les couleurs, les polices et la mise en page.
- Les éléments sur lesquels on agit : boutons, champs, cartes, menus.
- La hiérarchie visuelle, qui fait ressortir les éléments importants.
- La cohérence visuelle d’un écran à l’autre.
Les deux ensemble
Pour une appli de commande dans un snack, l’UX organise le parcours et l’UI dessine les écrans :
| UX | UI | |
|---|---|---|
| La question | De quoi le client a-t-il besoin pour commander vite ? | À quoi ressemble l’écran de commande ? |
| La décision | Commander en trois écrans et voir le temps d’attente | Un grand bouton “Commander” en bas de l’écran |
| La vérification | Un client commande seul, sans aide, en moins d’une minute | Le bouton se voit et se lit sur un petit écran |
Les cinq plans
Jesse James Garrett décrit cinq plans de conception, de la stratégie à l’apparence des écrans. Chaque plan s’appuie sur les décisions du précédent.
| Plan | La question | Dans le projet |
|---|---|---|
| 1. Stratégie (strategy) | Que veulent les utilisateurs et le client ? | Brief, entretiens et persona |
| 2. Périmètre (scope) | Quelles fonctions et quels contenus ? | User stories |
| 3. Structure | Comment ranger les pages et enchaîner les étapes ? | Journey et sitemap |
| 4. Squelette (skeleton) | Où placer chaque élément sur l’écran ? | Zoning et wireframes |
| 5. Surface | À quoi ressemble l’écran : couleurs, polices, images ? | Style guide et maquette |
L’UX travaille surtout les trois premiers plans. L’UI travaille surtout les deux derniers.
Utile et utilisable
Un site utile répond à un besoin. Un site utilisable permet d’accomplir une tâche sans difficulté. Il peut être utile tout en restant pénible à utiliser.
La norme ISO 9241-11 mesure l’utilisabilité avec trois questions, pour des utilisateurs et une tâche précis :
- L’efficacité : la personne arrive-t-elle au bout de sa tâche ?
- L’efficience : combien de temps et d’efforts lui a-t-il fallu ?
- La satisfaction : comment l’a-t-elle vécu ?
Une affordance est une possibilité d’action offerte par un objet à une personne. Une poignée permet par exemple de saisir une porte. Les indices qui font comprendre cette possibilité sont des signifiants (signifiers) : la forme de la poignée, le libellé d’un bouton ou le soulignement d’un lien. Sur le web, ces indices doivent correspondre à ce que l’élément permet de faire. Don Norman explique cette distinction.
Le design thinking
Le design thinking part des besoins des personnes pour concevoir, prototyper et tester une solution. On le découpe souvent en cinq étapes. Un test peut conduire à revenir sur une décision précédente.
flowchart TD accTitle: Les cinq étapes du design thinking accDescr: Empathie, définition, idéation, prototypage et test. Chaque étape mène à la suivante, et on peut revenir à la précédente. E["Empathie<br>Mieux connaître les usagers"] <--> D["Définition<br>Poser un problème précis"] D <--> I["Idéation<br>Chercher des idées et des solutions"] I <--> P["Prototypage<br>Fabriquer vite et pas cher"] P <--> T["Test<br>Faire essayer, puis améliorer avec les retours"]
| Étape | Dans le projet |
|---|---|
| 1. Empathie | Entretiens et persona |
| 2. Définition | User stories et journey |
| 3. Idéation | Sitemap et zoning |
| 4. Prototypage | Wireframes et maquette |
| 5. Test | Test de la maquette et tests d’accessibilité |
À lire et à regarder
- L’UX, 60 secondes pour comprendre, vidéo d’Orange.
- L’UX Design c’est quoi ?, vidéo de la chaîne UX Time.
- Faites la différence entre UX et UI et Familiarisez-vous avec la notion d’usabilité, deux chapitres du cours gratuit d’OpenClassrooms.
- Comprenez le principe d’affordance, OpenClassrooms.
- It’s not you. Bad doors are everywhere., vidéo de Vox sur les portes qu’on pousse au lieu de les tirer. En anglais, activez les sous-titres.
- Dopamine, série d’ARTE. Chaque épisode montre comment une appli connue est conçue pour qu’on y revienne.
- Comment le web vous arnaque ? (Les dark patterns), vidéo de Basti UI. Un dark pattern est une interface conçue pour piéger l’utilisateur, par exemple un désabonnement caché.
- Whatnot : le nouveau sponsor YouTube qui te met en danger, enquête de Basti UI. Une appli d’enchères en direct reprend des mécanismes des casinos pour qu’on y reste.
Pour la discussion
- Une appli qui vous énerve : laquelle, et à quel moment précis ?
- Ce problème vient-il de l’UX ou de l’UI ?
- Une appli conçue pour qu’on y passe le plus de temps possible offre-t-elle une bonne expérience ? Bonne pour qui ?
Le roasting
Un roasting consiste ici à examiner une interface et à expliquer ce qui aide ou gêne son utilisation.
Choisissez un site de MJC ou de centre socioculturel. Cherchez une activité pour un jeune de 17 ans et comment s’y inscrire.
Gardez une idée à reprendre et un problème à éviter dans votre projet, avec une capture. Déposez vos remarques dans votre fichier de projet.
Arrêtez-vous avant tout envoi de formulaire. Ne créez pas de compte et ne payez rien.
Appuyez vos critiques sur un élément de l’interface et son effet sur la tâche. Par exemple : “Le bouton d’inscription est caché sous la photo, je ne l’ai pas trouvé.” Respectez les personnes qui ont conçu le site et choisissez des captures adaptées à un cours.