Une demande revient souvent sous cette forme : « nous voudrions un site plus beau ». Elle est légitime et cache presque toujours une autre question : le site actuel n’obtient pas ce qu’il devrait. Les personnes arrivent et repartent, ou arrivent sans comprendre quoi faire.

Le rendre plus beau ne résout qu’une partie du problème. L’esthétique détermine la première impression, mais elle ne décide pas si quelqu’un poursuit sa lecture, fait confiance, comprend ce qu’il peut obtenir et finit par écrire. C’est l’expérience qui le décide : la manière dont la page guide la personne qui la consulte.

L’esthétique et l’expérience ne sont pas la même chose

L’esthétique est ce qui apparaît sur une image fixe : couleurs, typographie, images et espaces. L’expérience est ce qui se produit dans le temps, pendant qu’une personne fait défiler, lit, s’arrête, revient en arrière, ouvre une page ou change d’avis.

Un site peut être impeccable sur une capture et échouer complètement pendant son utilisation. Cela arrive lorsque chaque section possède le même poids visuel, que tous les textes ont la même longueur ou que six boutons partagent le même écran sans qu’aucun soit prioritaire. Rien n’oriente le regard et la réaction naturelle consiste à fermer la page.

Une expérience efficace ne demande pas aux visiteurs de choisir quoi regarder en premier. Le design le décide et communique ce choix sans avoir besoin de l’expliquer.

Hiérarchie : quelqu’un doit décider ce qui se lit en premier

La hiérarchie est la partie la moins spectaculaire du travail et celle dont l’effet est le plus important. Elle consiste à déterminer, pour chaque écran, ce qui doit être lu en premier, ce qui vient ensuite et ce qui peut ne pas être lu.

Concrètement, il s’agit de quelques règles appliquées avec rigueur :

  • une seule action principale par écran, visible sans devoir la chercher ;
  • des différences de taille nettes, car un titre 15 % plus grand que le texte ne crée pas de hiérarchie ;
  • le contraste utilisé comme outil, pas seulement comme exigence d’accessibilité ;
  • de l’espace autour de ce qui compte, la manière la plus simple de donner de l’importance à un élément.

Lorsque la hiérarchie fonctionne, une personne peut parcourir la page pendant dix secondes et expliquer malgré tout son sujet. Ce test mérite d’être appliqué à chaque page d’accueil.

Lisibilité et rythme

La lisibilité suit des règles connues : des lignes de soixante à soixante-quinze caractères, un interligne généreux, un contraste suffisant et des paragraphes courts. Ce sont des contraintes techniques qui peuvent être vérifiées.

Le rythme est moins codifié. Il distingue une page agréable d’une page fatigante : l’alternance entre des blocs denses et aérés, le texte et l’image, les sections qui exigent de l’attention et celles qui la rendent. Une page composée de quinze sections identiques fatigue même si chacune est bien réalisée, comme un texte fait uniquement de phrases de même longueur.

Le rythme se conçoit comme une séquence, pas comme une collection d’écrans isolés. C’est pourquoi valider une page morceau par morceau a peu de sens.

Le contenu précède la mise en page

Une mise en page conçue autour de faux textes tient jusqu’à l’arrivée des vrais contenus. Le titre qui occupait deux lignes dans la maquette en prend quatre, la description prévue pour trente mots en exige quatre-vingt-dix, puis le contenu est coupé pour entrer dans le design.

L’ordre correct est inverse. On détermine d’abord ce qui doit être dit et dans quelle séquence, puis on construit la forme qui le soutient. Un site est avant tout une succession d’arguments, et leur ordre est une décision de l’activité, pas seulement du designer.

Quand le mouvement est réellement utile

Le mouvement sert lorsqu’il communique quelque chose qui, sans lui, devrait être expliqué.

Le mouvement qui oriente

Un élément qui entre par le bas pendant le défilement signale le début d’une nouvelle section. Une transition entre deux pages montre qu’un changement a eu lieu et que le site a compris l’intention. Un menu qui s’ouvre avec un mouvement cohérent indique d’où il vient et où il retournera. Dans chaque cas, l’animation répond à une question implicite : que vient-il de se passer ?

Les micro-interactions

Ce sont les réponses immédiates aux gestes : un bouton réagit à la pression, un champ confirme la réception d’une donnée ou une carte se soulève imperceptiblement au passage du pointeur. Elles durent moins de deux dixièmes de seconde et montrent que le système a enregistré l’action.

Un détail est souvent oublié : le survol n’existe pas sur téléphone. Toute information confiée uniquement au hover n’est communiquée à personne sur mobile.

Plus d’animations ne signifie pas une meilleure expérience

Le mouvement a un coût, payé par la personne qui essaie d’accomplir quelque chose.

Une animation d’entrée sur chaque paragraphe transforme la lecture en série d’attentes. Un défilement manipulé retire le contrôle d’un geste familier. Un parallaxe appuyé rend difficile de conserver sa position. Pour les personnes souffrant de troubles vestibulaires, cela peut provoquer de véritables réactions physiques. Le système d’exploitation permet de demander moins de mouvement, et un site bien conçu respecte cette préférence.

Notre règle pratique est simple : un ou deux moments de mouvement reconnaissables par page ; tout le reste relève du retour fonctionnel. Si une animation ne peut répondre à la question « que communique-t-elle ? », elle communique seulement que quelqu’un savait la réaliser.

La performance fait partie de l’expérience

Une page qui met cinq secondes à apparaître n’a pas un problème technique séparé à corriger plus tard. Elle a un problème d’expérience, et c’est le premier que rencontre la personne.

C’est particulièrement important en mobilité, où la connexion varie et l’attention est courte. Les images non optimisées, les polices chargées en excès, les scripts tiers qui bloquent l’affichage et les éléments qui se déplacent pendant le chargement sont des erreurs de conception autant qu’une mauvaise hiérarchie. Le contenu principal doit être lisible immédiatement, sans attendre la fin de JavaScript.

Il existe aussi un effet secondaire utile : un site rapide peut offrir davantage de qualité visuelle, car son budget n’a pas déjà été dépensé dans des choses invisibles.

Le mobile n’est pas une version réduite

Réduire la typographie et empiler les colonnes ne signifie pas concevoir pour le téléphone. Sur un écran étroit, les priorités changent : l’ordre des arguments compte plus que la composition, les zones tactiles doivent avoir une taille réelle, les menus longs deviennent des obstacles et ce qui était côte à côte sur ordinateur doit posséder un ordre de lecture autonome.

Concevoir pour le mobile, c’est décider à nouveau ce qui vient en premier, pas compresser les décisions prises pour un écran de vingt-sept pouces.

Ce que signifie concrètement concevoir une expérience

Cela signifie utiliser le design et la technologie pour guider la perception et le comportement : faire comprendre en quelques secondes de quoi il s’agit, conduire vers l’information utile, rendre évidente l’étape suivante et retirer tout ce qui n’y contribue pas.

Lorsque cela fonctionne, le résultat ne se remarque pas. Personne ne quitte un site bien conçu en pensant « quelle belle animation ». La personne a compris ce que fait l’entreprise et, si le moment était approprié, a pris contact.

L’esthétique reste importante. Elle est la première phrase de la conversation, et une mauvaise première phrase peut y mettre fin. Mais elle est la première, pas toute la conversation.

Aller plus loinSites web