Les grands principes de la rédaction pour le Web

1. Rédaction Web
jeudi 17 février 2011

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
– 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. 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. Développer le contenu
• Analyse
– Objectif du lecteur
– Public cible
• Organisation
– Diviser
– Regrouper
• Présentation
– Mettre en forme
– Utiliser des visuels

8. Principes de la rédaction web
Les 6 principes
utiles pour rédiger sur le web

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

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

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. É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. É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. É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. É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. 2
Découpage
Scinder l’information en petites unités, plus
faciles à assimiler

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. 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é)

19. Résultats du test
Participant Test 1 Test 2 Test 3

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

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

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

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. La bonne info au bon endroit
Accroche
Corps de texte
Détails

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. 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. 4
Titrage
Attribuer un titre à chaque bloc d’information

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

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

31. 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 d’information
• Emplacement des postes d’alarme
• Modes d’affichage d’un diaporama
• Définition : le bloc d’information
Combinaison Les 2
• Procédure : encaissement d’un chèque

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. 5
Cohérence
Pour un contenu semblable, utiliser les
mêmes termes, formats, …

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

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

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. Comprendre un ensemble de formes

38. Continuité

39. Similarité

40. Proximité
A
B

41. Regroupement par proximité
rapide

42. Regroupement par couleur/forme
plus lent

43. Composition de la page

44. Composition de la page

45. Cohérence de la page

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. 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. 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. Utiliser les outils Google

50. Utiliser les outils Google

51. Utiliser les outils Google

52. Les bons mots aux bons endroits

53. Les bons mots aux bons endroits
Adresse URL
Balise <Title>
Balise <H1>
Tex te
Hypertexte
Meta
données
Img

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. 6
Intégration de
visuels
Utiliser des éléments graphiques comme
partie intégrante de la rédaction

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

58. Pas assez d’images

59. Trop de mots / pas assez d’images

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

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

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

63. Trop de texte
Surchargé Délaissé

64. Parler
de manière imagée

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

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

67. 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. »

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

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