Vous écrivez des contenus en ligne et trouvez souvent, une fois qu’ils apparaissent à l’écran, qu’ils manquent de relief, de punch, de style? En quête de quelques idées pour leur donner du muscle et les mettre en valeur? Voici une palette de styles succincte, efficace et universelle… Avec, à la clé, un gabarit : n’hésitez pas à le télécharger!

Mise en forme et relief

La mise en forme de vos contenus Web contribue énormément à leur lisibilité. C’est même un des principes fondamentaux de l’écriture Web, qui nécessite d’adapter ses contenus au média (oui, le Web est un média, et pas seulement un support de publication).

Ce travail d’adaptation vise à exploiter de manière optimale les caractéristiques de la lecture à l’écran, le potentiel de l’hypertexte, la profondeur des pages, etc.

Les 3 grands principes de l’écriture Web

J’ai coutume de distinguer 3 grands axes dans ce travail d’adaptation : les principes rédactionnels, les principes formels et les principes fonctionnels. L’aspect formel, qui nous intéresse ici, porte sur le rendu – la mise en page – des contenus.

Pour faciliter le balayage des pages (propre aux lecteurs pressés que nous sommes), il convient de structurer visuellement ses textes, de les organiser de manière à faire ressortir la hiérarchie, les types et les unités d’information.

Voici quelques styles que vous pourrez demander d’intégrer au graphiste, designer ou webmaster dans les CSS (feuilles de style) de votre CMS (système de gestion des contenus):

• des titres de 3 à 4 niveaux à l’intérieur du texte, pour bien mettre en relief ses principales unités informationnelles et leur hiérarchie;
• des paragraphes de contenu « simple« , dotés d’un interligne confortable et d’un espacement suffisant jusqu’au paragraphe suivant;
• des paragraphes du type chapô, utilisés surtout pour les introductions, accroches et autres micro-contenus destinés à donner rapidement une idée de l’essence du contenu;
• trois formats d’hyperlien (« vierges », survolés et visités), de sorte que le lecteur puisse directement identifier les liens, mais aussi savoir s’il les a déjà « utilisés »;
• des listes à puces de deux niveaux, pour structurer clairement les énumérations et en faciliter la lecture ;
• les icônes pour revenir en haut de la page, qui seront utilisées en associations avec les ancres (liens internes) ;
• un style pour les citations, qui permet de mettre en relief un témoignage, un « contenu utilisateur », généralement très valorisés par les lecteurs;
• et quelques styles pour des tableaux de contenu, car les tableaux sont un excellent moyen de présenter certains types de contenus, comme des consignes, des comparaisons de produits, etc.

A propos des CSS

Le langage CSS (Cascading Style Sheets) est donc utilisé pour définir les styles qui seront utilisés sur votre site, c’est-à-dire le rendu, l’aspect graphique. Ces styles comprennent, par exemple, la couleur du fond de la page, les fontes (polices de caractères) des différents éléments textuels, (titraille, paragraphes, citation), etc. Concrètement, cette feuille de styles est rassemblée en un petit fichier (« style.css », par exemple) qui comportera toutes les règles de style à appliquer. Ces styles seront ensuite repris également dans la charte graphique.

Aller plus loin

• Les principes rédactionnels
• Les principes formels
• Les principes fonctionnels
• L’html pour les rédacteurs Web
• Utilisez des tableaux (mis à jour)
• Téléchargez la « feuille de styles » (pdf, 244 Ko)

Sur le même sujet

• Typographie et Web
• Utilisez des tableaux (Lisibilité des procédures#4)
• Le vu et le lu (1)
• Appréhender dynamiquement les textes (3/3)
• Appréhender dynamiquement les textes (2/3)

Pour comprendre les besoins de vos utilisateurs, vous devez savoir comment l’internaute se comporte généralement sur le Web. Petit rappel :

L’internaute a un objectif

• Il est actif.
• Il a un but spécifique.
• Il cherche quelque chose.
• Il poursuit sa visite s’il a trouvé ce qu’il cherche.
• Il veut atteindre son but le plus vite possible.
• Il ne lit la page que lorsqu’il est sûr d’être au bon endroit

L’internaute veut trouver son chemin seul

Tous les utilisateurs se posent la même question:

• Où suis-je ?
• Où dois-je aller ?
• Comment puis-je y arriver ?

L’internaute (occidental) a une tendance

L’internaute ne se dit pas

• « Tiens, ce sont mes muscles oculaires qui dirigent le mouvement de mes yeux sur la page (les mouvements oculaires ne sont pas conscients)
• « Pupille, dilate-toi: je ne comprends pas ce qui est écrit, je ne sais pas où cliquer » (le diamètre de la pupille n’est pas contrôlé de manière consciente).
• « Quel est donc le type de mémoire que je sollicite pour analyser le contenu de cette page (l’activité cognitive n’est pas gérée de manière consciente)
• …

Sources:

• La formation Architecture de l’information que je donne pour AGConsult
• 95 percent of brain activity is beyond our conscious awareness
• Le diagramme de Gutenburg
• *En ce qui concerne les sites Web internationaux et plus encore arabes, je vous invite à lire le billet que Jean-Marc Hardy a consacré à ce sujet – Sites arabes: ergonomie en miroir.
• 8 conseils pour mieux vendre sur Internet

Sur le même sujet

• Utilisez des tableaux (Lisibilité des procédures#4)
• Le vu et le lu (1)
• Appréhender dynamiquement les textes (3/3)
• Appréhender dynamiquement les textes (2/3)
• Appréhender dynamiquement les textes (1/3)

La présentation des informations sous forme de tableaux se retrouve non seulement dans les ouvrages didactiques ou documentaires, mais aussi dans les brochures publicitaires, sur les panneaux d’affichage des lieux publics. En fait, ce mode de communication écrite s’est imposé par sa simplicité, du moins apparente, et son efficacité. C’est également le cas sur le Web, où ils s’adaptent parfaitement aux besoins de structurer et hiérarchiser visuellement les contenus.

Un gain de confort, de vitesse et de compréhension

Les études pratiquées en sciences cognitives indiquent qu’entre 60 et 80 % de l’information traitée par notre cerveau est d’origine visuelle. Les tableaux permettent d’organiser et de classer visuellement les informations de manière à en faire ressortir la structure et la hiérarchie.

Cette organisation de l’information, et la rapidité de consultation qu’elle procure, conviennent parfaitement aux besoins de rapidité et d’économie, lorsque le lecteur doit intégrer une grande quantité d’informations variées et inconnues. Les tableaux sont considérés dans la pratique pédagogique comme un outil précieux, qui aide les élèves à exercer le processus de construction de leurs connaissances.

Sur une page Web, les tableaux sont également d’une grande aide pour présenter simplement des relations complexes, par exemple, pour  mettre en forme des contenus répondant au schéma informationnel « Si… alors ». Ce mode de présentation aide aussi bien le rédacteur que le lecteur. En effet, le tableau offre un classement « à tiroir » (étapes, conditions, choix, prix, documents, liens externes, etc.), le tout sous un modèle efficace visuellement.

Exemple:

Mais attention, on rencontre souvent des tableaux dont la lecture immédiate est en conflit avec la lecture informative (premier balayage contre lecture posée, à la recherche de cohérence). Il conviendra donc de bien exploiter les en-têtes, les marges, le fonctionnement des colonnes et des lignes.

Liens rapides

• Un exemple du même type dans un précédent billet
• La photo sur Flickr
• Limitez les niveaux hiérachiques (Lisibilité des procédures # 3)
• Optez pour des titres attractifs et informatifs (Lisibilité des procédures # 2)
• Créez un index de vos contenus (Lisibilité des procédures #1)
• L’introduction à la série “Optimisez vos procédures en ligne”

Sur le même sujet

• Utilisez l’interaction (Lisibilité des procédures #5)
• Le vu et le lu (1)
• Appréhender dynamiquement les textes (3/3)
• Appréhender dynamiquement les textes (2/3)
• Appréhender dynamiquement les textes (1/3)

Les niveaux hiérarchiques mettent en évidence l’importance relative des contenus, voir leur « catégorie » (introduction, exemple, remarque, exception, etc.). Ils permettent donc aussi de distinguer les étapes et les sous-étapes des procédures, ainsi que les conditions et exceptions.

Hiérarchiser ses contenus revêt une grande utilité en termes de lisibilité/balayabilité des contenus. Pour soutenir cette balayabilité, ils respectent généralement  généralement des styles graphiques propres.

Cependant, évitez un nombre excessif de niveaux de paragraphes. Ne dépassez pas les 3 niveaux, et jamais plus. Si nécessaire, créez davantage de sections au premier niveau Le deuxième exemple ci-dessous simplifie le texte et ajoute un titre à la table des contenus.

Avant :
A qui s’appliquent ces taxes?
(a) Un propriétaire doit payer :

1) La taxe d’habitation…
2) La taxe foncière…
3) La taxe sur les déchets non ménagers…

(b) Un locataire doit payer :

1) Une taxe communale…
2) Une taxe de voirie…
3) Une taxe sur les déchets ménagers…

Après :

Quelles taxes un propriétaire doit-il payer ?
1) La taxe d’habitation…
2) La taxe foncière…
3) La taxe sur les déchets non ménagers…

Quelles taxes un locataire doit-il payer ?

1) Une taxe communale…
2) Une taxe de voirie…
3) Une taxe sur les déchets ménagers…

Liens rapides

• La photo sur Flickr
• L’introduction à la série “Optimisez vos procédures en ligne”
• Optez pour des titres attractifs et informatifs (Lisibilité des procédures # 2)
• Créez un index de vos contenus (Lisibilité des procédures #1)
• Un ancien billet sur les titres…
• Contenu préventif, interactif et instructif

Sur le même sujet

• Titres éloquents, et d’abord les mots importants…
• Utilisez des tableaux (Lisibilité des procédures#4)
• Testez la lisibilité de votre blog
• Optimisez votre contenu pour le référencement (3) – Titrez intelligent
• Check-List Newsletter (3)

Les procédures en ligne sont censées aider l’internaute à comprendre la marche à suivre pour obtenir un congé (sur l’intranet), soumettre une demande de certificat quelconque (à un guichet électronique), télécharger le bon formulaire, savoir que faire dans quelle situation, …

Lorsqu’ils répondent à certains critères ergonomiques, ces formulaires, procédures et règlements procurent au commanditaire et à l’utilisateur final une énorme valeur ajoutée en termes de gain de temps, d’énergie, de papier, de ressources, etc. Bref, tout le monde y gagne. Ça vaut donc la peine d’en faire la première série de l’année, non ?

7 conseils pour améliorer la lisibilité des règlements en ligne

1) Créez un index de vos contenus
2) Optez pour des titres attractifs et informatifs
3) Limitez les niveaux de paragraphes
4) Utilisez plus de tableaux et d’illustrations
5) Utilisez l’interaction (le « vous »)
6) Utilisez des verbes actifs
7) Utilisez un langage simple

Sous ces 7 conseils de lisibilité, 2 sont particulièrement efficaces en termes de scannabilité et d’impact:

• l’organisation de vos sections sous la forme de questions-réponses,
• l’utilisation du « vous » (l’interaction) pour guider votre utilisateur dans les démarches.

Demain, le conseil 1 dans le menu détail: Créez un index de vos contenus…

Liens rapides

• Le vu et le lu (2)
• Un mode vivant d’interaction
• Ce qui se conçoit clairement, se dit simplement
• L’illu du billet sur Flickr

Sur le même sujet

• Ecrire simplement, ce n’est pas si simple
• Passer votre contenu au filtre KISS
• Ecrire est un geste
• Donnez-leur la paternité de leurs contenus
• En finir avec le mythe de l’écriture Web?

Le critère de « linkage » devient de plus en plus important dans le domaine du référencement. Pour les robots qui scannent vos pages et les indexent, c’est un véritable must. Si vous êtes en mesure de collecter, en plus de votre propre contenu, d’autres informations similaires… c’est le signe d’une expertise globale.

Alors que les standards de l’écriture Web proscrivent énergiquement la présence de liens dans le texte, les spécialistes du référencement, eux, vont dans le sens contraire. Cela fonctionne un peu comme pour les images : le contexte textuel disposé autour d’un élément accroît et maximise son rendement.

Compromis entre webwriting et SEO…

Il existe un moyen pour satisfaire webwriters et référenceurs. La « solution » consiste à contrebalancer le manque à gagner des liens dans le contenu par un autre critère de valorisation. En d’autres mots, il s’agit de rassembler les liens sur la page en les regroupant dans une zone précise (et de préférence toujours au même endroit sur toutes les pages). On pourrait, par exemple, créer une liste de liens en fin de texte, en valorisant les liens par une des balises hiérarchiques vues précédemment. Pourquoi pas la liste à puces, par exemple ? Une autre options consisterait à rassembler les liens dans un encadré en haut à droite des pages de contenus.

Titrez vos liens

Le titre donné à un lien peut influencer, non seulement le positionnement d’une page, mais aussi la requête via laquelle elle sera retournée. De cet état de fait, est d’ailleurs né un mouvement, le Google Bombing.

Il fut un temps où, lorsque vous tapiez, par exemple, « miserable failure » dans Google, vous aviez immanquablement la biographie officielle de George W.Bush en tête de la liste de résultats.

Entre-temps, Google est parvenu a minimisé l’impact de ces Google Bombs, en apportant quelques modifications minimes à ses techniques d’analyses.  Ces phénomènes problématiques ont donc été neutralisés. Il n’empêche : donnez un titre explicite à vos liens. Sinon, vous paralysez l’impact dans les moteurs de recherche. Ayez toujours en tête que ceux-ci ne mangent que du texte et du contenu !  Évitez donc les liens creux de type « Cliquez ici ».

Liens rapides

• Optimisez votre contenu pour le référencement (8) : Un long discours vaut mieux qu’une image
• Optimisez votre contenu pour le référencement (7) : Chouchoutez vos mots-clés
• Optimisez votre contenu pour le référencement (6) : Organisez vos thématiques
• Optimisez votre contenu pour le référencement (5) : Balisez et hiérarchisez votre contenu
• Optimisez votre contenu pour le référencement (4) : Ecrivez beaucoup et souvent
• Optimisez votre contenu pour le référencement (3) : Titrez intelligent
• Optimisez votre contenu pour le référencement (2) : SEO & SEF, c’est quoi?
• Optimisez votre contenu pour le référencement (1) : les 3 mots-clés du référencement
  
• Contenu et référencement, la série de l’été
• A propos de référencement

Sur le même sujet

• Testez la lisibilité de votre blog
• Promener l’utilisateur au bout de vos liens
• - 300 € sur notre cycle de formation éditoriale
• Une boussole pour vos pages Web
• Mettez du style dans vos contenus

Vous souvenez-vous de ma récente série sur la présentation dynamique des textes à l’écran ? « Les nouvelles technologies ont évolué et offrent des possibilités d’affichage de documents intégrant : le flou, la transparence, la spatialisation, le rendu à plusieurs niveaux de détail ou encore l’orientation tridimensionnelle. Ces nouvelles technologies autorisent des accès et des parcours nouveaux par rapport aux documents textuels »…

Non ? Même pas la référence, dans un de ces 3 billets, au moteur de recherche SearchMe ? Le moteur de recherche dont les résultats sont affichés en 3D (un peu à la façon des pochettes de disques dans iTunes)… En format « Carrousel » comme on dit dans le milieu de l’architecture d’information. Pourtant… Ce n’est pas tout !

Bientôt il y aura un navigateur qui fonctionnera selon la même mécanique. Il se nomme POGO. Il est l’oeuvre de AT&T…

« Pogo révolutionne à lui tout seul notre façon de naviguer, de bookmarker les sites Web. On s’habitue depuis fort longtemps à la navigation avec des onglets ( tous les navigateurs s’y sont mis après Firefox ) mais là, vous pouvez oublier ces onglets, ils ont disparus, remplacés avantageusement par des Thumbnails ( petite capture d’écran ) qui se situe en bas du navigateur et qui vous permet d’un clic de revenir sur le site à l’endroit ou vous l’avez laissé. »

Je n’ai pas encore reçu confirmation de mon invitation et ne peux donc vous en faire une présentation circonstanciée. Je vous invite donc à lire le très sérieux article qu’y consacre AccessOweb. Et en passant, je remercie Laurent chez qui j’ai pioché l’info.

Liens rapides

• La série sur le dynamisme des textes
• Le moteur de recherche Search Me
• Le navigateur en 3D, Pogo

Sur le même sujet

• Mettez du style dans vos contenus
• Des besoins des utilisateurs (#2) – Comportements
• Utilisez des tableaux (Lisibilité des procédures#4)
• Limitez les niveaux hiérarchiques (Lisibilité des procédures #3)
• Lisibilité des procédures en ligne – 7 conseils

C’est la seule parade que j’ai trouvée pour compenser l’interruption douloureuse pour vous mais momentanée de la super série de l’été : comment améliorer votre contenu pour le référencement.

The Blog Readability Test

Parce que j’ai déjà les cigales qui me chatouillent les tympans, les neurones qui font les bagages, et le coude qui cherche le pastis je ne m’attarderai même pas à vanter ou à critiquer la fiabilité, les mérites, et donc l’intérêt de cet outil. Je vous le livre tout froidement. Pour vous faire passer le temps. Essayez-le.

En vignette, le verdict réservé à Ecrire pour le Web: College (Postgrad). Mouais.

Liens rapides

• La liste des articles de mon blog sur le thème de la lisibilité
• Sur le thème du langage simple (plain language)
• L’annonce de mes vacances sur mon micro-blog Tumblr (juste pour rire)

Sur le même sujet

• Utilisez des tableaux (Lisibilité des procédures#4)
• Limitez les niveaux hiérarchiques (Lisibilité des procédures #3)
• Pour ou contre l’hyperlien dans les contenus ?
• Optimisez votre contenu pour le référencement (3) – Titrez intelligent
• Contenu et référencement, la série de l’été

Après m’être étendue sur notre mode de lecture tout court, je reviens brièvement sur notre comportement de lecture à l’écran. Pour rappel, ce billet fait suite, en ricochet, à un article de Slate, que Jean-Marc Hardy et Denis Balencourt.

On ne lit pas, on balaie les pages

J’ai constaté, en préparant cet article, que j’ai déjà consacré un bon nombre de billets aux contraintes formelles de l’écriture pour le Web, dues, notamment au fait que le support de lecture est un écran d’ordinateur. Un des derniers en date m’avait été inspiré par une bonne vieille référence de l’ergonomie Web : le réputé « Don’t make me think » de Steve Krug. Qu’avais-je épinglé ? Que, précisément, on ne lit pas les pages Web, mais qu’on les scanne, on les balaie. Pourquoi ? Parce que généralement:

• Nous sommes pressés.
• Nous n’éprouvons pas le besoin de lire tout le contenu de la page.
• Notre œil est un excellent « scanner.

En images…

Je vous propose d’illustrer l’importance du visuel dans le contenu web par quelques captures d’écran. Ces exemples sont issus d’une mission de coaching pour un client. Ma tâche consiste à accompagner et former les rédacteurs amenés à revoir le contenu de leur intranet.

Soyez direct et concis

Le texte original

Le texte final

La transformation

Mon conseil : écrivez comme pense votre utilisateur : en termes d’informations (qui, quoi, pourquoi, comment, etc.). Qu’est-ce que cette assurance, pour qui a-t-elle été conçue, sous quelles conditions, etc.

Tenez compte du balayage dans la présentation de votre contenu: donnez de la saillance aux mots importants.

Structurez votre contenu

Le texte original

Le texte final

La transformation

Mon conseil : en organisant logiquement votre contenu, vous écrivez comme votre utilisateur pense. Utilisez des titres, des sous-titres et des listes pour donner cette structure. Vous facilitez le balayage.

Le tableau, contenu visuel par excellence

L’original

Le résultat final

La transformation

Mon conseil: Soyez toujours visuel quand vous rédigez pour le Web. Aux mots, préférez les chiffres, les signes et symboles universels quand vous le pouvez. Exemples:

• Ecrivez les chiffres en chiffres et non en lettres
• Préférez les V et les X au oui et au non
• Evitez les répétitions.

Sources

• New eyetrack research can help online editors (article EN)
• How do we use the Web (article EN, Steve Krug, Don’t make me think)
• How we read online (l’article de Slate, qui a instigué ce billet)
• Les conseils de Jakob Nielsen (sur son terrible site Useit.com)
• Le vu et le lu (1)
• Mon billet précédent sur Steve Krug et « Comment ne lit-on pas sur le Web »
• Retrouvez l’image sur Flickr

Sur le même sujet

• Mettez du style dans vos contenus
• Des besoins des utilisateurs (#2) – Comportements
• Utilisez des tableaux (Lisibilité des procédures#4)
• Limitez les niveaux hiérarchiques (Lisibilité des procédures #3)
• Lisibilité des procédures en ligne – 7 conseils

Je rebondis sur le billet que Jean-Marc a consacré à un récent article de Slate, inspiré par Denis Balencourt. L’article titré « How we read online » revient (étonnamment ?) sur des principes élémentaires de l’écriture sur le Web – ou devrais-je dire de la lecture sur le Web – telles que Jakob Nielsen, que l’auteur cite d’ailleurs, nous les enseigne depuis plus de 15 ans.

Dans la suite donc de ces deux billets francophones sur l’article « How we read » paru dans le magazine Slate, je propose deux billets : un premier sur notre mode de lecture « tout court » et un second, qui sortira dans le courant de la semaine, sur le mode de lecture en ligne.

Dans ce deuxième billet, je reviendrai sur quelques grandes références sur la question (Jakob Nielsen, Steve Krug, etc.) et je vous donnerai un exemple pratique. Mais procédons par procédure

De la reconnaissance formelle ou comparative à un modèle mixte…

Il serait intéressant, disais-je, avant que de commenter notre mode de lecture à l’écran, de revenir sur notre mode de lecture… tout court.

On a longtemps cru que la lecture se faisait via une reconnaissance optique de la forme des mots. D’aucuns ont priviligié le repérage sériel des lettres. Enfin, il a été question d’une identification parallèle des lettres… Revenons brièvement sur ces 3 modes de reconnaissance optique.

La reconnaissance formelle

Dans la littérature spécialisée, le plus ancien modèle de reconnaissance optique des mots prévoit que les mots sont reconnus en tant qu’unités totales [...] Nous reconnaissons les mots comme des séquences unifiées plutôt que comme la somme de lettres distinctes [...] Nous voyons ces séquences comme des images (qui nous évoquent des séquences que nos yeux ont déjà maintes fois repérées et enregistrées).

Le repérage sériel

Le modèle qui a le moins vécu est celui qui veut que nous lisons les mots lettre après lettre, de gauche à droite. Ce modèle de reconnaissance sérielle a surtout été un échec face au test de l’effet de supériorité du mot.

Ce concept d’Effet de supériorité du mot signifie que le lecteur est bien plus capable d’identifier des lettres quand elles sont mises dans un contexte (les mots) que lorsqu’elles sont isolées.

La reconnaissance par comparaison

Un 3e modèle de reconnaissance des mots repose sur un schéma de reconnaissance par comparaison (en anglais: parallel letter recognition model). Selon cette théorie, nous reconnaîtrions toutes les lettres d’un mot simultanément, et les informations contenues dans chaque lettre nous serviraient à reconnaître les mots.

Le modèle mixte

La théorie qui prévaudrait aujourd’hui est un modèle mixte : outre la reconnaissance perceptuelle (forme du mot & reconnaissance des lettres par comparaison), nous recourons aussi aux informations contextuelles pour reconnaître les mots dans le processus de lecture.

Le mouvement des yeux: entre saccades et fixations

Lorsque nous lisons, nous bougeons continuellement les yeux. Nous faisons des saccades oculaires. Entre les saccades, les yeux restent immobiles ; ce sont des fixations.

Pendant les saccades, l’œil est pratiquement aveugle. Cela signifie qu’au cours d’une saccade nous ne capturons pas d’informations nouvelle de la phrase lue par contre, il est vraisemblable que nous continuions le traitement commencé avant la saccade. L’information visuelle est donc extraite du texte pendant les fixations.

Sources

• The science of word recognition (article EN)
• Cognition et lecture, Processus de base de la reconnaissance des mots écrits chez l’adulte
• Hidden method of reading revealed
• Retrouver l’illustration de ce billet
• Le billet sur 60questions.net
• Le billet sur le blog Denis au fil du Web

Sur le même sujet

• Utilisez des tableaux (Lisibilité des procédures#4)
• Appréhender dynamiquement les textes (3/3)
• Appréhender dynamiquement les textes (2/3)
• Appréhender dynamiquement les textes (1/3)
• Mettez du style dans vos contenus