Cours rédaction web avril 2012

Rédaction Web

dimanche 9 avril 2023

Introduction

Présentation de la formation et des participants

Spécificités de la lecture web

Adapter la rédaction des pages web au comportement

de l’internaute

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

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)

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é

Principes de la rédaction web

Les 6 principesutiles pour rédiger sur le web

Principes de la rédaction web

AccessibilitéDécoupagePertinence

TitrageCohérence

Intégration de visuels

AccessibilitéRendre le contenu accessible pour tous les

internautes

1

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

É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…»

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

Rendre un contenu accessible

• Présentation pertinente– Exercice « Accès à l’information environnementale »– Mettre en forme de manière pertinente avec les styles– Document Word avec styles prédéfinis

DécoupageScinder l’information en petites unités, plus

faciles à assimiler

2

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

Test 1PommeRugbyMathématiqueCitronVolleyPruneTennis

ReligionBananeFootball

MirabelleGolf

ChimieGymnastique

PoireOrange

BiologieInformatique

Vérité Handball

Économie

But : mémoriser le plus de mots en 20 sec (temps moyen de visibilité)

Découpage

• Réécriture par décomposition et regroupement– Exercice « Expo Bonsaïs»– Scinder et regrouper de manière pertinente– Document Word

PertinenceRegrouper les informations qui portent sur un

même sujet

3

Regroupement pertinentPommePoireBananeOrangeCitronPruneMirabelle

RugbyFootballHandballVolleyGolfGymnastiqueTennis

MathématiqueBiologieInformatiqueVéritéReligionChimieÉconomie

Test 2SourisImprimanteClavierÉcranLogicielModemScanner

CarotteCeleriPanaisChou-fleurArtichautTomateSalade

ViolonPianoGuitareMélodieCompositionTrompetteFlute

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

La bonne info au bon endroit

Accroche

Corps de texte

Détails

La bonne info au bon endroit

Pitch 5 WDéveloppement

5 W et 2 H

infos pratiques, liens, autour de l’article

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

Regrouper grâce aux questions

• Réécriture par regroupement– Exercice « Greeters»– Scinder et regrouper de manière pertinente– Se poser les bonnes questions

• Travail à 2• Document Word

Titrage

Attribuer un titre à chaque bloc d’information

4

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

TitrageFruits Sport SciencePommePoireBananeOrangeCitronPruneMirabelle

RugbyFootballHandballVolleyGolfGymnastiqueTennis

MathématiqueBiologieInformatiqueVéritéReligionChimieÉconomie

Test 3Cuisine italienne Bricolage PâtisserieTiramisuCannelloniBolognaiseLasagneRisottoPizzaHuile d’olive

Caisse à outils MarteauClé anglaiseVisMètreForeuseClou

FarineSucreOeufMouleGâteauGaufreCrème fraîche

TitrageType Identifie Exemples

GénériqueFonction du bloc d’information ( rédacteur)

Introduction Contexte Objectif Définition

Contenu Contenu du bloc d’information

Le monde du web aujourd’hui Emplacement des postes d’alarme Modes d’affichage d’un diaporama

Combinaison Les 2 Définition : le bloc d’information Procédure : encaissement d’un chèque

Titrage

• Écriture d’une page web– Exercice « Recette de cuisine» : 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

Trouver titres et bons mots

• Réécriture avec titrage– Exercice « Restaurant le Triskell»– Scinder et titrer de manière pertinente– Se poser les bonnes questions– Rédiger des titres significatifs

Pertinence

• Réécriture par décomposition et regroupement– Exercice « Programme Formation Powerpoint»

• Scinder et regrouper de manière pertinente• Titrer les parties

CohérencePour un contenu semblable, utiliser les mêmes

termes, formats, …

5

Test 3Cuisine italienne Bricolage PâtisserieTiramisuCannelloniBolognaiseLasagneRisottoPizzaHuile d’olive

Caisse à outils MarteauClé anglaiseVisMètreForeuseClou

FarineSucreOeufMouleGâteauGaufreCrème fraîche

Test 4 - cohérencePâtes Outils PâtisserieSpaghettiCannelloniTortelliniLasagneRigatoniTagliatellePapardele

Tournevis MarteauTenailleClé anglaiseScieCutterPince

FarineSucreSelOeufBeurreVanilleCrème fraîche

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– emploi du « vous »

• Mise en forme uniforme• Éléments typiques

– Symboles– Pictogrammes

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

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

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

Texte

HypertexteMeta

données

Img

Trouver titres et bons mots

• Réécriture avec titrage et mots-clés– Exercice « en binôme»

• 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

Intégration de visuels

Utiliser des éléments graphiques comme partie intégrante de la rédaction

6

La mort par la rédaction web

Comment causer sa propre perte

TROP DE MOTS

Pas assez d’images

Test 3Cuisine italienne Bricolage PâtisserieTiramisuCannelloniBolognaiseLasagneRisottoPizzaHuile d’olive

Caisse à outils MarteauClé anglaiseVisMètreForeuseClou

FarineSucreOeufMouleGâteauGaufreCrème fraîche

Test 3

Cuisine Italie• Tiramisu• Cannelloni• Bolognaise• Lasagne• Risotto• Pizza• Huile d’olive

Bricolage• Caisse à outils • Marteau• Clé anglaise• Vis• Mètre• Foreuse• Clou

Pâtisserie• Farine• Sucre• Oeuf• Moule• Gâteau• Gaufre• Crème

Cerveau gauche/droite

image

langage

•Vision•Émotion

•Texte écrit•Raison•Logique

Trop de texte

Surchargé Délaissé

Parler de manière imagée

Exemple: le storytelling

Intégration de visuels

• Liste à puces• Tableau• Illustration• Pictogramme• Graphique• Diagramme

Visuels et contenu

Visuel Contenu

Tableau Tableau de marche à suivre (procédure)

Logigramme Processus début-fin

Schéma Structure

Diagramme Flux et fonctionnement

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

Intégration de visuels

Si le montant de la facture est Alors

< 25 € Refusez le crédit

Entre 25 € et 500 € Accordez le crédit

>500 € Consultez le supérieur

Intégration de visuels

• Décrire une structure

Bruxelles Formation

Tremplin Bureau et services Industrie

Intégration de visuels

• Exercice 1– Expliquer les catégories de permis de conduire

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