Interfaces · Expérience utilisateur · Tests

Des interfaces que vos utilisateurs adorent.

L'UX design (expérience utilisateur) organise ce que fait un produit — parcours, hiérarchie de l'information, logique d'interaction — quand l'UI design (interface utilisateur) définit son apparence : couleurs, typographies, espacements, états. Contrairement à une idée reçue, le design se mesure : taux de complétion des tâches, temps de réalisation, erreurs, conversion. Trois repères chiffrés pour 2026 : tester avec 5 utilisateurs suffit à détecter environ 85 % des problèmes d'utilisabilité (Nielsen Norman Group) ; les entreprises les plus matures en design ont enregistré 32 points de croissance de revenus de plus que leur secteur sur 5 ans (McKinsey, 2018) ; et l'accessibilité numérique est devenue une obligation légale pour l'e-commerce, la banque ou le transport depuis le 28 juin 2025 (directive européenne EAA). Ce guide déroule notre méthode — recherche, wireframes, prototypes testés, design system, handoff — avec WCAG 2.2 AA comme standard de livraison.

Sources officielles : W3C — Web Content Accessibility Guidelines (WCAG) 2.2EUR-Lex — directive (UE) 2019/882 (European Accessibility Act)

5 utilisateurs

suffisent à détecter environ 85 % des problèmes d'utilisabilité d'une interface — au-delà, le rendement décroît vite

Nielsen Norman Group, 2000

+32 points

de croissance de revenus sur cinq ans pour les entreprises les plus matures en design, par rapport à la moyenne de leur secteur

McKinsey, « The Business Value of Design », 2018

28 juin 2025

date d'application de l'European Accessibility Act : e-commerce, banque, transport et services numériques concernés doivent être accessibles

Directive (UE) 2019/882

4,5:1

contraste minimum entre un texte courant et son fond pour atteindre le niveau AA de WCAG 2.2 — notre standard de livraison

W3C, WCAG 2.2

Ce que couvre ce guide

Figma
Framer
Storybook
Maze
Tailwind CSS
Design system
Wireframes
Prototypes interactifs
Tests utilisateurs
WCAG 2.2
Heuristiques Nielsen
Dev Mode
Figma
Framer
Storybook
Maze
Tailwind CSS
Design system
Wireframes
Prototypes interactifs
Tests utilisateurs
WCAG 2.2
Heuristiques Nielsen
Dev Mode
Figma
Framer
Storybook
Maze
Tailwind CSS
Design system
Wireframes
Prototypes interactifs
Tests utilisateurs
WCAG 2.2
Heuristiques Nielsen
Dev Mode
Figma
Framer
Storybook
Maze
Tailwind CSS
Design system
Wireframes
Prototypes interactifs
Tests utilisateurs
WCAG 2.2
Heuristiques Nielsen
Dev Mode
Les fondations

UI / UX Design : les 6 piliers à maîtriser

La différence UI vs UX

UX = quoi, pourquoi, dans quel ordre (architecture de l'information, parcours, logique). UI = quoi ça ressemble (couleurs, typos, espacements, états). Les deux sont indissociables : 80 % du ressenti utilisateur vient de l'UX, mais 80 % du premier regard vient de l'UI.

Tests utilisateurs : ce qui marche

Cinq utilisateurs testés détectent environ 85 % des problèmes d'ergonomie (règle de Nielsen). Méthode : scénarios concrets (« trouve comment annuler ton abonnement »), protocole think-aloud, session de 30 minutes, observation muette. À refaire à chaque jalon design majeur.

Design system : économiser sur la durée

Un bon design system fait gagner environ 40 % du temps de dev sur les projets suivants. Composants atomiques versionnés dans Figma + export Storybook + tokens partagés (couleurs, espacements, typos, rayons) entre design et code. Indispensable dès qu'une marque a 3 + produits ou 5 + personnes en équipe.

Accessibilité WCAG 2.2

L'accessibilité n'est plus optionnelle en 2026 : directive européenne EAA en application depuis juin 2025 pour e-commerce, banque, transport. Bases : contrastes AA (4,5:1 pour texte normal), navigation clavier complète, aria-labels explicites, alt text descriptif, focus visible, pas d'auto-play audio. Bénéfice collatéral : + de trafic SEO en moyenne.

Recherche utilisateur agile

Pas besoin d'une étude de six mois. Des interviews hebdo de 30 minutes avec 3-5 utilisateurs suffisent à valider des hypothèses. Outils : Maze pour tests non-modérés à grande échelle, Calendly + Zoom pour interviews qualitatives, Hotjar pour heatmaps, Plausible pour métriques. Apprendre en continu, pas en batch.

Handoff design → dev

Un beau Figma ne suffit pas — il faut que le dev puisse implémenter sans relire le design cinq fois. Bonnes pratiques : auto-layout Figma qui reflète flexbox CSS, tokens exportés en JSON ou via Tokens Studio, composants Figma qui mappent les composants React, Dev Mode activé avec spécifications claires (padding, rayons, transitions).

Approfondir

Les décisions qui comptent vraiment

Les arbitrages que l'on nous demande le plus souvent de trancher, avec les critères, les chiffres et les contre-exemples.

UX ou UI : qui fait quoi, et dans quel ordre ?

La confusion entre UX et UI coûte cher, parce qu'elle inverse l'ordre du travail. L'UX (expérience utilisateur) répond à des questions de structure : qui utilise ce produit, pour accomplir quoi, en combien d'étapes, avec quelles informations sous les yeux à chaque instant ? Elle produit des personas, des parcours, une architecture de l'information, des wireframes volontairement gris et laids — pour que la discussion porte sur la logique, pas sur la couleur d'un bouton. L'UI (interface utilisateur) vient ensuite habiller cette structure : grille, typographies, couleurs, iconographie, états d'interaction, micro-animations. Elle porte la marque et la crédibilité.

Notre séquence de travail : recherche (interviews courtes, analyse des parcours existants), wireframes basse fidélité validés vite, prototype cliquable testé sur cinq utilisateurs par profil, puis design haute fidélité et design system, enfin passation au développement avec revue de design pendant l'implémentation. Le point de contrôle qui change tout : ne jamais passer à la couche visuelle tant que le parcours n'est pas validé sur un prototype. Corriger un parcours sur un wireframe coûte une heure ; le corriger après le développement coûte un sprint.

PhaseQuestion traitéeLivrableErreur fréquente
Recherche (UX)Qui utilise le produit, pour quoi faire ?Personas, parcours, audit des frictionsSauter l'étape et concevoir pour soi-même
Structure (UX)Quelles étapes, quelle information, dans quel ordre ?Architecture de l'information, wireframesDébattre des couleurs avant d'avoir validé le parcours
Prototype (UX)Est-ce que ça marche pour de vrais utilisateurs ?Prototype cliquable testé (5 utilisateurs par profil)Tester seulement à la fin, quand tout est développé
Interface (UI)À quoi ça ressemble, quel niveau de finition ?Design haute fidélité, états, micro-interactionsHabiller une structure encore bancale
Système (UI)Comment rester cohérent sur la durée ?Design system, tokens, documentationLivrer des écrans sans les règles qui les gouvernent
UX et UI — deux métiers, deux moments du projet — Séquence appliquée sur nos projets — chaque phase se valide avant de passer à la suivante.

Accessibilité numérique : ce que WCAG 2.2 et l'European Accessibility Act exigent vraiment

L'accessibilité a changé de statut : de bonne pratique, elle est devenue une obligation légale pour une large part du web marchand. La directive européenne (UE) 2019/882, dite European Accessibility Act, s'applique depuis le 28 juin 2025 aux services de commerce en ligne, aux services bancaires aux consommateurs, au transport de voyageurs, aux livres numériques et aux communications électroniques. Le référentiel technique de référence est WCAG 2.2, publié par le W3C, dont le niveau AA constitue la cible attendue — et notre critère de livraison sur tous les projets, y compris ceux qui ne sont pas légalement soumis.

En pratique, l'essentiel du travail tient dans une poignée de fondamentaux : un contraste d'au moins 4,5:1 entre un texte courant et son fond, une navigation intégralement possible au clavier avec un focus toujours visible, des intitulés de champs et de boutons explicites, des alternatives textuelles utiles sur les images porteuses de sens, une structure de titres cohérente et aucun contenu dont la compréhension dépende uniquement de la couleur. Ces règles ne brident pas le design — elles éliminent les négligences. Bénéfice collatéral rarement anticipé : une structure sémantique propre et des libellés explicites servent exactement les mêmes intérêts que le référencement naturel et les moteurs de réponse.

NiveauCe qu'il couvreQui est concerné
ALe minimum absolu : contenu perceptible et utilisable au clavierAucun site sérieux ne devrait s'arrêter là
AAContrastes 4,5:1, focus visible, libellés explicites, cohérence de navigationNiveau exigé par l'EAA et le RGAA — notre standard de livraison
AAAExigences renforcées (contraste 7:1, langage simplifié, alternatives étendues)Ciblé sur des contenus ou publics spécifiques, rarement exigible globalement
WCAG 2.2 — les trois niveaux et ce qu'ils impliquent — Référentiel : W3C, WCAG 2.2. Obligation européenne : directive (UE) 2019/882, applicable depuis le 28 juin 2025.

Design system : à partir de quand il devient rentable

Un design system n'est pas une bibliothèque de jolis composants : c'est un contrat entre le design et le code. Des tokens partagés (couleurs, espacements, rayons, typographies) portent les mêmes noms dans Figma et dans le code — « primary-500 », pas « le bleu » — et chaque composant existe une seule fois, avec tous ses états documentés : par défaut, survol, focus, désactivé, chargement, erreur. Le bénéfice apparaît au deuxième ou troisième produit, pas au premier : le coût de conception d'un nouvel écran s'effondre, et la cohérence cesse de reposer sur la mémoire des personnes en place.

Le mauvais moment pour le construire : le premier site vitrine d'une PME, où une charte simple et une poignée de composants suffisent. Le bon moment : quand plusieurs équipes ou plusieurs produits se partagent la marque, quand le rythme de livraison s'accélère, ou quand les incohérences visuelles commencent à se voir en réunion. Notre position sur le sujet est constante et un peu ennuyeuse : on construit le système au moment où il devient moins cher que le désordre qu'il remplace — jamais avant.

SituationRecommandationPourquoi
Un seul site vitrine, une personne aux commandesCharte simple + composants de baseLe système coûterait plus que le désordre qu'il évite
Un produit qui évolue vite, 2 à 3 contributeursTokens partagés + bibliothèque de composantsLa cohérence commence à se perdre entre les écrans
Plusieurs produits ou équipes, marque communeDesign system documenté et versionnéChaque écran suivant coûte moins cher à concevoir et à développer
Refonte complète à venirConstruire le système pendant la refonteLe meilleur moment : on paie l'effort une seule fois
Faut-il un design system ? Grille de décision
Notre méthode

UI / UX Design : notre méthode en 5 étapes

01

Recherche utilisateur

Interviews qualitatives (3-5 utilisateurs), analyse des concurrents, cartographie des personas et des job-to-be-done, audit des parcours existants.

02

Wireframes basse-fi

Maquettes simples en gris, focalisées sur l'architecture de l'information et la logique d'interaction. Validation rapide avant tout travail visuel.

03

Prototypes interactifs

Prototypes Figma cliquables, scénarios réalistes, tests utilisateurs modérés ou non-modérés (Maze). Itération jusqu'à validation des parcours critiques.

04

Design haute-fi + design system

Application complète du design system : couleurs, typos, espacements, composants, états, micro-interactions. Toutes les tailles d'écran couvertes.

05

Handoff et implémentation

Dev Mode Figma activé, spécifications complètes, audit accessibilité avant développement, QA design pendant implémentation, validation de livraison avec pixel-matching.

Idées reçues

UI / UX Design : mythes vs réalité

Ce qu'on entend souvent, et ce qui se passe vraiment dans nos projets.

Mythe

« Le design, c'est subjectif. »

Réalité

Le goût est subjectif, le design ne l'est pas. Il se mesure : taux de complétion de tâche, temps de réalisation, erreurs commises, satisfaction self-report. Un design qui convertit mal convertit mal, peu importe l'opinion du client ou du designer.

Mythe

« Mobile first = juste faire plus petit. »

Réalité

Le contexte mobile est fondamentalement différent : pouce mouvant, bras fatigué, attention partagée, temps court, luminosité variable. Un menu hamburger hérité du desktop (taux d'utilisation faible) est rarement la bonne réponse. Les interactions tactiles (swipe, long-press, pinch) remplacent souvent des actions click.

Mythe

« Un design system ralentit la créativité des designers. »

Réalité

À court terme, il impose des contraintes. À moyen terme, il libère les designers des sujets bas niveau (padding, typo, color) pour se concentrer sur les problèmes UX de fond. Les plus grandes équipes design au monde (Airbnb, Shopify, Atlassian) reposent sur des design systems matures.

Mythe

« L'accessibilité, c'est pour une minorité d'utilisateurs. »

Réalité

Environ 15 % des Français ont un handicap (vision, motricité, cognition, audition). Les pratiques accessibles bénéficient aussi aux autres : sous-titres utiles dans un environnement bruyant, navigation clavier pour power users, contraste élevé pour mobile en plein soleil. L'accessibilité est une base, pas un bonus.

Questions fréquentes

UI / UX Design : vos questions, nos réponses

Quelle est la différence entre UX design et UI design ?

L'UX design décide de ce que fait le produit : quelles étapes, dans quel ordre, avec quelle information à chaque écran. L'UI design décide de ce à quoi il ressemble : couleurs, typographies, espacements, états d'un bouton. Une interface superbe posée sur un parcours illogique reste un échec ; un parcours limpide mal habillé inspire peu confiance. Les deux se conçoivent ensemble, mais dans cet ordre : structure d'abord, habillage ensuite.

Combien d'utilisateurs faut-il tester pour que ce soit fiable ?

Cinq, par profil d'utilisateur. Les travaux du Nielsen Norman Group montrent que cinq testeurs révèlent environ 85 % des problèmes d'utilisabilité d'une interface : au-delà, les mêmes frictions reviennent. Mieux vaut cinq utilisateurs testés à trois jalons différents que quinze utilisateurs testés une seule fois à la fin. Nos sessions durent 30 minutes, sur des scénarios concrets (« trouvez comment demander un devis »), avec observation silencieuse — on regarde ce que les gens font, pas ce qu'ils disent qu'ils feraient.

Combien coûte une mission UI / UX ?

Cela dépend du périmètre : audit d'un parcours existant, refonte d'un tunnel critique, conception complète d'un produit, ou construction d'un design system. Les variables qui pèsent : le nombre d'écrans et d'états à concevoir, la profondeur de la recherche utilisateur, le niveau d'exigence sur l'accessibilité et l'existence ou non d'une charte graphique en amont. Nous chiffrons au forfait fixe, sans régie horaire, avec un devis gratuit sous 24 h. Notre simulateur en ligne vous aide à cadrer l'ampleur du projet avant l'échange.

Mon site doit-il légalement être accessible ?

Pour le secteur public et les grandes entreprises françaises, l'obligation existe de longue date (référentiel RGAA). Depuis le 28 juin 2025, l'European Accessibility Act (directive (UE) 2019/882) étend l'exigence à des services privés très courants : commerce en ligne, services bancaires, transport de voyageurs, livres numériques, communications électroniques. Le niveau de référence est WCAG 2.2 AA. Au-delà de la conformité, l'accessibilité profite à tout le monde : navigation clavier, contrastes lisibles au soleil, structure de titres claire — les mêmes bases qui aident aussi les moteurs de recherche.

À partir de quand un design system devient-il rentable ?

Quand la même décision de design se reprend plusieurs fois : deux produits ou plus, trois personnes ou plus qui produisent des écrans, ou un rythme d'évolution soutenu. En dessous, un design system complet est un investissement prématuré — une bibliothèque de composants légère et des tokens partagés suffisent. Le vrai gain n'est pas esthétique mais économique : les écrans suivants se conçoivent et se développent plus vite, et la cohérence cesse de dépendre de la vigilance de chacun.

Peut-on refondre le design sans tout redévelopper ?

Souvent, oui. Si la base technique est saine, une refonte visuelle et ergonomique peut se limiter à la couche d'interface : nouvelle grille, nouveaux composants, nouveaux parcours sur les écrans critiques. Le redéveloppement complet s'impose quand le code mêle logique métier et présentation, quand la performance est irrécupérable ou quand le socle technique n'est plus maintenu. Notre audit tranche en quelques jours et chiffre les deux scénarios — notre guide de la refonte détaille la méthode.

Comment savoir si un design « marche » ?

En le mesurant, pas en en débattant. Les indicateurs que nous suivons : taux de complétion de la tâche visée, temps pour l'accomplir, nombre d'erreurs et de retours en arrière, taux de conversion sur les parcours clés, et satisfaction déclarée après usage. Un désaccord esthétique se tranche par un test, pas par l'avis du plus gradé dans la salle. C'est la meilleure protection contre les refontes qui font joli et vendent moins.

Que reçoit concrètement mon développeur à la fin ?

Un fichier Figma en Dev Mode avec les spécifications exploitables (espacements, rayons, états, transitions), les composants organisés en auto-layout — le pendant direct de Flexbox en CSS —, les tokens de design exportés (couleurs, typographies, espacements) et une documentation des états et cas limites : champ vide, chargement, erreur, contenu long. Nous restons disponibles pendant l'implémentation pour la revue de design : c'est là que se joue l'écart entre la maquette et le produit livré.

Une question qui n'est pas là ? Posez-la nous — réponse et devis gratuit sous 24 h. Notre FAQ générale couvre les questions transverses (délais, propriété du code, suivi).

Un échange de 30 minutes, sans engagement

On écoute votre projet, on identifie les freins, on vous dit franchement ce qu'on peut faire pour vous. Devis gratuit sous 24 h.