Principes de design web qui changent vraiment les résultats
Une bonne partie des conseils de design web sont des préférences déguisées en principes. Un plus petit nombre de décisions change de façon fiable ce que font les visiteurs, et elles sont pour la plupart peu spectaculaires : ce qui est visible d'abord, si le texte se lit, et combien d'étapes séparent quelqu'un de ce pour quoi il est venu.
Ce guide couvre celles qui reposent sur des données et nomme celles qui relèvent réellement du goût.
Une hiérarchie claire par écran#
Chaque écran devrait rendre une chose manifestement la plus importante. Quand trois éléments se disputent l'attention avec le même poids, les visiteurs lèvent l'ambiguïté en partant.
La hiérarchie se construit avec la taille, la graisse, la couleur, l'espace et la position — dans cet ordre approximatif de force. L'espace est le plus sous-utilisé : un élément entouré d'air se lit comme important sans avoir besoin de crier.
- Une action principale par écran, stylée différemment de tout le reste.
- Les actions secondaires présentes mais visuellement plus discrètes : contour plutôt que plein.
- Des titres qui décrivent le contenu, pas des titres malins qui ne décrivent rien.
- L'espace utilisé délibérément : une page encombrée n'a pas de hiérarchie, seulement de la densité.
La lisibilité avant la décoration#
Un texte difficile à lire vous coûte des lecteurs quelle que soit la qualité de l'écriture. Ce sont des seuils mesurables, pas des opinions.
| Propriété | Cible pratique | Pourquoi |
|---|---|---|
| Taille du texte courant | 16–18 px sur mobile | Sous 16 px, iOS zoome au focus d'un champ et le petit texte perd des lecteurs |
| Longueur de ligne | 55–75 caractères | Les lignes longues font perdre la ligne à l'œil au retour |
| Interlignage | 1,5–1,7 pour le texte courant | Un interlignage serré réduit la vitesse de lecture de façon mesurable |
| Contraste du texte | 4,5:1 minimum, 7:1 mieux | WCAG AA ; le gris sur gris échoue en extérieur sur un mobile |
| Contraste des contrôles | 3:1 sur le fond | L'utilisateur doit voir où se termine un champ |
| Longueur de paragraphe | Trois à quatre lignes | Les blocs longs sont sautés sur mobile |
Vérifiez le contraste sur le fond réel, dégradés et images compris. Une valeur qui passe sur blanc peut échouer sur la bannière sur laquelle elle est réellement posée.
Concevez les formulaires pour qu'ils soient remplis, pas pour la symétrie#
Les formulaires sont l'endroit où la plupart des objectifs d'un site se réalisent vraiment, et là où le design investit le moins d'attention. Chaque champ ajouté coûte des envois ; chaque champ retiré est de l'argent gratuit si la donnée était inutile.
- Demandez le minimum nécessaire pour répondre. Vous pourrez demander le reste dans la réponse.
- Une seule colonne. Les formulaires sur deux colonnes provoquent des champs sautés et sont pires sur mobile.
- Des libellés au-dessus des champs, toujours visibles : les libellés uniquement en texte d'exemple disparaissent dès la saisie.
- Les bons types de champ et attributs d'autocomplétion pour que le mobile affiche le bon clavier et propose de remplir.
- Validez à la sortie du champ, pas à chaque frappe, et placez l'erreur à côté du champ.
- Ne videz jamais le formulaire en cas d'erreur. Perdre ce qui a été saisi est la première cause d'abandon.
- Dites ce qui se passe après l'envoi, et en combien de temps.
Ce qui relève du goût et ce qui n'en relève pas#
Être clair sur cette différence économise beaucoup de temps en réunion de revue. La colonne de gauche est discutable ; celle de droite non.
| Goût | Pas du goût |
|---|---|
| Palette de couleurs | Ratios de contraste sur le fond réel |
| Choix typographique | Taille du texte courant et longueur de ligne |
| Style d'illustration | Si les images ont un texte alternatif utile |
| Grande image d'accueil ou non | Si l'action principale est visible sans défilement |
| Coins arrondis ou droits | Si les états de focus sont visibles au clavier |
| Style d'animation | Si l'animation respecte prefers-reduced-motion |
| Densité de la mise en page | Si les cibles tactiles font au moins 44 px |
Questions fréquentes
Le « au-dessus de la ligne de flottaison » compte-t-il encore ?
Pas comme une règle voulant que tout l'important y tienne : les gens font défiler, et depuis vingt ans. Ce qui compte, c'est que le haut de page réponde à « qu'est-ce que c'est et est-ce pour moi ? » en quelques secondes. Si c'est le cas, les visiteurs feront défiler pour le détail. Sinon, rien de ce qui est plus bas n'est lu.
Combien de polices un site doit-il utiliser ?
Généralement une ou deux familles, les graisses faisant le travail que des familles supplémentaires feraient. La raison pratique est la performance plutôt que le goût : chaque famille et chaque graisse en plus est un fichier de plus à télécharger avant que le texte s'affiche correctement. Une famille bien choisie avec trois graisses couvre presque tous les sites.
Le mode sombre vaut-il la peine ?
Il en vaut la peine si vous pouvez le faire avec des jetons de design dès le départ, où il coûte très peu. L'ajouter à un site terminé implique d'auditer chaque couleur, chaque image et chaque ombre, ce qui est un vrai projet. Si vous le proposez, respectez la préférence système par défaut et laissez l'utilisateur la remplacer.
Le design doit-il ressembler à celui des concurrents ?
Les conventions devraient correspondre — navigation en haut, panier en haut à droite, logo qui renvoie à l'accueil — car les casser coûte de la compréhension sans rien apporter. Tout ce qui est au-dessus des conventions est votre terrain de différenciation. L'erreur est de copier la mise en page d'un concurrent en bloc, ce qui importe des décisions adaptées à son contenu et pas au vôtre.
principes design webbonnes pratiques design webprincipes uxconception de formulaireslisibilité webhiérarchie visuelle
