5 éléments pour faciliter la lecture de vos contenus à tous vos utilisateurs

Aujourd’hui, je voudrais attirer votre attention sur 5 bonnes pratiques pour faciliter la lecture de vos sites à tous vos utilisateurs !

Lorsqu’on crée ou améliore un site web il faut penser à différents points essentiels afin de faciliter la lecture pour tous. Pour tous, signifie pour chacun de vos utilisateurs, peu importe le support qu’il utilise (ordinateur, tablette, mobile, etc).


Il est essentiel de rendre la lecture de votre site agréable, fluide, claire et accessible à tous, du moins, à la majorité de vos lecteurs. C’est pourquoi vous devez apporter une attention toute particulière aux 5 éléments suivants.


Faciliter la lecture de votre site à tous vos utilisateurs en 5 points !

La lecture de votre site doit être agréable, fluide, claire et accessible à tous !

Pour faciliter la lecture de vos contenus à vos utilisateurs, vous devez avant tout, adapter chaque élément au numérique 🤓 !

La lisibilité d’un texte se base sur la facilité de lecture. Elle dépend de la taille de la police, de l’interlignage, de l’espacement des caractères et de la longueur des lignes.

Un titre, un sous-titre, une légende ou un texte se doit d’être facilement reconnaissable et lisible.⁣⠀⁣⠀

1️⃣ Le choix de la police d’écriture

Avant toute chose, il est important de choisir de “bonne” police d’écriture pour votre site.



Sur la photo ci-dessus, vous avez d’un côté la Roboto qui est une police très conseillé dans le web et de l’autre la Lavanderia qui est une police print.⁣

Je vais vous donner les 4 règles, que je m’oblige à respecter pour proposer une police d’écriture efficace pour le numérique. Elle doit être :⁣

✔️ Web : référencé parmi les google fonts par exemple⁣

Vérifier systématiquement que la police d’écriture que vous utiliser soit dans le répertoire des google fonts. Il y en a des tas, elles sont de qualité et faites pour le web. En plus, google vous permet de les intégrer plus facilement à vos dispositifs numériques.⁣

✔️ Lisible : facilement et de loin⁣

Si vous reculez votre smartphone ou ordinateur, vous verrez que la Roboto reste lisible même de loin. Tandis que la Lavanderia, elle, n’est pas du tout lisible.⁣

⁣✔️ Simple : sans fioritures⁣

Avec le nombre incalculable d’écran existant et de toutes les tailles, il vaut mieux rester simple pour faciliter la lecture sur tous les supports. Eviter un maximum les typographies avec des fioritures sur chaque lettre. Et si vraiment vous aimez ça, garder les pour vos visuels.⁣

⁣✔️ Variées : de courante à grasse⁣

Il est important de choisir deux polices complémentaires qui vous permettront de rythmer la lecture.⁣

Il est conseillé d’utiliser généralement deux polices de caractères (ou trois) au maximum pour un site internet. Deux, parce qu’il est important d’en avoir : une plus classique et plus lisible pour le contenu et une seconde plus originale et “accrocheuse” pour les titres.
⁣⁣⁣⠀
Il est préférable de ne pas choisir deux polices appartenant à la même famille. L’idéal est de choisir une police à forte personnalité et une autre plus neutre pour équilibrer votre design.

⁣🧐 Comment savoir quel style appliquer ?⁣⁣⁣⠀

La psychologie de l’utilisateur… Vaste sujet… Sachez ⁣qu’il existe des styles de polices par segment cible afin de rester cohérent avec votre typologie d’activité et de ne pas “troubler” ou “tromper” vos utilisateurs :

👉 Les polices manuscrites sont plus souvent utilisés sur des sites pour les activités créatives ou pour le secteur du coaching et du bien être ;

👉 Les polices carrées et épaisses sont davantage utilisées pour des secteurs comme le sport ou l’automobile ;

👉 Les polices classiques se retrouvent plus dans les sites des avocats ou des comptables ;

👉 Les polices plus créatives sont préconisées pour les secteurs du conseil ou du web ;

👉 Les polices longues et fines sont appliquées pour les secteurs “haut de gamme”.

Dans tous les cas, l’essentiel, c’est que vous pensiez à choisir une police d’écriture qui soit adaptée pour le web. Vous pouvez vous baser sur l’immense librairie en ligne des Google Fonts.

2️⃣ La mise en forme de votre texte

Aujourd’hui, vos utilisateurs scannent votre contenu, ils le survolent alors il est essentiel que vous valorisiez l’essentiel en optimisant la mise en forme de vos contenus. C’est elle qui amène un rythme à la lecture.

Do-texte-aligné-gauche


Sur la photo, vous avez d’un côté un texte aligné à gauche et de l’autre le même texte qui est “justifié”.⁣⠀

⚠️ [Tips : Il n’est pas du tout bien de justifier son texte sur les supports numériques (& papiers aussi d’ailleurs) !⁣] 

✔️ Pour une question d’accessibilité !

Et oui, l’expérience utilisateur s’attarde sur l’expérience procurée à TOUS les utilisateurs !⁣ Le texte “justifié” est beaucoup moins facile à lire pour les personnes dyslexiques. Et parfois pour d’autres aussi.⁣⠀
⁣⠀
👉 La justification d’un texte, va entraîner un écart des lettres et des mots qui est différent selon les lignes d’un paragraphe. Ce qui devient très gênant pour la lisibilité du texte. La lecture et la compréhension des mots et des phrases devient plus compliqué à déchiffrer pour l’utilisateur lambda et encore plus pour des personnes ayant plus de difficultés à lire ! ⁣⠀

Ce problème est renforcé sur le web où la lecture est déjà moins agréable que sur une liseuse ou sur un support papier.⁣⠀

✔️Autre point auquel il faut faire attention lors de votre mise en forme : les orphelins et les veuves !

Ces derniers représentent un mot ou une ligne de texte qui vont être isolés du reste de leur paragraphe ou phrase et dérange la fluidité de la lecture.

Cela vaut aussi pour les retours à la ligne et les césures qui sont à éviter car ils déséquilibrent un bloc de texte et ne rendent pas la lecture fluide et totalement agréable. ⁣⠀

Parfois, il vaut mieux une phrase un tout petit peu plus longue où vous mettez⁣⁣ en avant les mots essentiels (en gras par exemple). Cela permet aux internautes pressés de survoler votre texte tout en y repérant les informations clés. ⁣⠀⁣⠀

3️⃣ La taille des caractères

✔️On dit que 14px est la taille de caractères la plus utilisée pour le corps de texte sur le web⁣.

Les polices à l’écran peuvent s’afficher différemment d’un appareil à un autre, voir même d’un écran à un autre.⁣ 14 px correspond à la taille idéale pour un corps de texte sur le web. Le 16 px est aussi très utilisé. ⁣Cette taille idéale a été définit en fonction de la distance moyenne à laquelle l’utilisateur est éloigné de son écran lorsqu’il lit.⁣

⚠️ [Tips : Les unités de mesure pt et px ne sont pas les mêmes. Dans le web, l’unité de taille de caractères la plus utilisée est px, qui signifie “pixel”. Sur les outils de traitement de texte classique (destinés à l’impression) on parle plutôt en pt, qui signifie “point”. Le plus souvent on écrit en 12pt.⁣]

⁣🧐 Sur le web, il est important de prendre en compte la distance de lecture :⁣⠀

👉 COURTE (entre 10 et 30cm) : distance à laquelle on tient son smartphone dans les transports en communs ou lorsqu’on lit allongé.⁣⠀
👉 MOYENNE (entre 30 et 50cm) : distance à laquelle on lit sur tablette (souvent posée sur les genoux).⁣⠀
👉 ELOIGNEE (entre 50 et 70cm) : distance moyenne à laquelle on se trouve de nos ordinateurs sur un bureau.⁣

La taille de caractères pour le corps de texte la plus utilisée est 14px qui correspond environ à 10,5pt. Mais de plus en plus et pour des questions d’accessibilité pour tous, on écrit en 16px (environ 12pt).⁣

⁣🧐 Il y a des tailles standards de caractères à appliquer, selon le support sur lequel sont vos utilisateurs :⁣

👉 MOBILE : 25px (environ 12pt)⁣⠀TABLETTE : 33px (environ 16pt)⁣⠀
👉 ORDINATEUR : entre 12 et 17px (environ entre 9 et 13pt)⁣⠀
⁣⠀
Pour le mobile, vous pouvez vous baser sur les standards IOS ou Android. Voilà ci-contre, les standards de IOS pour vous faire une idée.

4️⃣ La hiérarchisation

Comme vous le savez, vos utilisateurs scannent votre contenu. On vient de voir que c’est un élément à prendre en compte pour la mise en forme de votre contenu…c’est aussi essentiel pour la hiérarchisation de vos informations.

Vos utilisateurs, sur ordinateur ont tendance à lire votre contenu en “F” tandis que sur mobile ils ont tendance à se concentrer sur les éléments centraux de l’écran. Votre contenu doit alors être hiérarchisé en fonction de ces éléments.

D’où l’importance aussi de structurer ses pages mais aussi ces articles, avec des titres de plusieurs niveaux, des introduction, des légendes, etc… Cela permet de guider la lecture !

✔️Ceci est d’autant plus important, si vous insérez dans vos contenus des boutons d’appel à l’action (“call-to-action”, autrement dit CTA).

Hiérarchiser vos boutons d’appel à l’action (CTA) est primordial pour guider vos utilisateurs ! ⁣⠀

⁣⠀


Sur la photo, vous avez d’un côté un encart avec une priorisation et une lecture claire des CTA et de l’autre le même encart avec deux CTA identiques.⁣ Il est important que vous priorisiez vos boutons d’appel à l’action en fonction de votre objectif. Il existe des boutons d’actions primaires, secondaires et tertiaires.

⁣🧐 Comment travailler et hiérarchiser vos boutons ?

👉 Il est nécessaire de les différencier clairement pour guider vos utilisateurs là où vous souhaitez qu’ils aillent.⁣ ⠀
⁣⠀
👉 Il est important de ne pas utiliser le même type de CTA pour des tâches ou des actions différentes. Les actions prioritaires doivent être plus visibles et incitatives pour l’internaute.⁣ Plus un internaute aura de choix moins sa navigation sera fluide. Il faut donc offrir à l’internaute le moins de choix possible afin de rendre sa décision plus rapide.⠀
⁣⠀
👉 Les autres boutons d’actions secondaires et tertiaires à proximité peuvent être présents mais doivent être visuellement différents, moins mis en avant et valorisés.⁣⠀
⁣⁣⠀
⚠️ [Tips : Nous ne pouvons pas être certains de l’efficacité d’un CTA. Il est donc recommandé de tester régulièrement le meilleur emplacement, libellé ou couleur d’un CTA pour se rendre compte de l’impact engendré sur les conversions.]⁣⠀

En réalisant des boutons clairement identifiables et différents vous verrez que vous convertirez davantage vos utilisateurs vers votre objectif.⁣⠀

5️⃣ La colorimétrie

Faites attention aux couleurs que vous utilisez sur vos sites/blog/app ! ⁣



Sur la photo, vous avez d’un côté un texte gris assez visible sur fond noir puis blanc et de l’autre le même texte avec un gris légèrement plus claire qui rend la lecture beaucoup moins lisible.⁣

✔️ Définissez des couleurs qui vous plaisent, puis tester les différentes nuances et contrastes de ces couleurs pour faciliter la lisibilité de vos sites/blog/app !⁣

La couleur véhicule à la fois l’identité de votre site/blog/app et aide aussi les utilisateurs à en comprendre les informations et la lecture.⁣

Tout le monde ne distingue pas les couleurs de la même manière. Certains de vos utilisateurs peuvent être daltoniens, d’autres malvoyants ou simplement ils peuvent se trouver dans des environnements/situations différentes qui vont rendre la perception des couleurs et des contrastes complexes.

⁣🧐 C’est pourquoi il est essentiel de vérifier 3 éléments clés lorsque vous choisissez vos couleurs :

👉 COMBINAISON : Trouvez des couleurs qui représente votre univers mais testez ces nuances pour trouver un panel parfait (3 à 6 couleurs c’est largement suffisant).⁣
[Tips : j’utilise le site Coolors.co pour trouver des idées de combinaisons]⁣

👉 DALTONISME : Assurez-vous que votre information n’est pas seulement véhiculée par la couleur ! Il faut que vos boutons d’actions soient assez visibles et lisibles, qu’on les remarque !⁣
[Tips : Allez sur Toptal Colorfilter pour voir comment les personnes daltoniennes voit vos pages]⁣

👉 CONTRASTE : Testez aussi le rapport de contraste entre le texte (ou éléments de premier plan) et l’arrière-plan (cf. image) !⁣
[Tips : Allez sur Checkmycolours qui vous fera un rapport des problèmes de contraste]⁣

Ces 5 points sont vraiment essentiels pour la bonne lisibilité et rendre la lecture de votre site agréable. Maintenant que vous avez les clefs en mains, à vous de faire attention ! 🙌


J’espère que cet article vous sera utile, n’hésitez pas si vous avez des questions ou des remarques, à les mettre en commentaires ! 👇

2 réflexions sur “5 éléments pour faciliter la lecture de vos contenus à tous vos utilisateurs”

    1. Coralie, Tips UX/UI

      Ooooh merci énormément Elody ! Cela me touche beaucoup ton message et je suis ravie de pouvoir t’aider 🤗 Bonne journée à toi !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *