Rédaction Web  jeudi 17 février 2011
IntroductionPrésentation de la formation          et des participants
Spécificités de la lecture web               Adapter la rédaction des           pages web au comportement                 ...
Comportement de l’internaute• Recherche d’information   – Avant de lire, vérification rapide en diagonale   – La page cont...
Adapter la rédaction web• Autoriser aux internautes de « scanner »  – Pages navigantes • Penser à donner à « lire »  – Pa...
Adapter la rédaction web• Rédiger des pages web de qualité  –  communication  –  marketing• Créer du contenu de qualité ...
Développer le contenu           • Analyse             – Objectif du lecteur             – Public cible           • Organis...
Principes de la rédaction web                         Les 6 principes          utiles pour rédiger sur le web
Principes de la rédaction web                     Accessibilité                      Découpage                       Perti...
1                    AccessibilitéRendre le contenu accessible pour tous les                              internautes
Accessibilité• Citoyenne   – Accès internet• Technique   – Accès au site web et à la page• Linguistique   – Langue, voc...
Éviter le jargon• Jargon administratif  – La note susmentionnée, l’alinéa précité, …• Jargon technocratique  – « La politi...
Éviter le jargon• Jargon d’expert   – « Les métadonnées et XML sont importants dans les processus     de production et de ...
Éviter les difficultés lexicales• Néologismes• Sigles  – Cocof, bfe…• Substantifs  – écrits impersonnels (on, voix passive...
Éviter les répétitions• Emploi des verbes adéquats  – Être, faire, mettre, dire…     – Les journaux sont sur la table     ...
2                        DécoupageScinder l’information en petites unités, plus                          faciles à assimiler
7, le chiffre d’or• Mémoire courte  – 7 +/- 2 éléments par écrit  – 5 +/- 2 éléments sur écran• Valable pour  – Liste à pu...
Test 1Pomme                               Religion                                  PoireRugby                            ...
Résultats du testParticipant     Test 1   Test 2   Test 3
3                          PertinenceRegrouper les informations qui portent sur un                                 même su...
Regroupement pertinentPomme       Rugby         MathématiquePoire       Football      BiologieBanane      Handball      In...
Test 2Souris       Carotte      ViolonImprimante   Celeri       PianoClavier      Panais       GuitareÉcran        Chou-fl...
Se poser les bonnes questions• Les 5 W et 2 H  – What, who, where, when, why  – How, how much• En français  – Quoi, qui, q...
La bonne info au bon endroit                 Accroche                Corps de texte                    Détails
La bonne info au bon endroit                 Pitch 5 W                 Développement                   5 W et 2 H         ...
La bonne navigation interne                 Sur la page navigante                titre et extrait (en bref)               ...
4                                 TitrageAttribuer un titre à chaque bloc d’information
Titrage• Titrer   – Page   – Bloc d’information• Faciliter   – l’assimilation du contenu   – la reconnaissance de détails ...
TitrageFruits      Sport         SciencePomme       Rugby         MathématiquePoire       Football      BiologieBanane    ...
Test 3Cuisine italienne   Bricolage         PâtisserieTiramisu            Caisse à outils   FarineCannelloni          Mart...
TitrageType          Identifie          Exemples                                 • Introduction              Fonction du b...
Titrage• Écriture d’une page web   – Exercice «                    » : le cake au citron   – Pour un blog culinaire• Veill...
5                    CohérencePour un contenu semblable, utiliser les           mêmes termes, formats, …
Test 3Cuisine italienne   Bricolage         PâtisserieTiramisu            Caisse à outils   FarineCannelloni          Mart...
Test 4 - cohérencePâtes         Outils         PâtisserieSpaghetti     Tournevis      FarineCannelloni    Marteau        S...
Gestalt, psychologie des formes• Le monde      = un ensemble de formes• La page Web      = un ensemble de formes ou de mot...
Comprendre un ensemble de formes
Continuité
Similarité
Proximité     A            B
Regroupement par proximité                        rapide
Regroupement par couleur/forme                       plus lent
Composition de la page
Composition de la page
Cohérence de la page
Cohérence de la page• Vocabulaire et terminologie• Titres d’un même type• Ton ou intonation unique  – verbes d’action  – e...
Congruence de la page• Utiliser des mots en accord avec  – le contenu du site  – le monde du Web     • lister les mots « c...
Utiliser les bons mots• Limiter  – +/- 5 mots pour une page  – 10 ou 20 mots pour un site  – 50 mots pour un site étendu• ...
Utiliser les outils Google
Utiliser les outils Google
Utiliser les outils Google
Les bons mots aux bons endroits
Les bons mots aux bons endroits                  Adresse URL                   Balise <Title>                     Balise <...
Trouver titres et bons mots• Réécriture avec titrage  –   Exercice «                       »  –   Scinder et titrer de man...
6                Intégration de                       visuelsUtiliser des éléments graphiques comme          partie intégr...
La mort par la rédaction web                • Comment causer                   sa propre perte
Pas assez d’images
Trop de mots / pas assez d’images
Test 3Cuisine italienne   Bricolage         PâtisserieTiramisu            Caisse à outils   FarineCannelloni          Mart...
Test 3  Cuisine Italie    Bricolage           Pâtisserie  • Tiramisu        • Caisse à outils   • Farine  • Cannelloni    ...
Cerveau gauche/droite •Texte écrit •Raison •Logique               image                         •Vision                   ...
Trop de texteSurchargé       Délaissé
Parlerde manière imagée
Intégration de visuels•   Liste à puces•   Tableau•   Illustration•   Pictogramme•   Graphique•   Diagramme
Visuels et contenuVisuel           Contenu                 Tableau de marche à suivreTableau                 (procédure)Lo...
Intégration de visuels• Présenter visuellement un texte présentant des  conditions et actions• « Nous offrons un crédit au...
Intégration de visuels     Si le montant de la                           Alors     facture est     < 25 €                R...
Intégration de visuels• Décrire une structure                  Bruxelles                 Formation                 Bureau ...
Présentation redaction web
Prochain SlideShare
Chargement dans…5
×

Présentation redaction web

1 172 vues

Publié le

Les grands principes de la rédaction pour le Web

Publié dans : Business
1 commentaire
1 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
1 172
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
22
Commentaires
1
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Présentation redaction web

  1. 1. Rédaction Web jeudi 17 février 2011
  2. 2. IntroductionPrésentation de la formation et des participants
  3. 3. Spécificités de la lecture web Adapter la rédaction des pages web au comportement de 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. Adapter la rédaction web• Rédiger des pages web de qualité –  communication –  marketing• Créer du contenu de qualité –  la durée de consultation de la page –  la durée de visibilité d’une publicité
  7. 7. Développer le contenu • Analyse – Objectif du lecteur – Public cible • Organisation – Diviser – Regrouper • Présentation – Mettre en forme – Utiliser des visuels
  8. 8. Principes de la rédaction web Les 6 principes utiles pour rédiger sur le web
  9. 9. Principes de la rédaction web Accessibilité Découpage Pertinence Titrage Cohérence Intégration de visuels
  10. 10. 1 AccessibilitéRendre le contenu accessible pour tous les internautes
  11. 11. 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
  12. 12. Éviter le jargon• Jargon administratif – La note susmentionnée, l’alinéa précité, …• Jargon technocratique – « La politique des temps de la ville, contribuant à la vie des valeurs essentielles, intéressant tous les champs de l’existence, la personne et la société, le passé le présent et le futur, devient une construction mobilisatrice. »
  13. 13. Éviter le jargon• Jargon d’expert – « Les métadonnées et XML sont importants dans les processus de production et de gestion des objets pédagogiques. De nombreux groupes travaillent sur ce domaine. Il n’existe cependant pas de standard pour caractériser la structure logique des documents pédagogiques, qui permettent de décrire de façon unique un exercice, des indications pour la solution, et de produire différents type d’affichage quel que soit le support (CD, Web ou papier…) malgré certaines possibilités offertes par l’utilisation de XSL (extended style sheet layer). Malgré ces restrictions, il semble pertinent d’adopter dès maintenant cette approche pour produire des documents pédagogiques de meilleure qualité et assurant une meilleure portabilité. »
  14. 14. É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…
  15. 15. Éviter les répétitions• Emploi des verbes adéquats – Être, faire, mettre, dire… – Les journaux sont sur la table – Cet appareil a un système de sécurité – Éric fait sont travail – Le stagiaire met son cv sur internet – Le directeur dit de préparer ce dossier
  16. 16. 2 DécoupageScinder l’information en petites unités, plus faciles à assimiler
  17. 17. 7, le chiffre d’or• Mémoire courte – 7 +/- 2 éléments par écrit – 5 +/- 2 éléments sur écran• Valable pour – Liste à puces – Blocs d’information – Modules
  18. 18. Test 1Pomme Religion PoireRugby Banane OrangeMathématique Football BiologieCitron Mirabelle InformatiqueVolley Golf VéritéPrune Chimie HandballTennis Gymnastique Économie But : mémoriser le plus de mots en 20 sec (temps moyen de visibilité)
  19. 19. Résultats du testParticipant Test 1 Test 2 Test 3
  20. 20. 3 PertinenceRegrouper les informations qui portent sur un même sujet
  21. 21. Regroupement pertinentPomme Rugby MathématiquePoire Football BiologieBanane Handball InformatiqueOrange Volley VéritéCitron Golf ReligionPrune Gymnastique ChimieMirabelle Tennis Économie
  22. 22. Test 2Souris Carotte ViolonImprimante Celeri PianoClavier Panais GuitareÉcran Chou-fleur MélodieLogiciel Artichaut CompositionModem Tomate TrompetteScanner Salade Flute
  23. 23. 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
  24. 24. La bonne info au bon endroit Accroche Corps de texte Détails
  25. 25. La bonne info au bon endroit Pitch 5 W Développement 5 W et 2 H infos pratiques, liens, autour de l’article
  26. 26. La bonne navigation interne Sur la page navigante titre et extrait (en bref) Sur la page de contenu article complet En lien, pour en savoir plus document pdf
  27. 27. 4 TitrageAttribuer un titre à chaque bloc d’information
  28. 28. 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
  29. 29. TitrageFruits Sport SciencePomme Rugby MathématiquePoire Football BiologieBanane Handball InformatiqueOrange Volley VéritéCitron Golf ReligionPrune Gymnastique ChimieMirabelle Tennis Économie
  30. 30. Test 3Cuisine italienne Bricolage PâtisserieTiramisu Caisse à outils FarineCannelloni Marteau SucreBolognaise Clé anglaise OeufLasagne Vis MouleRisotto Mètre GâteauPizza Foreuse GaufreHuile d’olive Clou Crème fraîche
  31. 31. TitrageType Identifie Exemples • Introduction Fonction du bloc • ContexteGénérique d’information ( rédacteur) • Objectif • Définition • Le monde du web aujourd’hui Contenu du blocContenu d’information • Emplacement des postes d’alarme • Modes d’affichage d’un diaporama • Définition : le bloc d’informationCombinaison Les 2 • Procédure : encaissement d’un chèque
  32. 32. 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
  33. 33. 5 CohérencePour un contenu semblable, utiliser les mêmes termes, formats, …
  34. 34. Test 3Cuisine italienne Bricolage PâtisserieTiramisu Caisse à outils FarineCannelloni Marteau SucreBolognaise Clé anglaise OeufLasagne Vis MouleRisotto Mètre GâteauPizza Foreuse GaufreHuile d’olive Clou Crème fraîche
  35. 35. Test 4 - cohérencePâtes Outils PâtisserieSpaghetti Tournevis FarineCannelloni Marteau SucreTortellini Tenaille SelLasagne Clé anglaise OeufRigatoni Scie BeurreTagliatelle Cutter VanillePapardele Pince Crème fraîche
  36. 36. Gestalt, psychologie des formes• Le monde = un ensemble de formes• La page Web = un ensemble de formes ou de mots, dont la composition peut donner naissance à différents sens
  37. 37. Comprendre un ensemble de formes
  38. 38. Continuité
  39. 39. Similarité
  40. 40. Proximité A B
  41. 41. Regroupement par proximité rapide
  42. 42. Regroupement par couleur/forme plus lent
  43. 43. Composition de la page
  44. 44. Composition de la page
  45. 45. Cohérence de la page
  46. 46. Cohérence de la page• Vocabulaire et terminologie• Titres d’un même type• Ton ou intonation unique – verbes d’action – emploi du « vous »• Mise en forme uniforme• Éléments typiques – Symboles – Pictogrammes
  47. 47. Congruence de la page• Utiliser des mots en accord avec – le contenu du site – le monde du Web • lister les mots « clés » du site • regrouper par thème, en fonction des produits et catégories• Exemple : pour la vente d’appareils électroniques – Un groupe thématique pour les caméscopes • « caméras » , « caméscopes » , … – Un autre groupe pour les téléviseurs
  48. 48. Utiliser les bons mots• Limiter – +/- 5 mots pour une page – 10 ou 20 mots pour un site – 50 mots pour un site étendu• S’aider des outils Google – Google Tendances : les tendances de recherche – Google AdWords : les suggestions de mots-clés
  49. 49. Utiliser les outils Google
  50. 50. Utiliser les outils Google
  51. 51. Utiliser les outils Google
  52. 52. Les bons mots aux bons endroits
  53. 53. Les bons mots aux bons endroits Adresse URL Balise <Title> Balise <H1> Tex te Hypertexte Meta données Img
  54. 54. 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
  55. 55. 6 Intégration de visuelsUtiliser des éléments graphiques comme partie intégrante de la rédaction
  56. 56. La mort par la rédaction web • Comment causer sa propre perte
  57. 57. Pas assez d’images
  58. 58. Trop de mots / pas assez d’images
  59. 59. Test 3Cuisine italienne Bricolage PâtisserieTiramisu Caisse à outils FarineCannelloni Marteau SucreBolognaise Clé anglaise OeufLasagne Vis MouleRisotto Mètre GâteauPizza Foreuse GaufreHuile d’olive Clou Crème fraîche
  60. 60. Test 3 Cuisine Italie Bricolage Pâtisserie • Tiramisu • Caisse à outils • Farine • Cannelloni • Marteau • Sucre • Bolognaise • Clé anglaise • Oeuf • Lasagne • Vis • Moule • Risotto • Mètre • Gâteau • Pizza • Foreuse • Gaufre • Huile d’olive • Clou • Crème
  61. 61. Cerveau gauche/droite •Texte écrit •Raison •Logique image •Vision •Émotionlangage
  62. 62. Trop de texteSurchargé Délaissé
  63. 63. Parlerde manière imagée
  64. 64. Intégration de visuels• Liste à puces• Tableau• Illustration• Pictogramme• Graphique• Diagramme
  65. 65. Visuels et contenuVisuel Contenu Tableau de marche à suivreTableau (procédure)Logigramme Processus début-finSchéma StructureDiagramme Flux et fonctionnement
  66. 66. Intégration de visuels• Présenter visuellement un texte présentant des conditions et actions• « Nous offrons un crédit aux clients qui nous ont déjà passé des commandes. Si le montant d’une nouvelle commande est inférieur à 25€, nous nous attendons à un paiement immédiat parce que les frais administratifs seraient trop élevés pour justifier un crédit. Les clients dont la commande se situe entre 25 et 500 € peuvent bénéficier d’un crédit. Dans le cas de commandes dont le montant est supérieur à 500 €, vous devez consulter votre supérieur. »
  67. 67. Intégration de visuels Si le montant de la Alors facture est < 25 € Refusez le crédit Entre 25 € et 500 € Accordez le crédit >500 € Consultez le supérieur
  68. 68. Intégration de visuels• Décrire une structure Bruxelles Formation Bureau et Tremplin Industrie services

×