Comment crire pour le web ?

40 conseils pratiques pour tre lu peut-tre

Alain-Herv Le Gall ahlegall@univ-rennes1.fr
Responsable du service MultiCOM de lOSUR

Questionnement pralable
Lobjectif de ce module est de donner quelques clefs qui visent permettre dmerger dans le capharnam du web On va se concentrer sur les critres de fond et de forme du contenu des pages
des conseils dcriture, dergonomie et de structuration des pages Etc.

Questionnement pralable
Le comment crire sur le web ? dcoule directement du comment lit-on sur le web ? Alors, comment lit-on sur le web ? Voici quelques constats prliminaires : il ny a pas de lecture linaire dans un site web : une page cest dabord une organisation de linformation dans lespace (avec parfois plusieurs dizaines de niveaux de lecture) sur cran, on lit 25 % moins vite que sur papier sur cran : 20 % de ce quon 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 jusquen bas de la page (i.e. linfo essentielle doit se trouver dans la premire partie dune page)

Questionnement pralable
Il faut avoir lesprit la faon dont on apprhende un site web, par rapport un ouvrage par exemple la quantit dinformation disponible sur le site nest pas directement perceptible lorganisation de linformation nest pas vidente de prime abord la lecture est alatoire, non linaire : tous les lecteurs narrivent pas par la page daccueil, et donc pas par la porte dentre !

Questionnement pralable
Dune faon gnrale, les fonctionnalits ergonomiques du site doivent permettre de pallier ces spcificits de linternet, en proposant par exemple des menus de navigation dans le site toujours visibles des outils de recherches dinformation (moteur interne, glossaire)

Questionnement pralable
Penser Google, qui est votre premier lecteur 1000 milliards de pages web indexes par jour 83 % des recherches sur le web en France 42 % des personnes cliquent sur le premier rsultat (5% seulement aprs le 4ime rsultat)

Questionnement pralable
En rsum :
qualit et actualisation des contenus

=
meilleure garantie de visibilit (i.e. de frquentation, de lecture, de notorit)

Les conseils ci-dessous souvent de bon sens - dcoulent de ces constats

Plan du module
1. 2. 3. 4. 5. Les intituls, les titres Les chapeaux, les introductions Les contenus, linformation Les liens, leffet internet Les images, le visuel

1. Les intituls, les titres

1. Prvoir imprativement un titre pour chaque page
cest le premier lment quon lit ! il rpond la question : de quoi parle-t-on dans cette page ?

2. Titre concis : entre 4 et 10 mots maxi

1. Les intituls, les titres

3. Titre visible Localisation immdiatement au-dessus du contenu toujours au mme endroit pour crer un effet visuel rcurrent dune page lautre (do limportance dun gabarit de page, dune charte graphique cohrente ; en gnral les sites grent cela facilement) Typographie : utilisez une taille de caractre suprieure celle du corps du texte. (simple bon sens de hirarchisation de linformation)

1. Les intituls, 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 intituls, les titres

6. Titre avec des mots cls qui parlent aux lecteurs
on lit comme on fait une recherche dans Google : on cherche dabord 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 (rutilisez ces mots cls dans le corps du texte pour accentuer le poids de lindexation)

1. Les intituls, les titres

7. Titre avec une signification autonome le titre peut tre intgr automatiquement dans un sommaire interactif (syndication de contenus, fonctionnalits du web 2.0) : les lecteurs doivent pouvoir en comprendre immdiatement la porte avant de cliquer

1. Les intituls, les titres

Rcapitulons 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 dinformation intermdiaire, utile, entre le titre et le contenu de la page lui-mme

2. Les chapeaux, les introductions

9. Rsumez l'essentiel de l'information : l'accroche est une "brve", le reste de l'article nest que son dveloppement
Utiliser la rgle 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'estil pass ?) ? o ? pourquoi ?

2. Les chapeaux, les introductions

10. Allez directement aux faits : appliquez le
principe de la pyramide inverse qui veut que l'on commence par l'essentiel, pour aller ensuite vers le dtail
de haut en bas :
Titre > Chapeau > texte principal = du synthtique vers lexhaustif

11. Pour mettre en valeur l'accroche, utilisez la mise en gras, une typographie lgrement diffrente, etc.

2. Les chapeaux, les introductions

Rcapitulons tout cela avec un exemple en ligne

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

3. Les contenus, linformation

12. Segmentez linformation en units de base
une seule ide gnrale par page, avec un seul titre une seule ide par paragraphe, qui apparatra dans la premire phrase du paragraphe

3. Les contenus, linformation

13. Placer l'information complmentaire dans des encadrs spcialiss
lorganisation spatiale de la page, assiste dun graphisme adapt, doit permettre dextraire et valoriser les infos complmentaires
http://www.pourlascience.fr/ewb_pages/a/actualit e-de-nouvelles-orbites-geostationnaires25651.php

3. Les contenus, linformation

14. Utilisez des intertitres, surtout dans les textes longs (plus de 2 000 caractres) 15. Limitez le volume de la page
entre 500 et 4 000 caractres (soit maximum 4 crans) penser la pnibilit de la lecture, aux contraintes dimpression des pages (ergonomie : proposer une fonction version imprimable )

3. Les contenus, linformation

16. Mettez les mots cls en gras
17. Utilisez les listes puces ou numro pour une bonne hirarchisation de linformation (ergonomie : arborescence visuelle)

3. Les contenus, linformation

18. Illustrez votre contenu l'aide de visuels (photos, infographies) informatifs
se mfier de la tentation du trop riche, du beau un visuel nest justifi que sil apporte effectivement un bonus informatif
http://www.insu.cnrs.fr/a2903,modelisation -climat.html

3. Les contenus, linformation

19.Utilisez des phrases courtes (15-20 mots), au vocabulaire et au style simple et direct (style journalistique pas de style littraire : on lit en diagonale sur le web)
15 20 mots correspondent notre capacit moyenne de mmorisation immdiate de linformation

20.Ne pas jargonner : sauf si vous vous adressez un public averti et exclusif (mais attention aux autres publics potentiels)

3. Les contenus, linformation

21. Il faut tre irrprochable sur lorthographe : ce nest pas parce que lon est sur le web
bannir le style SMS, texto, twitter, blog, etc.

3. Les contenus, linformation

22. vitez les acronymes et les abrviations : ou alors renvoyer vers un glossaire dynamique
je passe ma souris sur le texte et une bulle dinfo me donne le dvelopp et /ou la dfinition du terme (les CMS proposent gnralement cette fonction)

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

3. Les contenus, linformation

23. Adaptez votre style littraire votre public prfrentiel et conservez-le : lhomognit du style sur une page, dune page lautre du site, est capitale 24. Pour garantir la prennit de vos contenus informationnels, utilisez des repres temporels absolus ( le 29 fvrier 2012 plutt que demain ). Dater vos pages (cration de la page, mise jour : permet de contextualiser linformation, etc.) 25. vitez les repres spatiaux propres au support papier ("voir plus loin", "ci-dessus", "page suivante", etc.)

3. Les contenus, linformation

26. Proposer de linteractivit avec le lecteur
des fonctions de partage (twitter, facebook, etc.) des flux RSS pour conserver un lien avec vos lecteurs (actualits des rubriques, veille, etc.) des fonctions du genre Ragir larticle, Contacter lauteur, etc.

3. Les contenus, linformation

27. Signer les articles : la personnalisation des documents donne du crdit linformation

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

4. Les liens, leffet internet

28. Limitez le nombre de liens hypertextes dans les pages : hyperliens = hyperchoix ! Lhyperchoix rend le lecteur schizophrne !
chaque lien est un cas de conscience pour le lecteur : suivre le lien au risque de rater linfo recherche ? ne pas suivre le lien, au risque de ne pas trouver linfo recherche ? donc, ne crer un lien que si cest ncessaire ! les regrouper en bas de page dans une zone ad hoc ? A lavantage de ne pas rompre la linarit dune lecture (et la fuite du lecteur vers une autre page)

4. Les liens, leffet internet

28. Suite : Lexemple de la gestion des liens dans Wikipedia est intressante
les liens conservs dans le corps du texte sont les liens internes sont renvoys en bas de page
les Liens externes (au site), Notes et rfrences, Articles connexes, etc.

http://fr.wikipedia.org/ wiki/Changement_clim atique

4. Les liens, leffet internet

29. Rdigez des liens explicites, donnant une ide prcise de vers quoi ils mnent, surtout quand il sagit dun 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 mieux
http://www.eau-rhinmeuse.fr/patrimoine/cyclo/cyclo00.htm

4. Les liens, leffet internet

31. Les liens et la gestion des fentres/onglets
faire un lien simple pour une direction vers une page de votre site

http://www.insu.cnrs.fr/a3573,glaciation-ordovicienne-comparable-glaciationquaternaire-actuelle.html Cliquer sur Dcouverte de l'existence d'une vie complexe et pluricellulaire datant de plus de deux milliards d'annes dans le menu de droite

faire un _blank (avec ouverture dun nouvel onglet pour un lien qui envoie vers une page autre que votre site (do 2 pages de navigation distinctes, avec votre page toujours ouverte)

http://www.insu.cnrs.fr/a3573,glaciation-ordovicienne-comparable-glaciationquaternaire-actuelle.html Cliquer sur La Terre avant les dinosaures dans le menu de droite

4. Les liens, leffet internet

32. Toujours prvenir le lecteur (avec un picto standard) qu'un lien cre une action ou ouvre du contenu autre qu'une page web (PDF, document Word, etc.), a fortiori si cest un lien mail, voire un excutable !

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

4. Les liens, leffet internet

33. Sassurez que la charte graphique du site va grer de faon explicite la visualisation des liens visits / non visits
34. Soulignez les liens cest un acquis du web : cela fait partie de la culture commune universelle des internautes

5. Les images, le visuel

35. Privilgiez les images caractre informatif Une illustration na de sens que si elle apporte un complment dinformation 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-courantsoceaniques-depuis-2000-ans.html

5. Les images, le visuel

37. Chaque fois que c'est possible, proposez une courte lgende donnant du sens l'image 38. Penser redimensionner vos images pour viter dalourdir vos pages et daugmenter leur temps de chargement (72 dpi pour le web) 39. Attention au copyright : nutiliser que des images dont vous avez les droits ou faites une demande dautorisation (et citer lauteur)
http://www.pourlascience.fr/ewb_pages/f/focus-valuerla-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?rubrique413

Projet STEP de St Sulpice la Fort (Rencontres CNRS Jeunes Science & Citoyens de Pleine-Fougres 2010)

Synthse
Illustration par lexemple : les sites dinformation sont gnralement ceux qui structurent le mieux linformation
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-plusmenacee-au-monde.html)

Titre bien en vidence avec une typographie diffrente de celle du texte Chapeau bien en vidence Mots cls en gras, phases courtes Blocs dinformation complmentaire en priphrie du texte Outils collaboratifs regroups 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 )

Crdits, sources
Notre Galaxie vue par Planck Source : http://www.larecherche.fr/content/actualite-astres/article?id=28121 La Recherche - SA Sophia Publications - Tous droits rservs, 2010 Biodiversit : la Mditerrane est la mer la plus menace 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 rservs, 2010 De nouvelles orbites gostationnaires Source : http://www.pourlascience.fr/ewb_pages/a/actualite-de-nouvelles-orbites-geostationnaires-25651.php Pour la Science - Tous droits rservs, 2010 La modlisation du climat Source : http://www.insu.cnrs.fr/a2903,modelisation-climat.html INSU-CNRS - Tous droits rservs, 2010 Sandre Portail national d'accs aux rfrentiels sur l'eau Source : http://sandre.eaufrance.fr/spip.php?article929 Ministre de l'Ecologie, de l'Energie, du Dveloppement Durable et de l'Amnagement du Territoire (MEEDDAT) - Tous droits rservs, 2010

Dcouverte dun systme plantaire 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 rservs, 2010
Changement climatique Source : http://fr.wikipedia.org/w/index.php?title=Changement_climatique&oldid=57376575 Wikipdia - Licence CC-BY-SA, 2010

Crdits, 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 rservs, 2009 Culture scientifique et technique Source : http://cst.univ-rennes1.fr/ Universit de Rennes 1 - Tous droits rservs, 2010 Variation des courants ocaniques depuis 2000 ans Source : http://www.insu.cnrs.fr/a2892,variation-courants-oceaniques-depuis-2000-ans.html INSU-CNRS - Tous droits rservs, 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 rservs, 2010 Prsentation de lquipe Transferts deau et de matire dans les milieux htrognes complexes Source : http://www.geosciences.univ-rennes1.fr/spip.php?rubrique413 CNRS UMR6118, Gosciences Rennes - Tous droits rservs, 2010

Photographie de la maquette analogique en hydrogologie Alain-Herv Le Gall, CNRS UMR6118, Gosciences Rennes - Tous droits rservs, 2009