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

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

Le laboratoire LIMSI-CNRS (Laboratoire d’Informatique pour la Mécanique et les Sciences de l’Ingénieur) s’est penché sur l’analyse cognitive des nouvelles lectures possibles pour les documents électroniques, mettant plus particulièrement en évidence le dynamisme et les différents niveaux de détail. Nous nous proposons de rendre compte de l’étude et de ses résultats en trois parties :

1. Nouvelles lectures
2. Titre et hiérarchie
3. Lien entre interface et compréhension

Lien entre interface et compréhension

La compréhension d’un document électronique est étroitement liée à la qualité de l’interface visuelle et aux modes de présentation de l’information. La manière la plus simple de tester cela est de construire trois interfaces pour un même texte :

• interface simple
• interface plane
• interface 3D

Ces trois interfaces ont en commun une page centrale de même dimension, mais seules les interfaces plane et 3D possède des pages contextuelles latérales (gauche et droite).

Tous les tests utilisateurs sont unanimes : pour un niveau de compréhension équivalent, le nombre moyen de pages lues est moins important pour l’interface 3D que pour les interfaces plane et simple.

En fait, c’est justement la présence des pages contextuelles qui facilite la compréhension : le lecteur peut aisément lier ce qu’il lit avec du texte déjà lu ou du texte prévu. Il contextualise le paragraphe courant dans l’ensemble du document et hiérarchise ainsi l’information traitée en l’intégrant au contexte global.

Sommaire

1. Nouvelles lectures
2. Titre et hiérarchie
3. Lien entre interface et compréhension

Liens rapides

• Le site de l’IMSI
• La règle des trois “R”
• Téléchargez le rapport de recherche en pdf (124 kO)

Le laboratoire LIMSI-CNRS (Laboratoire d’Informatique pour la Mécanique et les Sciences de l’Ingénieur) s’est penché sur l’analyse cognitive des nouvelles lectures possibles pour les documents électroniques, mettant plus particulièrement en évidence le dynamisme et les différents niveaux de détail. Nous nous proposons de rendre compte de l’étude et de ses résultats en trois parties :

1. Nouvelles lectures
2. Titre et hiérarchie
3. Lien entre interface et compréhension

Titres et hiérarchie

Les considérations sur les nouvelles formes et possibilités de lecture conduisent forcément à accorder une place privilégiée au titre. En réalité, le titre a un rôle triple :

1. il délimite les zones de texte ;
2. il fournit des informations sur la nature ou le contenu des segments ;
3. il permet d’établir des liens entres ces segments.

Les travaux de dynamisation textuelle ont ainsi trois grands buts concernant les titres :

1. définir une grammaire des titres : structure et régularités observées, analyse de ses fonctions d’annonce par rapport au contenu ;
2. envisager les titres comme des contenus autonomes : analyse des liens entre les différents titres d’un document ;
3. étudier les liens entre titre et texte : vers l’avant ou vers l’arrière.

Dans ce contexte, un des principaux enjeux est de réaliser des programmes permettant de collecter automatiquement les titres, et donc de les reconnaître et de les identifier. Il existe en cela deux approches.

Dans la première approche, le but est de partir de patrons de reconnaissance. Les algorithmes s’appuient alors sur ces données pour retrouver dans d’autres documents des occurrences de forme proche.

Cette approche nécessite donc de faire appel à l’expertise linguistique, et donc de :

• caractériser formellement des titres (« grammaire des titres ») ;
• caractériser fonctionnelle des titres dans les documents longs ;
• étudier des liens entre titres, en tenant compte de leur niveau dans la hiérarchie du document ;
• étudier des liens entre titres et textes : reprises d’éléments et/ou annonces, pour déterminer entre autres les pertinences respectives.

Dans la deuxième approche, on cherche à attribuer automatiquement des titres à des passages textuels. Il s’agit d’une méthode en deux phases : le système découvre d’abord différents concepts (ensembles de mots représentatifs) présents dans un texte, et ensuite, segmente le texte en paragraphes en utilisant une technique de partitionnement basée sur la vraisemblance.

La suite très prochainement : Lien entre interface et compréhension…

Sommaire

1. Nouvelles lectures
2. Titre et hiérarchie
3. Lien entre interface et compréhension

Liens rapides

• Le site de l’IMSI
• La règle des trois “R”

Le laboratoire LIMSI-CNRS (Laboratoire d’Informatique pour la Mécanique et les Sciences de l’Ingénieur) s’est penché sur l’analyse cognitive des nouvelles lectures possibles pour les documents électroniques, mettant plus particulièrement en évidence le dynamisme et les différents niveaux de détail. Nous nous proposons de rendre compte de l’étude et de ses résultats en trois parties :

1. Nouvelles lectures
2. Titre et hiérachie
3. Lien entre interface et compréhension

Nouvelles lectures

En réalité, appréhender dynamiquement les textes relève d’un véritable concept de « design » textuel, hérité presque directement de l’art numérique, et si l’on remonte plus loin, des expériences visuelles de Mallarmé, Apollinaire, Leiris, Butor, Roche ou de celles des typographistes futuristes, psychédéliques ou poparistes.

Concernant ces possibilités nouvelles de visualisation, un problème important survient : la face visuelle classique d’un texte dépend de cinq composantes qui ont tendance à s’associer à une acception statique. Le texte est en effet traditionnellement vu comme un objet inerte et intangible dépendant de ces éléments :

1. le contexte technique ou économique de production ;
2. l’impact de valeurs culturelles, esthétiques ou expressives ;
3. le genre rédactionnel ;
4. l’efficacité communicationnelle ;
5. la contribution au sens.

Si a priori les textes classiques ne permettent pas de dynamisation directe de leur présentation, en revanche, ils anticipent sur des techniques d’utilisation diversifiées nécessaires à l’implantation de nouveaux systèmes :

1. la lecture suivie exhaustive ;
2. la relecture ;
3. le feuilletage ;
4. la superlecture (ou lecture en diagonale) ;
5. la consultation rétrospective ;
6. la recherche inédite ciblée.

La suite très prochainement : Titre et hiérachie…

Liens rapides

• Le site de l’IMSI
• La règle des trois “R”

J’ai trouvé sur Action-Rédaction un succinct billet sur les usages typographiques sur le Web… Juste une petite mention avant que de revenir vers vous sur la question de la dénomination de la home page…

Ce qu’écrit l’auteur du site…

“Les règles de typographie sont simplifiées sur Internet: accentuation, ponctuation, espaces, casse. Adopter un code typographique présente l’avantage d’uniformiser le rendu écrit et de crédibiliser le contenu en garantissant un confort de lecture à l’internaute”

Ce que j’en dis…

C’est d’autant plus vrai que l’internaute recherche harmonie et cohérence sur le Web, et, plus particulièrement, au sein de pages identiquement labellisées. C’est ainsi que j’invite souvent les clients à créer une charte éditoriale pour leurs contenus Web : quand mettre des majuscules, que faire des listes à puces, comment traiter les abréviations et les majuscules…

La bonne nouvelle, c’est que ce sont toujours les mêmes questions que l’on se pose. Donc, il suffit de prendre, une seule fois (mais cela peut durer un peu) le temps de développer cette charte. Si vous souhaitez un conseil sur le sujet, contactez-moi…

Que dit ensuite l’auteur du site ?

Accents sur les capitales

Accentuer une capitale ou non ? La seule règle est de prendre la décision de mettre un accent sur les capitales ou non et de s’y tenir.

Cependant, utiliser des accents sur les capitales permet une lecture plus facile et lève certaines ambiguïtés. Utiliser une majuscule accentuée ou non accentuée peut également être un choix stratégique de référencement : en effet, pour certains robots, la casse n’est pas respectée et « Histoire » majuscule retournera les mêmes résultats que « histoire » minuscule… mais lorsqu’il s’agit d’intégrer des mots clés dans le texte, intégrer un « Ecrire» majuscule permet d’afficher un mot clé sans accent sur le « e » sans que cela ne passe pour une faute de frappe dans le texte. Le mot « ecrire » sans accent aigu sur le « e » au milieu du texte est une faute d’orthographe..

Ce que j’en dis…

UN HOMME TUE ou UN HOMME TUÉ … L’exemple se suffit à lui-même, non ? Le code du e accentué aigu étant & E acute (sans espace entre les caractères).

Insérer une espace ? La ponctuation des signes simples et doubles

Les signes simples sont :

• la virgule “,”
• le point “.”
• les points de suspension “…”

La règle est : “signe simple, espace simple” ; l’espace se trouve après le signe.

Les signes doubles sont :

• le point-virgule “;”
• les deux-points “:”
• le point d’exclamation “!”
• le point d’interrogation “?”

Ce qu’en dit l’auteur du site…

La règle est : “signe double, espace double” (une espace avant, une espace après).

Néanmoins, sur Internet, mieux vaut ne pas intégrer d’espace pour éviter le retour à la ligne d’un élément isolé. Autre solution : ajouter un espace insécable en HTML représenté par & nbsp (à nouveau, sans les espaces).

Ce que j’en dis…

Par simplification (et par sécurité), je suggère toujours de laisser tomber les espaces insécables. D’autant que souvent, les contenus sont préparés dans un traitement de texte. Le codage des insécables n’est donc pas automatiquement assuré.

Et puis, n’est-ce pas Le Monde ou Libé qui a abandonné, il y a quelques années, les insécables même dans le format papier ? Soyons dans notre temps, dans le média et innovons

La ponctuation des parenthèses, guillemets, crochets, accolades

Laisser des espaces à l’extérieur, mais pas à l’intérieur. 2 exceptions:

• il n’y a pas d’espace entre la parenthèse finale et la ponctuation simple qui suit
• pour les guillemets à la française « », appliquer la règle des signes doubles, soit des espaces avant et après sauf s’ils sont suivis d’une ponctuation simple

Ce que j’en dis…

Voir ma bafouille sur les espaces insécables ci-dessus.

Quelle ponctuation pour les listes à puces et à numéros ?

Pour les listes, il faut laisser une espace entre le tiret et le mot qui suit ; pour terminer une liste, 2 solutions sont possibles avec une préférence pour la seconde:
1) pas de virgule à la fin de chaque élément de la liste, ni de point à la fin :

• ligne 1
• ligne 2

2) un point-virgule à la fin de chaque élément de la liste, un point à la fin :

• ligne 1 ;
• ligne 2.

Ce que j’en dis…

Par simplification (et par sécurité, à nouveau), je préconise la première solution. Cette solution est d’autant plus recommandée aux gestionnaires de contenus multilingues. Les règles typographiques varient d’une langue à l’autre. Et ces variations se ressentent pas mal dans la liste à puces.

Présentation des noms et prénoms

• écrire les initiales en capitales
• écrire les prénoms en minuscules devant le nom
• écrire les noms en (petites) capitales
• petites capitales:
  Les petites capitales sont utilisées pour donner le nom de l’auteur dans une référence bibliographique; les petites capitales peuvent être codées en définissant une taille de police inférieure au reste du texte.
  Amélie N<font size -1>othomb</font>
  Les petites capitales sont peu utilisée sur le Web.
• les titres en exposant:
  Le texte en exposant est peu utilisé sur le Web, ainsi on écrira :
  Mlle, Mme, Mlles, Mmes et non M^lle qui est une écriture très lourde.
  Idem pour les adjectifs numéraux ordinaux : 1er, 2e, 3e, etc.

Ce que j’en dis…

Je suis assez contre (à un point qui frise l’obstination) l’usage des capitales dans un contenu. Je les tolère dans des surtitres et titres de pages… A peine dans des titres d’articles. C’est dire. Donc, en ce qui me concerne, je fais fi (shame on me) des règles typographiques pour ce qui est des prénoms et des noms. il suffit de voir sur certaines pages du site public du Parlement européen pour se rendre compte de l’effet visuel de ce type de choix. Dès que sont citées plusieurs personnes dans 1 paragraphe, la lisibilité en est beaucoup atténuée.

Insertion des références bibliographiques

Plusieurs normes existent:
NOM Prénom, titre, ville, éditeur, année, autres renseignements.
ou
NOM Prénom, article, titre de revue, ville, éditeur, année, autres renseignements

Ce que j’en dis…

En général je laisse au graphiste le soin de trouver une manière soignée et web-enabled de présenter ce type de références. Je préconise les taxonomies et autres syndications pour de tels contenus. Cela donne une utilité supplémentaires à ces informations.

Acronymes

Ecrire les acronymes en majuscules, avec ou sans points :
On écrira HTML, CSS, ONU, PAM, O.C.D.E. ou OCD

Ce que j’en dis…

Parfaitement d’accord. Mais, à la première occurence de l’abréviation, selon le public cible, je donne d’abord le nom complet qui réfère à l’acronyme.

Les unités

Laisser une espace entre les chiffres et l’unité de mesure :
3,3 cm
3 000 000,00 EUR
33,3 %

Ce que j’en dis…

Dur dur, les espaces insécables sur une page Web, on l’a vu. Mais, c’est vrai que la lisibilité impose une espace. Pour les chiffres de manière générale, on suivra le conseil de Jakob Nielsen : en chiffres et pas en lettres.

Etc., et cetera, et caetera

« Etc. » n’est jamais suivi de points de suspension.

Plus d’infos ?

• Action-Rédaction… Les usages typographiques sur le Web
• Le grand déclin de la homepage?
• La homepage, la malnommée…
• Une liste des codes pour les accentués (les entités ou entities, comme disent les “Pro”, je crois)
  

Les contraintes formelles

Ces contraintes qui touchent à la mise en page ainsi qu’à l’appréciation visuelle de votre newsletter sont essentielles. Car, plus encore dans sa messagerie que sur la page Web, le lecteur est exigeant dans son strict mode de balayage.

• Rubricage & colonnage ; compatibilité avec les tailles d’écran.
• Lisibilité : saillance, titres, accroches, liens
• Typographie : fonte sans empattement, assez grande, sombre, justifiée à gauche, pas d’italique, pas de capitales (sauf pour les rubriques & titres), pas de souligné (sauf pour les liens)
• Fond : clair, uni
• Respect de la charte graphique du site
• Pas d’éléments animés dans le contenu ; Pas de Flash
• Limiter le nombre et la taille des illustrations

Liens rapides

• La photo sur Flickr
• Modèles de newsletters
• check-list Newsletter 1
• check-list Newsletter 2

Readability
Originally uploaded by bibliothecaire

Bonne nouvelle, lecteurs et trices, occasionnel(le)s et régulièr(e)s: vous êtes géniaux! Moi, par contre, nouvelle pas bonne: en gros ça me dit que j’écris compliqué et illisible. Je m’en doutais un peu mais pas à ce point!

Via Philippe Martin, qui dit bien qu’il faut prendre ça avec un zeste d’humour et de philosophie. Mais au sérieux quand même, non ?

Encore deux mots bien français, qui sont de mise dans votre stratégie éditoriale. Les instructions de wording et de tone of voice sont au contenu Web ce que les anotations “adagio”, “vivace” etc. sont aux partitions musicales…

 

Le wording

Une des règles d’or de l’écriture pour le web consiste à utiliser un langage simple. Pourquoi ? Voici, au moins trois raisons:

1. votre utilisateur balaie le contenu de vos pages.
2. Il veut pouvoir comprendre rapidement et aisément l’info qu’il recherche.
3. Il veut sentir que vous vous mettez à sa place.

Qu’entend-on par langage simple ?

C’est un phrasé que votre utilisateur peut comprendre à la première lecture. Mais attention : un langage simple pour un utilisateur ne l’est pas nécessairement pour d’autres. Les résultats des tests utilisateurs, par exemple, ou le feed-back de vos collaborateurs, des avocats, des notaires, des universitaires, etc. – vous aideront à déterminer si votre communication est simple: simple à lire, à comprendre et à exploiter.

En savoir plus…

Le tone of voice

Les recherches et tests utilisateurs basés sur la crédibilité des sites Web le confirment: les visiteurs apprécient les sites “qui nous ressemblent”.

En termes de contenu, qu’est-ce qui va contribuer à cette identification de vos utilisateurs ? Et donc à la crédibilité de votre site ?

1. Orientez votre contenu sur l’utilisateur: donnez des informations qui le concernent.
2. Utilisez un mode d’écriture interactif : p.ex. “vous trouverez dans ces pages”, “nous vous invitons à…”, “vous avez d’autres questions?” “Cliquez ici”…
3. Remerciez-le de visiter vos pages, de remplir les formulaires, de soumettre leurs commentaires, etc.
4. Privilégiez les pages légères. Allez à l’essentiel, purgez votre contenu superflu.
5. Mettez vos utilisateurs en avant: prévoyez des “témoignages” et des avis d’experts.
6. Invitez vos utilisateurs à être actif et s’approprier votre contenu : prévoyez des call-to-actions, des liens directs, etc.
7. Mâchez la besogne de vos utilisateurs: proposez de les recontacter en un clic, créez des formulaires simplissimes.

Telle est votre homepage “vue” par l’internaute. Si l’on en croit le schéma auquel est arrivé le Poynter Institute au terme de leur troisième étude d’occulométrie consacrée, notamment, aux sites Web.

Le regard fixerait d’abord le coin supérieur gauche de la page, puis il zigagerait de gauche à droite par zones. Après avoir zyeuté le haut de la page, et si son intérêt persiste, il consentirait à explorer la zone inférieure, en repartant de la gauche. Il clôturerait son zig-zag par une ascension de bas en haut sur la zone droite de l’écran.

Pourquoi faire simple?

Sans ce schéma, les résultats de l’étude Poynter Online ne diffèrent pas beaucoup de ce que Nielsen nous dit depuis longtemps. On se demande donc pourquoi Poynter en arrive à une figure aussi sophistiquée…

La version Poynter:

<< The eyes most often fixated first in the upper left of the page, then hovered in that area before going left to right. Only after perusing the top portion of the page for some time did their eyes explore further down the page. >>

La version Nielsen

• << Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
• Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
• Finally, users scan the content’s left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F’s stem. >>

Par contre, l’étude comprend d’autres résultats qui ne peuvent que nous surprendre. Affaire à suivre…

Plus d’infos ?

• Du côté de chez Jakob Nielsen
• Du côté du Poynter Institute
• Leur étude Eyetrack III en ligne

If U Cn Rd Ths, U Cn Mk Bg Mny

C’est ce que voit notre oeil… Mais notre cerveau, lui, comprend parfaitement la phrase If you can read this, you can make big money. Cet exemple est présenté par Gerry McGovern dans son ouvrage Killer Web Content.

Ce faisant, il veut expliquer le fait que notre oeil scanne les mots les plus importants dans le contenu Web, les carewords, comme il les appelle.

… et le “coeur”

Les carewords… C’est une approche que je préfère aussi en lieu et place du concept éculé de mots clés. McGovern de dire, à ce propos :

“Your customers have a small set of words that summarize what they care about. Find those words, and you’re half way to success… When people go to a search engine, are they more likely to type “low fares” or “cheap flights?”

Aujourd’hui, je vous propose un tour d’horizon sur les différents genres de titres qui marchent. Les deux derniers péchés du contenu Web seront donc pour la semaine prochaine puisque demain, c’est vendredi !

Il existe deux grandes catégories de titres :

• Les titres directs
• Les titres indirects

Les titres directs

Ex. : Tout savoir sur l’écriture pour le Web

Leur sens est littéral. Ils ne font pas de mystère. Ne cherchent pas la ruse ni le jeu de mot. Ils vont droit au but.

Les titres indirects

Ex. : En mal d’appât ?

Ils exploitent une voie “oblique”. Titillent la curiosité du lecteur. Posent une question auquel le contenu qui suit donne la réponse (cette règle élémentaire est encore souvent négligée). Jouent souvent sur un double sens.

Dans ces deux catégories, on distingue des sous-catégories, telles que:

• Les titres impératifs
• Les titres “à la une”
• Les titres sous forme de question
• Les titres “Comment…”
• Les titres “X bonnes raisons de”
• Les titres “témoignage”

Les titres impératifs

Ex. : Mettez de l’ordre dans vos titres !

On se souvient des pub Vitel “Buvez, éliminez” … Dans vos titres impératifs, le premier mot sera généralement un verbe qui encourage l’utilisateur à agir…

Les titres “à la une”

Ex. : “Une interview exclusive de Jakob Nielsen…”

Les titres à la une ont le chic de faire choc, en général. Pour autant qu’ils se réfèrent effectivement à un fait actuel ; qu’ils portent sur l’annonce d’un événement, un lancement de produit, un changement de stratégie, … bref un sujet d’actualité.

Ou qu’ils soient circonstanciels. Et se rapportent littéralement au contenu de la page, de la rubrique ou du site Web en question.

Les titres sous forme de question

Ex. : De quel genre, votre titre ?

Ces titres ne sont efficaces que s’ils sont “empathiques“. C’est-à-dire qu’ils posent les questions que se posent les utilisateurs et dont ils cherchent, précisément, la réponse.

Les titres “Comment…”

Ex. : Comment écrire de bons titres ?

Parmi les titres-questions, ceux-ci fonctionnent très bien. Et sur le support papier aussi d’ailleurs. Un confrère copywriter disait toujours qu’un titre commençant par “Comment…” n’est jamais un mauvais titre.

Les titres “x bonnes raisons de…”

Ex. : Cinq bonnes raisons de soigner vos titres

Autre modèle très efficace, les titres “x raisons de…” annoncent un contenu clair, généralement présenté sous la forme d’une énumération de conseils ou de caractéristiques.

Ces titres ne demandent même pas de justification : inutile donc de titrer “cinq bonnes raisons qui démontrent pourquoi il est important de soigner vos titres”.

Les titres “Témoignages”

Ex. : Ils ont testé la méthode Ecrire pour le Web

Ces titres ont l’avantage, en moins de dix mots, de présenter un article, de sous-entendre que cet article est qualitatif et d’en donner la preuve à travers le témoignage d’un utilisateur. Et cela, ça rassure vos lecteurs.

On veillera à ne pas oublier de fournir une ou deux citations dans le contenu qui suit vos titres-témoignage, pour authentifier votre intention.

Ex. : “Je lis Ecrire pour le Web tous les jours depuis deux mois. Désormais, quand je mets à jour notre page d’actualité, je perds beaucoup moins de temps, je suis plus sûr de moi”.

Alors, convaincus ?

Suite aux commentaires, notamment de Sébastien et d’Encyclopédie, déposés au bas de mon billet Court ou long, je voudrais revenir sur la question de la longueur du contenu.

Entre l’idée et la réalité

Il va de soi que l’utilisation de titres et de sous-titres, l’espacement des lignes et des paragraphes, les polices de caractère… bref tout ce qui touche à la lisibilité formelle du contenu est primordiale. Toujours primordiale. Je n’ai de cesse d’ailleurs de le répéter dans mes billets (voir les Catégories Lisibilité, Forme, Contenu) de ce blog.

Il va de soi également qu’il faut aller (d’abord) à l’essentiel et jeter le superflu. Qu’il faut captiver l’attention de son lecteur. Qu’il faut lui donner vite et bien ce qu’il cherche. Ces règles de lisibilité de fond, je les répète aussi sans cesse.

Mais la lisibilité n’est pas la seule réalité du contenu Web. Croire qu’elle seule détermine la publication de votre contenu, c’est faire l’économie du client, d’un certain type d’utilisateur et d’une certaine utilité de certains sites Web.

On ne fait pas toujours ce qu’on veut

Il n’y a pas de recette miracle et universelle. Les règles de lisibilité optimale n’échappent pas aux contraintes. L’une d’elles est la longueur du contenu. Quelques exemples ?

• L’historique d’une grande société renommée, traditionnelle et ancienne
• Les textes des normes, inventions, lois et autres textes réglementaires et légaux
• Les procès-verbaux de conférences, les thèses de doctorat, les discours de personnalités, etc.

Souvenons-nous de cet article que j’ai posté sur mon ancien blog, dans lequel j’adhérais à cette distinction entre deux types de sites internet:

La première catégorie rassemble les sites dont le contenu est majoritairement défini par les besoins des internautes. Un site d’aéroport par exemple. Dans ce cas, l’architecte procède par induction : connaissant les besoins des clients, quelle sera l’architecture du site ?

La seconde catégorie rassemble les sites dont le contenu est majoritairement défini par l’ensemble des informations que possède l’institution, publique ou privée, qui crée le site.

N’oublions pas, non plus, que l’utilisateur n’épouse pas toujours le même profil, lui non plus. Là encore, je vous renvoie à un article de mon ancien blog, où je distinguais 4 profils d’utilisateurs :

• Les visiteurs qui pourraient tout aussi bien regarder la télé. Ceux-ci zappent sur le Net en quête de toute distraction et autre friandise audio-visuelle. Le contenu textuel ne leur sert qu’à se diriger vers la surprise suivante.

• Les utilisateurs qui veulent de l’information applicable à leur propre travail. Ils veulent vos statistiques pour leur rapport, votre plan d’entreprise pour élaborer leur propre modèle. Ils raffolent du clic prêt à l’emploi, détestent utiliser la fonction de déroulement et aucun d’entre eux n’a jamais vu un site qu’ils trouvent vraiment attrayant.

• Les lecteurs (espèce rare). Ils utilisent, eux, la fonction déroulement et parcourent de longs documents, voire même des livres entiers ! A moins qu’ils ne les téléchargent, les impriment et les lisent ensuite dans leur fauteuil, comme ils feraient avec tout autre contenu imprimé.

• Les “écouteurs” (espèce en plein développement). Qu’ils soient malvoyants ou non, ceux-ci utilisent des programmes qui lisent le texte apparaissant à l’écran. A mesure que les programmes vocaux augmentent en qualité, les internautes sont de plus en plus nombreux à les utiliser.

C’est dit: les vrais lecteurs sont rares. Mais ils existent. Tout comme les gens qui mesurent 2,10 m. Pourtant, les portes des supermarchés dépassent de loin la taille moyenne des hommes et des femmes…

Le contenu sous toutes ses formes

En revanche, je suis, bien évidemment, tout à fait favorable au recours à d’autres modes de publication que le texte continu pour distiller les longs contenus.

• Le Parlement européen propose un rendu de ses sessions plénières en vidéo.
• Le nouveau site Wrangler propose son historique sous forme de ligne du temps.

Voilà de quoi entretenir le débat

This content in English

Les deux, mon général !

Le débat est fréquent : les textes pour le Web doivent-ils, oui ou non, être courts ?

La formule consiste à diviser votre contenu papier par deux, disent certains. En d’autres mots, un A4 donne un A5 sur le Web (façon de parler, bien entendu). Tout dépend du projet, du site Web, de la stratégie de communication, de l’audience, disent d’autres. En fait, il n’y a pas de règle universelle, une fois de plus.

Qu’en dit l’utilisateur ?

Précisément, celui-ci semble avoir changé d’attitude ces dernières années face au défilement vertical (scrolling) des pages Web. Qui dit défilement, dit page (plus) longue, vous l’aurez compris. S’il n’appréciait pas trop la manœuvre avant (jusqu’en 2000 plus ou moins), il s’y est aujourd’hui bien accoutumé. Par ailleurs, il est vrai que les pages Web ont pas mal augmenté en taille.

Même si la technologie a évolué, que le contenu multimédia et interactif est venu se mêler au texte, certaines ficelles sont (restent) précieuses pour augmenter le taux de lecture de vos pages (longues).

Quelques rappels

Publiez d’abord la conclusion, puis le développement et la conclusion (bref, la fameuse pyarmide inversée). Votre contenu principal doit rester concentré sur le haut de la page (au-dessus du pli). Un exemple…

Badie

Avant les internautes ne lisaient pas les pages trop longues. Ils n’utilisaient pas non plus volontiers la fonction de défilement vertical. Avec l’évolution du Web, ils ont eu tendance à modifier leur comportement. Si bien qu’aujourd’hui, ils sont plus nombreux à faire défiler verticalement le contenu web qu’ils consultent.

Goodie

Les internautes utilisent aujourd’hui plus aisément la fonction de défilement sur les pages Web. Ils se sont sans doute adaptés aux évolutions du Web. Il est vrai que les pages tendent à être plus longues qu’avant.

Habillez vos pages. Prévoyez des sections à l’aide de titres et d’intertitres, faites des listes à puces (bullets), graissez les mots clés, mettez les citations en exergue, espacez vos paragraphes…)

Utilisez des hyperliens pour sectionner de trop longs contenus en plusieurs pages.

Quelques précisions

Puzzlavie publiait dernièrement un billet en citant un de mes anciens articles (de mon ancien blog) sur la lisibilité. J’y écrivais que l’internaute n’aime pas les longs contenus. En fait, jusqu’il y a peu, je soutenais encore que cela était vrai. Les chiffres sont aujourd’hui trop nombreux pour ne pas me faire fléchir.

Pour des chiffres précis sur l’utilisation de la fonction de défilement et sa fréquence sur les sites Web, voir le blog de ClickTale (en anglais) et ce billet de Jean-Marc Hardy.

Short or long content ? There’s no absolute rule

In order to determine the best way to display large amounts of information on the web, several studies were conducted to compare paging versus scrolling. For text content, paging was found to be slower but it did not result in comprehension differences or overall preference over scrolling conditions.Even if scrolling is more common used today, there are still some rules to apply to facilitate the reading of web content. Those are, for example:

• Be succinct: write no more than 50% of the text you would have used in a hardcopy publication
• Write for scannability (titles, subtitles, bullet lists, short text blocks, …)
• Use hypertext to split up long information into multiple pages

Remerciant Bloodrath pour son commentaire sur Travailler la forme et le fond, voici ma réponse (un peu tardive, je m’en excuse):

Forme + Contenu = lisibilité

Lorsque je parle de forme et de fond, c’est en référence à la lisibilité du contenu. J’estime qu’un contenu internet doit être qualitatif sur les deux plans pour être lisible et accessible.

Contenu = mots et/ou images et/ou audio

Bloodrath évoque les sites qui “montrent” et les sites “qui font savoir”. A mon avis, “montrer” c’est aussi faire savoir et pour faire savoir, il est parfois plus efficace de faire voir que de faire lire (cf. Le fond sous toutes ses formes). Et je ne parle pas de faire entendre.

Le plug-in pour Firefox Snap, en montrant des liens, n’est-il pas un outil qui, d’une certaine manière, donne à voir un contenu?

Ce qui fédère un site ? A coup sûr, le contenu

Mais qu’est-ce qui fait le contenu? Il n’y a pas, selon moi, une seule définition du contenu Web. Tout dépend de l’objectif du site internet en question. Bloodrath le souligne également.

Notons au passage que les particularités du Web contribuent toujours à la bonne diffusion du contenu et, plus largement, de l’information, que le site veut faire passer. Ces particularités sont, vous l’aurez compris, les liens corrects, la navigation, les rubriques, le chemin hiérarchique, etc.

Un bon contenu est toujours utile

Quant au contenu, il peut être informatif, ludique ou fonctionnel. Peu importe. Ce qui compte c’est son utilité pour l’internaute : qu’il réponde à son besoin.

Exemple:

Sur Amazon, les commentaires des lecteurs, les autres livres achetés par les internautes qui ont acheté ce livre, les autres livres sous le même thème, sont aussi utiles que les illustrations des livres. L’utilisateur sera plus craintif sur les pages des livres où le cadre de l’illustration est occupé par un grand point d’interrogation. Et il ne s’agit pas d’enchère visuelle.

Et pour conclure, je me permettrai de contextualiser la pertinence de la citation de Bloodrath. Sur Internet, lire c’est oublier, voir c’est mémoriser. Parce que le contenu doit être visible et lisible pour être mémorisable.

Les icônes sont des métaphores visuelles. Elles sont censées symboliser certains concepts ou fonctions :

• envoyer un e-mail,
• consulter une carte géographique,
• accéder aux coordonnées,
• remplir un formulaire…

Vos îcones doivent être éloquentes. Sinon, cette arme précieuse peut se retourner contre vous. Exemple ?

Comment savoir à quoi correspondent les visuels dans les icônes ? Si ce n’est les trois petits pictogrammes au bout à droite, qui doivent signifier “Accueil”, “E-mail” et “Plan du site”…

De pire en pire :

Ce sont aussi des pictogrammes mais, cette fois, totalement illisibles. La disquette renvoie à une page Logiciels, la flèche rouge à une page “Lexique” et la première icône, une feuille de papier, renvoie vers le blog !

Une autre variante ?

Ici, les icônes accompagnent une indication textuelle. Elles se retrouvent d’ailleurs plus loin dans le site en fonction de la catégorie qu’elles désignent.

Même si le système frise les jeux d’observation que l’on donne aux enfants pour exercer leurs aptitudes visuelles, les icônes ne sont pas lâchées seules sur les pages.

Un premier élément de réponse à Sylvie, concernant l’universalité des pictogrammes et autres icônes.

Un bon truc pour tester la lisibilité de vos métaphores visuelles : imprimez-les et faites-les voir par cinq ou six utilisateurs potentiels (vos collègues peuvent en être). Si quatre d’entre eux comprennent son sens, c’est gagné. Dans le cas contraire, vous pouvez vous remettre au travail

Selon Jakob Nielsen, l’ergonomie des sites et de leur contenu va devoir évoluer avec la technologie. Ainsi, la configuration actuelle qui consiste à réserver le tronc central de l’écran au contenu pourrait disparaître au profit de nouveaux modes de présentation…

En d’autres mots, à mesure que la résolution des écrans augmente, votre contenu va devoir prendre d’autres formes.

Citation d’un article de Jakob Nielsen sur le sujet, daté de juin 2006 sur bbcnews.com :

“As its users change so to does the technology surrounding the web. Consider the screen you are reading this on. The trend is for screen sizes to become bigger and to have a higher and higher resolution. Nielsen predicts that screens “several thousand pixels across” could become the thing.

This could change the typical appearance of websites: “We will go away from having a single scrolling thing,” he says. “And it will probably get more like newspapers and we will get a richer layout.”

Au fait, bonne année ! (Je vous retrouve le 2 janvier !)

N’oubliez pas d’actualiser vos informations. Surtout lorsque votre site dispose d’une page… Actualités ! Cela vous coûtera moins cher que de perdre un client (potentiel).

Au rayon frais de votre supermarché, si vous trouvez des articles périmés, vous tournez instantanément les talons, voire vous vous plaignez à la direction…

Que pensent les internautes selon vous lorsque vous leur proposez une rubrique Actualités périmé

Exemple # 1

Sur sa page d’accueil, le site des Socialistes de Silly souligne son dynamisme et assure le visiteur de sa mise à jour régulière.

Or on constate, à la date de publication du présent billet, que sur cette page Actualités, la dernière info date d’octobre 2006…

Exemple # 2

Une mesure de sécurité consiste à dater les dernières et prochaines mises à jour de votre page Actualités… Avec le risque de faire lambiner vos visiteurs dans l’intervalle… Surtout quand cet intervalle pèse un mois et qu’il n’y a, à part cette info, pas d’autre “actualité” sur votre page Actualités.

Exemple # 3

Vous êtes tellement sensible à cette exigence d’ergonomie que vous truffez votre page Actualités d’actualités… qui n’auront pas lieu avant un bon bout de temps…

On n’écrit pas du contenu pour le web, on le localise… Qu’est-ce que cela signifie ? Que chaque fragment de contenu doit être contextualisé avant d’être rédigé ou inversement, doit être rédigé en fonction de l’endroit où il se situe.

Vous devez écrire en pensant au geste de l’utilisateur : où va-t-il cliquer ? Où sa main va-t-elle aller ? Où son regard va-t-il se poser?

Exemple

Sur la page et dans la rubrique Discours du site du Premier Ministre belge, les titres commencent par “Discours par le Premier Ministre…”, “Déclaration de Guy Verhofstadt…” alors que nous sommes sur le site du Premier Ministre, sur la Page de ses Discours et déclarations…

Redondant, non ?

Des titres tels que ceux-ci auraient été plus efficaces :

• Les fonds de pension paneuropéens
• Pharma.be
• La fête du Roi

Ils auraient même pu être complétés de quelques mots expliquant la position du Premier.

Nous vous aurions volontiers montré l’exercice mais ces articles, dont la capture d’écran ci-dessus provient de la page d’accueil, ne sont même plus accessibles via le lien indiqué.