UI design pour PME : ce qui rend un site évident

L'interface d'un site de PME se juge à l'usage, pas au goût

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. Elle n'en est pas le point de départ.

C'est pour cela que deux sites également soignés produisent des résultats très différents. Et c'est pour cela qu'une refonte purement esthétique change rarement le nombre de demandes entrantes.

TL;DR : l'UI design est la conception de l'interface : hiérarchie visuelle, libellés, états des éléments, lisibilité. Sur un site de PME, il repose sur cinq fondamentaux vérifiables : une hiérarchie claire, un message compris tout de suite, une conception pensée pour le téléphone, une page rapide et une interface accessible. Les tendances comme le Bento Grid ou le dark mode viennent après.

Qu'est-ce que l'UI design ?

L'UI design est la conception de tout ce avec quoi un visiteur interagit à l'écran, pour que l'action attendue devienne évidente.

Définition. L'UI design, pour user interface design, organise la disposition des éléments, leur hiérarchie visuelle, les libellés des boutons, les états d'un formulaire et les retours donnés après une action. Il agit sur la taille, l'espacement, le contraste, l'ordre et le vocabulaire.

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. C'est même un cas fréquent.

Pour moi, la meilleure façon de comprendre l'UI est de regarder ce qu'il se passe quand il manque. Toutes les sections ont la même taille de titre. Trois boutons de même poids 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 ?

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, le graphisme fournit l'identité visuelle.

Sur un projet de PME, ces trois casquettes sont souvent portées par la même personne. C'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, détaillée dans notre article sur la charte graphique en PME. Le parcours, lui, se prépare en amont, comme on l'explique dans notre guide du parcours utilisateur. L'interface se juge ensuite sur l'usage.

Quels sont les 5 fondamentaux d'interface qui font convertir un site de PME ?

Ce sont la hiérarchie visuelle, le message compris tout de suite, la conception pour le téléphone, la vitesse perçue et l'accessibilité.

Définition. Un fondamental d'interface est un principe dont l'absence fait perdre des visiteurs, quel que soit le secteur ou le goût du dirigeant. Il se vérifie avec un test ou une mesure, pas avec un avis esthétique. Une tendance, à l'inverse, peut être présente ou absente sans changer le résultat.

1. Une hiérarchie visuelle claire

L'œil doit savoir quoi regarder en premier, en deuxième, en troisième, avant même de lire un mot.

Le Nielsen Norman Group définit la hiérarchie visuelle comme l'organisation des éléments selon leur importance, par la taille, le contraste et la position. Si tout a la même taille et le même poids, rien n'est important.

Sur une page d'accueil de PME, j'attends en pratique :

Un titre principal visible sans défiler. Il porte une promesse concrète, pas un slogan.

Un sous-titre qui précise pour qui et pour quel problème. Une ou deux phrases, pas un paragraphe.

Un seul bouton principal, dans une couleur qui tranche avec le reste. Les actions secondaires restent plus discrètes.

De l'espace autour des éléments importants. Le blanc isole ce qui compte du bruit visuel.

2. Un message compris dès l'arrivée

Le visiteur doit comprendre ce que vous faites, pour qui, et pourquoi vous croire, avant de décider de rester.

Les études du Nielsen Norman Group sur le temps passé sur les pages web montrent que les premières secondes de la visite sont déterminantes dans la décision de rester ou de partir.

Votre page d'accueil doit donc répondre tout de suite à trois questions. Ce que vous faites, en mots concrets. Pour qui, avec le secteur ou la taille d'entreprise. Quelle preuve vous apportez, avec un logo client, un cas ou un témoignage signé.

Le test est simple. Montrez votre page à un proche quelques secondes, puis cachez l'écran. Demandez-lui ce qu'il a compris. S'il répond « je crois que vous faites des sites internet » alors que votre métier est bien plus précis, le message n'est pas clair.

Le mauvais réflexe, c'est d'ajouter du texte. Le bon réflexe, c'est de retirer tout ce qui ne répond pas à ces trois questions, puis de mettre en valeur ce qui reste.

3. Une interface pensée d'abord pour le téléphone

La version mobile n'est pas une déclinaison de la version bureau : c'est l'écran que la majorité de vos visiteurs utilise.

Statcounter mesure en continu la répartition du trafic web mondial entre ordinateurs, mobiles et tablettes, et le mobile y domine. Concevoir l'interface d'abord pour le pouce change donc les décisions, pas seulement la mise en page.

Quatre contraintes suffisent à faire la différence :

Des zones tactiles assez grandes. Google recommande des cibles tactiles d'environ 48 pixels, et les règles d'accessibilité fixent un minimum de 24 par 24 pixels CSS. En dessous, on tape à côté.

Un texte lisible sans zoomer. Si le visiteur doit pincer l'écran pour lire, il abandonne.

Les actions principales à portée de pouce. Le bouton de contact et le menu doivent être atteignables d'une seule main.

Rien qui dépende du survol de la souris. Sur un écran tactile, le survol n'existe pas. Tout doit fonctionner au toucher.

Le sujet de l'adaptation aux écrans a son propre article : notre guide du responsive design pour PME.

4. Une page qui s'affiche vite

Une interface lente perd des visiteurs avant qu'ils n'aient vu votre offre.

Google considère qu'un LCP de 2,5 secondes ou moins est un bon score, et qu'au-delà de 4 secondes la page est lente. Le LCP mesure le temps d'affichage du plus gros élément visible.

Les leviers qui dépendent du design sont peu nombreux, mais décisifs :

Des images au bon format et à la bonne taille. Une photo servie en très haute définition à un téléphone alourdit la page pour rien.

Peu de polices et peu de graisses. Chaque variante de police ajoute un fichier à charger.

Des animations sobres. Un effet lourd au défilement peut dégrader le mobile sans qu'on le voie sur l'écran du designer.

Le test : passez votre page d'accueil dans PageSpeed Insights, en mode mobile. Nous avons détaillé l'impact commercial d'un site lent dans notre article sur le site lent sur mobile.

5. Une interface accessible

L'accessibilité n'est pas un supplément : c'est la condition pour que tous vos visiteurs, y compris ceux qui signent, puissent lire et agir.

L'OMS estime qu'environ 1,3 milliard de personnes, soit 16 % de la population mondiale, vivent avec un handicap important. S'y ajoutent les baisses de vue liées à l'âge, fréquentes chez les décideurs B2B.

Le cadre juridique s'est aussi durci. L'European Accessibility Act étend les exigences d'accessibilité à de nombreux services en ligne, dont le commerce électronique. En France, les obligations sont résumées sur le site de la DINUM consacré à l'accessibilité numérique.

Cinq points couvrent l'essentiel sur un site de PME :

Un contraste suffisant entre le texte et le fond. Le référentiel WCAG demande un rapport d'au moins 4,5:1 pour le texte courant.

Tous les éléments utilisables au clavier. Tabulation, validation et fermeture doivent fonctionner sans souris.

Un texte alternatif sur les images informatives. Il décrit ce que l'image apporte, pas son nom de fichier.

Une structure de titres cohérente. Un seul titre principal, puis des sous-titres dans l'ordre.

Des formulaires avec des étiquettes visibles. Et des messages d'erreur qui disent comment corriger.

Nous avons consacré un article complet à l'accessibilité numérique.

Quelles règles d'ergonomie tiennent toujours sur un site de PME ?

Les grands principes d'ergonomie sont anciens et restent valables, parce qu'ils décrivent la façon dont les gens utilisent un écran.

Les dix heuristiques d'utilisabilité du Nielsen Norman Group sont 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 le renvoient 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 savoir où il est.

La prévention des erreurs. Un champ 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 sur trois pages obligent à réapprendre l'interface à chaque fois.

Pourquoi le Bento Grid, le 3D et le dark mode ne sont-ils pas des fondamentaux ?

Parce qu'ils peuvent être présents ou absents sans changer le résultat, alors que leur mauvaise exécution, elle, fait perdre des visiteurs.

Ces tendances ont leur place sur un portfolio créatif ou sur un produit destiné à des développeurs. Sur la plupart des sites de PME, elles passent après les cinq fondamentaux.

Le Bento Grid. Cette grille de cases asymétriques est une façon de présenter une liste, pas un outil de conversion. Elle fonctionne si chaque case porte une promesse lisible, si une case principale domine les autres et si l'ensemble s'empile proprement sur mobile. Sinon, elle devient un mur de tuiles que personne ne sait par où aborder.

Le 3D immersif. Les objets animés en 3D alourdissent la page, surtout sur téléphone. Le visiteur qui attend l'affichage est souvent parti avant de voir l'animation.

Le dark mode. C'est un confort pour certains usages, pas un levier commercial. Le Nielsen Norman Group rappelle que le mode sombre a des avantages et des inconvénients selon les utilisateurs et les contextes. Sur un site d'entreprise consulté en journée, il oblige surtout à refaire tous les contrastes pour deux thèmes.

Vous hésitez entre corriger l'interface de votre site ou la reprendre entièrement ? C'est la première question que nous posons dans chaque projet de refonte de site web. Devis gratuit et sans engagement.

Comment juger une maquette qu'on vous présente ?

En posant des questions d'usage à 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 le devinera 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 souvent oubliés dans les maquettes.

À quoi ça ressemble sur mon téléphone ? Demandez la maquette mobile en même temps que la version bureau, pas après.

C'est la grille que j'applique aussi à nos propres projets, qu'il s'agisse de l'interface de la borne digitale conçue pour Hertz BPA ou de la refonte UX/UI du site de Rematec.

Comment auditer l'interface de votre site actuel ?

Cinq vérifications, une par fondamental, suffisent pour savoir où vous en êtes, sans outil payant.

Hiérarchie. Ouvrez votre page d'accueil et plissez les yeux. Si vous voyez encore le titre et le bouton principal, la hiérarchie tient. Si tout devient une masse grise, elle est cassée.

Message. Montrez la page quelques secondes à trois personnes extérieures à votre métier. Demandez-leur ce que vous faites et pour qui. Si deux sur trois hésitent, le message manque de précision.

Mobile. Ouvrez le site sur votre téléphone. Pouvez-vous lire sans zoomer ? Le bouton principal est-il atteignable au pouce ? Les liens sont-ils assez espacés ?

Vitesse. Passez la page dans PageSpeed Insights, onglet mobile, et notez le LCP.

Accessibilité. Lancez l'outil gratuit WAVE du WebAIM et relevez les erreurs de contraste et de structure.

Si trois fondamentaux sont dans le rouge, une refonte est probablement justifiée. Si un seul l'est, des corrections ciblées suffisent souvent.

Quels défauts d'interface retrouve-t-on le plus souvent ?

Presque toujours les mêmes, et la plupart se corrigent sans refonte complète.

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. Il vient plus d'une difficulté à trancher que d'un choix de design.

Les boutons fantômes. Un contour fin, un texte clair, aucun fond. Le Nielsen Norman Group a montré que ces signaux faibles demandent plus d'effort à l'utilisateur. C'est élégant, mais cela ne ressemble pas à un bouton.

Le vocabulaire interne. « Solutions », « Offre globale », « Nos verticales ». Personne ne cherche ces mots.

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 figée.

Les icônes sans texte. Selon le Nielsen Norman Group, la plupart des icônes n'ont pas de sens universel et doivent être accompagnées d'un libellé. Ajouter le mot supprime l'ambiguïté.

La navigation trop profonde sur mobile. Des menus imbriqués sur trois niveaux obligent à mémoriser le chemin. Sur un petit écran, chaque niveau supplémentaire fait perdre des visiteurs.

Ces défauts se corrigent en général sans tout refaire, à condition que la structure du contenu tienne. Quand ce n'est pas le cas, le sujet remonte d'un cran : c'est alors un projet de création de site internet, et non une retouche d'interface.

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. Sauter l'UX produit des interfaces jolies mais désorientantes.

Faut-il refaire complètement son site pour appliquer ces fondamentaux ? Pas toujours. Si le site est maintenable et coche déjà la plupart des fondamentaux, des corrections ciblées suffisent : page d'accueil, zones tactiles, images, contrastes. S'il en cumule plusieurs dans le rouge, une refonte est souvent plus raisonnable qu'une suite de rustines.

Le dark mode est-il inutile pour une PME ? Il n'est pas inutile, il n'est simplement pas un levier de conversion. Pour une audience qui consulte le site le soir ou pour un outil métier, il peut se justifier. Pour un site vitrine de PME, il double surtout le travail sur les contrastes.

Mon site est conforme au RGAA, suis-je concerné par l'European Accessibility Act ? Le RGAA s'appuie sur les critères WCAG, qui servent aussi de base aux exigences européennes. Un site conforme au RGAA couvre donc une grande partie du sujet. Les obligations exactes dépendent de votre activité : vérifiez-les sur le site officiel de l'accessibilité numérique.

Comment savoir si l'interface fonctionne vraiment ? En regardant quelques personnes extérieures chercher une information précise sur le site. Le Nielsen Norman Group explique qu'un test avec cinq participants révèle déjà la plupart des problèmes d'utilisabilité. Côté chiffres, suivez vos demandes entrantes, comme décrit dans notre article sur le taux de conversion d'un site de PME.

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. On adapte alors le contenu au thème, au lieu de l'inverse.

En résumé : la seule question à poser devant une maquette

L'UI design ne sert pas à rendre un site beau. Il sert à le rendre évident.

Cinq fondamentaux font cette évidence : une hiérarchie claire, un message compris tout de suite, une interface pensée pour le téléphone, une page rapide et une interface accessible. Les tendances viennent ensuite, si elles servent l'usage.

Devant une maquette, la bonne question n'est donc pas « est-ce que ça me plaît ». C'est « 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, devis gratuit et sans engagement.