Comment écrire pour le web ?

40 conseils pratiques pour être lu…

peut-être

Alain-Hervé Le Gall

ahlegall@univ-rennes1.frResponsable du service MultiCOM

de l’OSUR

Questionnement préalable

• L’objectif de ce module est de donner

quelques clefs qui visent à permettre

d’émerger dans le capharnaüm du web

• On va se concentrer sur les critères de fond

et de forme du contenu des pages

– des conseils d’écriture,

– d’ergonomie et de structuration des pages

– Etc.

Questionnement préalable

• Le « comment écrire sur le web ?» découle directement du « comment

lit-on sur le web ? »

• Alors, « comment lit-on sur le web » ? Voici quelques constats

préliminaires :

– il n’y a pas de lecture linéaire dans un site web : une page c’est

d’abord une organisation de l’information dans l’espace (avec

parfois plusieurs dizaines de niveaux de lecture…)

– sur écran, on lit 25 % moins vite que sur papier

– sur écran : 20 % de ce qu’on lit est une lecture « mot à mot » : le

reste, 80 %, est une lecture rapide, en diagonale

– sur écran : quand on cherche une info, seulement 22 % des lecteurs

lisent jusqu’en bas de la page (i.e. l’info essentielle doit se trouver

dans la première partie d’une page)

Questionnement préalable

• Il faut avoir à l’esprit la façon dont on appréhende

un site web, par rapport à un ouvrage par exemple

– la quantité d’information disponible sur le site

n’est pas directement perceptible

– l’organisation de l’information n’est pas

évidente de prime abord

– la lecture est aléatoire, non linéaire : tous les

lecteurs n’arrivent pas par la page d’accueil, et

donc pas par la porte d’entrée !

Questionnement préalable

• D’une façon générale, les fonctionnalités

ergonomiques du site doivent permettre de pallier

à ces spécificités de l’internet, en proposant par

exemple

– des menus de navigation dans le site toujours

visibles

– des outils de recherches d‘information (moteur

interne, glossaire…)

Questionnement préalable

• Penser à Google, qui est votre premier

lecteur

– 1000 milliards de pages web indexées par

jour

– 83 % des recherches sur le web en France

– 42 % des personnes cliquent sur le

premier résultat (5% seulement après le

4ième résultat)

Questionnement préalable

• En résumé :

qualité et actualisation des contenus

=meilleure garantie de visibilité

(i.e. de fréquentation, de lecture, de

notoriété…)

• Les conseils ci-dessous – souvent de bon

sens - découlent de ces constats

Plan du module

1. Les intitulés, les titres

2. Les chapeaux, les introductions

3. Les contenus, l’information

4. Les liens, l’effet internet

5. Les images, le visuel

1. Les intitulés, les titres

1. Prévoir impérativement un titre pour

chaque page

– c’est le premier élément qu’on lit !

– il répond à la question : de quoi parle-t-on

dans cette page ?

2. Titre concis : entre 4 et 10 mots maxi

1. Les intitulés, les titres

3. Titre visible

– Localisation

• immédiatement au-dessus du contenu

• toujours au même endroit pour créer un effet visuel

récurrent d’une page à l’autre (d’où l’importance

d’un gabarit de page, d’une charte graphique

cohérente ; en général les sites gèrent cela

facilement)

– Typographie : utilisez une taille de caractère supérieure

à celle du corps du texte. (simple bon sens de

hiérarchisation de l’information)

1. Les intitulés, les titres

4. Titre explicite

– adapter le vocabulaire, i.e. le discours, au(x)

public(s) visé(s)

– et introduire le mieux possible le contenu de la

page (pour anticiper son contenu)

5. Titre accrocheur (mais pas racoleur) : avec

un style direct, qui interpelle

1. Les intitulés, les titres

6. Titre avec des mots clés qui ‘parlent’ aux

lecteurs

- on lit comme on fait une recherche dans

Google : on cherche d’abord des mots !

- les moteurs de recherche donnent plus du

‘poids’ au contenu des titres pour indexer les

pages web et optimiser les recherches et les

classements des pages/sites (réutilisez ces

mots clés dans le corps du texte pour

accentuer le poids de l’indexation)

1. Les intitulés, les titres

7. Titre avec une signification autonome

– le titre peut être intégré automatiquement

dans un sommaire interactif (syndication

de contenus, fonctionnalités du web 2.0) :

les lecteurs doivent pouvoir en

comprendre immédiatement la portée

avant de cliquer

1. Les intitulés, les titres

Récapitulons tout cela avec un exemple en

ligne

http://www.larecherche.fr/content/actualite-astres/article?id=28121

2. Les chapeaux, les

introductions

8. Concentrer l'accroche en un seul

paragraphe, court

– le chapeau est un niveau d’information

intermédiaire, utile, entre le titre et le contenu

de la page lui-même

2. Les chapeaux, les

introductions

9. Résumez l'essentiel de l'information :

l'accroche est une "brève", le reste de

l'article n’est que son développement

– Utiliser la règle des 5 W : Who ? What ? When ?

Where ? Why ?

– Autrement dit : qui (de qui parle-t-on ?) ? quoi

(de quoi parle-t-on ?) ? quand (quand cela s'est-

il passé ?) ? où ? pourquoi ?

2. Les chapeaux, les

introductions

10. Allez directement aux faits : appliquez le

principe de la « pyramide inversée » qui veut

que l'on commence par l'essentiel, pour aller

ensuite vers le détail

– de haut en bas :

• Titre > Chapeau > texte principal = du synthétique

vers l’exhaustif

11. Pour mettre en valeur l'accroche, utilisez la

mise en gras, une typographie légèrement

différente, etc.

2. Les chapeaux, les

introductions

Récapitulons tout cela avec un exemple en

ligne

http://tempsreel.nouvelobs.com/actualite/planete/20100803.OBS7999/biodiversite-la-mediterranee-est-

la-mer-la-plus-menacee-au-monde.html

3. Les contenus,

l’information

12. Segmentez l’information en « unités de

base »

– une seule idée générale par page, avec un seul

titre

– une seule idée par paragraphe, qui apparaîtra

dans la première phrase du paragraphe

3. Les contenus,

l’information

13. Placer l'information complémentaire dans

des encadrés spécialisés

– l’organisation spatiale de la page,

assistée d’un graphisme adapté,

doit permettre d’extraire

et valoriser les infos

complémentaires

http://www.pourlascience.fr/ewb_pages/a/actualit

e-de-nouvelles-orbites-geostationnaires-

25651.php

3. Les contenus,

l’information

14. Utilisez des intertitres, surtout dans les

textes longs (plus de 2 000 caractères)

15. Limitez le volume de la page

– entre 500 et 4 000 caractères (soit maximum 4

écrans)

– penser à la pénibilité de la lecture, aux

contraintes d’impression des pages

(ergonomie : proposer une fonction « version

imprimable »)

3. Les contenus,

l’information

16. Mettez les mots clés en gras

17. Utilisez les listes à puces ou à numéro pour

une bonne hiérarchisation de l’information

(ergonomie : arborescence visuelle)

3. Les contenus,

l’information

18. Illustrez votre contenu à l'aide de visuels

(photos, infographies) informatifs

– se méfier de la tentation

du ‘trop riche’,

‘du beau’

– un visuel n’est justifié

que s’il apporte

effectivement

un bonus informatifhttp://www.insu.cnrs.fr/a2903,modelisation

-climat.html

3. Les contenus,

l’information

19.Utilisez des phrases courtes (15-20 mots), au

vocabulaire et au style simple et direct (style

journalistique – pas de style littéraire : on lit

en diagonale sur le web…)– 15 à 20 mots correspondent à notre capacité moyenne de

mémorisation immédiate de l’information

20.Ne pas jargonner : sauf si vous vous adressez à

un public averti et exclusif (mais attention aux

autres publics potentiels)

3. Les contenus,

l’information

21. Il faut être irréprochable sur l’orthographe : ce

n’est pas parce que l’on est sur le web…

– bannir le style SMS, texto, twitter, blog, etc.

3. Les contenus,

l’information

22. Évitez les acronymes et les abréviations : ou alors

renvoyer vers un glossaire dynamique

– je passe ma souris sur le texte et une bulle d’info me

donne le développé et /ou la définition du terme (les

CMS proposent généralement cette fonction)

http://sandre.eaufrance.fr/spip.php?article929

3. Les contenus,

l’information

23. Adaptez votre style littéraire à votre public préférentiel

et conservez-le : l’homogénéité du style sur une page,

d’une page à l’autre du site, est capitale

24. Pour garantir la pérennité de vos contenus

informationnels, utilisez des repères temporels absolus

(« le 29 février 2012» plutôt que « demain »). Dater vos

pages (création de la page, mise à jour… : permet de

contextualiser l’information, etc.)

25. Évitez les repères spatiaux propres au support papier

("voir plus loin", "ci-dessus", "page suivante", etc.)

3. Les contenus,

l’information

26. Proposer de l’interactivité avec le lecteur

– des fonctions de partage

(twitter, facebook, etc.)

– des flux RSS pour conserver

un lien avec vos lecteurs

(actualités des rubriques,

veille, etc.)

– des fonctions du genre

‘Réagir à l’article’,

‘Contacter l’auteur’, etc.

3. Les contenus,

l’information

27. Signer les articles : la personnalisation des

documents donne du crédit à l’information

http://ciel.science-et-vie.com/2010/08/30/decouverte-dun-systeme-planetaire-

au-grand-complet/

4. Les liens,

l’effet internet

28. Limitez le nombre de liens hypertextes dans les pages :

hyperliens = hyperchoix ! L’hyperchoix rend le lecteur

schizophrène !

– chaque lien est un cas de conscience pour le lecteur : suivre le lien

au risque de rater l’info recherchée ? ne pas suivre le lien, au risque

de ne pas trouver l’info recherchée ?

– donc, ne créer un lien que si c’est nécessaire !

– les regrouper en bas de page dans une zone ad hoc ? A l’avantage

de ne pas rompre la linéarité d’une lecture (et la fuite du lecteur vers

une autre page…)

4. Les liens,

l’effet internet

28. Suite : L’exemple de la gestion des liens dans Wikipedia

est intéressante

– les liens conservés dans le corps du texte sont les liens internes

– sont renvoyés en bas de page

• les ‘Liens externes’ (au site), ‘Notes et références’, ‘Articles connexes’, etc.

http://fr.wikipedia.org/

wiki/Changement_clim

atique

4. Les liens,

l’effet internet

29. Rédigez des liens explicites,

donnant une idée précise de

vers quoi ils mènent,

surtout quand il s’agit

d’un sommaire

30. Les liens ne doivent être ni

trop courts, ce qui les rend

peu visibles ou peu explicites,

ni trop longs :

les liens de 3 à 5 mots

fonctionnent le mieuxhttp://www.eau-rhin-

meuse.fr/patrimoine/cyclo/cyclo00.htm

4. Les liens,

l’effet internet

31. Les liens et la gestion des fenêtres/onglets

– faire un lien simple pour une direction vers une page de votre site

• http://www.insu.cnrs.fr/a3573,glaciation-ordovicienne-comparable-glaciation-

quaternaire-actuelle.html

• Cliquer sur ‘Découverte de l'existence d'une vie complexe et pluricellulaire

datant de plus de deux milliards d'années’ dans le menu de droite

– faire un ’ _blank’ (avec ouverture d’un nouvel onglet pour un lien

qui envoie vers une page autre que votre site (d’où 2 pages de

navigation distinctes, avec votre page toujours ouverte)

• http://www.insu.cnrs.fr/a3573,glaciation-ordovicienne-comparable-glaciation-

quaternaire-actuelle.html

• Cliquer sur ‘La Terre avant les dinosaures’ dans le menu de droite

4. Les liens,

l’effet internet

32. Toujours prévenir le lecteur (avec un picto standard) qu'un

lien crée une action ou ouvre du contenu autre qu'une page

web (PDF, document Word, etc.), a fortiori si c’est un lien

‘mail’, voire un exécutable !

http://cst.univ-rennes1.fr/

4. Les liens,

l’effet internet

33. S’assurez que la charte graphique du site va gérer de façon

explicite la visualisation des liens visités / non visités

34. Soulignez les liens

c’est un acquis du web : cela fait partie de la culture

commune universelle des internautes

5. Les images,

le visuel

35. Privilégiez les images à caractère informatif

Une illustration n’a de sens que si elle apporte un

complément d’information aux contenus textuels

36. Associez à vos images

un texte alternatif. Il s'agit

d'un équivalent textuel,

descriptif et concis,

visible au survol

de la souris (une ‘infobulle’)

http://www.insu.cnrs.fr/a2892,variation-courants-

oceaniques-depuis-2000-ans.html

5. Les images,

le visuel

37. Chaque fois que c'est possible, proposez une courte légende

donnant du sens à l'image

38. Penser à redimensionner vos images pour éviter d’alourdir

vos pages et d’augmenter leur temps de chargement

(72 dpi pour le web)

39. Attention au copyright :

n’utiliser que des images

dont vous avez les droits

ou faites une demande

d’autorisation

(et citer l’auteur)

http://www.pourlascience.fr/ewb_pages/f/focus-valuer-

la-recherche-y-a-t-il-une-bonne-recette-24782.php

5. Les images,

le visuel

40. …et si maintenant on éteignait la connexion pour aller à la

rencontre des « vrais gens » ?

Du

labo

vers

la

classe

http://www.geosciences.univ-rennes1.fr/spip.php?rubrique413Projet ‘STEP de St Sulpice la Forêt’

(Rencontres CNRS Jeunes ‘Science &

Citoyens’ de Pleine-Fougères 2010)

Synthèse

• Illustration par l’exemple : les sites d’information sont

généralement ceux qui structurent le mieux l’information

– Le site du Nouvel Observateur (vu le 5/08/2010) (http://tempsreel.nouvelobs.com/actualite/planete/20100803.OBS7999/biodiversite-la-mediterranee-est-la-mer-la-plus-

menacee-au-monde.html)

• Titre bien en évidence avec une typographie différente de celle du texte

• Chapeau bien en évidence

• Mots clés en gras, phases courtes

• Blocs d’information complémentaire en périphérie du texte

• Outils collaboratifs regroupés

• Hyperliens dans leur forme classique

• Datation du document

– Le site de Pour la science (vu le 5/08/2010)( http://www.pourlascience.fr/ewb_pages/a/actualite-de-nouvelles-orbites-geostationnaires-25651.php )

– Le site de La Recherche (vu le 5/08/2010)( http://www.larecherche.fr/content/actualite-astres/article?id=28121 )

Crédits, sources

Notre Galaxie vue par Planck

Source : http://www.larecherche.fr/content/actualite-astres/article?id=28121

© La Recherche - SA Sophia Publications - Tous droits réservés, 2010

Biodiversité : la Méditerranée est la mer la plus menacée au monde

Source : http://tempsreel.nouvelobs.com/actualite/planete/20100803.OBS7999/biodiversite-la-mediterranee-est-la-mer-la-plus-menacee-au-monde.html

© Le Nouvel Observateur - Tous droits réservés, 2010

De nouvelles orbites géostationnaires

Source : http://www.pourlascience.fr/ewb_pages/a/actualite-de-nouvelles-orbites-geostationnaires-25651.php

© Pour la Science - Tous droits réservés, 2010

La modélisation du climat

Source : http://www.insu.cnrs.fr/a2903,modelisation-climat.html

© INSU-CNRS - Tous droits réservés, 2010

Sandre Portail national d'accès aux référentiels sur l'eau

Source : http://sandre.eaufrance.fr/spip.php?article929

© Ministère de l'Ecologie, de l'Energie, du Développement Durable et de l'Aménagement du Territoire (MEEDDAT) - Tous droits réservés, 2010

Découverte d’un système planétaire au grand complet

Source : http://ciel.science-et-vie.com/2010/08/30/decouverte-dun-systeme-planetaire-au-grand-complet/

© Actualité du ciel - EXCELSIOR PUBLICATIONS - Tous droits réservés, 2010

Changement climatique

Source : http://fr.wikipedia.org/w/index.php?title=Changement_climatique&oldid=57376575

© Wikipédia - Licence CC-BY-SA, 2010

Crédits, sources

Le cycle de l'eau

Source : http://www.eau-rhin-meuse.fr/patrimoine/cyclo/cyclo00.htm

© Agence de l'eau Rhin Meuse - Tous droits réservés, 2009

Culture scientifique et technique

Source : http://cst.univ-rennes1.fr/

© Université de Rennes 1 - Tous droits réservés, 2010

Variation des courants océaniques depuis 2000 ans

Source : http://www.insu.cnrs.fr/a2892,variation-courants-oceaniques-depuis-2000-ans.html

© INSU-CNRS - Tous droits réservés, 2010

Évaluer la recherche : y a-t-il une bonne recette ?

Source : http://www.pourlascience.fr/ewb_pages/f/focus-valuer-la-recherche-y-a-t-il-une-bonne-recette-24782.php

© Pour la Science - Tous droits réservés, 2010

Présentation de l’équipe Transferts d’eau et de matière dans les milieux hétérogènes complexes

Source : http://www.geosciences.univ-rennes1.fr/spip.php?rubrique413

© CNRS UMR6118, Géosciences Rennes - Tous droits réservés, 2010

Photographie de la maquette analogique en hydrogéologie

© Alain-Hervé Le Gall, CNRS UMR6118, Géosciences Rennes - Tous droits réservés, 2009