Rédaction Web, mode d'emploi. 6 principes de rédaction

1. Rédaction Web
vendredi 30 mars 2012

2. Introduction
Présentation de la formation
et des participants

3. Spécificités de la lecture web
Adapter la rédaction des
pages web au comportement
de l’internaute

4. Comportement de l’internaute
• Recherche d’information
– 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. 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. 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. Principes de la rédaction web
Les 6 principes
utiles pour rédiger sur le web

8. Principes de la rédaction web
Accessibilité
Découpage
Pertinence
Titrage
Cohérence
Intégration de visuels

9. 1
Accessibilité
Rendre le contenu accessible pour tous les
internautes

10. 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

11. Éviter le jargon
• Jargon administratif
– La note susmentionnée, l’alinéa précité, …
• Jargon technocratique
– « 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…»

12. É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…

13. Rendre un contenu accessible
• Présentation pertinente
– Exercice « »
– Mettre en forme de manière pertinente avec les styles
– Document Word avec styles prédéfinis

14. 2
Découpage
Scinder l’information en petites unités, plus
faciles à assimiler

15. 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

16. Test 1
Pomme Religion Poire
Rugby Banane Orange
Mathématique Football Biologie
Citron Mirabelle Informatique
Volley Golf Vérité
Prune Chimie Handball
Tennis Gymnastique Économie
But : mémoriser le plus de mots en 20 sec (temps moyen de visibilité)

17. Découpage
• Réécriture par décomposition et regroupement
– Exercice « »
– Scinder et regrouper de manière pertinente
– Document Word

18. 3
Pertinence
Regrouper les informations qui portent sur un
même sujet

19. Regroupement pertinent
Pomme Rugby Mathématique
Poire Football Biologie
Banane Handball Informatique
Orange Volley Vérité
Citron Golf Religion
Prune Gymnastique Chimie
Mirabelle Tennis Économie

20. Test 2
Souris Carotte Violon
Imprimante Celeri Piano
Clavier Panais Guitare
Écran Chou-fleur Mélodie
Logiciel Artichaut Composition
Modem Tomate Trompette
Scanner Salade Flute

21. 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

22. La bonne info au bon endroit
Accroche
Corps de texte
Détails

23. La bonne info au bon endroit
Pitch 5 W
Développement
5 W et 2 H
infos pratiques, liens,
autour de l’article

24. 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

25. 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

26. 4
Titrage
Attribuer un titre à chaque bloc d’information

27. 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

28. Titrage
Fruits Sport Science
Pomme Rugby Mathématique
Poire Football Biologie
Banane Handball Informatique
Orange Volley Vérité
Citron Golf Religion
Prune Gymnastique Chimie
Mirabelle Tennis Économie

29. Test 3
Cuisine italienne 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 fraîche

30. Titrage
Type Identifie Exemples
Introduction
Fonction du bloc Contexte
Générique d’information
( rédacteur) Objectif
Définition
Le monde du web aujourd’hui
Contenu du bloc
Contenu Emplacement des postes d’alarme
d’information
Modes d’affichage d’un diaporama
Définition : le bloc d’information
Combinaison Les 2
Procédure : encaissement d’un chèque

31. 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

32. Trouver titres et bons mots
• Réécriture avec titrage
– Exercice « »
– Scinder et titrer de manière pertinente
– Se poser les bonnes questions
– Rédiger des titres significatifs

33. Pertinence
• Réécriture par décomposition et regroupement
– Exercice « »
• Scinder et regrouper de manière pertinente
• Titrer les parties

34. 5
Cohérence
Pour un contenu semblable, utiliser les
mêmes termes, formats, …

35. Test 3
Cuisine italienne 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 fraîche

36. Test 4 - cohérence
Pâtes Outils Pâtisserie
Spaghetti Tournevis Farine
Cannelloni Marteau Sucre
Tortellini Tenaille Sel
Lasagne Clé anglaise Oeuf
Rigatoni Scie Beurre
Tagliatelle Cutter Vanille
Papardele Pince Crème fraîche

37. Composition de la page

38. Cohérence de la page

39. 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

40. Congruence de la page
• Utiliser des mots en accord avec
– le contenu du site
– le monde du Web
• en fonction avec les « standards » du web
• lister les mots « clés » du site
• regrouper par thème, en fonction des produits et catégories

41. Utiliser les bons mots
• Limiter les mots-clés
– +/- 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

42. Utiliser les outils Google

43. Utiliser les outils Google

44. Utiliser les outils Google

45. Les bons mots aux bons endroits

46. Les bons mots aux bons endroits
Adresse URL
Balise <Title>
Balise <H1>
Texte
Hypertexte
Meta
données
Img

47. Trouver titres et bons mots
• Réécriture avec titrage et mots-clés
– Exercice « »
• Scinder et titrer de manière pertinente
• Se poser les bonnes questions
• Rédiger des titres significatifs
• Trouver +/- 5 mots clés
• Les placer aux bons endroits

48. 6
Intégration de
visuels
Utiliser des éléments graphiques comme
partie intégrante de la rédaction

49. La mort par la rédaction web
• Comment causer
sa propre perte

51. Pas assez d’images

52. Test 3
Cuisine italienne 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 fraîche

53. 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

54. Cerveau gauche/droite
•Texte écrit
•Raison
•Logique image
•Vision
•Émotion
langage

55. Trop de texte
Surchargé Délaissé

56. Parler
de manière imagée
Exemple: le storytelling

57. Intégration de visuels
• Liste à puces
• Tableau
• Illustration
• Pictogramme
• Graphique
• Diagramme

58. Visuels et contenu
Visuel Contenu
Tableau de marche à suivre
Tableau
(procédure)
Logigramme Processus début-fin
Schéma Structure
Diagramme Flux et fonctionnement

59. Intégration de visuels
• « 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. »

60. 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

61. Intégration de visuels
• Décrire une structure
Bruxelles
Formation
Bureau et
Tremplin Industrie
services

62. Intégration de visuels
• Exercice 1
– Expliquer les
A, B, et C
• Organigramme sous powerpoint enregistré comme image
• Schéma, organigramme, …
• Exercice 2
– Réécrire la page des tarifs ou horaires
sur le site Walibi