Pratiques et outils pour des interfaces lisibles
Si la conception visuelle d’un site web reflète l’apparence de votre entreprise en ligne, la rédaction du site quant à elle correspond à la façon dont votre entreprise s’exprime en ligne. Un contenu de qualité et la manière dont on s’exprime par la voix sont essentiels lorsqu’il s’agit de communiquer sur Internet. Néanmoins, la meilleure rédaction ne suffit pas car le ton dépasse les mots. Pour garantir la meilleure expérience possible à vos utilisateurs, il faut s’assurer que votre interface soit bien lisible et compréhensible.
QU’EST-CE QU’UNE INTERFACE LISIBLE?
La lisibilité d’une interface se caractérise par la manière dont les personnes sont capables de voir, distinguer et reconnaître les caractères et les mots de votre texte. Elle est définie par la conception visuelle, plus précisément par la typographie.
Il existe donc plusieurs moyens de garantir à vos utilisateurs une bonne lisibilité de votre contenu: la taille, la représentation, l’épaisseur, la couleur du texte, la police de caractère, la hiérarchie visuelle, etc.
La taille du texte
Utilisez une taille de police par défaut raisonnablement grande et permettez aux utilisateurs de modifier la taille de la police s’il le souhaite. Un texte écrit en minuscule nuit à la lisibilité sans oublier que ce qui est considéré comme “minuscule” varie selon les personnes. En effet, cela dépend de leur acuité visuelle, qui diminue avec l’âge. Les utilisateurs âgés nécessitent un texte plus grand que la normale.
La représentation du texte
Selon la taille de l’écran à travers lequel vous lisez le texte, la distance de visualisation varie. En effet, la distance est beaucoup plus élevée sur les grands écrans que sur les écrans de plus petite taille. La taille de la police est donc à prendre en compte selon la taille de l’écran, par exemple un texte écrit à 12 que l’on lit sur un grand écran (24 pouces) est trop petit et n’est pas lisible, alors qu’il le serait sur un écran plus petit, comme un téléphone portable.
L’épaisseur du texte
Chaque typographie est composée de ce que l’on appelle des graisses. La graisse d’une police est l’épaisseur du trait servant à dessiner un caractère. Une large gamme de différentes épaisseurs allant d’un grassé ultra léger (ultra light) à un grassé extra noir (extra black) est généralement proposée. Le plus couramment utilisé est le gras classique, aussi appelé bold. Mais attention, cette épaisseur est à utiliser généralement pour des phrases courtes, faisant entre 20 et 40 caractères. Pour des phrases plus longues, il est conseillé d’utiliser un graissé plus léger. Il est donc indispensable de choisir une épaisseur de caractère optimale selon la taille de la police et la longueur de la phrase. Par exemple, un texte écrit en bold peut être difficile à lire si la taille de la police est petite.
La police de caractère
La police de caractère est l’un des éléments les plus importants de votre site, en effet, elle doit être lisible et elle doit pouvoir transmettre de manière efficace votre message. La typographie que vous allez utiliser va déterminer la façon dont les utilisateurs vont percevoir votre marque. Il existe de nombreuses polices et souvent il est difficile de faire un choix. Il existe deux types de caractères : les caractères avec empattements et les caractères sans. Les polices avec empattements comportent des extensions, aussi appelées boucles comme par exemple la police Times New Roman. Les polices sans empattements, elle n’ont pas d’extensions, comme Arial.
Des études ont démontré que le cerveau humain avait plus de facilité à identifier et à traiter de manière plus rapide et efficace des caractères à empattement. Il est donc préférable d’utiliser ce type de police lorsque l’on souhaite écrire des textes longs. Mais attention à la taille que vous choisissez car le texte peut ne pas être très lisible si la taille est petite ou si la police présente des formes étranges. Cependant, aujourd’hui utiliser une police d’écriture sans empattement est jugée plus lisible sur un support numérique car on tend de plus en plus vers la simplification des polices.
La couleur
La couleur est aussi un élément important. En effet, il est indispensable de trouver un contraste adapté entre la couleur du texte et celle du fond. La couleur de fond a un effet important sur la capacité à lire et à distinguer les éléments interactifs et le contenu. Par exemple, à l’instar des objets physiques perçus sur des fonds différents, un texte noir affiché sur un fond blanc ou clair semble plus grand qu’un texte écrit en blanc sur un fond sombre.
Un schéma de couleurs inadapté peut entraîner une mauvaise lisibilité, qui se traduit à son tour par une mauvaise expérience utilisateur: les visiteurs ne seront pas en mesure de parcourir les données, et plus encore – même si les données sont pertinentes mais illisibles, les utilisateurs ressentent une tension inexplicable en luttant contre le texte et manqueront possiblement certaines informations essentielles.
N’oublions pas aussi que certaines personnes sont atteintes de daltonisme, une anomalie de la vision qui affecte la perception des couleurs. Il est donc nécessaire d’en prendre compte et d’adapter votre interface à ce type d’utilisateurs.
L'importance de la hiérarchie visuelle
La hiérarchie visuelle c’est-à-dire, l’organisation de votre contenu va rendre clair les niveaux de priorité des informations. Elle est basée sur la théorie de la Gestalt aussi appelée Psychologie de la forme, qui traite de la psychologie de la perception visuelle des éléments et montre comment les gens ont tendance à fusionner les éléments visuels. Elle organise les composants de l’interface utilisateur de sorte que le cerveau puisse distinguer les objets sur la base de leurs différences physiques, telles que la taille, la couleur, le contraste, le style, etc.
En arrivant sur l’interface d’une page web, les utilisateurs ne commencent pas à lire tout le contenu tel quel, mais à le scanner. Par exemple, lorsque nous voyons un article dans un blog, nous voyons d’abord le titre, puis les sous-titres et seulement ensuite les blocs de texte. Cela signifie-t-il que les informations contenues dans les blocs de texte ont un faible niveau d’importance? Non, pas du tout, mais de cette façon les utilisateurs pourront parcourir le titre et les sous-titres pour comprendre si l’article est utile et intéressant pour eux au lieu d’essayer de lire tout le texte. Et si le titre et les sous-titres sont bien faits et informent l’utilisateur sur la structure et le contenu de l’article, ce sera le facteur qui le convaincra de lire davantage. En revanche, si les utilisateurs voient une énorme et longue feuille de texte, ils seront littéralement effrayés car ils ne comprendront pas combien de temps il leur faudra pour lire l’article et si cela vaut la peine d’investir leur temps et leurs efforts.
Faire des listes
Une autre bonne astuce pour rendre le texte plus lisible et facile à lire est d’utiliser le format des listes avec des chiffres ou des puces comme je viens tout juste de faire un peu plus haut. Elles permettent d’organiser les informations de manière claire. De plus, elles attirent l’attention de l’utilisateur et les informations ne sont pas perdues dans le corps du texte.
Utiliser des chiffres
Des études basées sur l’Eye tracking ont démontré que lorsque les utilisateurs parcourent une page web, ils sont attirés par les chiffres et les fixent pendant une certaine durée. En effet, ils ont tendance à associer de manière inconsciente les chiffres à des faits, des statistiques, etc. C’est pourquoi, il peut être judicieux de préférer les chiffres au lieu des chiffres écrits en lettre afin d’influencer la lisibilité du texte.
Être proche de ses visiteurs
Créer une atmosphère de communication humaine avec vos utilisateurs est essentielle. Faites en sorte que votre interface, votre page de renvoi ou votre courrier électronique parle comme un humain serviable et amical, avec un style et une voix de communication claire, sans chercher à effrayer ou à choquer l’interlocuteur.
COMMENT TESTER LA LISIBILITÉ D’UNE INTERFACE ?
En général, dans le cadre des tests utilisateurs, il vous est possible de détecter selon le comportement des utilisateurs des failles au niveau de la lisibilité, si vous observez qu’ils se penchent de manière récurrente vers l’écran par exemple.
La meilleure façon de tester la lisibilité est de mesurer la vitesse de lecture en mots par minute d’un échantillon d’utilisateurs qui lisent un texte. Étant donné que la vitesse de lecture varie d’une personne à l’autre, il est fortement conseillé de réaliser un test intra-sujet, amenant les utilisateurs à lire plusieurs textes. En fonction des résultats, vous saurez alors si votre interface est lisible ou s’il faut l’améliorer.
La lisibilité se mesure aussi par la complexité des mots utilisés et la structure de l’ensemble des phrases. On dit souvent que plus les phrases sont complexes, plus elles sont difficiles à lire que des phrases plus simples.
La lisibilité d’une interface dépend également du niveau d’éducation d’une personne, plus une personne a un niveau avancé, plus elle sera apte à lire des phrases complexes et les analyser.
Ainsi, assurer une bonne lisibilité à l’ensemble de vos utilisateurs repose sur 4 caractéristiques :
- la clarté : les utilisateurs comprennent ce dont vous parlez, le message principal n’est pas flou ou compliqué
- la concision: le texte est significatif, précis et concentré sur l’objectif
- l’utilité: le texte donne aux utilisateurs les informations nécessaires ou les aide à interagir
- la cohérence: le texte d’une interface conserve le même style, le même ton, la même voix et la même terminologie
Lire à ce sujet : L’UX writing : 10 règles indispensables en rédaction UX
Il existe de nombreux outils qui permettent d’évaluer votre texte comme par exemple sur le logiciel Microsoft Word où l’option “Révision” est disponible, mais aussi Scolarius, un outil gratuit qui analyse la lisibilité de votre texte et le niveau de difficulté en fonction des mots, des phrases et des paragraphes. Il permet donc à travers les résultats d’en déduire si le niveau de difficulté de votre texte correspond au niveau de compréhension de vos utilisateurs.
La compréhension de votre texte par vos utilisateurs est primordiale. En effet, un visiteur doit pouvoir comprendre le sens voulu de votre texte et en tirer les bonnes conclusions.
Pour permettre une bonne compréhension à vos visiteurs il est conseillé de:
- Utilisez un langage au plus proche de votre utilisateur, les termes familiers facilitent la compréhension
- Si vous vous adressez à un public spécialisé (par exemple pour un site B2B), utilisez la terminologie spécialisée dans ce domaine.
- Minimiser la charge cognitive pour les utilisateurs
- Préférez parfois des images ou des diagrammes au lieu d’une tonne de mots
- Essayez d’être bref et simplifiez votre contenu notamment pour les utilisateurs sur mobiles.
La meilleure façon de tester la compréhension d’un contenu web est bien évidemment le test utilisateur standard. Il suffit de demander aux utilisateurs d’effectuer des tâches réalistes sur le site et d’observer comment ils interprètent les informations au fur et à mesure. Une fois que les participants ont réalisé leurs tâches, il est alors possible de mesurer davantage leur compréhension. En leur faisant passer différentes formes d’examens comme un test de mémoire par exemple ou leur poser des questions un peu plus complexes afin d’évaluer la compréhension qu’ils ont eu du contenu.
En effet, on pourrait penser que tous ces critères suffisent amplement à garantir un contenu web de qualité mais ce n’est pas le cas. Ils sont nécessaires mais pas suffisants. On pourrait penser que parce qu’il y a du contenu, les utilisateurs vont le lire sauf que ce n’est pas toujours le cas. En moyenne, les utilisateurs ne lisent que 28% des mots et préfèrent parfois survoler une page car elle contient beaucoup trop d’informations.
Mot de la fin
Pour conclure, en plus d’une bonne lisibilité, lecture et compréhension, essayez de toujours vous mettre à la place d’un visiteur. Pensez à la manière dont ils lisent sur les sites web, à ce qu’ils aimeraient lire, ce qui pourrait les intéresser et non sur les éléments que vous voulez promouvoir.
Quoi qu’il en soit, de nos jours, les UI Designers donnent souvent à la lisibilité un sens plus large qui combine à la fois la performance visuelle et la clarté du texte lui-même : le terme est souvent utilisé pour définir la facilité avec laquelle les gens distinguent les différents éléments du texte, tandis que la lisibilité est axée sur la distinction de caractères et de symboles particuliers dans les mots pour des caractères spécifiques. Quelle que soit la signification que vous donnez à ces termes, une seule chose les unis: la façon dont les utilisateurs voient et lisent le contenu de vos interfaces.
by 
