UX design : 15 principes pour un site clair

Un visiteur arrive sur votre site. En quelques secondes, il décide s'il reste : il cherche à comprendre où il est, ce que vous proposez et ce qu'il doit faire ensuite. Si l'une de ces trois réponses lui échappe, il repart, sans rien vous dire. C'est ce que le design d'expérience utilisateur, ou UX, cherche à éviter.

Bonne nouvelle : la plupart des principes d'UX ne demandent ni refonte ni graphiste. Voici quinze règles simples, classées par famille, à appliquer page par page.

UX et UI : deux notions à ne pas mélanger

• L'UX (expérience utilisateur) est la qualité du parcours : trouver, comprendre, agir sans effort.
• L'UI (interface) est l'aspect : couleurs, typographies, boutons, illustrations.

Une belle interface ne garantit pas une bonne expérience : un site élégant où l'on ne trouve pas le numéro de téléphone reste un mauvais site. À l'inverse, un site sobre mais évident se convertit mieux qu'un site spectaculaire.

Les 15 principes, en cinq familles

Clarté : que voit-on d'abord ?

1. Un objectif principal par page. Une page sert un geste : appeler, demander un devis, acheter. Les autres liens passent au second plan (voir la structure d'une page d'accueil).
2. Une hiérarchie visuelle nette. Ce qui compte le plus est le plus visible : taille, contraste, espace autour.
3. Un titre qui dit ce que la page apporte. Le visiteur doit comprendre l'essentiel sans faire défiler.

Lisibilité : peut-on lire sans effort ?

4. Un texte confortable. Taille suffisante, contraste net entre texte et fond, lignes de longueur raisonnable (voir la charte graphique).
5. Des blocs courts. Paragraphes brefs, intertitres, listes : on parcourt une page avant de la lire.
6. Les mots du visiteur. Le nom d'un service se comprend sans lexique interne ni jargon.

Navigation : sait-on où aller ?

7. Un menu court et explicite. Peu d'entrées, des libellés qui décrivent le contenu (voir les 12 pages indispensables).
8. Un repère permanent. Le visiteur voit à tout moment où il se trouve et peut revenir en arrière sans perdre le fil.
9. Une suite logique sur chaque page. Chaque page se termine par un lien ou un bouton vers l'étape suivante, jamais par une impasse.

Action : peut-on passer à l'acte ?

10. Un bouton visible, au verbe clair. « Demander un devis » vaut mieux que « Envoyer » ou « Cliquez ici », et il porte le même nom partout.
11. Un formulaire réduit à l'essentiel. Chaque champ supplémentaire est un obstacle : ne demandez que ce dont vous avez besoin pour répondre.
12. Un retour immédiat. Message de confirmation après l'envoi, message d'erreur qui dit précisément quoi corriger.

Confort : le site est-il cohérent et fiable ?

13. De la cohérence. Mêmes couleurs, mêmes boutons, mêmes emplacements d'une page à l'autre : le visiteur apprend une fois.
14. Une page rapide et stable. Pas de contenu qui saute pendant le chargement, une bonne tenue sur téléphone (voir penser mobile d'abord et les Core Web Vitals).
15. Une accessibilité de base. Contrastes suffisants, texte agrandissable, navigation possible au clavier (voir l'accessibilité et le RGAA).

Vérifier sans designer : deux tests à la portée de tous

• Le test des cinq secondes. Montrez une page à quelqu'un qui ne connaît pas votre activité pendant quelques secondes, puis masquez-la et demandez : « Que propose cette entreprise ? Que peut-on faire ici ? ». Une réponse hésitante désigne un problème de clarté.
• Le test de tâche. Demandez à quelques proches de réaliser un geste précis (trouver votre tarif, vous envoyer un message) en observant sans intervenir. Notez où ils hésitent : c'est là qu'il faut corriger.

Ces tests qualitatifs ne remplacent pas la mesure. Votre outil de statistiques montre les pages où l'on quitte le site et les formulaires abandonnés (voir optimiser son taux de conversion).

Un exemple (illustratif)

Un artisan constate que sa page d'accueil génère peu de demandes. En la relisant avec ces quinze principes, il repère trois blocages : un menu aux libellés internes (« Pôle réalisations »), un bouton intitulé « Envoyer » et un formulaire qui réclame dix informations. Il renomme le menu, remplace le bouton par « Demander un devis » et ne garde que les champs nécessaires pour répondre. Aucune refonte, trois corrections. L'exemple est illustratif : l'effet réel dépend de votre site et se mesure après le changement.

Ce que l'UX ne remplace pas

Une expérience fluide ne compense ni une offre floue ni un contenu creux. L'UX rend l'accès évident ; c'est le contenu qui donne envie d'aller plus loin, et les éléments de réassurance qui donnent envie de contacter. Côté référencement, Google recommande des pages utiles et agréables à utiliser, mais aucune amélioration d'UX ne garantit un meilleur classement : elle améliore surtout ce que font vos visiteurs une fois arrivés.

À lire aussi : Formulaire de contact : recevoir des demandes ; Écrire les textes de son site : méthode simple.