Menu du jour
Pas le temps de lire l’article maintenant? Choisis ton épingle préférée et passe le curseur (ou le doigt) dessus pour l’enregistrer dans un tableau Pinterest ⬇
La base, pour qu’un article de blog soit lu, c’est qu’il soit mauvais.
Oups, pardon, j’ai dit « mauvais »? C’est bien, tu suis. Je voulais dire « bon », évidemment. Toi-même tu sais: un article bien écrit, bien documenté, qui apporte de la valeur au lectorat, et blablabla.
Tout ça c’est cool, mais ces conseils plein de bons sens, ils oublient quand même un truc important:
Le net est plein d’articles de blog qui font le buzz pour des raisons plus ou moins honorables. Des raisons qui n’ont rien à voir avec leur qualité.
Inversement, t’as plein d’articles de qualité supérieure qui ne sortiront jamais des limbes d’Internet.
A sujet égal, tu prends:
- un contenu de haute qualité qui ne fait pas envie
- un contenu de moindre qualité optimisé pour la consommation
Souvent, c’est le second qui rafle la mise.
Pour un article de blog, la différence relève de quelque chose à la fois très simple et très complexe, que les graphistes pros maîtrisent mieux que personne:
Le mouvement des yeux sur la surface de lecture.
Comment nous lisons vraiment (et pourquoi c’est important à savoir)
Le sens de lecture en Z
En occident, le sens de lecture classique, c’est de gauche à droite et de haut en bas.
L’oeil part d’en haut à gauche. Suit la première ligne de gauche à droite. Retourne à gauche quand la première ligne est terminée. Rebelotte à la ligne d’après. Si notre oeil laissait une trace, il dessinerait une série de Z:
début de la page ➡ Z
Z
Z ➡ fin de la page
Ce mouvement finit par devenir un réflexe. Du coup, face à un support de communication, texte ou image, on cherche naturellement à le reproduire.[1]Macap, Blog. « Le sens de lecture de l’oeil – Blog by Macap ». Blog – Macap, 20 septembre 2018, https://www.macapflag.com/blog/gardons-loeil/.
En graphisme, si on veut se simplifier la tâche, on peut organiser les éléments d’un visuel de marketing sensoriel comme ceci:
- L’accroche sur la première barre horizontale du Z
- L’argumentaire de vente sur la surface couverte par la barre diagonale
- L’appel à l’action sur la droite de la seconde barre horizontale
L’avantage de procéder ainsi, c’est que la ou le spectateur(ice) s’y attend. Il n’y a donc pas besoin de lui donner beaucoup d’indices pour qu’iel lise correctement le visuel.
L’inconvénient c’est… qu’iel s’y attend. Et quand c’est prévisible, c’est pas intéressant. D’où une possible difficulté à maintenir son attention jusqu’au bout du Z. 😴
Ce qui m’amène au point suivant:
On ne lit pas un article de blog comme on lit un livre
À l’école, on nous a appris qu’un livre, ça se lisait méticuleusement, du début à la fin. Des arbres se sont fait écorcher pour lui donner vie. Et puis sauter des pages, c’est comme couper la parole à l’auteur… c’est très impoli!
Sur internet, ça ne fonctionne pas comme ça.
Le principe même du web, c’est de surfer d’un bout d’information à un autre. Il n’y a, par définition, ni début ni fin. Le sens se créé par la connexion (dans tous les sens du terme), et n’est jamais vraiment complet.
À logique différente, sens de lecture différent!
Une étude du Nielsen Norman Group a mis à l’honneur une toute autre lettre que le Z. Sauras-tu retrouver laquelle?…
Voilà, donc quand nous lisons un article de blog, nos yeux dessinent généralement un F. Malheureusement, à partir de cette observation, on tire volontiers de mauvaises conclusions.[2]Laura. « Lecture d’un site web : la structure en F, bonne ou mauvaise idée ? – Redacteur Blog ». Redacteur.com, 23 août 2018, … Continue reading
On se dit par exemple que si les gens lisent davantage les informations qui sont en haut à gauche de la page, alors il faudrait y mettre les informations les plus importantes…
En gros, il faudrait encourager la lecture en F.
Sauf que, quand tu y réfléchis:
POURQUOI VOUDRAIS-TU FAIRE ÇA??
Pourquoi la lettre F est mauvaise pour ton chiffre d’affaires
Pour comprendre ce qui cloche avec le F, il suffit de se mettre à la place de la/le lecteur(ice).
Voilà ce qui se passe lorsqu’iel adopte un sens de lecture en F:
- La personne lit une ou deux lignes (la barre horizontale supérieure du F). Elle veut savoir si le texte vaut le coup… mais elle a du mal à se faire une idée définitive.
- La personne descend et s’attarde sur une autre ligne. Ton texte est encore en « période d’essai ». C’est la deuxième barre horizontale du F.
- À défaut d’avoir été pleinement convaincue de l’intérêt du texte, la personne fait rapidement défiler le reste, sans s’y attarder. Elle se laisse glisser le long de la barre verticale du F.
Autrement dit:
Le sens de lecture en F correspond à une perte progressive de l’intérêt de ton audience.
Si c’est la trajectoire de lecture par défaut sur internet, ce n’est pas parce que c’est la meilleure, mais plutôt:
Parce que la majorité des documents ne sont pas optimisés pour conserver l’attention.
Quel sens de lecture privilégier pour ton article de blog?
L’attention de ton audience est une denrée précieuse… ne la gaspille pas!
J’insiste là-dessus:
Un blog n’est pas fait pour être lu comme un roman.
Désolée de briser tes rêves, mais tout le monde ne lit pas tous tes articles avec un crayon à la main. On vient sur ton blog pour picorer ce qui nous intéresse. Ta mission est donc de nous faciliter la tâche.
D’où l’intérêt de partir sur un sens de lecture « en mille-feuille », dit layer-cake pattern[3]Experience, World Leaders in Research-Based User. « The Layer-Cake Pattern of Scanning Content on the Web ». Nielsen Norman Group, … Continue reading.
Le principe est simple:
N’essaie pas à tout prix de conserver l’attention de ton audience sur l’ensemble de ton article. Plutôt, fais en sorte de concentrer son attention là où elle a le plus à gagner.
Le layer-cake pattern en action
Concrètement, voilà le genre de scénario qu’on cherche à obtenir:
Le visiteur scanne le titre d’une partie.
Le titre lui indique que la partie ne contient pas l’information qu’il recherche.
Au lieu d’user sa concentration en survolant un paragraphe qui ne l’intéresse pas, il passe directement au prochain titre.
Si cette fois c’est la bonne, il lira soigneusement toute la partie.
À l’arrivée, la qualité de son expérience sur ton blog s’en trouve ainsi naturellement renforcée.
Comment optimiser les titres et sous-titres de ton article de blog
Tu l’auras compris, tes titres et sous-titres jouent un rôle essentiel. Voici quelques astuces pour inciter l’oeil à se balader sur les informations importantes:
Propose un sommaire cliquable au début de ton article
Ainsi, le visiteur saura d’emblée si ton article ne propose pas ce qu’il recherche. Et, encore mieux: si ton article contient l’information désirée! Le cas échéant, il pourra se rendre directement au bon morceau et lui accorder toute l’attention nécessaire.
Va droit au but
Naturellement, tes (sous)-titres doivent être concis et pertinents. On doit comprendre immédiatement ce qu’on a à gagner à lire chaque partie. N’oublie pas que les êtres humains sont, par nature, des feignasses qui ne font pas d’efforts sans une bonne raison 😏
Pour ce faire, pense à faciliter la lecture en adaptant la taille des titres en fonction de la taille des écrans, et choisis une police bien lisible!
Soigne la hiérarchie de ton article
Fais en sorte que les titres se distinguent nettement du texte. Fais-les plus grands et éventuellement plus gras que les sous-titres, qui eux-mêmes le seront plus que les paragraphes. Chaque chose à sa place! 🧐
Pour autant, attention à ne pas rompre complètement avec le style du corps de texte:
Un titre visuellement trop déconnecté du reste, que ce soit en termes de style ou d’espacement, ne sera pas interprété correctement.
Au mieux, on aura du mal à comprendre sa fonction. Au pire, on l’interprétera de travers.
Pour dire les choses clairement:
L’oeil de ton public pourrait y voir une publicité… et « glisser » automatiquement dessus. Pas bon!
Garde de l’homogénéité
Il me semble que ça va de soi, mais dans le doute… Rappelons qu’il faut garder le même style d’un titre à l’autre.
Garde le rythme!
Un point auquel on pense moins, par contre, c’est la longueur. Un titre nettement plus court que le précédent = un temps de lecture qui diminue. Et donc, un rythme de lecture qui accélère. Tu vois où je veux en venir? C’est une incitation subtile à accélérer la cadence à mesure qu’on se rapproche du bas de la page. Et donc, un aller simple pour la lettre F.
Comment optimiser les paragraphes de ton article de blog
Certes, le layer-cake pattern repose largement sur la qualité des (sous-)titres. Cela dit, si les paragraphes ressemblent à des gros parpaings, ton temps avant que ton lectorat ne parte en quête d’un article plus digeste est compté.
Une fois que tu l’as accroché avec un titre qui lui parle, le défi est d’arriver à faire circuler son regard de façon fluide du début à la fin de la partie, histoire que la transmission des informations se fasse correctement.
Encore une fois, essayons de nous mettre dans sa peau.
Le secret? Penser le texte comme un élément visuel
On entend souvent dire que le blog à base de texte est mort, assassiné par la vidéo. Bien que le propos soit un poil exagéré, il peut être intéressant de tirer des leçons des formats qui cartonnent aujourd’hui.
La vidéo est basée sur l’image et le son. Comme les conversations qu’on a avec les gens dans la vraie vie, en somme. Elle nous paraît spontanément plus naturelle et accessible qu’une page de texte, dont le déchiffrage fait appel à des compétences plus scolaires.
Comment limiter les frictions liées au format texte sans perdre l’essence d’un article de blog? Très simplement: en s’efforçant de regarder son texte comme un matériau visuel.
Varie les plaisirs
Quelque soit le traitement que tu fais subir à ton texte, ça reste des mots alignés les uns à la suite des autres. Une certaine monotonie est inévitable.
Bien que j’aie (encore) un peu l’impression d’enfoncer des portes ouvertes… La première chose à faire pour rendre ton texte moins prévisible, c’est de… rajouter autre chose que du texte.
Des images, des vidéos, une version podcast du texte… voire carrément des petites présentations interactives ou des jeux, comme ceuelles que tu peux créer avec Genially. (Jettes-y un oeil à l’occasion: les créations Genially sont relativement chronophages à réaliser, mais c’est un moyen radical de briser la linéarité du texte)
Mets de l’air dans ton article de blog
En design graphique, les espaces vides sont tout aussi importants que les espaces pleins. Ils servent à mettre en valeur les informations les plus importantes, et à établir une hiérarchie entre les différents éléments.
L’espace vide, c’est la ponctuation des images: il te dit où s’arrête une information, et où commence la suivante.
Accessoirement, la quantité de blanc que tu laisses dans un visuel relève aussi d’un choix artistique. Une abondance d’espace vide suggère un certain luxe, une élégance minimaliste. À l’inverse, un visuel encombré nous semble plus dynamique, plus « bruyant ».
Bien qu’un article de blog ne soit pas aussi maléable sur ce point qu’une image, on peut quand même intervenir sur ce paramètre.
Notamment:
Pense à aérer ton texte avec des sauts de ligne réguliers. Peu de gens ont la patience d’avaler de gros blocs de texte… Mais par contre, il y en a plein que ça ne dérange pas de suivre un film ou une série avec des sous-titres 😉
Assure-toi aussi que les lignes de texte ne soient pas collées les unes sur les autres, et que tes lignes soient de longueur raisonnable.
D’un côté, un retour à la ligne tous les deux ou trois mots sera relativement agaçant. Mais de l’autre, si tes lignes font toute la largeur de l’écran, elles seront moyennement agréables à lire. Fais appel à ton bon sens:
Pour ce qui est de la lisibilité, si tu perçois une gêne quelque part, il y a des chances pour que ton audience la perçoive aussi…
Attention au contraste
À titre personnel, j’aime bien parcourir le site Villains Wiki… mais jamais trop longtemps d’affilée. La raison, c’est le choix de couleurs pour le texte des articles: blanc sur noir. Après plusieurs minutes de lecture sur ce site, j’ai l’équivalent oculaire d’un acouphène.
Tu me diras, ça c’est juste ma sensibilité particulière. Quid des développeurs informatiques et autres geeks qui ne jurent que par le dark mode? N’empêche, les chercheurs qui se sont penchés sur la question s’entendent tous à peu près pour dire que pour un confort de lecture idéal, le texte très foncé sur un fond très clair reste la base.
Aligne tes paragraphes sur la gauche
Laisse le texte justifié aux journaux, et le texte centré aux poèmes. C’est le World Wide Web Consortium lui-même qui le recommande. N’hésite pas à consulter son guide sur l’accessibilité des contenus web si tu te sens d’humeur aventureuse!
Les listes à puces
On y pense pas forcément, mais les listes à puces, c’est quand même sacrément pratique. Les internautes aiment toujours qu’on leur fasse gagner du temps. Les listes à puces, parce qu’elles obligent à aller droit au but, sont parfaites pour ça!
Le retrait des lignes suffit à introduire du contraste, mais tu peux aussi travailler le CSS pour personnaliser leur style.
Pense donc à en placer dans tes articles de blog lorsque tu en as l’occasion. Tes énumérations paraîtront ainsi plus digestes, et ton propos sera plus facile à mémoriser.
Histoire de recycler, tu pourras même les reprendre dans une épingle Pinterest style infographie, ou en faire des cheatsheets à télécharger en freebie!
Par contre, si jamais tes énumérations demandent des compléments d’explication, plutôt que d’alourdir tes listes, intègre-les dans ton plan sous forme de sous-parties.
Range des bouts de texte dans des boîtes
En vrac: blocs de citation, blocs de disclaimers, légendes d’images, texte click-to-tweet, minis FAQ…
Il y a plein de raisons de mettre des parties de ton texte en valeur. Si, comme moi, ton site utilise le CMS WordPress, pense à fouiller du côté des extensions. Le nouvel éditeur de texte de WP, Gutenberg, offre plein d’opportunités pour styliser les blocs de texte, et les développeurs d’extensions s’en donnent à coeur joie!
Attention quand même à ne pas mettre des effets de style partout, et à rester cohérent(e).
Comment formater ton texte pour conserver l’attention de ton lectorat
Pour finir cet aperçu des paramètres à prendre en compte, faisons un petit zoom sur nos paragraphes.
Un paragraphe, c’est un mur à escalader avec les yeux. Trop long, c’est décourageant. Systématiquement trop court: on se fait ch!er. Trop lisse / homogène: on ne peut pas se déplacer dessus. Par contre, si tu rajoutes suffisamment de prises, le défi devient possible à relever.
Afin de faciliter l’ascension de ton lectorat, ton meilleur atout, c’est le formatage du texte.
Soulignement des liens hypertextes (et uniquement eux)
Sur Internet, l’usage veut que l’on souligne les liens cliquables… et rien d’autre, pour ne pas pervertir la signification du soulignement.
Cela dit…
Définir un style distinctif pour ses liens est un moyen pratique d’apporter de la variété visuelle dans son texte. Malheureusement, le soulignement à lui seul est rarement suffisamment contrasté pour jouer ce rôle. C’est peut-être l’une des raisons pour lesquelles les blogueur/ses remplacent volontiers le soulignement par un changement de couleur!
Si c’est ton cas, tu peux garder le soulignement en complément, ou l’abandonner totalement. À toi de voir!
Le gras
Mets en gras les informations importantes et les mots-clés que tu as définis pour ton référencement.
…mais pas tous non plus, sinon Google prendra ça pour une tentative de spam.
(Ouais, le gras est plutôt simple à utiliser. Surtout en comparaison du point suivant…)
L’italique
Snob, l’italique?
En théorie, son usage est obligatoire dans toutes sortes de cas:
Noms d’oeuvres. Mots de langues étrangères. Argot. Noms de machines ou de véhicules (du genre, le Titanic). Mots ou expressions volontairement mal écrites. Noms de signataires de documents. Et j’en passe…[4]Debret, Justine. « L’italique : règles typographiques ». Scribbr, 14 mai 2019, https://www.scribbr.fr/elements-linguistiques/italique-regles-typographiques/.
Je vais être franche:
Respecter à la lettre l’usage académique de l’italique, ce n’est pas un choix neutre. C’est bien si tu veux te donner une image de vieux sage ou de prof de lettres classiques. Ça l’est moins si tu veux donner l’impression de vivre avec ton temps. Demande-toi ce que ferait spontanément la personne qui te lit (= ce qu’elle considère comme étant la norme), et comment tu te positionnes par rapport à elle.
Cela dit, ça ne veut pas dire non plus que l’usage de l’italique sente systématiquement la naphtaline. En réalité, le point commun derrière tous les cas de figure que j’ai cités est toujours d’actualité:
Il s’agit de souligner une forme d’étrangeté, de singularité.
Mettre un mot, une expression, voire tout un paragraphe en italique, ça signifie que le référent dont il est question se situe sur un autre plan d’existence que nous… un peu comme un rêve.
Oui, l’italique est poétique. Il est donc idéal pour mettre en valeur une parenthèse, un apparté, un sous-entendu, ou encore, un trait d’esprit.
Bonus: 4 erreurs qui font exploser le taux de rebond sur ton article de blog
Partage l’article sur Facebook pour télécharger sa version complète en PDF, avec la partie bonus incluse ✨
Conclusion
Ainsi s’achève ce guide de la présentation visuelle d’un article de blog…
On en a vu des choses! Tu sais maintenant un peu mieux comment guider le regard de ton lectorat de l’introduction à la conclusion de tes articles, en travaillant à tous les niveaux (page / paragraphes / mots)…
Et en plus, tu connais les pièges à éviter pour ne pas perdre trop de monde en retour.
Bravo et merci d’être resté(e) jusqu’au bout o(*￣▽￣*)o
Tu peux maintenant convertir ton bel article tout neuf en lead magnet grâce à Designrr*.
Si tu gères toi-même la communication de ton business, je t’invite à t’abonner à mon webzine pour profiter de mes astuces de communication visuelle (et de mon humour):
J’ai créé ces mascottes pour rendre hommage à mes deux chat–bots préférés, et promouvoir la création de contenu original assistée par IA. Si toi aussi, tu es partisan d’une utilisation raisonnée et créative de l’IA, n’hésite pas à placer ces petits chats dans ton propre contenu pour faire savoir d’où tu tires ton génie :) (lien Captain Midjourney | lien Captain ChatGPT)
Bibliographie
| ↑1 | Macap, Blog. « Le sens de lecture de l’oeil – Blog by Macap ». Blog – Macap, 20 septembre 2018, https://www.macapflag.com/blog/gardons-loeil/. |
|---|---|
| ↑2 | Laura. « Lecture d’un site web : la structure en F, bonne ou mauvaise idée ? – Redacteur Blog ». Redacteur.com, 23 août 2018, https://www.redacteur.com/blog/lecture-site-web-structure-en-f/. |
| ↑3 | Experience, World Leaders in Research-Based User. « The Layer-Cake Pattern of Scanning Content on the Web ». Nielsen Norman Group, https://www.nngroup.com/articles/layer-cake-pattern-scanning/. Consulté le 6 janvier 2023. |
| ↑4 | Debret, Justine. « L’italique : règles typographiques ». Scribbr, 14 mai 2019, https://www.scribbr.fr/elements-linguistiques/italique-regles-typographiques/. |
