Conception UX et maquettes : de la recherche utilisateur au prototype testé
Conception UX et maquettes est un cours de niveau débutant de 5 leçons (environ 1 h 26), avec 16 exercices et 15 questions de quiz. Aucun prérequis. Les exercices s'exécutent dans le navigateur, sans installation.
- Compétences transverses
- Débutant
- 5 leçons
- 1 h 26
- 16 exercices
- Exercices exécutés dans le navigateur
Le cours en bref
Ce cours vous apprend la démarche de conception UX de bout en bout, sur un fil rouge d'application de commande avec retrait en magasin. Vous menez et synthétisez une recherche utilisateur, construisez personas et parcours, organisez l'information et dessinez des wireframes, puis réalisez maquettes et prototypes dans Figma avant de les tester avec de vrais utilisateurs. Chaque leçon se termine par des exercices pratiques au résultat vérifiable.
Ce que tu sauras faire
- Préparer, mener et synthétiser des entretiens utilisateurs sans biaiser les réponses
- Construire des personas et des cartes de parcours fondés sur des données
- Organiser une arborescence avec un tri par cartes et dessiner des wireframes mobiles
- Réaliser dans Figma des maquettes cohérentes avec styles, composants, variantes et auto layout
- Relier les écrans en prototype et vérifier les règles d'accessibilité de base
- Conduire un test utilisateur, calculer taux de réussite, temps médian et score SUS, et prioriser les corrections
Programme des 5 leçons
- Choisir une méthode de recherche adaptée à la question posée (entretien, observation, questionnaire, données d'usage)
- Préparer et mener un entretien sans orienter les réponses
- Synthétiser des observations par affinité et formuler un problème à résoudre
Recherche utilisateurEntretien utilisateurSynthèse par affinité
- 02
Personas et parcours utilisateur
- Construire un persona fondé sur des données de recherche
- Cartographier un parcours utilisateur avec ses étapes, émotions et points de friction
- Distinguer parcours utilisateur (expérience globale) et user flow (enchaînement d'écrans)
- 03
Architecture de l'information et wireframes
- Organiser les contenus d'un produit en une arborescence compréhensible
- Utiliser un tri par cartes pour nommer et ranger les rubriques
- Dessiner un wireframe basse fidélité qui établit la hiérarchie d'un écran
- 04
Maquettes et prototypes dans Figma
- Passer du wireframe à une maquette cohérente grâce aux styles, composants et variantes
- Utiliser l'auto layout et les grilles pour des écrans qui s'adaptent
- Relier des écrans en un prototype cliquable et vérifier l'accessibilité de base
Maquette haute fidélitéComposants, variantes et auto layoutPrototype interactifAccessibilité visuelle
- 05
Tester avec les utilisateurs et itérer
- Préparer un protocole de test utilisateur avec des scénarios de tâches
- Animer une séance en faisant penser à voix haute, sans aider
- Mesurer et prioriser les résultats (taux de réussite, temps, SUS, gravité) pour itérer
Test utilisateurMétriques d'utilisabilité et SUSÉvaluation heuristiqueItération
Projet final
Concevoir et tester le parcours de retrait d'une application de commande
Pour une enseigne fictive de proximité qui lance la commande en ligne avec retrait en magasin, menez la démarche UX complète sur le parcours « savoir quand venir chercher sa commande et la retirer ». À partir de cinq entretiens (réels ou réalisés avec des proches jouant le rôle de clients, en le signalant), produisez la synthèse, le persona, la carte du parcours, l'arborescence, les wireframes, la maquette et le prototype, puis testez-le avec au moins cinq personnes et proposez une version corrigée.
Livrables
- Le guide d'entretien et la synthèse par affinité (thèmes comptés en participants)
- Un persona principal et une carte du parcours avec courbe d'émotion
- L'arborescence et les wireframes mobiles des écrans du parcours
- Un fichier Figma avec styles ou variables, composants à variantes et prototype cliquable
- Le compte rendu du test : scénarios, taux de réussite, temps médians, scores SUS, problèmes classés par gravité
- La version corrigée des écrans concernés
Critères d'évaluation
- Chaque décision de conception est reliée à une observation de recherche ou de test
- Les questions d'entretien et les scénarios de test sont ouverts et non orientés
- La maquette est cohérente (styles, composants) et couvre les états d'erreur, de chargement et vides
- Les contrastes respectent le niveau AA et aucune information ne repose sur la couleur seule
- Les métriques sont correctement calculées et les corrections priorisées par gravité
Questions fréquentes
Faut-il savoir dessiner pour suivre ce cours ?
Non. La conception UX repose d'abord sur la compréhension des utilisateurs et l'organisation de l'information. Les wireframes se dessinent avec des rectangles, et Figma fournit les outils nécessaires aux maquettes.
Quelle est la différence entre UX et UI ?
L'UX (expérience utilisateur) couvre toute la démarche : comprendre les besoins, organiser les parcours, tester. L'UI (interface utilisateur) en est la partie visuelle : couleurs, typographies, composants. Ce cours couvre les deux, avec un accent sur la démarche.
Ai-je besoin d'une licence Figma payante ?
Les exercices du cours peuvent être réalisés avec l'offre gratuite de Figma ou avec un autre outil de maquette offrant composants et prototypage. Vérifiez les conditions de l'offre en vigueur sur le site de l'éditeur.
Ce cours est-il utile aux développeurs ?
Oui. Comprendre les personas, les parcours et les maquettes aide à poser les bonnes questions, à respecter l'accessibilité et à mieux collaborer avec les designers et les product owners.
Ce cours, raconté pour ton métier
Dis ce que tu veux savoir faire : « Conception UX et maquettes » prend sa place dans ton parcours, avec des exemples de ton secteur. Les notions restent celles du cours.