Construire des interfaces claires et simples

Le propos

Belle n'est pas claire

On félicite une interface parce qu'elle est belle. Mais ce qui se remarque détourne l'attention de la tâche. Jared Spool, qui a passé trente ans à observer des gens utiliser des produits, le dit sans détour : une interface claire ne se voit pas. On ne la remarque que lorsqu'elle est ratée.

Prenons le premier iPhone. Apple supprime tous les boutons physiques ; il ne reste plus que l'écran. Révolutionnaire pour l'époque, et pourtant, personne n'aurait su dire si c'était beau. Ce qui s'est passé, c'est autre chose : pour la première fois, rien ne s'interposait plus entre la technologie et la personne. Ce sont ses doigts qui tapent, qui activent, qui suppriment, qui modifient. L'interface a disparu. Et paradoxalement, tout est devenu plus clair. Éliminer le superflu, c'est éliminer les barrières.

Si l'interface n'est pas le sujet, qu'est-ce qui l'est ? Kathy Sierra a donné la réponse la plus utile du métier dans Badass : Making Users Awesome. Le produit n'est pas le héros de l'histoire. L'utilisateur l'est. Une interface réussie ne cherche pas à impressionner ; elle rend la personne plus compétente qu'avant de l'avoir ouverte.

La bonne nouvelle : la clarté n'est pas un don, c'est une méthode. Adam Wathan et Steve Schoger l'ont décomposée dans Refactoring UI en familles de décisions, du premier cadrage aux dernières finitions. Voici la carte du chemin.

Partie 01

Partir du bon pied

Le cadrage ne commence pas seulement par ce qu'on veut construire. Il commence par ce qu'on refuse absolument. Très tôt dans le processus, une question s'impose : qu'est-ce qui serait un complet no-go pour mon utilisateur ? Une action irréversible déclenchée par erreur. Une étape ambiguë qui crée une incompréhension. Une interface qui laisse planer un doute sur ce qu'on vient de faire. Identifier ces risques dès le cadrage, c'est ce qui permet de prioriser : on accepte de complexifier le parcours, de multiplier les étapes, d'ajouter des confirmations. C'est un choix assumé, parce qu'on a décidé que l'erreur coûte plus cher que la friction. Ces compromis ne sont pas des contraintes subies ; ce sont des choix de conception qui donnent leur forme à la feature.

Avant le premier pixel, des choix de cadrage. Refactoring UI insiste : on conçoit une fonctionnalité, pas une mise en page. Le détail vient après, et on ne dessine jamais tout d'un coup. Alan Cooper l'avait formulé trente ans plus tôt avec le design orienté objectifs : on part de ce que la personne veut accomplir, pas de ce que la base de données contient.

Deux gardes-fous : choisir une personnalité (sérieuse, chaleureuse, technique ?) et s'y tenir, et limiter ses choix : moins d'options signifie moins d'arbitraire à trancher plus tard. On fuit deux paresses au passage : le gabarit générique où tout se ressemble (layout-templates) et les chiffres tape-à-l'œil sans preuve (lazy-impact). L'autorité se gagne par le soin, pas le volume.

Partie 02

La hiérarchie est tout

Le premier travail visuel n'est pas d'embellir, mais de guider le regard. Tous les éléments ne se valent pas : décidez ce qui compte le plus, rendez-le évident, et atténuez le reste. Et la taille n'est pas le seul levier : le contraste de poids et de couleur en fait souvent davantage. À l'inverse, une icône géante qui écrase le texte, c'est l'antipattern massive-icons.

Les boutons le montrent d'un coup d'œil. Quand l'action principale et l'action secondaire ont le même poids, l'utilisateur hésite.

Même logique pour les données : l'étiquette est un dernier recours. Souvent le format parle de lui-même — un numéro de téléphone se reconnaît sans qu'on écrive « Téléphone ».

Partie 03

Disposition et espace

Le blanc n'est pas du vide à remplir. C'est lui qui regroupe, sépare et fait respirer. La discipline d'Adam Wathan : commencez avec trop d'espace, puis enlevez-en jusqu'à être satisfait. Premier réflexe : remplacer les bordures dures par de l'ombre et de l'espace. Une carte n'a pas besoin d'un trait pour exister, et tout n'a pas besoin d'être une carte (sinon c'est le cardocalypse).

Second réflexe : ne pas chercher à remplir tout l'écran. Luke Wroblewski le rappelle avec le Mobile First — la contrainte du petit écran ne mutile pas, elle révèle la priorité. Une liste aérée vaut mieux qu'une grille étouffante. Apple résume la clarté d'une disposition en deux gestes : placer chaque contrôle près du contenu qu'il modifie, et aligner les éléments pour montrer ce qui va ensemble.

Partie 04

La typographie

Trois règles tiennent l'essentiel. Une échelle typographique définie d'avance (on choisit ses tailles, on n'improvise pas). Des lignes courtes, autour de 65 à 75 caractères, pour ne pas perdre le lecteur. Et un crénage maîtrisé : sur un grand titre, le réglage par défaut paraît mou. On évite aussi la fonte unique partout, qui aplatit la hiérarchie (l'antipattern inter-everywhere) : ce deck pose un serif pour affirmer, un sans pour le corps, un mono pour la donnée.

Apple ajoute les seuils de lisibilité à ne pas franchir : un corps d'au moins 11 points, un contraste suffisant entre le texte et son fond, et une interligne assez généreuse pour qu'aucune ligne n'en chevauche une autre.

Partie 05

La couleur

On croit s'en tirer avec trois ou quatre teintes ; il en faut bien plus. Raisonnez en HSL plutôt qu'en hexadécimal, prévoyez vos nuances à l'avance, et surtout soignez les gris — ils composent l'essentiel d'une interface. Définissez-en huit à dix, du presque-noir au presque-blanc.

Deux pièges à connaître : ne laissez pas la clarté tuer la saturation (les tons clairs doivent rester vifs), et n'informez jamais par la couleur seule — un statut a aussi besoin d'un mot ou d'une icône, pour rester accessible.

Partie 06

La profondeur

Une interface plate peut quand même avoir du relief. Le secret tient à une règle physique simple : une seule source de lumière, venue d'en haut. Les ombres servent alors à indiquer l'élévation : plus un élément est « haut », plus son ombre est large et douce. Une bonne ombre se compose souvent de deux couches superposées, une nette et rapprochée, l'autre diffuse et lointaine.

Partie 07

Les images

Une image porte rarement du texte sans aide. Selon la zone, le fond passe du clair au sombre, et un texte blanc devient illisible. La règle : garantir un contraste constant avec un léger voile, quelle que soit l'image. Pensez aussi à la taille prévue de chaque image, fournissez-la en haute résolution (en ×2 et ×3 pour les écrans Retina, recommande Apple) et respectez toujours son ratio d'origine pour ne pas la déformer.

Partie 08

Les finitions

C'est ici que se gagne la confiance — dans tout ce qui ne se voit pas sur une belle capture. John Cutler met en garde contre l'usine à features : ce n'est pas le volume qui compte, mais le soin des cas réels. À commencer par l'état vide, trop souvent oublié — et sans tout entasser dans une modale fourre-tout (l'antipattern modal-abuse, « des boîtes dans des boîtes »).

Dernier détail, mais décisif : un élément cliquable doit le montrer. L'effet de survol n'est pas une décoration, c'est une promesse d'interaction. Et sur écran tactile, vise une cible d'au moins 44px de côté : un bouton trop petit pour le pouce, c'est un bouton qui n'existe pas.

Partie 09

Le détail et le mouvement

Les huit familles précédentes viennent de Refactoring UI. Celle-ci les prolonge, vers le terrain qu'explorent Rauno Freiberg et Devouring Details. Le détail d'abord : ce sont les états qu'on oublie de dessiner. Le plus négligé de tous, c'est le focus clavier — en supprimer le contour, c'est rendre l'interface inutilisable sans souris.

Le mouvement ensuite. Une règle : il a un coût d'attention. Il sert à confirmer un changement d'état, pas à décorer. Une réponse brève dit « c'est fait », puis se tait ; une animation qui se rejoue sans fin ne dit que « regarde-moi ».

Deux corollaires. Parfois, la bonne réponse est de ne pas animer du tout — un changement instantané est souvent plus net qu'une transition. Et quand l'action peut réussir sans attendre le serveur, le retour optimiste bascule l'état tout de suite : l'interface paraît instantanée.