Les 8 règles d’or du design d’interface
Le design d’interface est souvent perçu comme une couche esthétique ajoutée en fin de projet. C’est une erreur coûteuse : l’interface utilisateur (UI), pensée avec l’expérience utilisateur (UX), décide de la facilité avec laquelle un visiteur trouve une information, remplit un formulaire ou passe commande. Un écran très beau qui ignore les principes d’ergonomie produit de la frustration ; une interface rigoureuse, fondée sur des règles éprouvées, se fait oublier au profit de l’action.
Réponse courte : les « 8 règles d’or » du design d’interface ont été formulées par Ben Shneiderman, chercheur de l’université du Maryland, dès 1985 : viser la cohérence, rechercher l’utilisabilité universelle, offrir un retour informatif, concevoir des dialogues qui aboutissent, prévenir les erreurs, permettre d’annuler facilement, laisser le contrôle à l’utilisateur et réduire la charge de mémoire. Appliquées à un site ou une application, elles se traduisent par huit chantiers concrets : clarté, cohérence, hiérarchie visuelle, feedback, ergonomie tactile, gestion des erreurs, accessibilité et affordance.
D’où viennent les 8 règles d’or du design d’interface
L’expression vient des « Eight Golden Rules of Interface Design » de Ben Shneiderman, publiées dans son manuel Designing the User Interface. Sa page de référence précise que la première liste date de 1985 et que la version actuelle est celle de la sixième édition (2016). L’auteur lui-même insiste sur un point : ces principes s’appliquent à la plupart des systèmes interactifs, mais doivent être validés et ajustés pour chaque domaine.
| Règle de Shneiderman | Ce qu’elle demande | Chantier correspondant dans cet article |
|---|---|---|
| Viser la cohérence | Mêmes actions, mêmes termes, mêmes couleurs et mises en page d’un écran à l’autre | Cohérence et prévisibilité |
| Rechercher l’utilisabilité universelle | Prendre en compte débutants, experts, âges, handicaps, langues, équipements | Accessibilité |
| Offrir un retour informatif | Une réponse de l’interface à chaque action, proportionnée à son importance | Feedback et réactivité |
| Concevoir des dialogues qui aboutissent | Des séquences avec un début, un milieu et une fin, par exemple une page de confirmation de commande | Feedback et réactivité |
| Prévenir les erreurs | Empêcher les erreurs graves et guider la correction sans tout faire ressaisir | Gestion des erreurs |
| Permettre d’annuler facilement | Des actions réversibles, qui encouragent l’exploration | Gestion des erreurs |
| Laisser le contrôle à l’utilisateur | Pas de surprise ni de changement de comportement inattendu | Cohérence, affordance |
| Réduire la charge de mémoire à court terme | Ne pas obliger à retenir une information d’un écran à l’autre | Clarté et charge cognitive |
Les huit sections qui suivent transposent ces règles aux sites web et applications d’aujourd’hui, en s’appuyant sur les lois d’ergonomie et les recommandations des plateformes qui les complètent.
La clarté et la réduction de la charge cognitive
La charge cognitive désigne l’effort mental nécessaire pour utiliser une interface. Plus un écran demande de réflexion, plus le risque d’abandon augmente. Les interfaces qui cherchent à tout dire en même temps sont les plus difficiles à utiliser.
Limiter les choix (loi de Hick)
Selon la loi de Hick, le temps nécessaire pour prendre une décision augmente avec le nombre et la complexité des choix proposés. Une page d’accueil qui présente quinze catégories au même niveau ralentit la décision. Il n’existe pas de nombre magique d’entrées de menu : l’enjeu est de regrouper l’information et de mettre en avant les options principales.
Révéler l’information progressivement
La divulgation progressive consiste à montrer d’abord l’essentiel, puis les options avancées à la demande : un formulaire en plusieurs étapes, des filtres repliés, un lien « afficher plus ». L’utilisateur n’a pas à retenir ce qu’il ne voit pas encore, ce qui rejoint la règle de Shneiderman sur la mémoire à court terme.
Éliminer le bruit visuel
Le bruit, c’est tout élément qui n’apporte pas d’information utile ou détourne l’attention de l’objectif de la page : décorations superflues, textes trop denses, appels à l’action concurrents. L’espace blanc n’est pas du vide : il structure le contenu et guide le regard vers l’essentiel.
La cohérence visuelle et la prévisibilité
En naviguant, l’utilisateur se construit en quelques secondes un modèle mental du fonctionnement de votre site. Si un bouton change de style, de place ou de comportement d’une page à l’autre, ce modèle se brise et la confiance s’érode.
La loi de Jakob et les standards du web
Jakob Nielsen a résumé ce principe en une phrase devenue la loi de Jakob : les utilisateurs passent la majeure partie de leur temps sur d’autres sites que le vôtre, et s’attendent donc à ce que le vôtre fonctionne de la même façon. Logo en haut à gauche qui ramène à l’accueil, panier en haut à droite, liens identifiables : ce ne sont pas des manques de créativité mais des repères. S’en écarter impose un apprentissage et doit se justifier.
Le rôle d’un design system
Sur un projet d’envergure, un design system garantit cette cohérence : une bibliothèque de composants réutilisables (boutons, champs, typographies, couleurs) régie par des règles d’usage. Il facilite la maintenance et évite que chaque nouvelle page invente ses propres styles.
La hiérarchie visuelle pour guider l’œil
Une interface se parcourt plus qu’elle ne se lit. Les études d’oculométrie du Nielsen Norman Group ont montré que, sur des pages de texte, les internautes balaient le contenu selon un motif en F plutôt que de tout lire. Le designer doit donc hiérarchiser l’information pour que l’essentiel soit vu en premier.
Typographie et contraste
Taille, graisse et couleur du texte sont les premiers leviers de hiérarchie. Le titre principal doit se distinguer immédiatement du corps de texte, et le bouton d’action principal se détacher nettement du fond, tandis qu’une action secondaire (« Annuler ») reste plus discrète.
Proximité et alignement
Les éléments proches sont perçus comme liés : un libellé collé à son champ, un prix collé à son produit. Un alignement régulier sur une grille donne une impression d’ordre et facilite le balayage. Ces deux principes, souvent cités dans les guides de design UI, ne coûtent rien et améliorent immédiatement la lisibilité d’un écran.
Les motifs de lecture en F et en Z
Sur une page riche en texte, le regard suit plutôt un motif en F : lecture horizontale en haut, puis descente verticale avec de courtes incursions. Sur une page plus visuelle, comme une landing page, on décrit souvent un parcours en Z, du logo vers le menu, puis en diagonale vers le contenu et l’appel à l’action. Placer la proposition de valeur et le bouton principal sur ces trajets évite qu’ils passent inaperçus.
Le feedback et la réactivité du système
Dans le monde physique, une action entraîne une réaction visible : le bouton d’ascenseur s’allume. Sur le web, l’absence de réponse laisse l’utilisateur dans le doute (« ai-je bien cliqué ? », « le paiement est-il en cours ? ») et ce doute pousse à l’abandon ou au double clic.
La visibilité de l’état du système
C’est la première des dix heuristiques d’utilisabilité de Jakob Nielsen : le système doit toujours informer l’utilisateur de ce qui se passe, dans un délai raisonnable. Concrètement, un bouton change d’état au survol et au clic, un indicateur apparaît pendant un traitement, un message confirme l’envoi d’un formulaire, une page de confirmation clôt une commande.
Temps de réponse et vitesse perçue
La performance technique fait partie de l’expérience. Au-delà de la vitesse réelle, la vitesse perçue compte : afficher la structure de la page (des blocs gris qui préfigurent le contenu) pendant le chargement rassure davantage qu’une roue qui tourne sans fin.
La loi de Fitts et l’ergonomie tactile
La loi de Fitts établit que le temps pour atteindre une cible dépend de la distance à parcourir et de la taille de la cible. Sur écran tactile, elle se traduit très concrètement.
La zone du pouce
Sur smartphone, beaucoup d’utilisateurs naviguent d’une main : le bas et le centre de l’écran sont plus faciles à atteindre que les coins supérieurs. C’est la raison pour laquelle les barres de navigation d’applications et les boutons d’achat fixes se placent souvent en bas de l’écran.
La taille des cibles tactiles
Les recommandations des plateformes sont précises. Les Human Interface Guidelines d’Apple indiquent une taille de contrôle par défaut de 44 × 44 points sur iOS et iPadOS, avec un minimum de 28 × 28 points. Le Material Design de Google recommande des cibles tactiles d’au moins 48 × 48 dp, soit environ 9 mm, et un espacement d’au moins 8 dp entre cibles dans la plupart des cas.
La prévention et la gestion bienveillante des erreurs
Shneiderman y consacre deux règles : prévenir les erreurs et permettre d’annuler. Trop souvent, les messages d’erreur sont techniques, accusateurs (« Champ invalide ») ou affichés loin du champ concerné.
Validation en ligne et contraintes intelligentes
Plutôt que d’attendre l’envoi du formulaire pour signaler un oubli, la validation en ligne indique au fil de la saisie si un champ est correct. L’interface peut aussi empêcher l’erreur : un champ de téléphone qui ouvre le clavier numérique sur mobile, une date choisie dans un calendrier, une option grisée quand elle n’est pas disponible. Shneiderman cite l’exemple d’un code postal erroné : l’utilisateur ne doit corriger que ce champ, pas ressaisir tout le formulaire.
Des messages d’erreur constructifs
Un bon message dit ce qui s’est passé et comment le corriger : « Nous n’avons pas pu enregistrer votre adresse, vérifiez le code postal » plutôt que « Erreur 500 ». La couleur rouge signale l’erreur, mais ne doit pas être le seul indice : une icône et un texte la rendent compréhensible pour tous.
Annuler plutôt que confirmer
Une action réversible (corbeille, bouton « Annuler » après un envoi, historique des versions) rassure et encourage à explorer. Les fenêtres de confirmation à répétition, elles, finissent par être validées sans être lues.
L’accessibilité comme exigence de base
L’accessibilité ne concerne pas seulement les personnes en situation de handicap : elle améliore l’expérience de tous et correspond à la règle de Shneiderman sur l’utilisabilité universelle. En France, le référentiel général d’amélioration de l’accessibilité (RGAA) sert de cadre ; sa version 4.1.2 est en vigueur et le site officiel annonce une version 5 en cours de rédaction, avec une publication prévue fin 2026.
Contraste et lisibilité
Un texte gris clair sur fond blanc est difficile à lire pour une personne malvoyante, mais aussi pour quiconque consulte son écran en plein soleil. Le niveau AA des WCAG, repris par le RGAA et par les recommandations d’Apple, demande un ratio de contraste d’au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte.
Structure sémantique et navigation au clavier
Un code HTML bien structuré (titres hiérarchisés, textes alternatifs pour les images, libellés de formulaires) permet aux lecteurs d’écran d’interpréter le contenu et aide aussi les moteurs de recherche. Une interface doit enfin être utilisable entièrement au clavier, ce qui sert les personnes ayant des troubles moteurs comme les utilisateurs avancés.
L’affordance : la fonction suggérée par la forme
L’affordance est la capacité d’un objet à suggérer son usage : une poignée invite à tirer, une plaque à pousser. Dans une interface, ce qui est cliquable doit avoir l’air cliquable.
Des boutons qui ressemblent à des boutons
Un design très plat, où un bouton ne se distingue pas d’un simple rectangle coloré ou d’une bannière, fait hésiter l’utilisateur. Un léger relief (ombre, bordure, changement d’état au survol) suffit souvent à lever le doute. Un utilisateur ne devrait jamais se demander s’il peut cliquer.
Des indices visuels contextuels
Un carrousel montre des flèches ou des points, ou laisse dépasser l’image suivante ; une liste déroulante affiche un chevron ; un lien se distingue du texte courant. Sans ces indices, la navigation devient un jeu de devinettes.
Les règles de l’UX qui complètent ces principes
Les 8 règles d’or ne sont pas la seule grille de référence. Deux autres sont incontournables pour évaluer une interface.
- Les 10 heuristiques de Jakob Nielsen (1994, revues depuis par le Nielsen Norman Group) : visibilité de l’état du système, correspondance avec le monde réel, contrôle et liberté de l’utilisateur, cohérence et standards, prévention des erreurs, reconnaissance plutôt que rappel, flexibilité et efficacité, design esthétique et minimaliste, aide à la reconnaissance et à la correction des erreurs, aide et documentation. Elles servent de base à la plupart des audits ergonomiques.
- Les lois de l’UX, compilées par le designer Jon Yablonski sur le site Laws of UX : loi de Hick, loi de Jakob, loi de Fitts, effet de position sérielle, etc. Chaque fiche relie un principe de psychologie à des conséquences de design.
Pour passer de ces principes à la pratique (tests utilisateurs, tri par cartes, parcours), voir notre panorama des techniques et méthodes UX.
Les erreurs les plus fréquentes
Décider selon les goûts plutôt que selon les utilisateurs
« J’aime le bleu », « je veux un logo plus gros », « je veux une vidéo en lecture automatique » : ces choix subjectifs vont souvent à l’encontre des conventions d’ergonomie. Ils produisent une interface qui plaît à l’entreprise mais gêne le client. Arbitrez par des tests utilisateurs ou des données d’usage plutôt que par des préférences.
La navigation mystère
Pour faire épuré, certains designs cachent la navigation derrière des icônes abstraites ou un menu hamburger sur ordinateur. L’utilisateur doit survoler ou cliquer pour savoir où il va. Les icônes doivent accompagner un libellé, pas le remplacer, sauf conventions universelles (loupe, panier).
L’oubli des états vides
Panier vide, recherche sans résultat, messagerie sans message : ces écrans sont souvent laissés blancs ou affichent un message technique. Conçus comme de vrais écrans (« Aucun résultat pour X, essayez Y », « Votre panier est vide, voici nos meilleures ventes »), ils évitent les impasses.
Comment bien choisir son agence de design UX UI
Un portfolio montre ce qu’une agence sait rendre beau, pas ce qu’elle sait rendre efficace. Pour vous faire l’œil avant les entretiens, parcourez nos exemples de design UX de sites web analysés un par un.
Les questions à poser en entretien
- Quelle est votre méthode de recherche utilisateur avant la conception ?
- Comment mesurez-vous le succès d’un design, et quels indicateurs suivez-vous ?
- Avez-vous des exemples de projets où vos choix ont amélioré un indicateur mesurable, et comment l’avez-vous mesuré ?
- Comment intégrez-vous l’accessibilité (RGAA) dans vos maquettes ?
Les signaux d’alerte
Méfiez-vous d’une agence qui propose une solution avant d’avoir compris vos utilisateurs, ou qui ne parle que de tendances et d’effet visuel sans jamais évoquer parcours, personas ou tests. Une agence sérieuse vous questionne sur vos certitudes et demande à voir vos données d’audience.
Les livrables à attendre
Une bonne agence documente son travail : wireframes (squelettes fonctionnels), parcours utilisateurs, maquettes, prototype et guide de style ou design system. Elle doit pouvoir justifier ses choix par une raison d’usage ou d’objectif, pas seulement esthétique.
Pour comparer plusieurs agences de design UX/UI sur une même base, déposez votre projet gratuitement : vous le décrivez une fois, les agences adaptées vous répondent avec un devis.
Tendances et évolutions
L’IA générative dans le processus de design
Les outils de design intègrent désormais des fonctions d’IA générative : génération de variantes, de textes de remplacement ou de premiers écrans. Elles accélèrent l’exploration, mais ne remplacent ni la recherche utilisateur ni les tests : une maquette générée doit être confrontée aux mêmes règles que les autres.
Le mode sombre
De nombreux utilisateurs activent un thème sombre au niveau de leur système. Un site peut s’y adapter grâce à la préférence de couleur transmise par le navigateur ; le prévoir dès la conception évite des contrastes insuffisants ou des logos illisibles une fois inversés.
L’écoconception
La sobriété numérique se structure : le référentiel général d’écoconception de services numériques (RGESN), version 2024, consacre une famille de critères à l’UX/UI. Des interfaces plus légères, sans vidéos en lecture automatique ni scripts superflus, sont aussi plus rapides.
Grille d’audit UX flash
Pour évaluer votre interface actuelle ou la maquette proposée par une agence, utilisez cette grille de dix points, qui reprend les règles de cet article. Elle existe en version Excel (score automatique sur 50).
| Catégorie | Point de contrôle | Score (0 à 5) | Action corrective si score inférieur à 3 |
|---|---|---|---|
| Clarté | La proposition de valeur est comprise en moins de 5 secondes | … / 5 | Simplifier le titre principal et supprimer les visuels distrayants |
| Clarté | Il y a un seul objectif principal (appel à l’action) par écran | … / 5 | Hiérarchiser les boutons, réduire les actions secondaires |
| Navigation | Le menu principal reste court et ses rubriques sont explicites | … / 5 | Regrouper les rubriques, utiliser un méga-menu si nécessaire |
| Navigation | L’utilisateur sait toujours où il est (fil d’Ariane, état actif) | … / 5 | Ajouter un fil d’Ariane et signaler la page active dans le menu |
| Mobile | Les boutons et liens sont faciles à toucher au pouce | … / 5 | Viser 44 × 44 points (Apple) à 48 × 48 dp (Material) par cible |
| Mobile | Les textes sont lisibles sans zoomer | … / 5 | Augmenter la taille de base de la police |
| Confiance | Les formulaires signalent les erreurs en temps réel | … / 5 | Mettre en place une validation en ligne des champs |
| Performance | Le contenu principal s’affiche rapidement | … / 5 | Alléger les images, différer les scripts non critiques |
| Accessibilité | Les contrastes texte/fond respectent le ratio de 4,5:1 | … / 5 | Foncer les gris clairs, tester avec un vérificateur de contraste |
| Feedback | Chaque action (clic, envoi) reçoit une réponse visible | … / 5 | Ajouter états de chargement, confirmations et messages d’erreur |
Questions fréquentes
C’est quoi l’UI et l’UX ?
L’UX (expérience utilisateur) concerne le fonctionnement, la structure et le ressenti global : le service est-il utile et facile à utiliser ? L’UI (interface utilisateur) concerne l’apparence et l’interaction à l’écran : boutons, typographies, couleurs, états. L’UX est le plan de l’architecte, l’UI la finition intérieure : l’un ne va pas sans l’autre.
Quelles sont les règles de l’UX ?
Les trois grilles les plus utilisées sont les 8 règles d’or de Ben Shneiderman, les 10 heuristiques d’utilisabilité de Jakob Nielsen et les lois de l’UX compilées sur Laws of UX (Hick, Fitts, Jakob…). Elles se recoupent largement : cohérence, retour d’information, prévention des erreurs, contrôle laissé à l’utilisateur.
Quels sont les 6 principes du design ?
Il n’existe pas de liste officielle de six principes : les manuels en citent de cinq à une douzaine. Les plus fréquemment retenus en design visuel sont l’équilibre, le contraste, la hiérarchie, l’alignement, la proximité et la répétition. En design d’interface, on y ajoute la cohérence, l’accessibilité et la divulgation progressive.
Quels sont les 7 principes du design graphique ?
Là encore, les listes varient selon les auteurs. Une version courante réunit l’équilibre, le contraste, l’alignement, la proximité, la répétition, la hiérarchie et l’espace blanc. Ce sont les mêmes principes qui structurent un bon écran d’application.
Quelles sont les étapes de conception d’une interface ?
Un projet suit en général six étapes : recherche (utilisateurs, besoins, concurrence), architecture de l’information et parcours, wireframes, maquettes graphiques, prototype interactif testé auprès d’utilisateurs, puis spécifications et suivi du développement. Les tests se répètent à chaque itération.
Quelles sont les parties d’une interface ?
On distingue la navigation (menus, fil d’Ariane, onglets), les contenus (textes, images, données), les contrôles de saisie (boutons, champs, cases, listes), les éléments de retour (messages, indicateurs de chargement, notifications) et les conteneurs qui organisent l’ensemble (cartes, fenêtres, panneaux).
Quelle est la définition du design en technologie ?
Appliqué aux produits technologiques, le design désigne la conception de la façon dont un utilisateur interagit avec un système : ce qu’il voit (interface), ce qu’il peut faire et dans quel ordre (interaction), et ce qu’il en retire (expérience). Il couvre donc autant la structure et le comportement que l’apparence.
Quels sont les 3 types de design ?
Aucune classification ne fait autorité. On distingue souvent le design graphique (identité, supports imprimés et visuels), le design produit ou industriel (objets physiques) et le design numérique, qui regroupe UI, UX et design d’interaction.
Quel est le salaire d’un UI designer ?
Les chiffres publiés varient beaucoup selon les sources, la ville et la taille de l’employeur. En ordre de grandeur prudent, un UI designer débutant en France se situe autour de 30 000 à 35 000 € brut par an, et un profil confirmé au-delà de 45 000 €. Consultez les enquêtes de rémunération récentes de votre région pour un chiffre précis.
Quel est le meilleur outil de design gratuit ?
Figma, l’outil le plus répandu pour concevoir des interfaces, propose un forfait de base gratuit à l’accès limité. Penpot est une alternative open source dont le forfait en ligne de base est gratuit, et qui peut aussi être installée sur ses propres serveurs (offres vérifiées sur leurs pages tarifs le 19 octobre 2026).
Quelle est la meilleure application de design ?
Pour des interfaces de sites et d’applications, Figma est la référence du marché ; Penpot convient aux équipes qui veulent une solution open source. Pour comparer les outils de maquettage et de prototypage, consultez notre catégorie des logiciels de prototypage.
Combien coûte une prestation de design UX/UI ?
D’après le baromètre des tarifs des agences UX/UI de La Fabrique du Net (761 budgets de projets réels), la médiane d’un projet de design UX/UI est de 15 000 €, avec de fortes différences selon la nature du projet : autour de 12 000 € pour le design d’un site, 30 000 € pour une interface produit et 60 000 € pour un design system. Exigez un devis détaillé par poste pour isoler la part design.
Combien de temps faut-il pour refondre l’UX d’un site ?
Cela dépend du périmètre. Pour un site de taille moyenne, prévoyez en ordre de grandeur quelques semaines de recherche et d’audit, puis un à deux mois de conception et de prototypage, avant le développement. Une refonte sérieuse ne se boucle pas en deux semaines.
Pourquoi faire des tests utilisateurs si je connais mon métier ?
Parce que vous n’êtes pas votre utilisateur : vous connaissez votre jargon, votre catalogue et vos processus, vos visiteurs les découvrent. Le Nielsen Norman Group a montré qu’un test avec cinq utilisateurs suffit à faire apparaître l’essentiel des problèmes d’un écran, à condition de répéter les tests à chaque itération.
Notez cet article
