Un visiteur accorde quelques secondes à une page avant de décider s'il reste. Pendant ces secondes, il ne lit pas : il balaye. Il cherche à savoir où il est tombé, si c'est pour lui, et ce qu'il peut faire ensuite. Une interface réussie répond à ces trois questions sans qu'on ait à les poser.
La hiérarchie visuelle : une seule chose d'abord
Sur chaque écran, une seule information doit dominer. Si trois éléments crient en même temps, aucun n'est entendu.
La hiérarchie se construit avec peu d'outils : la taille, le contraste, l'espace et la position. Le plus sous-estimé est l'espace. Un élément entouré de vide attire l'œil davantage qu'un élément agrandi au milieu d'autres. Resserrer les marges pour « faire tenir plus de choses » détruit précisément ce qui rendait le message lisible.
Une règle simple pour tester une page : plissez les yeux jusqu'à ce que le texte devienne flou. Ce qui reste visible est ce que le visiteur verra en premier. Si ce n'est pas ce que vous vouliez mettre en avant, la hiérarchie est à revoir.
Rapprocher ce qui va ensemble
Deux éléments proches sont perçus comme liés ; deux éléments éloignés comme distincts. C'est automatique et irrépressible.
L'erreur la plus courante consiste à espacer uniformément. Une étiquette doit être nettement plus proche de son champ que du champ précédent, sinon le lecteur doit deviner à quoi elle se rapporte. Un titre doit être plus proche du paragraphe qu'il annonce que de celui qui le précède. Ces détails ne se remarquent pas quand ils sont justes — ils fatiguent quand ils sont faux.
La lisibilité, mesurée et non supposée
Quelques repères qui évitent la majorité des problèmes :
- Longueur de ligne : entre 50 et 75 caractères. Au-delà, l'œil se perd en revenant à la ligne suivante.
- Taille du corps de texte : 16 pixels au minimum sur mobile. En dessous, le lecteur zoome — ou part.
- Interlignage : environ 1,5 fois la taille du texte pour les paragraphes.
- Contraste : au moins 4,5 contre 1 entre le texte et son fond. Le gris clair sur blanc est élégant sur une maquette et illisible en plein soleil sur un téléphone.
Ces valeurs ne sont pas des opinions : elles correspondent aux critères d'accessibilité, et elles servent tout le monde — y compris le client pressé qui vous lit dehors.
Les formulaires : chaque champ a un coût
Chaque champ supplémentaire fait abandonner une partie des visiteurs. La question à se poser pour chacun : ai-je réellement besoin de cette information maintenant ? Le numéro de téléphone, la fonction, le nom de la société peuvent souvent être demandés plus tard, dans la conversation.
Quelques principes qui changent le taux d'abandon :
- Étiquettes visibles en permanence, pas uniquement à l'intérieur du champ : elles disparaissent dès qu'on écrit, et le lecteur ne sait plus ce qu'il remplit.
- Erreurs affichées à côté du champ concerné, en langage clair : « Il manque le @ dans l'adresse e-mail », pas « Entrée invalide ».
- Validation au moment opportun : signaler l'erreur quand l'utilisateur quitte le champ, pas à la troisième lettre tapée.
- Confirmation explicite après envoi. Un formulaire qui se vide sans rien dire laisse croire à un échec.
Les signaux de confiance
Sur un site de services, l'interface porte aussi la crédibilité. Quelques éléments pèsent plus que leur coût de mise en œuvre :
- Des réalisations avec leur contexte, leur date et, si possible, leur adresse en ligne
- Un moyen de contact visible sans chercher
- Des tarifs ou au moins des ordres de grandeur, quand c'est possible
- Une adresse e-mail à votre nom de domaine plutôt qu'une adresse générique
À l'inverse, les photos de banque d'images reconnaissables et les témoignages anonymes produisent l'effet inverse de celui recherché.
L'état des choses : ce qui se passe quand rien ne va bien
Une interface se juge sur ses cas dégradés, pas sur sa capture d'écran de présentation. Quatre situations à traiter explicitement :
- Chargement : montrer que quelque chose se passe, sans faire sauter la mise en page quand le contenu arrive.
- Vide : une liste sans résultat doit expliquer pourquoi et proposer une suite, pas rester blanche.
- Erreur : dire ce qui s'est passé et ce que l'utilisateur peut faire.
- Succès : confirmer sans ambiguïté.
Mobile d'abord, pour de vrai
Concevoir d'abord pour le petit écran force à hiérarchiser : il n'y a pas la place de tout mettre en avant. L'inverse — dessiner en grand puis « adapter » — produit des interfaces mobiles où l'essentiel est enterré sous trois replis.
Vérifiez les zones de contact : une cible tactile fait au moins 44 pixels de côté, et les actions principales doivent tomber sous le pouce, pas en haut de l'écran.
Ce qu'il faut retenir
Une bonne interface ne se remarque pas. Elle ne fait pas dire « quel beau site », elle fait faire — appeler, écrire, acheter. Les principes ci-dessus se vérifient un par un sur vos propres pages, sans outil et sans expertise particulière.
Et quand le site doit aussi être trouvé avant d'être jugé, les fondations décrites dans SEO technique viennent en amont de tout le reste.