# UI design : à quoi ça sert vraiment sur un site de PME > Ce qu'est l'UI design, sa différence avec l'UX et le graphisme, les règles qui tiennent sur un site de PME et comment juger une maquette qu'on vous présente. > URL : https://najumi.fr/article/ui-design-guide-pme-2026/ --- Design [![nicolas](https://admin.najumi.fr/uploads/medium_team_1_1_00321a2c01.png?format=webp&width=500&quality=82) Nicolas Bardot Cofondateur de Najumi & Designer](https://najumi.fr/auteur/nicolas-bardot/) Date 11 août 2026 Temps de lecture 9 minutes ![Image de l'article du blog Najumi](https://admin.najumi.fr/uploads/medium_ui_design_guide_pme_2026_cover_3ec752cb2b.webp) ## UI design : à quoi ça sert vraiment sur un site de PME Quand un dirigeant me parle d'interface, il parle presque toujours d'apparence. Les couleurs, la police, l'effet au survol des boutons. C'est légitime, c'est ce qui se voit. Mais ce n'est pas ce que fait l'UI design. Le travail d'interface consiste à décider ce que le visiteur voit en premier, ce qu'il comprend sans effort, et ce qu'il peut faire sans hésiter. L'apparence est la conséquence de ces décisions, pas leur point de départ. La différence n'est pas théorique. Elle explique pourquoi deux sites également soignés peuvent produire des résultats très différents, et pourquoi une refonte purement esthétique ne change souvent rien aux demandes entrantes. Cet article explique ce qu'est l'UI design, en quoi il diffère de l'UX et du graphisme, quelles règles tiennent réellement sur un site de PME, et comment juger une maquette qu'on vous présente sans avoir à dire « j'aime » ou « je n'aime pas ». > **TL;DR** : l'UI design est la conception de l'interface, c'est à dire de tout ce avec quoi le visiteur interagit : la hiérarchie visuelle, les libellés, les états des éléments, la lisibilité. Ce n'est ni de la décoration ni de l'UX au sens large. Sur un site de PME, un bon travail d'interface se juge à une chose : le visiteur sait quoi faire sans réfléchir. **En bref.** L'UI design organise les éléments d'un écran pour rendre l'action évidente. Il agit sur la taille, l'espacement, le contraste, l'ordre et le vocabulaire. Un bon travail d'interface se remarque peu, un mauvais oblige le visiteur à chercher. ## Sommaire - [Ce qu'est l'UI design](#definition) - [UI, UX et graphisme : qui fait quoi](#difference) - [Les règles qui tiennent vraiment](#regles) - [La lisibilité, sujet le plus sous estimé](#lisibilite) - [Comment juger une maquette qu'on vous présente](#juger) - [Les défauts qu'on retrouve le plus souvent](#erreurs) - [Questions fréquentes](#faq) ## Ce qu'est l'UI design **Définition.** L'UI design, pour user interface design, est la conception de l'interface avec laquelle une personne interagit : la disposition des éléments, leur hiérarchie visuelle, les libellés des boutons, les états d'un formulaire, les retours donnés après une action. **Est-ce du graphisme ?** Non, même si les deux se croisent. Le graphisme produit un univers visuel : couleurs, typographie, style. L'UI design décide de l'usage qui en est fait à l'écran. On peut avoir une charte graphique excellente et une interface confuse, et c'est un cas fréquent. Pour moi, la meilleure façon de comprendre l'UI est de regarder ce qu'il se passe quand il est absent. Toutes les sections ont la même taille de titre. Trois boutons de même importance apparente demandent trois actions différentes. Le formulaire ne dit rien après l'envoi. Rien n'est cassé, et pourtant le visiteur hésite en permanence. ## UI, UX et graphisme : qui fait quoi Ces trois termes sont utilisés de façon interchangeable dans les propositions commerciales, ce qui n'aide personne. | Discipline | Question posée | Livrable typique | | --- | --- | --- | | UX | Qui vient, pourquoi, dans quel ordre | Parcours, arborescence, wireframes | | UI | Comment rendre l'action évidente à l'écran | Maquettes, composants, états | | Graphisme | Quelle identité visuelle porte le tout | Charte, logo, palette, typographie | Sur un projet de PME, ces trois casquettes sont souvent portées par la même personne, ce qui est normal et sain. Ce qui l'est moins, c'est de sauter les deux premières pour arriver directement à la troisième, parce que c'est celle qui produit des images à montrer en réunion. L'identité visuelle a sa propre logique, que nous avons détaillée dans notre article sur [la charte graphique en PME](https://najumi.fr/article/charte-graphique-guide-pme-2026/). L'interface, elle, se juge sur l'usage. ## Les règles qui tiennent vraiment Il existe des principes d'ergonomie établis depuis longtemps et toujours valables. Les [dix heuristiques d'utilisabilité du Nielsen Norman Group](https://www.nngroup.com/articles/ten-usability-heuristics/?utm_source=najumi.fr&utm_medium=blog&utm_campaign=article&utm_content=ui-design-guide-pme-2026) restent la référence la plus citée du domaine. Voici celles qui pèsent le plus sur un site de PME. **La visibilité de l'état du système.** Après un clic, il doit se passer quelque chose de visible. Un formulaire envoyé sans confirmation laisse le visiteur dans le doute, et beaucoup renvoient le formulaire une deuxième fois. **La correspondance avec le monde réel.** Les libellés doivent utiliser les mots de vos clients, pas votre vocabulaire interne. Un menu intitulé « Nos expertises » est moins clair que « Ce que nous faisons ». **La reconnaissance plutôt que la mémorisation.** Le visiteur ne doit pas avoir à se souvenir de ce qu'il a lu deux écrans plus haut pour comprendre où il est. **La prévention des erreurs.** Un champ de formulaire qui explique le format attendu avant la saisie évite un message d'erreur après. **La cohérence.** Un bouton principal doit avoir la même apparence partout. Trois styles de bouton différents sur trois pages obligent à réapprendre l'interface à chaque page. ## La lisibilité, sujet le plus sous estimé C'est le point sur lequel je reviens le plus souvent en revue de maquette, et celui qui provoque le plus de discussions. Le texte gris clair sur fond blanc est esthétiquement agréable sur un grand écran calibré, dans un bureau. Il devient difficile à lire sur un téléphone en extérieur, et parfois impossible pour une partie de vos visiteurs. Ce n'est pas une question de goût, c'est une question de contraste mesurable. Le W3C documente les méthodes pour [tester et évaluer l'accessibilité d'un site](https://www.w3.org/WAI/test-evaluate/?utm_source=najumi.fr&utm_medium=blog&utm_campaign=article&utm_content=ui-design-guide-pme-2026), contraste compris, et ces tests sont accessibles à quelqu'un qui n'est pas spécialiste. Un point qui parle souvent aux dirigeants : sur beaucoup de marchés B2B, les décideurs ont plus de cinquante ans. Un texte trop clair ou trop petit ne relève pas de l'inclusion abstraite, il concerne directement la personne qui signe. Trois réglages règlent la majorité des cas. Un contraste suffisant entre le texte et son fond. Une taille de corps de texte qui ne descend pas en dessous du confortable. Une longueur de ligne raisonnable, pour éviter les blocs qui traversent tout l'écran. > Vous voulez un avis sur la lisibilité réelle de votre site ? Nous la vérifions dans le cadre de chaque [création ou refonte de site](https://najumi.fr/service/creation-site-internet/), réponse sous 24 heures. ## Comment juger une maquette qu'on vous présente Voici les questions que je conseille à un dirigeant de poser, à la place de « est-ce que ça me plaît ». **Qu'est ce que le visiteur voit en premier, et est-ce ce que je veux ?** Plissez les yeux jusqu'à ce que le texte devienne flou. Ce qui reste visible est ce qui frappe en premier. **Quelle est l'action principale de cet écran, et est-elle unique ?** Si trois éléments se disputent l'attention, aucun ne l'obtient. **Est ce que je comprends chaque libellé sans explication ?** Si le designer doit vous expliquer ce que veut dire un bouton, votre visiteur ne l'aura pas. **Que se passe-t-il quand ça se passe mal ?** Demandez à voir l'écran d'erreur, le formulaire mal rempli, la page sans résultat. Ces états sont oubliés dans la moitié des maquettes et représentent une part réelle des visites. **À quoi ça ressemble sur mon téléphone ?** La version mobile n'est pas une déclinaison, c'est le cas le plus fréquent. ## Les défauts qu'on retrouve le plus souvent **Tout au même niveau.** Chaque section a le même poids visuel, donc aucune ne ressort. C'est le défaut numéro un, et il vient d'une incapacité à trancher plus que d'un choix de design. **Les boutons fantômes.** Un contour fin, un texte clair, aucun fond. C'est élégant et cela ne ressemble pas à un bouton, donc on ne clique pas. **Le vocabulaire interne.** « Solutions », « Offre globale », « Nos verticales ». Personne ne cherche cela. **L'absence d'états.** Le bouton ne change pas au survol, le champ ne signale pas qu'il est actif, rien ne confirme l'envoi. L'interface paraît morte. **Les icônes sans texte.** Une icône seule est rarement comprise de la même façon par tout le monde. Ajouter le mot coûte trois pixels et supprime l'ambiguïté. Ces défauts se corrigent en général sans refonte complète, à condition que la structure du contenu tienne. Quand ce n'est pas le cas, le sujet remonte d'un cran, et nous le traitons alors dans le cadre décrit par notre [guide de création de site internet pour PME](https://najumi.fr/article/creation-site-internet-pme/). ## Questions fréquentes **Quelle différence entre UI et UX design ?** L'UX décide de ce qu'il faut montrer et dans quel ordre, l'UI décide de la façon dont cela apparaît à l'écran. L'un précède l'autre, et sauter l'UX produit des interfaces jolies mais désorientantes. **Faut-il un designer pour un site de dix pages ?** Pour la structure et la hiérarchie, oui, même sur un petit site. Pour la production de chaque écran, un système de composants bien posé permet ensuite d'aller vite. **Un thème acheté peut-il suffire ?** Il peut suffire à démarrer. La limite arrive quand votre offre ne rentre pas dans les gabarits prévus, et on se met alors à adapter le contenu au thème au lieu de l'inverse. **Comment mesurer si l'interface fonctionne ?** En regardant trois personnes extérieures chercher une information précise sur le site. Vous verrez les hésitations en quelques minutes, ce qu'aucun tableau de bord ne montre. **Faut-il suivre les tendances visuelles ?** Avec prudence. Une tendance donne une impression de modernité pendant deux ans, puis date le site. La lisibilité et la hiérarchie, elles, ne se démodent pas. ## Ce qu'il faut retenir L'UI design ne sert pas à rendre un site beau, il sert à le rendre évident. Sur un site de PME, la réussite se mesure au nombre de visiteurs qui savent quoi faire sans y penser. La bonne question à se poser devant une maquette n'est donc pas « est ce que ça me plaît », mais « est ce que quelqu'un qui ne nous connaît pas saurait quoi faire ici ». Vous voulez un regard extérieur sur l'interface de votre site ? [Parlons de votre projet](https://najumi.fr/contact/), réponse sous 24 heures et sans engagement. ## À propos de l'auteur Nicolas Bardot est cofondateur de Najumi, agence web basée dans la métropole de Lyon. Designer de formation, il conçoit les interfaces et les parcours des sites livrés par l'agence, en commençant par la hiérarchie du message avant l'esthétique. Il travaille principalement avec des dirigeants de PME qui veulent un site compréhensible par leurs clients plutôt qu'un site qui impressionne leurs concurrents. Il écrit sur le blog Najumi les arbitrages de conception rencontrés sur les projets réels, y compris ceux qui vont à l'encontre des habitudes du secteur. Najumi, l'agence digitale qui crée votre site web sur-mesure Attirez plus de clients avec un site web performant pensé pour convertir Réponse sous 24h - sans engagement Suggestion ## Vous pourriez aussi aimer [![Image d’illustration de l’article du blog Najumi](https://admin.najumi.fr/uploads/medium_sitemap_xml_guide_pme_2026_cover_0e672fc059.webp) 12 août 2026 ## Sitemap XML : à quoi ça sert, et quand ça ne sert à rien Ce qu'est un sitemap XML, les quatre cas où il apporte vraiment quelque chose, ce qu'il ne doit pas contenir et comment le vérifier en dix minutes. Lire le post SEO](https://najumi.fr/article/sitemap-xml-guide-pme-2026/) [![Image d’illustration de l’article du blog Najumi](https://admin.najumi.fr/uploads/medium_ab_testing_pme_guide_2026_cover_7b614c94fd.webp) 10 août 2026 ## A/B testing : pourquoi la plupart des PME n'en ont pas besoin Ce qu'est vraiment un test A/B, le seuil de trafic en dessous duquel il ne conclut rien, et ce qu'une PME peut faire à la place pour améliorer son site. Lire le post Design](https://najumi.fr/article/ab-testing-pme-guide-2026/) [![Image d’illustration de l’article du blog Najumi](https://admin.najumi.fr/uploads/medium_backlinks_guide_pme_2026_cover_8a212ed73b.webp) 7 août 2026 ## Backlinks : ce qu'une PME doit en faire, et surtout ne pas en faire Ce qu'est un backlink, ce que Google dit vraiment des liens achetés, et les cinq sources de liens qu'une PME peut obtenir sans budget. Lire le post SEO](https://najumi.fr/article/backlinks-guide-pme-2026/) 2 projets disponibles ce mois-ci ## Discutons de votre projet Réservez 30 minutes avec Mathis. Nous analysons votre situation et nous vous proposons une solution adaptée. ![Avatar de Mathis Haumont](https://najumi.fr/_astro/mathis_linkedin.DzokqiJE_Z1gtodq.png) 30min avec Mathis Sans engagement ![Bureau de l'agence Najumi à Villeurbanne (Métropole de Lyon)](https://najumi.fr/_astro/contact-min.B43tq0Gr_Zj7Yja.png)