Révision UI/UX Design - Session de Rattrapage
Partie 1 : Définitions essentielles
1.1. Définition de l'expérience utilisateur (UX)
L?UX (User eXperience) est l?ensemble des émotions, perceptions et réactions d?un utilisateur lorsqu?il
interagit avec un produit ou un service. Elle vise la satisfaction et la facilité d?utilisation.
1.2. Qu?est-ce qu?une interface utilisateur (UI) ?
L?UI (User Interface) est l?ensemble des éléments visuels avec lesquels un utilisateur interagit : boutons,
menus, couleurs, icônes, typographies, etc.
Partie 2 : Ergonomie & Principes de conception
1.3. Trois grands principes d?ergonomie
1. Simplicité : interface claire et dégagée.
2. Cohérence : design et navigation homogènes.
3. Feedback : réaction de l?interface suite à une action (ex : clic).
1.5. Différence entre accessibilité et ergonomie
- Ergonomie : rendre l?interface facile à utiliser pour tous.
- Accessibilité : la rendre utilisable par les personnes en situation de handicap.
Partie 3 : Outils & Optimisation UX
1.4. Outils de conception d?interface
1. Figma
2. Adobe XD
(Autres possibles : Sketch, Balsamiq, InVision)
2.2. Optimisation UX d?un formulaire trop long
1. Diviser en étapes (multi-steps).
2. Ajouter une barre de progression.
3. Pré-remplir/suggérer les champs automatiquement.
Révision UI/UX Design - Session de Rattrapage
Partie 4 : Spécificités UX pour utilisateurs cibles
2.1. Sur une page d'accueil pour étudiants, que faut-il afficher en priorité ?
- Informations importantes (examens, actus campus).
- Accès rapides : emploi du temps, résultats, espace perso.
- Authentification.
Justification : répondre aux attentes prioritaires des étudiants pour éviter frustration et perte de temps.
Partie 5 : Recherche utilisateur
Méthodes de recherche utilisateur :
1. Entretien : comprendre besoins et attentes par la discussion.
2. Observation : repérer les comportements réels.
3. Questionnaire : recueillir des données à grande échelle.
4. Tri de cartes : organiser l?information selon les utilisateurs.
5. Analyse de données : observer les parcours via outils (Analytics).
6. Test d?utilisabilité (voir également plus bas).
Partie 6 : Parcours utilisateur
a. Qu'est-ce qu'un persona ?
Un persona est un profil fictif basé sur des données réelles qui représente un type d'utilisateur cible.
b. Pourquoi créer un parcours utilisateur ?
Pour identifier les étapes, émotions et points de friction lorsqu'un utilisateur poursuit un objectif (ex :
inscription).
Partie 7 : Accessibilité
Bonnes pratiques d?accessibilité :
1. Contraste suffisant texte/fond.
2. Navigation clavier possible.
3. Taille de texte agrandissable.
Révision UI/UX Design - Session de Rattrapage
4. Texte alternatif sur les images.
5. Structure HTML sémantique.
6. Sous-titres pour les vidéos.
7. Éviter les éléments clignotants ou trop animés.
Partie 8 : Évaluation
Test d'utilisabilité :
Un test d?utilisabilité consiste à faire réaliser des tâches à un utilisateur pour observer s?il comprend et
utilise l?interface sans difficulté.
? Sert à repérer les problèmes concrets d?usage.
Partie Bonus : Questions/Réponses Supplémentaires
Différence entre wireframe, maquette et prototype
- Wireframe : structure sans design.
- Maquette : version visuelle réaliste sans interactions.
- Prototype : maquette interactive, testable.
Lois UX à connaître :
1. Loi de Hick : trop de choix = lenteur.
2. Loi de Fitts : bouton gros + proche = plus facile à cliquer.
3. Effet de position : on retient mieux le début et la fin.
Erreurs UX fréquentes :
1. Trop d?infos d?un coup.
2. Incohérence visuelle ou fonctionnelle.
3. Manque de feedback utilisateur.
Test utilisateur vs Test A/B
- Test utilisateur : observation qualitative.
- Test A/B : comparaison de deux versions (quantitative).
Révision UI/UX Design - Session de Rattrapage
Pourquoi le mobile first ?
On conçoit d'abord pour le plus petit écran = épure, priorité à l'essentiel.
