Cours rédaction web mai2013

3,389 views

Published on

  • Be the first to comment

Cours rédaction web mai2013

  1. 1. Rédaction Web29 mai 2013
  2. 2. IntroductionPrésentation de la formationet des participants
  3. 3. Spécificités de la lecture webAdapter la rédaction despages web au comportementde l’internaute
  4. 4. Comportement de l’internaute• Recherche d’information– Avant de lire, vérification rapide en diagonale– La page contient-elle les bonnes informations?• « Scanning »– 80% scannent– 20% lisent• Lecture, une fois la vérification faite– 80% du texte lu– 20% parcouru
  5. 5. Adapter la rédaction web• Autoriser aux internautes de « scanner »– Pages navigantes • Penser à donner à « lire »– Pages finales de contenu • Concevoir la page web pour– Supervision du contenu (5 sec)– Lecture éventuelle plus soutenue (30 sec)– Assimilation postposée de l’information (pdf)
  6. 6. Les chemins de la lecture• Reportage video– Arte– Réal. Jean-Pierre Gibrat– artevod• Conclusions– Visibilité– Lisibilité– Compréhension
  7. 7. Les chemins de la lecture
  8. 8. Les chemins de la lecture
  9. 9. Les chemins de la lecture
  10. 10. Principes de la rédaction webLes 6 principesutiles pour rédiger sur le web
  11. 11. Principes de la rédaction webAccessibilitéDécoupagePertinenceTitrageCohérenceIntégration des visuels
  12. 12. AccessibilitéRendre le contenu accessible pour tous lesinternautes1
  13. 13. Accessibilité• Citoyenne – Accès internet• Technique – Accès au site web et à la page• Linguistique – Langue, vocabulaire et syntaxe• Communicationnelle – Présentation et détails• Référentielle Google
  14. 14. Éviter le jargon• Administratif– « La note susmentionnée, l’alinéa précité, … »• Technocratique– « La politique de la ville, contribuant à la vie desvaleurs essentielles, intéressant tous les champs del’existence, la personne et la société, le passé leprésent et le futur, devient une constructionmobilisatrice. »• Expert– « Les métadonnées et XML… »
  15. 15. Éviter les difficultés lexicales• Néologismes• Sigles– Cocof, bfe…• Substantifs– écrits impersonnels (on, voix passive…)– actionner le vous!• Anglicismes– Teenager, coach, hacker, job, webmaster…
  16. 16. DécoupageScinder l’information en petites unités, plusfaciles à assimiler2
  17. 17. 3 - 5 - 7• Mémoire courte– 7 +/- 2 éléments par écrit– 5 +/- 2 éléments sur écran• Valable pour– Liste à puces– Blocs d’information– Modules• Exemples: téléphone, compte bancaire, …
  18. 18. 3 - 5 - 7
  19. 19. Test 1PommeRugbyMathématiqueCitronVolleyPruneTennisReligionBananeFootballMirabelleGolfChimieGymnastiquePoireOrangeBiologieInformatiqueVéritéHandballÉconomieBut : mémoriser le plus de mots en 20 sec (temps moyen de visibilité)
  20. 20. Résultats du testParticipant Test 1 Test 2 Test 3
  21. 21. Découpage• Réécriture par décomposition et regroupement– Exercice « »– Scinder et regrouper de manière pertinente– Sur www.brufo.be/redac• Identifiant: redacXX• Mot passe: redactionXX• Indiquer son prénom dans le profil
  22. 22. PertinenceRegrouper les informations qui portent sur unmême sujet3
  23. 23. Regroupement pertinentPommePoireBananeOrangeCitronPruneMirabelleRugbyFootballHandballVolleyGolfGymnastiqueTennisMathématiqueBiologieInformatiqueVéritéReligionChimieÉconomie
  24. 24. Test 2SourisImprimanteClavierÉcranLogicielModemScannerCarotteCeleriPanaisChou-fleurArtichautTomateSaladeViolonPianoGuitareMélodieCompositionTrompetteFlute
  25. 25. Se poser les bonnes questions• Les 5 W et 2 H– What, who, where, when, why– How, how much• En français– Quoi, qui, quand, où, pourquoi– Comment, combien
  26. 26. La bonne info au bon endroitAccrocheCorps de texteDétails
  27. 27. La bonne info au bon endroitPitch 5 WDéveloppement5 W et 2 Hinfos pratiques, liens,autour de l’article
  28. 28. La bonne navigation interneSur la page navigantetitre et extrait (en bref)Sur la page de contenuarticle completEn lien, pour en savoir plusdocument pdf
  29. 29. Regrouper grâce aux questions• Réécriture par regroupement– Exercice « »– Scinder et regrouper de manière pertinente– Se poser les bonnes questions• Travail à 2• Document Word
  30. 30. TitrageAttribuer un titre à chaque bloc d’information4
  31. 31. Titrage• Titrer– Page– Bloc d’information• Faciliter– l’assimilation du contenu– la reconnaissance de détails• à trouver pour ceux qui en ont besoin• à passer pour ceux qui n’en ont pas besoin
  32. 32. TitrageFruits Sport SciencePommePoireBananeOrangeCitronPruneMirabelleRugbyFootballHandballVolleyGolfGymnastiqueTennisMathématiqueBiologieInformatiqueVéritéReligionChimieÉconomie
  33. 33. Test 3Cuisine italienne Bricolage PâtisserieTiramisuCannelloniBolognaiseLasagneRisottoPizzaHuile d’oliveCaisse à outilsMarteauClé anglaiseVisMètreForeuseClouFarineSucreOeufMouleGâteauGaufreCrème fraîche
  34. 34. TitrageType Identifie ExemplesGénériqueFonction du blocd’information( rédacteur)IntroductionContexteObjectifDéfinitionContenuContenu du blocd’informationLe monde du web aujourd’huiEmplacement des postes d’alarmeModes d’affichage d’un diaporamaCombinaison Les 2Définition : le bloc d’informationProcédure : encaissement d’un chèque
  35. 35. Titrage• Écriture d’une page web– Exercice « » : le cake au citron– Pour un blog culinaire• Veillez à– Unicité de ton (actionner le vous )– Un même vocabulaire– Une structure pertinente – Une mise en forme cohérente
  36. 36. CohérencePour un contenu semblable, utiliser lesmêmes termes, formats, …5
  37. 37. Éviter les hiatus
  38. 38. Éviter les incohérences
  39. 39. Test 3Cuisine italienne Bricolage PâtisserieTiramisuCannelloniBolognaiseLasagneRisottoPizzaHuile d’oliveCaisse à outilsMarteauClé anglaiseVisMètreForeuseClouFarineSucreOeufMouleGâteauGaufreCrème fraîche
  40. 40. Test 4 - cohérencePâtes Outils PâtisserieSpaghettiCannelloniTortelliniLasagneRigatoniTagliatellePapardeleTournevisMarteauTenailleClé anglaiseScieCutterPinceFarineSucreSelOeufBeurreVanilleCrème fraîche
  41. 41. Éviter les incohérences
  42. 42. Comprendre un ensemble de formes
  43. 43. ProximitéAB
  44. 44. Regroupement par proximitérapide
  45. 45. Regroupement par proximité• Géographique• Ergonomique• Sémantique• Graphique
  46. 46. Composition de la page
  47. 47. Composition de la page
  48. 48. Cohérence de la page
  49. 49. Cohérence de la page• Vocabulaire• Titres d’un même type• Intonation unique– verbes d’action– emploi du « vous »• Mise en forme uniforme• Éléments typiques– Symboles– Pictogrammes
  50. 50. Congruence de la page• Utiliser des mots– en accord avec le site• liste des mots « clés » ou expressions• regroupés par thème, en fonction des catégories• Définir une liste– conformément aux usages du Web• Voir les tendances des usagers sur google• Voir les données de recherche en interne
  51. 51. Utiliser les bons mots• Limiter– +/- 5 mots pour une page– 10 ou 20 mots pour un site– 50 mots pour un site étendu• Définir un « thesaurus »• S’aider des outils Google– Google Tendances : les tendances de recherche– Google AdWords : les suggestions de mots-clés
  52. 52. Utiliser les outils Google
  53. 53. Utiliser les outils Google
  54. 54. Utiliser les outils Google
  55. 55. Utiliser les outils Google
  56. 56. Les bons mots aux bons endroits
  57. 57. Les bons mots aux bons endroitsAdresse URLBalise <Title>Balise <H1>TexteHypertexteMetadonnéesImg
  58. 58. Trouver titres et bons mots• Réécriture avec titrage– Exercice « »– Scinder et titrer de manière pertinente– Se poser les bonnes questions– Trouver 5 mots clés– Rédiger des titres significatifs• Travail à 2• Document Word
  59. 59. Intégration devisuelsUtiliser des éléments graphiques commepartie intégrante de la rédaction6
  60. 60. La mort par la rédaction web• Comment causersa propre perte
  61. 61. Pas assez d’images
  62. 62. Test 3CuisineItalie• Tiramisu• Cannelloni• Bolognaise• Lasagne• Risotto• Pizza• Huile d’oliveBricolage• Caisse à outils• Marteau• Clé anglaise• Vis• Mètre• Foreuse• ClouPâtisserie• Farine• Sucre• Oeuf• Moule• Gâteau• Gaufre• Crème
  63. 63. Cerveau gauche/droitimagelangage
  64. 64. Parlerde manière imagée
  65. 65. Intégration de visuels• Liste à puces• Tableau• Illustration• Pictogramme• Graphique• Diagramme
  66. 66. Intégration de visuels• Présenter visuellement un texte présentant desconditions et actions• « Nous offrons un crédit aux clients qui nous ont déjàpassé des commandes. Si le montant d’une nouvellecommande est inférieur à 25€, nous nous attendonsà un paiement immédiat parce que les fraisadministratifs seraient trop élevés pour justifier uncrédit. Les clients dont la commande se situe entre25 et 500 € peuvent bénéficier d’un crédit. Dans lecas de commandes dont le montant est supérieur à500 €, vous devez consulter votre supérieur. »
  67. 67. Intégration de visuelsSi le montant de lafacture estAlors< 25 € Refusez le créditEntre 25 € et 500 € Accordez le crédit>500 € Consultez le supérieur
  68. 68. Intégration de visuels• Décrire une structureBruxellesFormationTremplinBureau etservicesIndustrie
  69. 69. Intégration de visuels• Exercice– Expliquer lesA, B, C et D• Organigramme sous Powerpoint enregistré comme image• Schéma, organigramme, …

×