...

Ecrire pour le Web en 2010

by luc-legay

on

Report

Category:

Education

Download: 6

Comment: 0

108,954

views

Comments

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.
Download Ecrire pour le Web en 2010

Transcript

  • 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. Techniques journalistiques
  • 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. Combien de niveaux de lecture dans un titre de presse ?
  • 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. Parfois plus de 100 niveaux de lecture différenciés par un traitement graphique et éditorial spécifique
  • 7. Finalité recherchée ?
  • 8. Eviter l’ennui… Creative Commons Alexander N http://www.flickr.com/photos/64939463
  • 9. Print versus Web
  • 10. Quelles di érences de contraintes ? 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. 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. Lecture à l’écran
  • 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. Source : http://www.useit.com/alertbox/percent-text-read.html
  • 16. Lecture zapping 20% 80% lecture mot à mot lecture en diagonale Source : http://www.useit.com/alertbox/percent-text-read.html
  • 17. Eyetracking
  • 18. Source : http://www.useit.com/alertbox/reading_pattern.html
  • 19. Lecture en « F » Je m’intéresse Je recherche Source : Laurent Goffin http://www.gwix.net/web_gwix/article.asp?filID=233
  • 20. “scannabilité” ou perception de l’information
  • 21. 3/10 e de seconde pour “scanner” un site
  • 22. Spéci cités d’une page Web
  • 23. La ligne de ottaison d’une page 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. Optimiser l’architecture du site
  • 26. le rubricage structure et organise les informations
  • 27. les codes implicites Creative Commons Brian Talbot http://www.flickr.com/photos/b-tal/116220689/
  • 28. Navigation principale Navigation secondaire Raccourcis contextuels Liens transversaux Mentions légales, crédits Source : http://www.ergolab.net/articles/architecture-information.html
  • 29. Fil d’ariane Navigation principale Navigation secondaire Navigation transversale Mentions légales, crédits, contact
  • 30. hypertexte ? interactivité ? lisibilité ? multimédia ?
  • 31. Hypertexte : une page web est toujours reliée
  • 32. Quel texte sur un lien ? Cliquez-ici
  • 33. Proposer des liens vers des articles internes complémentaires
  • 34. 242 liens internes
  • 35. Proposer des liens vers des ressources externes complémentaires
  • 36. Multimédia Images, vidéos, animations
  • 37. Interactivité Commentaires, réactions, avis…
  • 38. consommateurs vs producteurs
  • 39. Viral Envoyer à un ami, ajouter à Delicious, poster sur Twitter…
  • 40. Règles d’écriture Web
  • 41. La pyramide inversée
  • 42. Organiser l’information du synthétique vers l’exhaustif
  • 43. 1. News 2. Sports 3. Tech 4. Life 5. Travel
  • 44. l’essentiel les détails
  • 45. + récent + immédiat + important + proche Titre chapeau texte + détaillé + loin
  • 46. QQOQP Qui, quoi, où, quand et pourquoi ?
  • 47. 5W+2 who (qui), what (quoi), when (quand), where (où), why (pourquoi) et, parfois, how (comment) et how much (combien) ?
  • 48. Faciliter la lecture Creative Commons Thomas Hawk http://www.flickr.com/photos/thomashawk/2354086423/
  • 49. Ecrire court Creative Commons Margolove (Margo C.) http://www.flickr.com/photos/margolove/1810357551/
  • 50. Relire pour réduire Creative Commons Thomas Hawk http://www.flickr.com/photos/thomashawk/93821899
  • 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. Capacité de mémorisation Phrase 12 mots 17 mots 40 mots Mémorisation 100% 70% 30% Source : François Richaudeau, 1979
  • 53. Concision : 1 idée = 1 paragraphe
  • 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. Aller à l’essentiel Creative Commons Fernando Revilla http://www.flickr.com/photos/revilla/644219138/
  • 56. Structurer Creative commons Dynamosquito http://www.flickr.com/photos/dynamosquito
  • 57. Rester clair Creative Commons Anita Martinz http://www.flickr.com/photos/annia316/754581568
  • 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. Utiliser la voix active Creative Commons Duncan c http://www.flickr.com/photos/duncan/3957636207/
  • 60. Connaître sa cible
  • 61. Dé nir l’o re en termes de modes de traitement
  • 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. 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. Organiser l’accès aux contenus
  • 65. Organiser l’accès aux contenus Thématique
  • 66. Organiser l’accès aux contenus Géographique
  • 67. Organiser l’accès aux contenus Chronologique 72
  • 68. Organiser l’accès aux contenus Alphabétique
  • 69. Organiser l’accès aux contenus Rédactionnelle 74
  • 70. Organiser l’accès aux contenus O re produit 75
  • 71. Organiser l’accès aux contenus Audience 76
  • 72. Organiser l’accès aux contenus Fonctionnelle
  • 73. Organiser l’accès aux contenus Popularité 78
  • 74. Organiser l’accès aux contenus Pertinence 79
  • 75. Par où arrive le visiteur ?
  • 76. Pas toujours par la grande porte
  • 77. Chaque page peut devenir une porte d’entrée 82
  • 78. Titre informatif versus incitatif
  • 79. « Georges Simenon est mort »
  • 80. « Maigret casse sa pipe »
  • 81. « La Nano, la voiture la moins chère du monde, arrive en Inde »
  • 82. « Sortie embouteillée pour la Nano low-cost »
  • 83. Ecrire des titres pour informer
  • 84. votre premier lecteur
  • 85. 1000 milliards de pages web indexées
  • 86. 17% + .com 83% Part du tra c généré par les moteurs de recherche (France) Janvier 2008 IAB et comScore
  • 87. 42% des utilisateurs de cliquent sur le premier résultat
  • 88. 5% des utilisateurs de cliquent sur le 4e résultat
  • 89. Visibilité naturelle versus commerciale
  • 90. 96
  • 91. 7 principaux critères de visibilité des contenus
  • 92. 7 principaux critères de visibilité des contenus 1 Nom du domaine http://www.mon-site.com
  • 93. 7 principaux critères de visibilité des contenus 2 Titre de la page
  • 94. 7 principaux critères de visibilité des contenus 3 Balises de titres et enrichissements <h1>, <h2>… <strong>, <em>, <ul>…
  • 95. 7 principaux critères de visibilité des contenus 4 Page Rank Quantité et popularité des liens entrants (PR)
  • 96. 7 principaux critères de visibilité des contenus 5 Texte des liens o shore Appellation des liens qui pointent sur votre page
  • 97. Pour plus d’info sur ce site web, cliquez ici
  • 98. Pour plus d’info visitez France Info Pour plus d’info visitez <a href="http://www.france-info.com/">France Info</a>
  • 99. 7 principaux critères de visibilité des contenus 6 Termes lisibles de l’URL http://monsite.com/termes-lisibles
  • 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. 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/
Fly UP