👀 Article de blog: comment optimiser la mise en page pour les yeux?

On insiste volontiers sur l'importance des qualités de recherche et d'écriture d'un article de blog. Malheureusement, rien de tout ça ne t'aidera si la présentation visuelle est dans les choux. Voyons comment appliquer un oeil de graphiste avisé à l'optimisation de ton article de blog!

Disclaimer

Ce blog est rempli de liens affiliés de haute qualité, signalés par une astérisque *. Si tu fais des achats aprÚs avoir cliqué dessus, les entreprises concernées me verseront une commission. (Mais ne t'inquiÚte pas, tu ne paieras pas plus cher pour autant!)

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

article de blog: les optimisations visuelles essentielles pour conserver l'attention
article de blog: les bases de l'optimisation visuelle pour une meilleure expérience utilisateur
les clés pour un article de blog plaisant à lire

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)

comment nous lisons vraiment - illustration créée par pixeliart.fr avec Midjourney

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?…

expérience d'eyetracking du Nielsen Norman Group

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

lecture en F et article de blog - illustration créée par pixeliart.fr avec NightCafé

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:

  1. 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.
  2. 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.
  3. À 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?

gùteau red relvet qui illustre le layer-cake pattern - illustration créée par pixeliart.fr avec Midjourney

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

titres et sous-titres d'un article de blog - illustration créée par pixeliart.fr avec NightCafé

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

optimiser les paragraphes d'un article de blog - illustration créée par pixeliart.fr avec NightCafé

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

formater le texte correctement - illustration créée par pixeliart.fr avec NightCafé

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 Ă  mes capsules email pour profiter de mes astuces de communication visuelle (et de mon humour):

Une réaction à partager ??
+1
0
+1
0
+1
0
+1
0
+1
0

Bibliographie

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/.
>