Formation UX/UI design Lyon

Formation UX/UI design Lyon

Module 1
Immersion, cadrage et introduction à l’ergonomie web

Objectif : installer les bases communes, clarifier les notions d’ergonomie, d’UX design et d’UI design, puis relier ces notions à une problématique de projet digital.

Notions abordées

• Concepts et règles de conception d’une expérience numérique.
• L’utilisateur comme point de départ de la conception : d’abord un être humain.
• Design centré utilisateur, design thinking, expérience et ergonomie.
• Définitions : ergonomie, UX design, UI design.
• Différence entre UX et UI.
• Rôle de l’UX designer / UI designer dans un projet digital.
• Introduction au SXO : articulation entre expérience utilisateur et visibilité.
• Histoire de l’UX et référence au diagramme / modèle de Jesse James Garrett.

Pourquoi l’UX ?

• Comprendre l’importance de l’expérience utilisateur dans la réussite d’un site ou d’une application.
• Relier les objectifs business aux objectifs utilisateurs.
• Identifier le contexte existant, les valeurs de marque et les enjeux de cadrage.

Données, diagnostic et cadrage

• Audit d’un site web existant : forces, faiblesses, scénario d’usage, cadrage et typologie.
• Collecte de données : analyse des besoins utilisateurs, compréhension du profil client, analyse concurrentielle, benchmark UX/UI.
• Règle des 3U et objectifs de l’ergonomie web.
• Intérêt et retour sur investissement de l’UX.

Ateliers / exercices

• Reformulation du brief.
• Définition des objectifs UX.
• Analyse en groupe de 3 concurrents : identification des bonnes pratiques et des limites.
• Mise en relation stratégie de marque, valeurs, objectifs business et objectifs utilisateurs.

Module 2 – L’utilisateur : d’abord un être humain

Objectif : apprendre à comprendre les utilisateurs, leurs besoins, leurs motivations, leurs blocages et la logique de leurs parcours.

Comprendre l’utilisateur

• Définition des utilisateurs et des cibles.
• Personas : méthode, utilité, attentes utilisateurs et contraintes d’usage.
• Motivations, besoins, freins, frustrations et déclencheurs.
• Introduction aux tests utilisateurs.
• Expérience utilisateur comme modèle flexible : composante UX et dynamique temporelle de l’UX.

Interaction homme-machine et parcours

• Interaction homme-machine (IHM).
• Expérience utilisateur et parcours.
• Customer journey map / user journey map.
• Parcours multi-devices : mobile, desktop, tablette.
• Cartographie des points de friction.
• Carte d’expérience, empathy map et analyse des irritants.

Facteur humain et conception centrée utilisateur

• Processus humains : biais cognitifs, mémoire, perception et attention de l’œil.
• Densité informationnelle, interférences et hiérarchie des composants visuels.
• Lois de la Gestalt : proximité, similarité, continuité, clôture, figure/fond, etc.
• Recherche utilisateur, design fonctionnel, wireframes, gamification et prise en compte des contraintes utilisateurs.

Ateliers / livrables

• Atelier en groupe : création de 2 à 3 personas.
• Identification des objectifs, frustrations, comportements d’achat et scénarios d’usage.
• Création d’un parcours utilisateur complet.
• Livrables : user journey map, carte d’expérience, personas et tableau des points de friction.

Module 3 – Maîtriser le processus de conception UX

Objectif : structurer une démarche UX complète, depuis la planification jusqu’à l’évaluation.

Les grandes phases du processus

Planification

• Définir le projet.
• Nommer les besoins et les ressources.
• Recruter des utilisateurs.
• Prendre en compte déontologie et éthique.
• Atelier : benchmark et empathy map.

Exploration / recueil des besoins

• Collecte des besoins utilisateurs.
• Focus groups, observation, entretiens et questionnaires.
• Expérience actuelle à comprendre.
• Personas et experience map.

Idéation

• Production d’idées et de concepts.
• Brainstorming, cartes d’idées, design studio.
• Atelier : comprendre un besoin et formuler des pistes de solution.

Génération / prototypage

• Transformer les idées en solutions concrètes.
• Wireframes, zoning, maquettes et cartes.
• Livrables intermédiaires testables.

Évaluation

• Évaluer de façon itérative les solutions générées.
• Tests utilisateurs, audit UX, échelles UX, test des 5 secondes, A/B testing.
• Évaluation des émotions et de l’utilisabilité.

Architecture de l’information

• Inventaire des contenus.
• Hiérarchisation de l’information.
• Architecture de l’information et sitemap.
• Card sorting comme méthode.
• Taxonomie, étiquetage et organisation des contenus.

Ateliers / livrables

• Atelier benchmark et empathy map.
• Atelier personas et experience map.
• Prototype UX low-fidelity : wireframes papier / schémas.
• Recadrage sous forme d’audit UX / audit ergonomique : utiliser les heuristiques, construire la cible, définir les objectifs et établir un plan d’action.

Module 4 – Principes et leviers d’ergonomie web

Objectif : connaître les grands principes qui rendent une interface plus lisible, plus accessible, plus engageante et plus efficace.

Fondements ergonomiques

• Utilité vs utilisabilité.
• Affordance : rendre l’action compréhensible.
• Efficacité et efficience.
• Charge cognitive et mémoire de travail.
• Accessibilité, lisibilité et prévention des erreurs.
• Feedback, cohérence et guidage.
• Cohérence de ton et d’image : responsive design, adaptive design, mobile first.

L’expérience commence toujours par le menu

• Menu principal horizontal.
• Mega menu et menu déroulant.
• Menu fixe / sticky, breadcrumb et navigation multi-niveaux.
• Menus dynamiques, chronologiques, pictographiques, semi-cachés, éclatés ou doubles menus.

La recherche devient un réflexe

• Transformer le site en moteur de recherche.
• Offrir de meilleures suggestions.
• Remplacer ou compléter la recherche par la suggestion.

Le grid design

• Créer un référentiel unique et universel pour les contenus.
• Grid design interactif, grid fluide, hétérotopique, ajustable ou personnalisable.
• Enjeu : instantanéité, dynamisme et marque.

Rendre lisible les flux : sources infinies de contenus

• Filtrer les flux par défaut.
• Navigation par sous-menus cachés.
• Interactions par clic ou swipe.

La data au service de l’interface

• Tableaux personnalisables.
• Rendre l’information visuelle.
• Classer les données avec filtres et recherche.
• Mettre en lumière une information.
• Exploiter les données en temps réel.
• Capter une cible volatile.

Module 5 – UI Design & Prototypage Figma

Objectif : passer de la démarche UX à une interface UI cohérente, puis à un prototype interactif réalisé dans Figma.

Cadre pédagogique

• Cas pratique : travail individuel et atelier collectif collaboratif.
• Outils de production mentionnés : Sketch, Figma, Adobe XD, Illustrator.
• Travail collaboratif et logique de conception partagée.

Introduction à Figma

• Interface et outils essentiels.
• Frames, composants et styles.
• Atelier : reproduction d’une interface simple.

Bases du design d’interface (UI)

• Hiérarchie visuelle.
• Typographie.
• Couleur et accessibilité.
• Grilles et espacements.
• UI patterns.
• Atelier : moodboard et direction artistique.

Design system & composants

• Création d’un mini design system.
• Styles de couleurs et styles typographiques.
• Boutons, champs, cartes et composants réutilisables.
• Auto layout.
• Variantes et composants réutilisables.
• Travail individuel : création d’une librairie UI du projet.

Wireframes et maquette haute fidélité

• Incorporation des wireframes UX et UI.
• Page d’accueil.
• Page clé du parcours.
• Version mobile / mobile first.

Prototypage interactif

• Création des interactions.
• Navigation entre les écrans.
• Simulation de parcours utilisateur.
• Livrable : prototype cliquable.

Restitution & présentation finale

• Présentation de la problématique.
• Démarche UX.
• Choix UI.
• Prototype Figma.
• Recommandations.

Appliquer la démarche UX
Élaborer une stratégie UX
Mener une étude utilisateurs
Alimenter une conception d’interface web / mobile / métier
Réaliser une interface web / mobile / métier
Mettre en œuvre la démarche UX dans une équipe projet
Promouvoir son travail au sein de la communauté UX

Prototypages et tests des interfaces
Analyse des utilisateurs et spécialisation de leurs besoins
Conception avec et pour les utilisateurs
No code et prototypage
Analyse d’une demande client et cadrage d’un projet de design d’expérience utilisateur

Être à l’aise avec un ordinateur et internet ; et avoir un ordinateur portable équipé WiFi.

Minimum 14 heures de cours sur 2 jours. (Possibilité d’une formation en groupe sur 35h) Les horaires sont : de 9h à 17h avec une pause déjeuner d’une heure.

*à partir de 700 euros HT par personne
Entreprises/Associations/Institutions : Me contacter