📖 1. Le design centré sur l'humain : fondements théoriques et historique

Le design d'interfaces numériques ne se résume pas à « faire beau ». Il s'inscrit dans une tradition intellectuelle longue, héritière de la psychologie cognitive, de l'ergonomie et de l'architecture de l'information. Comprendre ces racines est indispensable pour tout étudiant en BUT MMI souhaitant concevoir des interfaces qui fonctionnent réellement pour leurs utilisateurs.

1.1 L'héritage du design industriel et de l'ergonomie

La notion de centration sur l'utilisateur émerge dans les années 1980, portée notamment par le psychologue cognitiviste Don Norman, alors chez Apple. Son ouvrage fondateur, The Design of Everyday Things (1988, réédité en 2013), pose les jalons d'une approche qui place l'utilisateur — et non le concepteur — au centre de toute décision de design. Norman y introduit des concepts devenus incontournables :

• L'affordance : propriété d'un objet qui suggère la manière de l'utiliser (une poignée invite à saisir, un bouton invite à appuyer). En numérique, un bouton avec un style 3D « invite » au clic.
• Le feedback : toute action de l'utilisateur doit provoquer une réponse perceptible du système (animation de chargement, message de confirmation, vibration sur mobile).
• La contrainte : limiter les actions possibles pour guider l'utilisateur (griser un bouton inaccessible, désactiver une option non disponible).
• La cohérence : des éléments similaires doivent se comporter de manière identique à travers tout le produit.
• Le modèle conceptuel : la représentation mentale que l'utilisateur se fait du système, qui doit correspondre au modèle réel de l'application.

Ces principes, formulés pour des objets physiques, s'appliquent directement aux interfaces numériques. Un formulaire en ligne dont les champs obligatoires ne sont pas clairement indiqués, une application dont les icônes ne sont pas auto-descriptives, ou un système de navigation contre-intuitif sont autant d'exemples d'échecs de design selon les critères de Norman.

1.2 L'UX vs l'UI : une distinction fondamentale

La confusion entre UX (User Experience) et UI (User Interface) est l'une des plus fréquentes dans le domaine. Voici une clarification rigoureuse :

« User experience encompasses all aspects of the end-user's interaction with the company, its services, and its products. » — Nielsen Norman Group (nngroup.com)

1.3 Le double diamant : le processus de design standard

Le modèle du Double Diamant, développé par le British Design Council en 2005, est aujourd'hui la référence méthodologique internationale pour structurer un processus de design. Il se compose de quatre phases :

• Découvrir (Discover) : comprendre le problème par la recherche utilisateur (interviews, ethnographie, analyse de données). On diverge en explorant tous les aspects du problème.
• Définir (Define) : synthétiser les insights de la recherche pour définir précisément le problème à résoudre. On converge vers une définition claire.
• Développer (Develop) : idéation et prototypage de solutions multiples. On diverge à nouveau en explorant diverses approches créatives.
• Délivrer (Deliver) : tester, affiner et livrer la solution retenue. On converge vers la meilleure solution validée par les tests.

Ce processus est itératif : après la phase de livraison, on retourne en recherche pour valider et améliorer continuellement le produit. En contexte BUT MMI, ce modèle structure la SAÉ (Situation d'Apprentissage et d'Évaluation) de Webdesign.

📚 2. Figma : l'outil de référence pour la conception UI/UX

Figma est devenu en quelques années l'outil incontournable de la conception d'interfaces numériques. Lancé en 2016 par Dylan Field et Evan Wallace, il se distingue par son fonctionnement entièrement dans le navigateur (SaaS), sa collaboration en temps réel et ses fonctionnalités avancées de prototypage. Figma reste indépendant et constitue le standard de l'industrie, utilisé par des équipes comme Google, Microsoft, Airbnb, Spotify et des milliers de start-ups à travers le monde.

2.1 L'interface de Figma décryptée

L'interface de Figma s'organise autour de plusieurs espaces de travail complémentaires :

• Le panneau de gauche (calques et assets) : gestion de l'arborescence des calques, accès à la bibliothèque de composants, icônes et polices importées via Google Fonts ou des fichiers OTF/TTF locaux.
• Le canevas central : espace de travail principal, infini, avec le contenu de vos pages et frames. Le zoom s'effectue avec Ctrl/Cmd + Scroll ou les raccourcis numériques (touche Z pour zoomer sur une sélection).
• Le panneau de droite (propriétés) : inspection et modification des propriétés de l'élément sélectionné — dimensions en pixels, couleurs de remplissage et de contour, effets (ombres, flous), contraintes de mise en page responsive, auto-layout.
• La barre d'outils supérieure : outils de sélection (V), de dessin vectoriel (P pour le Pen tool, R pour rectangle, E pour ellipse), de texte (T), de prototypage et de commentaires (C).

2.2 Les Frames et Auto-Layout : la base de la conception responsive

La notion de Frame (cadre) est centrale dans Figma. Contrairement à un simple calque ou groupe, une Frame peut avoir des dimensions fixes correspondant à des breakpoints standards — iPhone 14 Pro : 393×852px ; iPad : 768×1024px ; Desktop 1440×900px — et son contenu peut être configuré pour déborder ou être masqué. Les frames peuvent être imbriquées les unes dans les autres, reproduisant ainsi la logique HTML de conteneurs (div) imbriqués.

L'Auto-Layout est la fonctionnalité la plus puissante de Figma pour le design responsive. Activé via Shift+A ou le menu contextuel, il permet de définir des règles de mise en page automatique :

• Direction : horizontal (rangée) ou vertical (colonne), équivalent à flex-direction en CSS.
• Espacement : fixe entre éléments (gap) ou « espace entre » (équivalent CSS justify-content: space-between).
• Padding : marges internes uniformes ou individualisées (haut, droite, bas, gauche).
• Alignement : début, centre, fin, étirement (équivalent align-items et justify-content).
• Wrap : retour à la ligne automatique des éléments enfants (équivalent flex-wrap: wrap).

Grâce à l'Auto-Layout, un bouton dont le texte est modifié s'adapte automatiquement en largeur, et une card qui reçoit un contenu plus long grandit naturellement vers le bas. C'est le comportement réel du CSS Flexbox, traduit en interface graphique intuitive. Figma dispose également de la grille CSS (Grid layout) depuis fin 2024 pour les mises en page plus complexes.

2.3 Les Composants et leurs Variants

Un composant Figma est un élément réutilisable (master component) dont on peut créer autant d'instances que nécessaire. Modifier le composant maître met automatiquement à jour toutes ses instances dans le projet — exactement comme une classe CSS ou un composant React.

Les Variants permettent de regrouper plusieurs états d'un même composant dans un seul composant maître. Par exemple, un bouton « Button » peut avoir des variants pour :

• Type : Primary, Secondary, Ghost, Destructive
• Taille : SM, MD, LG
• État : Default, Hover, Pressed, Disabled, Loading
• Icône : None, Left, Right, Only

Cette organisation en variants reflète exactement la façon dont les composants sont codés en React (props) ou en CSS (classes modificatrices BEM). Le Dev Mode de Figma génère même des suggestions de code React ou CSS à partir des propriétés des composants.

2.4 Les Variables et Design Tokens dans Figma

Depuis 2023, Figma intègre nativement les Variables, permettant de définir des design tokens directement dans l'outil. Les design tokens sont des valeurs abstraites (couleurs, espacements, typographies, border-radius…) nommées et réutilisables qui constituent le fondement d'un design system :

• color/primary/500 → #4c1d95 (violet principal)
• color/primary/50 → #f5f3ff (violet très clair, fond)
• spacing/base → 8px (unité de base, tous les espacements sont des multiples)
• radius/card → 12px, radius/button → 8px, radius/pill → 999px
• font/body/size → 16px, font/heading/weight → 700

Ces variables peuvent être exportées au format JSON et utilisées directement dans le code CSS/JS via des outils comme Style Dictionary (Amazon) ou Theo. La frontière entre design et développement s'estompe grâce à ce pont entre les tokens Figma et les custom properties CSS (--color-primary-500).

Les variables Figma supportent également les modes (Dark mode, High Contrast, Brand A/B…) permettant de passer instantanément d'un thème à l'autre sur l'ensemble du projet.

2.5 Le prototypage et les micro-interactions

Le mode Prototype de Figma permet de créer des liens interactifs entre les frames, définissant des scénarios de navigation réalistes. Chaque lien définit :

• Le déclencheur : clic, survol (hover), glissement vers, touche du clavier, délai automatique (trigger after delay).
• L'action : navigation vers une frame, ouverture d'un overlay (modale, drawer, tooltip), fermeture d'overlay, retour en arrière, défilement vers une section.
• L'animation : instantané, fondu (opacity), slide (depuis un bord), push (pousse l'écran précédent), dissolve, smart animate (interpolation automatique entre états correspondants).
• La courbe d'accélération (easing) : linéaire, ease-in, ease-out, ease-in-out, spring (ressort physique avec masse, rigidité et amortissement configurables).

Les micro-interactions — ces petites animations qui répondent aux actions de l'utilisateur — jouent un rôle crucial dans la qualité perçue d'un produit. Selon des études de la Nielsen Norman Group, elles augmentent significativement la satisfaction utilisateur et réduisent les erreurs en fournissant un feedback immédiat. Dans Figma, les Component States et la fonction Smart Animate permettent de créer des transitions fluides entre états (Default → Hover → Pressed → Disabled).

🔧 3. L'Atomic Design : construire un design system cohérent

La méthodologie Atomic Design, formalisée par Brad Frost dans son ouvrage éponyme (2016, disponible gratuitement sur bradfrost.com/blog/post/atomic-web-design/), propose une analogie chimique pour structurer les interfaces numériques de manière hiérarchique et réutilisable.

Dans Figma, l'Atomic Design se traduit par l'organisation des composants en bibliothèques hiérarchisées. Les atomes sont les styles partagés (couleurs, textes, effets) ; les molécules et organismes sont des composants Figma avec leurs variants ; les templates sont des layouts réutilisables. Cette organisation structurée permet :

• La cohérence visuelle : tous les designers de l'équipe utilisent les mêmes atomes de base.
• La maintenabilité : modifier un bouton (atome) propage le changement à tous les composants qui l'utilisent.
• L'efficacité : les nouvelles pages se construisent en assemblant des organismes existants, sans tout recréer.
• La traçabilité design-dev : les noms Figma correspondent aux noms des composants dans le code.

3.1 Les grands design systems de référence

• Material Design 3 (Google) — material.io : système complet avec tokens, composants adaptatifs, thèmes dynamiques (color schemes générés depuis une couleur source avec les algorithmes HCT). Disponible pour Android, Web et Flutter. Version 3 introduit les expressive components et le dynamic color system.
• Human Interface Guidelines (Apple) — developer.apple.com/design : spécifications pour iOS, macOS, watchOS et tvOS. Accent sur la profondeur (vitreous materials), les matières translucides et la navigation gestuelle.
• Fluent Design System (Microsoft) — fluent2.microsoft.design : design system utilisé dans Windows 11, Microsoft 365 et Teams. Basé sur les concepts d'acrylique, de révélation (Reveal highlight) et de mouvement cohérent.
• Carbon Design System (IBM) — carbondesignsystem.com : très documenté, orienté applications B2B et data visualization. Utilise des tokens définis dans un système de thèmes White, Gray 10, Gray 90 et Gray 100.
• DSFR — Design System de l'État Français — design.numerique.gouv.fr : le système officiel de l'État français, obligatoire pour les sites gouvernementaux (.gouv.fr). Conçu pour respecter WCAG 2.1 AA et RGAA 4.1 nativement. Open source sur GitHub (gouvernement/dsfr).

📚 4. Accessibilité numérique : WCAG 2.2 et RGAA 4.1

L'accessibilité numérique est l'aptitude d'un service numérique à être utilisé par toutes les personnes, quelles que soient leurs limitations physiques, cognitives ou techniques. En France, elle est encadrée par un cadre légal strict et des référentiels techniques précis qui s'imposent à tout professionnel du numérique.

Selon le rapport mondial de l'OMS, environ 15% de la population mondiale vit avec une forme de handicap. Pour le numérique, cela inclut des limitations visuelles (cécité, malvoyance, daltonisme), auditives (surdité, malentendants), motrices (utilisation de la souris impossible ou limitée), et cognitives (dyslexie, TDAH, troubles de la mémoire). Concevoir des interfaces accessibles, c'est concevoir pour tous.

4.1 Le cadre légal français et européen

La loi du 11 février 2005 pour l'égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées a posé les bases légales de l'accessibilité numérique en France. Elle a été complétée par la loi pour une République Numérique (2016) et transposée avec la directive européenne 2016/2102 concernant l'accessibilité des sites web et applications mobiles du secteur public.

Depuis 2021, les obligations s'étendent au secteur privé pour les entreprises dont le chiffre d'affaires dépasse 250 millions d'euros. La sanction pour non-conformité avérée peut atteindre 50 000 €, et les plaignants peuvent saisir le Défenseur des droits. En 2025, la directive européenne European Accessibility Act (EAA) étend ces obligations à l'ensemble des produits et services numériques commercialisés dans l'UE.

4.2 Les WCAG 2.2 : structure et principes POUR

Les Web Content Accessibility Guidelines (WCAG), publiées par le W3C dans leur version 2.2 (octobre 2023), s'organisent autour de 4 principes fondamentaux résumés par l'acronyme POUR :

• Perceptible : l'information et les composants d'interface doivent être présentés de manière à être perçus par tous les utilisateurs. Exemples : textes alternatifs pour les images, sous-titres pour les vidéos, contraste suffisant (1.4.3), présentation adaptable (1.3.x).
• Utilisable : les composants d'interface et la navigation doivent être utilisables sans souris, sans gestes complexes, avec suffisamment de temps. Exemples : accessibilité au clavier complète (2.1.1), pas de pièges à clavier (2.1.2), contrôle du temps (2.2.x).
• Compréhensible : l'information et le fonctionnement de l'interface doivent être compréhensibles. Exemples : langue de la page déclarée (3.1.1), étiquettes de champs de formulaire claires (3.3.2), messages d'erreur explicites et suggestions de correction (3.3.3, 3.3.4).
• Robuste : le contenu doit être suffisamment robuste pour être interprété par une grande variété d'agents utilisateurs, y compris les technologies d'assistance. Exemples : HTML valide (4.1.1), ARIA utilisé correctement (4.1.2, 4.1.3).

Chaque critère est associé à un niveau de conformité : A (minimum), AA (standard légal en France) et AAA (excellence). Le niveau AA est celui requis par le RGAA et les réglementations européennes.

4.3 Les critères WCAG 2.2 nouveaux (par rapport à 2.1)

La version 2.2, publiée en octobre 2023, ajoute 9 nouveaux critères dont les plus importants pour les designers UI sont :

• 2.4.11 Focus Appearance (Minimum) — AA : la zone de focus clavier doit avoir une taille minimale (périmètre de 2px au moins) et un contraste suffisant (3:1 minimum). Ce critère oblige à concevoir des indicateurs de focus visibles et différenciants.
• 2.5.7 Dragging Movements — AA : toute interaction nécessitant un glissement (drag-and-drop, slider, carrousel tactile) doit avoir une alternative sans glissement accessible au clic ou au clavier.
• 2.5.8 Target Size (Minimum) — AA : la taille minimale des cibles interactives est de 24×24 CSS pixels, avec un espace autour portant la zone à 24px. Idéalement, les cibles doivent atteindre 44×44px (recommandation Apple et Google pour le mobile).
• 3.2.6 Consistent Help — A : les mécanismes d'aide (chat support, FAQ, téléphone, formulaire de contact) doivent apparaître au même endroit sur toutes les pages du site.
• 3.3.7 Redundant Entry — A : dans un même flux (formulaire multi-étapes, tunnel de commande), ne pas redemander des informations déjà fournies à une étape précédente, ou les pré-remplir automatiquement.
• 3.3.8 Accessible Authentication (Minimum) — AA : la connexion ne doit pas nécessiter de résoudre des puzzles cognitifs (mémorisation de mots, CAPTCHA basé sur la reconnaissance d'image sans alternative audio). Les gestionnaires de mots de passe doivent être supportés.

4.4 Le RGAA 4.1 et ses 13 thématiques

Le Référentiel Général d'Amélioration de l'Accessibilité (RGAA), dans sa version 4.1 publiée par la DINUM, adapte les WCAG 2.1 au contexte web français. Il se compose de 106 critères regroupés en 13 thématiques :

« Le RGAA permet de contrôler l'accessibilité d'un site ou d'une application web et de l'améliorer. Il constitue la référence technique obligatoire pour les organismes publics soumis à des obligations légales en matière d'accessibilité. » — DINUM, accessibilite.numerique.gouv.fr

🔧 5. Outils d'audit et méthodes de recherche utilisateur

5.1 Les outils d'audit d'accessibilité

L'audit d'accessibilité combine des outils automatisés (qui détectent ~30-40% des problèmes) et des tests manuels :

• WAVE (webaim.org) : extension navigateur qui visualise les problèmes d'accessibilité directement dans la page avec des icônes colorées. Idéal pour une première analyse rapide et pédagogique.
• axe DevTools (deque.com) : le standard professionnel. Extension Chrome/Firefox + API pour intégration CI/CD (Cypress-axe, jest-axe). Détecte les violations WCAG 2.1 et 2.2 avec un taux de faux positifs quasi nul.
• Lighthouse (Chrome DevTools) : audit automatisé des performances, accessibilité, bonnes pratiques SEO. Score d'accessibilité basé sur axe-core.
• Contrast Checker WebAIM — webaim.org/resources/contrastchecker : vérification instantanée des ratios de contraste WCAG 1.4.3 et 1.4.6.
• Colour Contrast Analyser (TPGi) : application desktop pour analyser les contrastes sur n'importe quel élément de l'écran, y compris les images et les textes sur fonds complexes.
• Accessibility Insights for Web (Microsoft) : guide d'audit pas-à-pas pour les tests manuels WCAG, avec checklist interactive et enregistrement des résultats.

5.2 Les méthodes de recherche UX

La recherche utilisateur est la discipline qui permet de recueillir des données qualitatives et quantitatives sur les comportements, besoins et motivations des utilisateurs. Elle se divise en méthodes génératives (pour comprendre et découvrir) et évaluatives (pour valider et mesurer) :

5.3 Le Persona : un livrable central

Le Persona est une représentation fictive d'un utilisateur-type, basée sur des recherches réelles. Il ne s'agit pas d'un utilisateur réel, mais d'une synthèse des patterns observés chez plusieurs utilisateurs réels. Un persona efficace contient :

• Identité : prénom, photo (illustrative), âge, profession, localisation
• Citation clé : une phrase qui capture son état d'esprit vis-à-vis du produit
• Objectifs : ce qu'il cherche à accomplir (goals fonctionnels et émotionnels)
• Frustrations : ce qui le bloque ou le déçoit (pain points)
• Comportements digitaux : devices utilisés, compétences numériques, applications préférées
• Contexte d'usage : où, quand et dans quelles conditions utilise-t-il le produit

Règle d'or : jamais de persona sans données réelles. Un persona imaginé perpétue les biais du designer et peut conduire à des décisions de design contre-productives. Chaque affirmation du persona doit pouvoir être reliée à au moins 2-3 verbatims ou observations de terrain.

⚠️ 6. Pièges et erreurs fréquentes en design UX/UI

📝 7. Mini-questions de réflexion

Avant de passer au quiz d'auto-évaluation, réfléchissez à ces questions :

1. Quelle est la différence entre l'affordance d'un bouton physique et celle d'un bouton numérique ? Comment compense-t-on l'absence de retour tactile sur un écran ?
2. Vous êtes designer sur un projet de refonte de l'espace client d'une banque. Quelles méthodes de recherche utilisateur déployez-vous en priorité ? Justifiez votre choix en fonction des contraintes (budget limité, délai de 3 semaines).
3. Un développeur vous dit « on n'a pas besoin d'accessibilité, nos clients sont tous valides ». Comment lui répondez-vous avec des arguments à la fois légaux, économiques et UX ?
4. Expliquez comment le principe d'Atomic Design se retrouve dans la structure d'un projet Figma bien organisé. Donnez un exemple concret avec une card de produit e-commerce (atomes → molécules → organisme).
5. Le ratio de contraste minimum WCAG 2.2 AA pour un texte normal est 4.5:1. La couleur #4c1d95 (violet) sur fond blanc #ffffff respecte-t-elle ce critère ? Comment vérifier cela ?

✅ Synthèse

Cette leçon vous a permis de découvrir ou d'approfondir les fondements du design d'interfaces numériques centrées sur l'humain :

• L'UX (expérience globale, processus, recherche) se distingue de l'UI (interface visuelle, composants, interactions), deux disciplines complémentaires qu'un professionnel MMI doit maîtriser dans leur interdépendance.
• Don Norman et l'ISO 9241-210 ont posé les bases théoriques du design centré utilisateur, avec des concepts toujours opérationnels : affordances, feedback, contraintes, cohérence, modèles conceptuels.
• Figma est l'outil de référence pour la conception UI/UX, avec ses frames, auto-layout, variables, composants avec variants et modes de prototypage avancés.
• L'Atomic Design de Brad Frost fournit une architecture cohérente (Atomes → Molécules → Organismes → Templates → Pages) pour construire des design systems réutilisables et maintenables.
• Les WCAG 2.2 et le RGAA 4.1 constituent le cadre normatif de l'accessibilité numérique, avec des obligations légales croissantes en France et en Europe.
• La recherche utilisateur — interviews, tests d'utilisabilité, personas basés sur des données, user journeys — est le socle indispensable de toute démarche UX sérieuse.

📚 Pour aller plus loin

• Nielsen Norman Group (nngroup.com) — La référence mondiale en recherche UX : articles, rapports et certifications professionnelles
• WCAG 2.2 — W3C Web Accessibility Initiative — Texte officiel et ressources complémentaires
• RGAA 4.1 — accessibilite.numerique.gouv.fr (DINUM) — Référentiel officiel français avec 106 critères et tests
• Atomic Design — Brad Frost — Article fondateur de la méthodologie Atomic Design (gratuit en ligne)
• Material Design 3 — Google — Design system de référence avec composants, tokens et guidelines
• Design System de l'État Français (DSFR) — Système officiel open source pour les sites gouvernementaux
• Figma Resource Library — Documentation officielle, tutorials et community files
• WebAIM Contrast Checker — Vérificateur de contrastes couleurs WCAG en ligne
• Apple Human Interface Guidelines — Référence pour la conception iOS et macOS