Vous l’aurez certainement constaté comme moi, la taille des polices de caractère utilisées pour les sites web ne cesse d’augmenter. Pourquoi ? Quelles sont les bonnes pratiques et les tendances en matière de lisibilité web, d’ergonomie et d’expérience utilisateur ?
Un site web est avant tout un outil de communication qui véhicule un message et des informations. La lisibilité y joue un rôle essentiel puisqu’elle rend le contenu accessible et compréhensible pour le lecteur. Celui-ci peut dès lors assimiler rapidement et efficacement l’information contenue dans chaque page web consultée.
Dans la mesure où la lecture à l’écran est plus lente et entraîne une fatigue visuelle plus importante, soigner la lisibilité d’un site, c’est tenir compte de la spécificité du média mais aussi respecter son public.
Sommaire
Le concept de lisibilité
Comme nous le rappelle le dictionnaire, la lisibilité, c’est la qualité de ce qui peut être lu sans peine mais aussi de ce qui est facilement intelligible. Il y a donc une double dimension : physiologique d’une part, cognitive de l’autre.
D’ailleurs en anglais, le mot lisibilité se traduit par deux termes distincts qui font bien ressortir ces deux aspects :
- Legible désigne un texte facile à déchiffrer par l’œil (par opposition à illisible). La lisibilité fait dans ce cas référence au processus de lecture (comment notre cerveau perçoit les lettres assemblées en mots et en phrases et les tranforme en éléments significatifs)
- Readable renvoie à la capacité à saisir le sens du texte, au fait que le contenu soit compréhensible.
La lisibilité participe à la compréhension du message. Une mauvaise lisibilité peut mener à la confusion, à la frustration, voire à l’abandon, tandis qu’une bonne expérience de lecture est encourageante et engageante..
La lisibilité ne concerne pas seulement la typographie ou l’aspect graphique mais aussi le degré de « compréhensibilité » d’un contenu. Toutefois, dans cet article, nous aborderons essentiellement le premier aspect lié à la mise en forme du message et à la structuration du contenu.
Les bases de la lisibilité web
Sur internet, la lisibilité d’un contenu, c’est avant tout la possibilité de le lire facilement sur n’importe quel type d’écran, du plus petit jusqu’au plus grand.
Lisibilité et lecture sur écran
La lecture sur écran est en moyenne 25% plus lente que sur papier, explique Jakob Nielsen, expert en ergonomie web. Et ces performances sont tributaires de la taille de l’écran, de la qualité d’affichage graphique, des réglages colorimétriques et de la résolution. Il faut donc en tenir compte pour produire un contenu qui s’adapte et se lise facilement quelles que soient la taille et la résolution de l’écran.
Par ailleurs, contrairement à l’imprimé, l’écrit web n’a, d’une certaine manière, ni début, ni milieu, ni fin. Il offre une structure souple et évolutive. Chaque lecteur y détermine son propre cheminement. Il décide de consulter telle partie ou non. Il sélectionne ce qui fait sens pour lui.
Différents types de lectures
Sur le web, il existe en réalité deux modes de lecture :
- La lecture continue qui intervient dans le cas de textes longs (e-book, article de blog) et qui s’apparente à la lecture d’un document papier. Elle requiert attention et concentration. Et plus un texte est long, plus la lecture sur écran sera fatigante.
- La lecture discontinue (ou lecture sélective) utilisée par les internautes qui recherchent une information. Dans ce cas, c’est surtout l’organisation des éléments qui importe. Le lecteur cherche des points de repères pour s’orienter plus facilement dans la page web et trouver plus rapidement l’information recherchée. C’est le processus le plus fréquent sur le web (80% des internautes ne lisent pas les pages d’un bout à l’autre).
Différents types de lecteurs
Anticiper les besoins des lecteurs implique de prendre le temps de comprendre leurs habitudes et leurs attentes afin d’orienter les choix typographiques, graphiques et ergonomiques pour leur apporter le confort de lecture attendu.
- Les lecteurs pressés scannent les pages web à la recherche d’une information précise. Il est primordial de leur offrir un accès rapide et structuré à l’information.
- Les lecteurs dilettantes surfent pour le plaisir de découvrir, de s’instruire, de se détendre. Dans ce cas, c’est l’originalité de la composition ou un élément saillant qui va capter leur attention et faire en sorte qu’ils continuent leur lecture. Il convient donc de scénariser le contenu pour les séduire.
- Les lecteurs engagés apprécient une information riche, structurée, utile.
Nous venons de voir qu’à peine 20% des internautes liront vos textes en entier. Mais même dans ce cas, ils seront heureux de souffler entre deux paragraphes, ils apprécieront l’alternance des contenus -textes, citations, illustrations, encarts, références.
Bien entendu, le niveau de lecture dépend aussi des compétences, des connaissances et de l’âge du public cible. Il est évident qu’on ne proposera pas le même degré de complexité sémantique et cognitive à un jeune public ou à un public expert.
Lisibilité « mobile first »
À l’heure du « mobile first », la lisibilité est plus que jamais un élément clé de l’ergonomie d’un site web. Avec 50% des internautes qui découvrent un site via leur smartphone, on comprend que la taille des polices et la composition des pages revêtent une importance critique.
Dès lors que les écrans ont évolué tant vers le haut (27″) que vers le bas (5,5″), chaque site doit au minimum reposer sur un design responsive, afin de s’adapter à l’écran utilisé.
Et ce n’est pas parce que l’écran est plus petit que la typo sera plus petite. Que du contraire !
Trois aspects clés de la lisibilité web
L’optimisation de la lisibilité d’une page web passe avant tout par le contrôle de nombreux éléments liés à l’architecture de l’information et à la typographie.
Typographie & lisibilité des caractères
Le choix d’une police de caractère est le point de départ du travail de lisibilité. Chaque police a un ton, un caractère, tout comme vos mots et vos phrases. Vos choix typographiques doivent être en harmonie avec la personnalité de votre marque, de votre entreprise, de vos contenus.
Selon une vieille maxime, les caractères les plus lisibles sont « transparents » pour le lecteur, c’est-à-dire qu’ils n’attirent pas une attention excessive sur eux-mêmes. Ni trop légers, ni trop audacieux, ils ont des formes évidentes et faciles à reconnaître. Les variations de graisse sont subtiles, tout comme les empattements, s’il y en a.
Parmi les polices les plus utilisées pour l’instant on trouve Roboto ou Roboto Condensed, Raleway, Open Sans, Source Sans Pro pour le corps et Oswald, Lato, Montserrat, Playfair Display pour les titres.
Dans un monde qui regorge de messages non sollicités, la typographie doit souvent se faire remarquer avant qu’elle ne soit lue. Pourtant, pour être lue, elle doit renoncer à l’attention qu’elle a attirée. Elle aspire donc à une sorte de transparence statuaire. Son objectif traditionnel est la durabilité : non pas l’immunité au changement, mais une nette supériorité par rapport à la mode. La typographie est une forme visuelle de langage qui relie l’intemporel au temps. (The elements of typographic style).
Même si les opinions divergent parfois, il semblerait que les polices sans empattement, (aux formes plus simples) sont légèrement plus lisibles que leurs cousines avec empattement. On les choisit souvent pour le corps du texte.
Au-delà du choix d’une ou plusieurs typos, il s’agit de définir correctement la taille des caractères, la longueur des lignes, les espacements entre les lignes, entre les lettres et entre les paragraphes, … bref, d’appliquer au web les bonnes pratiques de la typographie print.
- Le standard actuel pour la taille du corps du texte (body) est de 16px
- Préférez des polices qui disposent de plusieurs graisses pour varier les styles: light, semi-bold, bold.
- Utilisez les échelles typographiques pour définir des tailles de texte harmonieuses et bien organiser l’information (corps du texte, titres, sous-titres). L’idée est simple : on choisit une taille de texte standard et un facteur multiplicateur ; on calcule successivement les tailles de textes supérieures et inférieures en s’appuyant sur ces deux nombres.
A lire aussi : 18 règles typographiques pour rendre vos contenus plus séduisants et lisibles
Dans un article sur la lisibilité, Nielsen donne quelques lignes directrices en matière de lisibilité typographique :
- Utiliser une taille de police raisonnablement grande et permettre aux utilisateurs de la modifier. (il rappelle que ce qui est considéré comme « minuscule » diffère d’une personne à l’autre, en fonction de son acuité visuelle, qui diminue avec l’âge).
- Avoir un contraste élevé entre les caractères et l’arrière-plan. Il est préférable d’utiliser un fond uni plutôt qu’un fond imagé ou texturé, car ce dernier interfère avec la reconnaissance des détails fins des lettres.
- Utiliser une police de caractère « propre ». Les polices créatives (manuscrite ou gothique par exemple) réduisent la lisibilité. Mieux vaut en limiter l’utilisation.
Bon à savoir
En matière de responsive design, les proportions se déclinent en unités relatives (em) plutôt que fixes (px, pt). De cette manière, la taille de la police dépend de la largeur de la fenêtre du navigateur.
Composition & scénarisation du contenu
Les choix typographiques ne suffisent pas à assurer la lisibilité d’un contenu web. Ils doivent être soutenus par une mise en valeur des contenus. C’est ici qu’intervient la composition et l’organisation de l’espace pour capter l’attention de l’internaute et lui donner envie de poursuivre la lecture au-delà des premiers mots, au-delà du premier écran. La composition est également essentielle pour créer des pages web avec une forte identité visuelle.
La meilleure composition est souvent simple : une idée, une image, quelques mots, un espace ouvert. Mais la complexité de certaines contenus rend ce principe parfois difficile à mettre en œuvre. Il s’agit alors de créer une composition cohérente où l’œil perçoit immédiatement les éléments clés, puis s’attarde sur les détails bien agencés.
Par rapport à l’imprimé, la composition graphique web dispose d’atouts supplémentaires : outre l’utilisation des graisses, formes, filets pour mettre en valeur le contenu, vous pouvez aussi l’animer, faire surgir des titres, ajouter des vidéos ou des fichiers audio.
C’est ce que font la plupart des médias dont l’objectif premier consiste à guider le lecteur à travers le dédale des informations.
Rythme de la page et lecture sélective
Le rythme est une qualité essentielle d’une page web pour maintenir l’attention du lecteur. L’œil saute naturellement d’un élément d’information à l’autre.
C’est toujours une bonne idée de découper la page en blocs et d’alterner les éléments en émaillant le texte brut d’encadrés, d’images, de citations, etc.
Jouer avec les contrastes permet de faire ressortir les idées, les rubriques ou les faits saillants.
Introduire des éléments spectaculaires, tels que des caractères ou des images surdimensionnés ou des recadrages audacieux, sont autant de manières d’animer une page, de briser la monotonie.
- Rythmer la composition
Nous l’avons vu, 80% des lecteurs scannent les contenus et picorent les mots et les phrases qui les intéressent. Pour répondre à ce style de lecture sélective, pensez à multiplier les sauts de ligne. Ne dépassez pas une idée et trois ou quatre phrases par paragraphe ! Vos lecteurs pourront ainsi parcourir vos contenus plus facilement. - Jouer avec les espacements
L’interlignage est l’espace entre les lignes ou, en langage web, la hauteur de ligne, qui ne peut pas avoir la même valeur que la taille de la police sinon les lignes de texte se touchent. On considère en général que 150% de la taille de la police fonctionne bien. Ainsi, un texte de 14px aura un interlignage de 18 – 20px.
L’interlettrage quant à lui désigne l’espacement entre chaque lettre. Souvent négligée sur le web, une bonne longueur de ligne permet aux yeux du lecteur de passer de la fin d’une ligne au début de la suivante facilement et naturellement. On considère que la longueur idéale se site entre 8 et 12 mots ou 50-60 caractères (espaces compris).
10 principes de lisibilité web
Dans un article datant d’une dizaine d’années déjà, SmashingMagazine passait en revue 10 principes de lisibilité et typographie web. Ils n’ont pas pris une ride ! En voici une traduction libre :
1. Des titres sympas
Les titres sont un élément clé de la typographie print ou web. C’est eux qui établissent la hiérarchie d’un contenu et rendent chaque page plus facilement « scannable ».
Bien choisir la taille des titres et intertitres est tout aussi important que le choix de la taille du corps du texte.
- Des titres trop gros peuvent perturber la lecture et faire perdre le fil surtout si le contenu est riche.
- Des intertitres trop petits n’attireront pas l’attention et rendront la page insipide et sans relief.
Sur le site de Smashing Magazine, la présentation des derniers articles est intéressante. Les rubriques sont parfaitement repérables, il n’y a aucune distraction et Smashing se pique même d’une touche d’humour avec son bouton « Bring red back ! » qui permet de changer la couleur de l’arrière-plan.
Quoi qu’il en soit, dès lors que vous aurez défini les tailles de vos différents titres et sous-titres, n’oubliez pas de laisser suffisamment d’espace entre le titre et le corps du texte.
2. Des contenus faciles à scanner
Nous l’avons vu, 80% des internautes scannent le web à la recherche d’informations intéressantes ou ludiques. Pour rendre vos contenus scannables, soignez vos titres et en-têtes, hiérarchisez vos contenus, créez des points focaux pour guider l’utilisateur à travers votre contenu.
Les points focaux sont ces éléments de la mise en page qui attirent, ou sont censés attirer, l’attention de l’internaute. Il peut s’agir d’une titre mais aussi d’une icône, un encart, un élément graphique, un bouton, etc.
3. Une composition aérée
L’espace contribue à la lisibilité du contenu. Des espaces dégagés autour des blocs de texte ou des illustrations confèrent une certaine légèreté à un texte dense. Le regard passe naturellement d’un élément à l’autre. Tout devient plus fluide et plus facile à assimiler.
Dans l’exemple ci-dessous, la disposition est propre et efficace. Les yeux se déplacent facilement d’un élément à l’autre. La lecture n’est distraite par aucun élément superflu.
4. Une présentation cohérente
La cohérence est importante tant du point de vue contenu que graphique. Et elle améliore la lisibilité.
- La cohérence dans la hiérarchie implique que tous titres de même importance ont la même taille, la même couleur et la même police. Cela aide à organiser le contenu.
- La cohérence visuelle est essentielle : elle agit comme un signe de reconnaissance (une marque, une entreprise se reconnaît à ses couleurs, à son style, à certains éléments spécifiques).
Décliner vos couleurs à travers votre site, ajouter votre logo en filigrane de vos illustrations propres, etc. permet d’associer la qualité de vos contenus à votre entreprise et de renforcer votre crédibilité.
5. Maîtriser la densité des infos
La densité du contenu a un impact majeur sur sa lisibilité. Cette densité est affectée par les options d’espacement choisies : hauteur des lignes, espacement des lettres et taille du texte.
Il est important de trouver un équilibre entre tous ces éléments pour que le contenu ne soit ni trop compact ni trop espacé. Vous obtiendrez alors une densité parfaite, à la fois lisible et scannable.
6. Mettre en évidence certains éléments
N’oubliez pas de mettre en évidence certains éléments au cœur du contenu. Comme par exemple les liens hypertextes, la mise en gras des textes importants et un affichage différent pour les citations ou d’autres textes mis en exergue.
Comme évoqué plus haut, les points focaux sont essentiels en typographie Web. En mettant en évidence certains éléments, vous aidez à briser la monotonie du texte, surtout s’il est assez long.
7. Organiser l’information
La façon dont vous organisez l’information dans une page web renforce sa lisibilité. Les utilisateurs sont guidés avec aisance à travers un contenu bien structuré où l’information est facile à trouver.
8. Accompagnement visuel soigné
Chaque texte a besoin d’un support visuel, qu’il s’agisse d’une image, d’une icône, d’un graphique ou d’une vidéo. Mais combiner textes et visuels peut s’avérer difficile. Prévoyez assez d’espace entre chaque visuel et chaque texte.
S’il s’agit d’une image, une bordure peut être une bonne idée pour marquer une séparation nette entre le texte et l’image. Elle guide l’œil tout en ajoutant un élément de style à la composition. Choisissez-la pas trop marquante et dans des tons subtils.
Lorsque vous illustrez un contenu, veillez à ne pas interrompre le flux textuel de manière intempestive et assurez-vous de la pertinence des visuels choisis.
9. Utiliser des séparateurs
Les séparateurs sont un moyen simple de diviser un contenu en sections de manière propre et organisée. La forme de séparateur la plus simple est la ligne. Utile pour scinder un long texte en fragments plus digestes, elle se décline en de multiples variations, avec plus ou moins d’effet.
Une autre manière de diviser une page web est le recours aux boites (text boxes). Idéal pour rassembler sur une même page des contenus qui ne sont pas nécessairement connectés entre eux.
Mais le web design offre encore bien d’autres manières très créatives de séparer l’espace de la page web pour en augmenter la lisibilité.
source : elegantthemes.com
10. Jonglez avec les marges
On l’a vu, l’espace autour des blocs de contenu aide à attirer l’attention du lecteur sur tel ou tel élément du contenu. En fait, le vide structure le flux d’information et facilite la lecture. Il force l’œil à se focaliser sur l’essentiel ou sur ce que vous avez accentué.
Les marges sont la meilleure technique pour créer cet espace. Elles aident à séparer le contenu du reste de la mise en page. Le texte ne doit pas déborder sur d’autres éléments de mise en page, surtout s’il s’agit d’un long article.
En conclusion
Ce n’est pas parce que les internautes peuvent lire et comprendre votre contenu qu’ils vont le faire. En moyenne, ils ne lisent que 28 % des mots sur une page Web. Il y a tellement d’informations disponibles qu’ils scannent l’info au lieu de la lire.
Pourtant, certains liront votre contenu, surtout s’il contient des informations inédites ou intéressantes. L’essentiel est donc d’attirer leur attention avant qu’ils ne décident d’aller voir ailleurs.
Les astuces sont nombreuses, mais c’est votre créativité qui fera la différence. Et votre volonté de proposer des contenus de qualité, dynamiques, digestes, faciles à consommer et partager.
Pour aller plus loin
- Typo et Web – pour une lisibilité optimale de la typo sur internet – 2012 – A. Foutoyet – Adverbum
- Lisibilité des sites web : des choix typographiques au design d’information – 2009 – M.V. Blond, O. Marcellin – Eyrolles
- The elements of Typographic Style – version 4.0 – Robert Bringhurst – 2013 – Hartley & Marks
