Techniques et bonnes pratiques pour

Écrire pour le Web
Remis à jour le 2 janvier 2010




Présentation conçue par Luc Leg...
Techniques journalistiques
Loi de proximité
                                             Nation
                                 Ma région
          ...
Combien de
niveaux de lecture
dans un titre
de presse ?
Tétières, rubriques,
titres, surtitres,
chapeaux, intertitres,
photos, dessins,
légendes, accroches,
relances, exergues,
c...
Parfois plus de

100 niveaux
de lecture différenciés
par un traitement graphique
et éditorial spécifique
Finalité recherchée ?
Eviter l’ennui…




      Creative Commons Alexander N http://www.flickr.com/photos/64939463
Print versus Web
Quelles di érences de contraintes ?



                 11
Print Web
qualité du support,     Pixels, RVB,
   format support,      résolution écran,
 encre, CMJN, 300       72 dpi, c...
Spéci cités du Web face aux autres médias
                TV    Radio    Presse   Web
ACCESSIBILITÉ         OUI
   TEXTE  ...
Lecture à l’écran
Lisibilité
Sur écran on lit en moyenne


    25
   moins vite
                     %

      que sur papier
               ...
Source : http://www.useit.com/alertbox/percent-text-read.html
Lecture zapping

            20%



 80%

  lecture mot à mot
  lecture en diagonale
               Source : http://www.us...
Eyetracking
Source : http://www.useit.com/alertbox/reading_pattern.html
Lecture en « F »

                                                                           Je m’intéresse




          ...
“scannabilité”
ou perception de l’information
3/10 e de seconde

pour “scanner” un site
Spéci cités d’une page Web
La ligne de ottaison d’une page




               24
Ligne de ottaison




                                                 Seuls 22 %
                                        ...
Optimiser l’architecture du site
le rubricage
structure et organise
   les informations
les codes implicites



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

Navigation secondaire
Raccourcis contextuels

   Liens transversaux

             Mentions légales,...
Fil d’ariane                       Navigation principale




Navigation secondaire
Navigation transversale



Mentions lég...
hypertexte ?
interactivité ?
lisibilité ?

multimédia ?
Hypertexte :
une page web est toujours reliée
Quel texte sur un lien ?
      Cliquez-ici
Proposer des liens vers des
articles internes complémentaires
242 liens internes
Proposer des liens vers des
ressources externes complémentaires
Multimédia
Images, vidéos, animations
Interactivité
Commentaires, réactions, avis…
consommateurs vs producteurs
Viral
Envoyer à un ami, ajouter à Delicious,
        poster sur Twitter…
Règles d’écriture Web
La pyramide inversée
Organiser l’information
du synthétique vers l’exhaustif
1. News   2. Sports   3. Tech   4. Life   5. Travel
l’essentiel



  les détails
+ récent + immédiat + important + proche


             Titre
              chapeau
                 texte



           +...
QQOQP
Qui, quoi, où, quand et pourquoi ?
5W+2
who (qui), what (quoi), when (quand),
     where (où), why (pourquoi)
         et, parfois, how (comment)
          e...
Faciliter la lecture



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



Creative Commons Margolove (Margo C.) http://www.flickr.com/photos/margolove/1810357551/
Relire pour réduire



   Creative Commons Thomas Hawk http://www.flickr.com/photos/thomashawk/93821899
15
   à 20 mots
correspond à l’empan
de la mémoire(10), soit à notre
capacité moyenne de mémorisation
    immédiate des in...
Capacité de mémorisation
               Phrase                12 mots   17 mots   40 mots



         Mémorisation        ...
Concision : 1 idée = 1 paragraphe
Dé
                                      cou
                                                                      page
Un...
Aller à l’essentiel




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



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




Creative Commons Anita Martinz http://www.flickr.com/photos/annia316/754581568
Les sites web sont rendu plus accessibles
aux handicapés grâce à la norme AccessiWeb



Laquelle de ces phrases préférez-v...
Utiliser la voix active




Creative Commons Duncan c http://www.flickr.com/photos/duncan/3957636207/
Connaître sa cible
Dé nir l’o re en termes
de modes de traitement
testé pour vous astuce actualité
    dossier rendez-vous en images
    interview info-service opinion
  chronique 3 questi...
Dé nir pour chaque traitement :
Nom, éléments de titraille, date, auteur, long. texte,
   photo, légende, vidéos, citation...
Organiser l’accès aux contenus
Organiser l’accès aux contenus
     Thématique
Organiser l’accès aux contenus
    Géographique
Organiser l’accès aux contenus
   Chronologique




              72
Organiser l’accès aux contenus
    Alphabétique
Organiser l’accès aux contenus
   Rédactionnelle




              74
Organiser l’accès aux contenus
     O re produit




              75
Organiser l’accès aux contenus
        Audience




              76
Organiser l’accès aux contenus
    Fonctionnelle
Organiser l’accès aux contenus
       Popularité




              78
Organiser l’accès aux contenus
      Pertinence




              79
Par où arrive le visiteur ?
Pas toujours par la grande porte
Chaque page peut devenir une porte d’entrée




                     82
Titre
informatif versus incitatif
« Georges Simenon est mort »
« Maigret casse sa pipe »
« La Nano, la voiture la moins
chère du monde, arrive en Inde »
« Sortie embouteillée
pour la Nano low-cost »
Ecrire des titres pour informer
votre premier lecteur
1000
milliards de pages web indexées
17%

                                              +
                                                                     ...
42%
des utilisateurs de
cliquent sur le premier résultat
5%
des utilisateurs de
   cliquent sur le 4e résultat
Visibilité
naturelle versus commerciale
96
7 principaux critères
de visibilité des contenus
7 principaux critères de visibilité des contenus




1   Nom du domaine
    http://www.mon-site.com
7 principaux critères de visibilité des contenus




2   Titre de la page
7 principaux critères de visibilité des contenus




3   Balises de titres
    et enrichissements
    <h1>, <h2>… <strong>...
7 principaux critères de visibilité des contenus




4   Page Rank
    Quantité et popularité
    des liens entrants (PR)
7 principaux critères de visibilité des contenus




5   Texte des liens o shore
    Appellation des liens
    qui pointen...
Pour plus d’info
sur ce site web, cliquez ici
Pour plus d’info
                  visitez France Info
Pour plus d’info visitez <a href="http://www.france-info.com/">Fran...
7 principaux critères de visibilité des contenus




6   Termes lisibles de l’URL
    http://monsite.com/termes-lisibles
7 principaux critères de visibilité des contenus




7   Contenus, contenus
    et contenus…
    Quantité, qualité et actu...
Rédiger pour le Web
Présentation conçue par Luc Legay (Les Explorateurs
du Web) en collaboration avec Joël Ronez (Ronez.ne...
Ecrire pour le Web en 2010
Ecrire pour le Web en 2010
Ecrire pour le Web en 2010
Ecrire pour le Web en 2010
Ecrire pour le Web en 2010
Ecrire pour le Web en 2010
Ecrire pour le Web en 2010
Ecrire pour le Web en 2010
Upcoming SlideShare
Loading in...5
×

Ecrire pour le Web en 2010

102,832

Published on

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.

50 Comments
272 Likes
Statistics
Notes
  • Super, merci beaucoup !
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Super!
    Je me suis basée sur ces supports pour réaliser ce document:http://issuu.com/immaginoteca/docs/obpa_sar_-_formation___criture_web

    Je peux partager avec vous les visuels si vous le voulez.
    Merci!
    Francesco
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Présentation très complète avec deux regrets toutefois:
    - Pas d'éléments sur le choix des mots clés et le travail sur leur densité au sein de l'article (utilisation de Google suggest, roue magique, trends, recherches associées...etc)
    - Aucun élément sur la volumétrie -> écrire pour le web c'est également écrire en très forte volumétrie pour qu'il y ait un impact significatif sur le trafic.

    Le contenu est en train de devenir un canal d'acquisition de trafic comme l'est Google adwords, les plateformes d'affiliation...etc Or, dès lors qu'on sait écrire pour le web, se pose la question de la volumétrie et à l'heure actuelle seule des sociétés externes sont capables de fournir ces services.
    Voir à ce sujet l'article que j'ai proposé (http://www.edit-place.com) sur ce site: http://www.topito.com/top-astuces-web-contenu-google
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Bonjour,

    J'aime beaucoup votre présentation faite avec humour et clarté. Bonne synthèse des principales études depuis 10 ans ( dont le fameux 25% de J. Nielsen que conteste aujourd'hui Jean-Marc Hardy).

    Voir à ce sujet : Confort de lecture : l'écart entre l'écran et le papier se réduit (Jean-Marc Hardy):
    http://blog.60questions.net/index.php/2010/07/03/386-vitesse-de-lecture-l-ecart-entre-l-ecran-et-le-papier-se-reduit

    Et aussi (quoique plus ancien) Quatre règles d’écriture à repenser (Éric Kavanagh):
    http://www.ergologique.com/conseils/conseils.php?id_tip=723

    Par contre, à la diapo. #22 (3/10 de sec. pour scanner un site) ? Il me semble plutôt qu'il faut 3/10 de sec. pour comprendre un seul octet d'information ( selon les études d'occulométrie de Poynter, EyeTrack 3 en particulier).

    Merci beaucoup et corrigez-moi si je me trompe !

    Bonne continuation.

    Patrice Leroux
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Vraiment une des meilleurs présentation que j'ai pu lire !!! Un grand bravo et un grand merci à Luc Legay et ses collaborateurs !
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
102,832
On Slideshare
0
From Embeds
0
Number of Embeds
199
Actions
Shares
0
Downloads
3,526
Comments
50
Likes
272
Embeds 0
No embeds

No notes for slide

Ecrire pour le Web en 2010

  1. 1. Techniques et bonnes pratiques pour Écrire pour le Web Remis à jour le 2 janvier 2010 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/
  2. 2. Techniques journalistiques
  3. 3. Loi de proximité Nation Ma région Ma ville Collègues Mon quartier Amis Travail Voisinage Loisirs Argent Chez moi Moi Conjoint Famille Société Aujourd’hui Demain Santé Hier Vie politique Avant-hier Religion
  4. 4. Combien de niveaux de lecture dans un titre de presse ?
  5. 5. 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...
  6. 6. Parfois plus de 100 niveaux de lecture différenciés par un traitement graphique et éditorial spécifique
  7. 7. Finalité recherchée ?
  8. 8. Eviter l’ennui… Creative Commons Alexander N http://www.flickr.com/photos/64939463
  9. 9. Print versus Web
  10. 10. Quelles di érences de contraintes ? 11
  11. 11. Print Web qualité du support, Pixels, RVB, format support, résolution écran, encre, CMJN, 300 72 dpi, choix typo dpi, couleur-offset, limité, débit de roto, tirage, connexion, calibrage des référencement, textes… poids des pages…
  12. 12. Spéci cités du Web face aux autres médias TV Radio Presse Web ACCESSIBILITÉ OUI TEXTE OUI OUI PHOTO OUI OUI VIDÉO OUI OUI INTERACTIVITÉ OUI INFOGRAPHIES OUI OUI OUI MIX NON
  13. 13. Lecture à l’écran
  14. 14. Lisibilité Sur écran on lit en moyenne 25 moins vite % que sur papier Source : http://www.useit.com/alertbox/percent-text-read.html
  15. 15. Source : http://www.useit.com/alertbox/percent-text-read.html
  16. 16. Lecture zapping 20% 80% lecture mot à mot lecture en diagonale Source : http://www.useit.com/alertbox/percent-text-read.html
  17. 17. Eyetracking
  18. 18. Source : http://www.useit.com/alertbox/reading_pattern.html
  19. 19. Lecture en « F » Je m’intéresse Je recherche Source : Laurent Goffin http://www.gwix.net/web_gwix/article.asp?filID=233
  20. 20. “scannabilité” ou perception de l’information
  21. 21. 3/10 e de seconde pour “scanner” un site
  22. 22. Spéci cités d’une page Web
  23. 23. La ligne de ottaison d’une page 24
  24. 24. Ligne de ottaison Seuls 22 % des internautes scrollent jusqu’au Source : ClickTale sur 120 000 pages vues entre nov. 2006 et Déc. 2006. pied de page http://blog.clicktale.com/?p=19 25
  25. 25. Optimiser l’architecture du site
  26. 26. le rubricage structure et organise les informations
  27. 27. les codes implicites Creative Commons Brian Talbot http://www.flickr.com/photos/b-tal/116220689/
  28. 28. Navigation principale Navigation secondaire Raccourcis contextuels Liens transversaux Mentions légales, crédits Source : http://www.ergolab.net/articles/architecture-information.html
  29. 29. Fil d’ariane Navigation principale Navigation secondaire Navigation transversale Mentions légales, crédits, contact
  30. 30. hypertexte ? interactivité ? lisibilité ? multimédia ?
  31. 31. Hypertexte : une page web est toujours reliée
  32. 32. Quel texte sur un lien ? Cliquez-ici
  33. 33. Proposer des liens vers des articles internes complémentaires
  34. 34. 242 liens internes
  35. 35. Proposer des liens vers des ressources externes complémentaires
  36. 36. Multimédia Images, vidéos, animations
  37. 37. Interactivité Commentaires, réactions, avis…
  38. 38. consommateurs vs producteurs
  39. 39. Viral Envoyer à un ami, ajouter à Delicious, poster sur Twitter…
  40. 40. Règles d’écriture Web
  41. 41. La pyramide inversée
  42. 42. Organiser l’information du synthétique vers l’exhaustif
  43. 43. 1. News 2. Sports 3. Tech 4. Life 5. Travel
  44. 44. l’essentiel les détails
  45. 45. + récent + immédiat + important + proche Titre chapeau texte + détaillé + loin
  46. 46. QQOQP Qui, quoi, où, quand et pourquoi ?
  47. 47. 5W+2 who (qui), what (quoi), when (quand), where (où), why (pourquoi) et, parfois, how (comment) et how much (combien) ?
  48. 48. Faciliter la lecture Creative Commons Thomas Hawk http://www.flickr.com/photos/thomashawk/2354086423/
  49. 49. Ecrire court Creative Commons Margolove (Margo C.) http://www.flickr.com/photos/margolove/1810357551/
  50. 50. Relire pour réduire Creative Commons Thomas Hawk http://www.flickr.com/photos/thomashawk/93821899
  51. 51. 15 à 20 mots correspond à l’empan de la mémoire(10), soit à notre capacité moyenne de mémorisation immédiate des informations (20)… Source : http://www.cybertribes.com/lisibilite.html
  52. 52. Capacité de mémorisation Phrase 12 mots 17 mots 40 mots Mémorisation 100% 70% 30% Source : François Richaudeau, 1979
  53. 53. Concision : 1 idée = 1 paragraphe
  54. 54. Dé cou page 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
  55. 55. Aller à l’essentiel Creative Commons Fernando Revilla http://www.flickr.com/photos/revilla/644219138/
  56. 56. Structurer Creative commons Dynamosquito http://www.flickr.com/photos/dynamosquito
  57. 57. Rester clair Creative Commons Anita Martinz http://www.flickr.com/photos/annia316/754581568
  58. 58. Les sites web sont rendu plus accessibles aux handicapés grâce à la norme AccessiWeb Laquelle de ces phrases préférez-vous ? AccessiWeb rend les sites web plus accessibles aux handicapés
  59. 59. Utiliser la voix active Creative Commons Duncan c http://www.flickr.com/photos/duncan/3957636207/
  60. 60. Connaître sa cible
  61. 61. Dé nir l’o re en termes de modes de traitement
  62. 62. 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
  63. 63. 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
  64. 64. Organiser l’accès aux contenus
  65. 65. Organiser l’accès aux contenus Thématique
  66. 66. Organiser l’accès aux contenus Géographique
  67. 67. Organiser l’accès aux contenus Chronologique 72
  68. 68. Organiser l’accès aux contenus Alphabétique
  69. 69. Organiser l’accès aux contenus Rédactionnelle 74
  70. 70. Organiser l’accès aux contenus O re produit 75
  71. 71. Organiser l’accès aux contenus Audience 76
  72. 72. Organiser l’accès aux contenus Fonctionnelle
  73. 73. Organiser l’accès aux contenus Popularité 78
  74. 74. Organiser l’accès aux contenus Pertinence 79
  75. 75. Par où arrive le visiteur ?
  76. 76. Pas toujours par la grande porte
  77. 77. Chaque page peut devenir une porte d’entrée 82
  78. 78. Titre informatif versus incitatif
  79. 79. « Georges Simenon est mort »
  80. 80. « Maigret casse sa pipe »
  81. 81. « La Nano, la voiture la moins chère du monde, arrive en Inde »
  82. 82. « Sortie embouteillée pour la Nano low-cost »
  83. 83. Ecrire des titres pour informer
  84. 84. votre premier lecteur
  85. 85. 1000 milliards de pages web indexées
  86. 86. 17% + .com 83% Part du tra c généré par les moteurs de recherche (France) Janvier 2008 IAB et comScore
  87. 87. 42% des utilisateurs de cliquent sur le premier résultat
  88. 88. 5% des utilisateurs de cliquent sur le 4e résultat
  89. 89. Visibilité naturelle versus commerciale
  90. 90. 96
  91. 91. 7 principaux critères de visibilité des contenus
  92. 92. 7 principaux critères de visibilité des contenus 1 Nom du domaine http://www.mon-site.com
  93. 93. 7 principaux critères de visibilité des contenus 2 Titre de la page
  94. 94. 7 principaux critères de visibilité des contenus 3 Balises de titres et enrichissements <h1>, <h2>… <strong>, <em>, <ul>…
  95. 95. 7 principaux critères de visibilité des contenus 4 Page Rank Quantité et popularité des liens entrants (PR)
  96. 96. 7 principaux critères de visibilité des contenus 5 Texte des liens o shore Appellation des liens qui pointent sur votre page
  97. 97. Pour plus d’info sur ce site web, cliquez ici
  98. 98. Pour plus d’info visitez France Info Pour plus d’info visitez <a href="http://www.france-info.com/">France Info</a>
  99. 99. 7 principaux critères de visibilité des contenus 6 Termes lisibles de l’URL http://monsite.com/termes-lisibles
  100. 100. 7 principaux critères de visibilité des contenus 7 Contenus, contenus et contenus… Quantité, qualité et actualisation des contenus constituent la meilleure garantie de visibilité
  101. 101. Rédiger 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) 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×