Lisibilité
La lisibilité concerne tous les aspects où du texte apparait :
- contraste
- taille de caractères
- majuscules/minuscules
- gras, italic, soulignés et autres styles
- espacements : entre caractères, entre lignes, entre paragraphes
- choix des polices de caractères
Notez qu'un certains nombre de heuristiques sont bien expliquées dans le livre "Refactoring UI".
Astuces 😊
- Respecter les niveaux de contraste du WCAG, ou RGAA.
- Taille des caractères :
- éviter en dessous de 16px.
- ne pas mixer trop de tailles de caractères différentes,
- préferer changer le style ou le contraste que la taille de caractère
- Ecrire la prose en minuscule, pourquoi pas certains titres en majuscules.
- Ne pas se disperser dans les styles d'écritures et utiliser un minimum d'artefact pour donner de l'importance à des extraits.
- Donner de l'importance à des textes en donnant moins d'importance à d'autres textes.
- Parler de manière télégraphique, pour accélerer la bonne compréhension.
- Eviter les labels, les valeurs parlent d'elles-mêmes, sauf si l'utilisateur recherche visuellement la présence du label.
- La hierarchie d'un document n'est pas forcément la hierarchie visuelle (h1, h2, h3, ...)
- Equilibrer le niveau de contraste avec le niveau de gras.
- Ne mettre en valeur que le processus nominal : Utiliser des boutons secondaires pour les autres actions de branchements.
- Privilégier l'alignement sur la ligne d'écriture, et non pas le centrage vertical de blocs.
- La largeur d'un texte ne doit pas être trop grande, et la hauteur des espaces entre ligne devrait être proportionnel à la largeur du texte.
- Un lien ne doit pas forcément être bleu et souligné, surtout si cela lui donne trop d'importance.
- L'alignement à droite du texte est dangereux pour la lisibilité.
- Elargir le texte (avec du "letter-spacing") si le texte est en majuscule.
- Choisir explicitement des fontes, les réglages des utilisateurs ne sont pas forcément les mêmes que vous.
- Choisir des fontes connues, avec un maximum de réglages (gras, italique, etc.) et suffisamment de caractères encodés.
- Bien réfléchir au choix de la fonte pour la tonalité de votre application.
- On peut jouer sur l'espacement entre caractères :