Cours UX/UI Design & Ergonomie

---

Introduction à l’UX/UI Design & Ergonomie

Ce cours est complet sous la forme de diaporama qui vous sera donné au format PDF en présentiel.

Cette page n’est que la structure de base qui sera complétée par la suite avec d’autres exemples complémentaires.

Pendant ce cous, je vous montrerai des projets concrets pour que vous puissiez vous rendre compte des différentes étapes afin de bien comprendre les concepts d’UX Design, d’UI, d’Ergonomie, de Design System de plus en plus utilisé dans les entreprises et bien sûr de l’accessibilité qui demanderait à elle seule une semaine de formation.

Définitions et concepts

• UX (User Experience) : C’est l’expérience vécue par l’utilisateur, un mélange de ressenti, d’efficacité et d’émotions.

Exemple : Vous êtes content après avoir pu réserver un train rapidement et facilement.

• UI (User Interface) : C’est l’aspect visuel de l’interface (boutons, couleurs, typographie, mise en place des composants).

Exemple : Vous cliquez sur la forme arrondie d’un bouton Acheter de couleur verte pétante !

• Différence clé :

  • UX = Invisible (ressenti, cheminement mental).
  • UI = Visible (design de l’écran).

---

Combinaisons UX/UI

Comparaison des combinaisons UX / UI et leurs effets sur l'expérience utilisateur

UX	UI	Interface Visuelle	Expérience Utilisateur	Retour utilisateur
Mauvaise	Bonne	Beau design, joli visuel	Incompréhensible, frustrant	C’est un beau site, mais je ne trouve pas ce que je cherche !
Bonne	Mauvaise	Moche, dépassée	Facile, rapide à utiliser	Ce site est moche mais j’ai réservé facilement une séance !
Bonne	Bonne	Claire, jolie et moderne	Fluide, agréable, efficace	Ce site est superbe et j'ai pu trouver les articles que je cherchais ! »

---

Les objectifs pédagogiques sont répartis sur les 4 jours et demi de formation dont voici les liens et le programme

Les présentations se feront à l’aide de diaporamas (UX/UI Design et Accessibilité) et de démonstrations en live suivi d’exercices pratiques en groupe.

Je vous donnerai les documents au format PDF.

Pour certaines démonstrations et TP je vous donnerai un lien vers un dépôt GitLab que vous pourrez récupérer ou simplement visualiser.

JOUR 1 — UX Research & Identification des besoins utilisateurs

UX Design : Comprendre les besoins des utilisteurs

Objectifs pédagogiques

• Comprendre ce qu’est l’UX et pourquoi elle est indispensable.
• Identifier les besoins utilisateurs via des méthodes simples et efficaces.
• Construire des personas cohérents.
• Analyser un parcours utilisateur (User Journey Map).
• Identifier les frustrations, motivations, objectifs.

Lien vers la page du jour 1

JOUR 2 — Figma, Wireframes & Cinématique (User-flow)

Objectifs pédagogiques

• Prendre en main Balsamiq et Figma (wireframe)
• Comprendre les bases de l’UI structurelle (wireframing) avec balsamiq.
• Concevoir des écrans low-fidelity ou basse résolution (wireframes).
• Créer un user-flow simple (base de la Cinématique).
• Apprendre à organiser un fichier professionnel dans Figma.
• Débuter un prototypage simple.

TP site web de colocation

TP sur le Card Sorting

TP Temple UX

Lien vers la page du jour 2

JOUR 3 — UI Design, Design System & Maquettes HD + Prototypage

Objectifs pédagogiques

• Comprendre les bases de l’UI design.
• Créer une hiérarchie visuelle claire
• Concevoir votre Design System
• Réaliser plusieurs Maquettes haute-fidélité (HD)
• Utiliser les Styles de Figma (couleurs, textes)
• Construire des composants interactifs (boutons, inputs)
• Prototyper un parcours fluide avec des transitions

Lien vers la page du jour 3

JOUR 4 — Accessibilité appliquée + Fichiers Figma

Ce cours fait l’objet d’une présentation complète en diaporama. Le contenu de la page est un rappel plutôt synthétique.

Il existe un autre cours complet dédié uniquement à l’Accessibilité

Objectifs pédagogiques

• Comprendre comment intégrer concrètement l’accessibilité dans les maquettes et dans vos page HTML.
• Savoir évaluer une maquette (audit UI / accessibilité) et des pages Web avec des outils.
• Apprendre à corriger des écrans non accessibles.
• Préparer votre Projet final de groupe à finaliser demain matin.

Lien vers la page du jour 4

JOUR 5 — Mise en application de l’ensemble de compétences

Ici, vous avez 1/2 journée pour travailler sur l’un des 5 projets proposés hier.

Objectifs de la demi-journée

Vous pouvez utiliser le processus de démonstration de l’application de recettes de cuisine dont je vous donnerai le lien.

Appliquer l’ensemble des compétences vues les jours précedents :

• UX research : on se limite à la partie profils utilisateurs et parcours émotionnel (Personas / User Journey Map)
• Wireframes (esquisse basique de la structure de vos pages) avec Balsamiq ou Figma,…
• UI Design (conception visuelle des interfaces) pour construire Design System basique(*) pour votre projet.
• Maquettes HD (représentation visuelle finale et détaillée) avec Figma ou autre)
• Prototypage (c’est là que vos maquettes deviennent interactives et cliquables !)
• Mise en place de l’accessibilité web des composants

• Organisation d’un dossier et fichiers de conception en mode Atomic Design

• Travailler en équipe, comme dans un vrai projet.
• Présenter un livrable professionnel à la fin de la matinée.

(*) vous pouvez inclure une palette de 3 à 4 couleurs, 2 tailles de typo, 3 états de vos boutons, un système d’espacements mais pas plus car il faudrait davantage de temps.

Objectifs détaillés de la demi-journée

Brief du projet (10 min)

• Présentation du sujet : Application de recettes de cuisine (exemple)
• Problématique exemple : “Comment aider les utilisateurs pressés à trouver et cuisiner rapidement ?”

PHASE 1 - UX Research simplifiée (30 min)

• Créer 2 Personas réalistes
• Dessiner 1 User Journey Map (du besoin à la recette cuisinée)
• Identifier les pain points (points de friction)

PHASE 2 - Wireframes basse fidélité (45 min)

• Sur papier ou Figma
• 3 écrans clés : Accueil / Détail recette / Favoris
• Focus : architecture de l’information, hiérarchie

PHASE 3 - Design System basique (30 min)

• Palette de couleurs (inspirée cuisine/food)
• Typographies (1 pour titres, 1 pour textes)
• 3 composants : Bouton / Card recette / Input recherche

PHASE 4 - Maquettes haute définition (1h)

• Transformer les wireframes en maquettes finales
• Appliquer le Design System
• Intégrer les bonnes pratiques d’accessibilité (contraste, tailles)

PHASE 5 - Prototypage (45 min)

• Relier les écrans avec des interactions
• Simuler le parcours utilisateur principal
• Tester la navigation

PHASE 6 - Organisation du fichier de conception (15 min)

• Structure claire dans Figma
• Nommage cohérent
• Documentation rapide

Et voilà, si vous suivez ce processus en 6 étapes, ça roule, vous aurez terminé dans les temps.

Note : Prenez en compte l’accessibilité du point de vue des couleurs/contrastes, tailles des polices et structure de vos pages. Ce sera suffisant pour cet exercice car il faut plus de temps pour tester l’accessibilité d’une page web et des composants.

Structure de la présentation diaporama au format texte (laissé temporairement)