109
Techniques et bonnes pratiques pour Écrire pour le Web Présentation conçue par Luc Legay (Les Explorateurs du Web) en collaboration avec Joël Ronez (Ronez.net), Jean-Philippe Cathelin (A Conseil), Sébastien Bailly (Paris-Normandie), Xavier de Mazenod (Adverbe.com). Autres sources : Jean-Marc Hardy (redaction.be), Jakob Nielsen (useit.com), Laurent Goffin (gwix.net) Diffusable sous licence Creative Commons by-nc-nd/2.0 http://creativecommons.org/licenses/by-nc-nd/2.0/fr/ Remis à jour le 2 janvier 2010

Ecrire pour le Web en 2010

Embed Size (px)

DESCRIPTION

On n'écrit pas pour le web comme on écrit pour la presse. Même si les techniques journalistiques de la presse restent le plus souvent utilisables. Après quelques centaines de formations consacrées aux bonnes pratiques de l'écriture web, et de nombreuses compilations de sources (très largement pompées à des confrères formateurs), il m'a semblé indispensable de proposer ici un résumé des bonnes pratiques d'écriture pour le web. L'écriture web n'est pas encore une science exacte. A vous d'y ajouter votre propre expérience, et d'enrichir cette base construite avec l'aide et les conseils bienveillants de professionnels passionnés par leur métier.

Citation preview

Page 1: Ecrire pour le Web en 2010

Techniques et bonnes pratiques pour

Écrire pour le Web

Présentation conçue par Luc Legay (Les Explorateurs du Web) en collaboration avec Joël Ronez (Ronez.net), Jean-Philippe Cathelin (A Conseil), Sébastien Bailly (Paris-Normandie), Xavier de Mazenod (Adverbe.com).Autres sources : Jean-Marc Hardy (redaction.be), Jakob Nielsen (useit.com), Laurent Goffin (gwix.net)

Diffusable sous licence Creative Commons by-nc-nd/2.0 http://creativecommons.org/licenses/by-nc-nd/2.0/fr/

Remis à jour le 2 janvier 2010

Page 2: Ecrire pour le Web en 2010

Techniques journalistiques

Page 3: Ecrire pour le Web en 2010

Moi

Collègues

Famille

Amis

Santé

Argent

Travail

Société

Vie politique

Conjoint

Voisinage

Aujourd’huiDemainHier

Chez moi

Mon quartier

Ma région

Religion

Ma ville

Nation

Loi de proximité

Avant-hier

Loisirs

Page 4: Ecrire pour le Web en 2010

Combien de niveaux de lecture dans un titre de presse ?

Page 5: Ecrire pour le Web en 2010

Tétières, rubriques, titres, surtitres, chapeaux, intertitres, photos, dessins, légendes, accroches, relances, exergues, cabochons, signatures, encadrés (nombreux types d’encadrés…), date, lieux, genre, source, crédit...

Page 6: Ecrire pour le Web en 2010

Parfois plus de

100 niveaux de lecture différenciéspar un traitement graphique et éditorial spécifique

Page 7: Ecrire pour le Web en 2010
Page 8: Ecrire pour le Web en 2010

Finalité recherchée ?

Page 9: Ecrire pour le Web en 2010

Eviter l’ennui…

Creative Commons Alexander N http://www.flickr.com/photos/64939463

Page 10: Ecrire pour le Web en 2010

Print versus Web

Page 11: Ecrire pour le Web en 2010

11

Quelles di!érences de contraintes ?

Page 12: Ecrire pour le Web en 2010

Print qualité du support,

format support, encre, CMJN, 300

dpi, couleur-offset, roto, tirage,

calibrage des textes…

Web Pixels, RVB, résolution écran, 72 dpi, choix typo limité, débit de connexion,référencement, poids des pages…

Page 13: Ecrire pour le Web en 2010

TV Radio Presse Web

ACCESSIBILITÉ OUI

TEXTE OUI OUI

PHOTO OUI OUI

VIDÉO OUI OUI

INTERACTIVITÉ OUI

INFOGRAPHIES OUI OUI

NONOUI MIX

Spéci"cités du Web face aux autres médias

Page 14: Ecrire pour le Web en 2010

Lecture à l’écran

Page 15: Ecrire pour le Web en 2010

Sur écran on lit en moyenne

25

moins vite que sur papier

%

Lisibilité

Source : http://www.useit.com/alertbox/percent-text-read.html

Page 16: Ecrire pour le Web en 2010

Source : http://www.useit.com/alertbox/percent-text-read.html

Page 17: Ecrire pour le Web en 2010

80%

20%

lecture mot à motlecture en diagonale

Lecture zapping

Source : http://www.useit.com/alertbox/percent-text-read.html

Page 18: Ecrire pour le Web en 2010

Eyetracking

Page 20: Ecrire pour le Web en 2010

Je recherche

Lecture en « F »

Je m’intéresse

Source : Laurent Goffin http://www.gwix.net/web_gwix/article.asp?filID=233

Page 21: Ecrire pour le Web en 2010

“scannabilité”ou perception de l’information

Page 22: Ecrire pour le Web en 2010

3/10e de secondepour “scanner” un site

Page 23: Ecrire pour le Web en 2010

Spéci"cités d’une page Web

Page 24: Ecrire pour le Web en 2010

24

La ligne de #ottaison d’une page

Page 25: Ecrire pour le Web en 2010

Seuls 22 % des internautes scrollent jusqu’au pied de page

Ligne de #ottaison

Source : ClickTale sur 120 000 pages vues entre nov. 2006 et Déc. 2006.http://blog.clicktale.com/?p=19 25

Page 26: Ecrire pour le Web en 2010

Optimiser l’architecture du site

Page 27: Ecrire pour le Web en 2010

le rubricagestructure et organise

les informations

Page 28: Ecrire pour le Web en 2010
Page 29: Ecrire pour le Web en 2010

les codes implicites

Creative Commons Brian Talbot http://www.flickr.com/photos/b-tal/116220689/

Page 30: Ecrire pour le Web en 2010

Navigation principale

Navigation secondaire

Raccourcis contextuels

Liens transversaux

Mentions légales, créditsSource : http://www.ergolab.net/articles/architecture-information.html

Page 31: Ecrire pour le Web en 2010

Mentions légales, crédits, contact

Navigation principale

Navigation secondaire

Fil d’ariane

Navigation transversale

Page 32: Ecrire pour le Web en 2010

interactivité ?

lisibilité ?

multimédia ?

hypertexte ?

Page 33: Ecrire pour le Web en 2010

Hypertexte :une page web est toujours reliée

Page 34: Ecrire pour le Web en 2010

Quel texte sur un lien ?Cliquez-ici

Page 35: Ecrire pour le Web en 2010

Proposer des liens vers des articles internes complémentaires

Page 36: Ecrire pour le Web en 2010
Page 37: Ecrire pour le Web en 2010

242 liens internes

Page 38: Ecrire pour le Web en 2010

Proposer des liens vers des ressources externes complémentaires

Page 39: Ecrire pour le Web en 2010
Page 40: Ecrire pour le Web en 2010

MultimédiaImages, vidéos, animations

Page 41: Ecrire pour le Web en 2010
Page 42: Ecrire pour le Web en 2010

InteractivitéCommentaires, réactions, avis…

Page 43: Ecrire pour le Web en 2010

consommateurs vs producteurs

Page 44: Ecrire pour le Web en 2010

ViralEnvoyer à un ami, ajouter à Delicious,

poster sur Twitter…

Page 45: Ecrire pour le Web en 2010

Règles d’écriture Web

Page 46: Ecrire pour le Web en 2010

La pyramide inversée

Page 47: Ecrire pour le Web en 2010

Organiser l’information du synthétique vers l’exhaustif

Page 48: Ecrire pour le Web en 2010

1. News 2. Sports 3. Tech 4. Life 5. Travel

Page 49: Ecrire pour le Web en 2010

l’essentiel

les détails

Page 50: Ecrire pour le Web en 2010

+ récent + immédiat + important + proche

+ détaillé + loin

Titrechapeau

texte

Page 51: Ecrire pour le Web en 2010

QQOQPQui, quoi, où, quand et pourquoi ?

Page 52: Ecrire pour le Web en 2010

5 W + 2who (qui), what (quoi), when (quand),

where (où), why (pourquoi) et, parfois, how (comment)

et how much (combien) ?

Page 53: Ecrire pour le Web en 2010

Faciliter la lecture

Creative Commons Thomas Hawk http://www.flickr.com/photos/thomashawk/2354086423/

Page 54: Ecrire pour le Web en 2010

Creative Commons Margolove (Margo C.) http://www.flickr.com/photos/margolove/1810357551/

Ecrire court

Page 55: Ecrire pour le Web en 2010

Relire pour réduire

Creative Commons Thomas Hawk http://www.flickr.com/photos/thomashawk/93821899

Page 56: Ecrire pour le Web en 2010

Source : http://www.cybertribes.com/lisibilite.html

correspond à l’empande la mémoire(10), soit à notre

capacité moyenne de mémorisation

à 20 mots

immédiate des informations (20)…

15

Page 57: Ecrire pour le Web en 2010

Phrase 12 mots 17 mots 40 mots

Mémorisation 100% 70% 30%

Capacité de mémorisation

Source : François Richaudeau, 1979

Page 58: Ecrire pour le Web en 2010

Concision : 1 idée = 1 paragraphe

Page 59: Ecrire pour le Web en 2010

page

Décou

Un seul titre et un seul sujet par page

Licence Creative Commons by-nc-sa/2.0 : Semuthutan Azri http://www.flickr.com/photos/azriadnan/1818312422

Page 60: Ecrire pour le Web en 2010

Creative Commons Fernando Revilla http://www.flickr.com/photos/revilla/644219138/

Aller à l’essentiel

Page 61: Ecrire pour le Web en 2010

Creative commons Dynamosquito http://www.flickr.com/photos/dynamosquito

Structurer

Page 62: Ecrire pour le Web en 2010

Rester clair

Creative Commons Anita Martinz http://www.flickr.com/photos/annia316/754581568

Page 63: Ecrire pour le Web en 2010

AccessiWeb rend les sites webplus accessibles aux handicapés

Les sites web sont rendu plus accessiblesaux handicapés grâce à la norme AccessiWeb

Laquelle de ces phrases préférez-vous ?

Page 64: Ecrire pour le Web en 2010

Utiliser la voix active

Creative Commons Duncan c http://www.flickr.com/photos/duncan/3957636207/

Page 65: Ecrire pour le Web en 2010

Connaître sa cible

Page 66: Ecrire pour le Web en 2010

Dé"nir l’o!re en termes de modes de traitement

Page 67: Ecrire pour le Web en 2010

testé pour vous astuce actualité dossier rendez-vous en images interview info-service opinion

chronique 3 questions à bon plan coulisses sondage glossaire conseils

reportage tribune commentaire comparatif vidéo décryptage édito

coulisses dernière heure réponse

Page 68: Ecrire pour le Web en 2010

Dé"nir pour chaque traitement :Nom, éléments de titraille, date, auteur, long. texte,

photo, légende, vidéos, citations, éléments contextuels… Position dans la page

Page 69: Ecrire pour le Web en 2010

Organiser l’accès aux contenus

Page 70: Ecrire pour le Web en 2010

ThématiqueOrganiser l’accès aux contenus

Page 71: Ecrire pour le Web en 2010

Organiser l’accès aux contenus

Géographique

Page 72: Ecrire pour le Web en 2010

ChronologiqueOrganiser l’accès aux contenus

72

Page 73: Ecrire pour le Web en 2010

Organiser l’accès aux contenus

Alphabétique

Page 74: Ecrire pour le Web en 2010

Organiser l’accès aux contenus

74

Rédactionnelle

Page 75: Ecrire pour le Web en 2010

O!re produitOrganiser l’accès aux contenus

75

Page 76: Ecrire pour le Web en 2010

AudienceOrganiser l’accès aux contenus

76

Page 77: Ecrire pour le Web en 2010

FonctionnelleOrganiser l’accès aux contenus

Page 78: Ecrire pour le Web en 2010

Organiser l’accès aux contenus

78

Popularité

Page 79: Ecrire pour le Web en 2010

Organiser l’accès aux contenus

79

Pertinence

Page 80: Ecrire pour le Web en 2010

Par où arrive le visiteur ?

Page 81: Ecrire pour le Web en 2010

Pas toujours par la grande porte

Page 82: Ecrire pour le Web en 2010

82

Chaque page peut devenir une porte d’entrée

Page 83: Ecrire pour le Web en 2010

Titre informatif versus incitatif

Page 84: Ecrire pour le Web en 2010

« Georges Simenon est mort »

Page 85: Ecrire pour le Web en 2010

« Maigret casse sa pipe »

Page 86: Ecrire pour le Web en 2010

« La Nano, la voiture la moins chère du monde, arrive en Inde »

Page 87: Ecrire pour le Web en 2010

« Sortie embouteillée pour la Nano low-cost »

Page 88: Ecrire pour le Web en 2010
Page 89: Ecrire pour le Web en 2010

Ecrire des titres pour informer

Page 90: Ecrire pour le Web en 2010

votre premier lecteur

Page 91: Ecrire pour le Web en 2010

milliards de pages web indexées1000

Page 92: Ecrire pour le Web en 2010

17%

83%Part du tra"c généré par les moteurs de recherche (France)

.com+

Janvier 2008 IAB et comScore

Page 93: Ecrire pour le Web en 2010

des utilisateurs de cliquent sur le premier résultat

42%

Page 94: Ecrire pour le Web en 2010

des utilisateurs de cliquent sur le 4e résultat

5%

Page 95: Ecrire pour le Web en 2010

Visibilité naturelle versus commerciale

Page 96: Ecrire pour le Web en 2010

96

Page 97: Ecrire pour le Web en 2010

7 principaux critères de visibilité des contenus

Page 98: Ecrire pour le Web en 2010

1 Nom du domaine

7 principaux critères de visibilité des contenus

http://www.mon-site.com

Page 99: Ecrire pour le Web en 2010

2 Titre de la page

7 principaux critères de visibilité des contenus

Page 100: Ecrire pour le Web en 2010
Page 101: Ecrire pour le Web en 2010

3 Balises de titres et enrichissements<h1>, <h2>… <strong>, <em>, <ul>…

7 principaux critères de visibilité des contenus

Page 102: Ecrire pour le Web en 2010

4 Page RankQuantité et popularitédes liens entrants (PR)

7 principaux critères de visibilité des contenus

Page 103: Ecrire pour le Web en 2010
Page 104: Ecrire pour le Web en 2010

5 Texte des liens o!shoreAppellation des liens qui pointent sur votre page

7 principaux critères de visibilité des contenus

Page 105: Ecrire pour le Web en 2010

Pour plus d’info sur ce site web, cliquez ici

Page 106: Ecrire pour le Web en 2010

Pour plus d’info visitez France Info

Pour plus d’info visitez <a href="http://www.france-info.com/">France Info</a>

Page 107: Ecrire pour le Web en 2010

6 Termes lisibles de l’URLhttp://monsite.com/termes-lisibles

7 principaux critères de visibilité des contenus

Page 108: Ecrire pour le Web en 2010

7 Contenus, contenus et contenus…Quantité, qualité et actualisation des contenus constituent la meilleure garantie de visibilité

7 principaux critères de visibilité des contenus

Page 109: Ecrire pour le Web en 2010

Rédiger pour le WebPrésentation conçue par Luc Legay (Les Explorateurs du Web) en collaboration avec Joël Ronez (Ronez.net), Jean-Philippe Cathelin (A Conseil), Sébastien Bailly (Paris-Normandie), Xavier de Mazenod (Adverbe.com).

Autres sources : Jean-Marc Hardy (redaction.be), Jakob Nielsen (useit.com), Laurent Goffin (gwix.net)

Prière de ne reproduire les contenus et images de ce document que dans le cadre stricte de cette licence, en conservant les liens vers les sources originales

Diffusable sous licence Creative Commons by-nc-nd/2.0 http://creativecommons.org/licenses/by-nc-nd/2.0/fr/