Ecriture web et ergonomie éditoriale

Wearethewords | info@wearethewords.com
E-Day PME bxl
IZEO | 08.05.14
Ecrire pour le Web &
ergonomie éditoriale

Wearethewords
Content. Marketing. Performance.
4 métiers en marketing et
stratégie de contenu
§  le conseil éditorial pour
aligner vos performances
sur vos besoins
§  la production de contenus
sur mesure pour
consolider votre présence
en ligne
§  l'animation éditoriale
pour gérer vos ﬂux de
contenus
§  la formation pour
accompagner vos équipes
Des performances sur 3
niveaux de retour:
§  R.O.I. > Retour sur
investissement
§  R.O.A. > Retour sur
attention
§  R.O.C. > Retour sur
contenu
2

Quelques références
3

Abonnez-vous à nos newsletters
Wearethewords.com (mensuelle)
> http://eepurl.com/f300D
Ecrirepourleweb.com (hebdomadaire)
> http://eepurl.com/Ba6ar
4

Les clés pour un écrit Web optimisé
Programme
§  Le Web, Google et
l’utilisateur
§  Réapprendre à
écrire
§  Organiser
l’information
§  Hiérarchiser
l’information
3 types de contraintes
§  Techniques
§  Formelles
§  Rédactionnelles

Un métier à part entière

Maximiser la lisibilité et la perception
•  Présenter l’information d’une
certaine façon
•  Adapter ses écrits aux normes et
usages
•  Écrire pour des utilisateurs

Présenter l’information d’une certaine façon

Adapter ses écrits aux normes et usages
1.  Activation de la
marque
2.  SEO
3.  Traﬁc
4.  Acquisition
5.  Fidélisation
6.  Vente
2
6
1
3
4 5
9

Adapter ses écrits aux normes

Déﬁcit d’attention -- http://bit.ly/19o75hi

Écrire pour des utilisateurs

Ecrire pour des utilisateurs

Écrire pour des utilisateurs
Besoins
Comportements
Lisibilité
Utilisabilité

On ne lit pas sur le Web
comme sur le papier

Des comportements
§  Lorsqu’il arrive sur un site,
l’internaute survole les
contenus ou les lit en
diagonale, dans l’ordre de son
choix.
§  Le rédacteur Web doit tenir
compte de ces
comportements s’il veut
attirer l’attention et maintenir
l’intérêt du lecteur sur son
site.

Des particularismes

Des généralités
Désorientation
§  L’utilisateur ne peut pas/
plus se représenter le
lien entre ce qu'il est en
train de faire et son but
de départ.
§  Il est perdu et saute d'un
nœud d'information à un
autre sans forcément
savoir où cela va le
mener.
Surcharge cognitive
§  Trop d’informations
sollicitent la mémoire de
travail. L’internaute doit
décider lesquelles sont
en lien avec sa recherche,
son besoin.
§  Difﬁculté à comprendre et
intégrer la mécanique de
l’interface : son
fonctionnement, son
dispositif de
communication et son
système de
représentation.

Contraintes techniques

Ecrire pour le Web n’existe pas
Google
Dispositif
Utilisateur
§  Indexation
§  Syndication
§  Structuration
§  Intégration
§  Publication
§  Promotion

Ecrire pour le Web est un travail de localisation

Ecrire pour le Web est un état d’esprit
Publication
des données
Traitement
des données
La gestion
des données
Technique
Fond
Forme §  Le Web ne contient
pas que des pages,
il contient des
données.
§  Ces données sont
stockées dans des
bases de données
§  Ces bases de
données peuvent
être relationnelles.

Ecrire pour le Web est la partie d’un tout
Déﬁnir l’apparence
Typo
Modèles de page
Couleur
Sémiologie
Ajouter du contenu
Textes
Photos
Vidéos
Fiches Produits
Ajouter des fonctionnalités
Formulaires
Boutons de partage
Commentaires
Contenus reliés

Ecrire pour le Web est un processus

Contraintes rédactionnelles

Une écriture d’héritage
§  Techniques de
rédaction
§  Techniques
typographiques
§  Techniques de
signalisation

Techniques de rédaction
Quoi, qui, pourquoi?
Quand, où?
Combien,
comment?

Techniques typographiques

Techniques de signage
Chemin
• Créez des chemins de navigation clairs
Frontières
• Indiquez clairement où les hyperliens, boutons, incitants, etc. emmènent le visiteur
Zones
• Attribuez à chaque rubrique particulière une identité, un « paysage » propre – sans la dissocier
complètement de son environnement plus large.
Embranchements
• Optimisez vos pages de section pour qu’elles soient des carrefours, des totems clairs et avenants.
• Ne multipliez pas inutilement les embranchements pour ne pas effrayer votre visiteur en
mouvement.
Points de repères
• Votre ﬁl d’Ariane, votre navigation principale et locale, le graphisme des pages, les styles
typographiques sont autant de signes qui doivent guider le visiteur sur le «long cours».

Au niveau formel
§  Le fond de l’écran est clair et
uni, les polices de caractère
sont foncées.
§  Les textes sont alignés à
gauche, de préférence sur une
seule colonne
§  Les lignes de texte à l’écran ne
dépassent pas 60 à 70 signes.
§  Les éléments textuels sont
composés en casses alternées
(première lettre en majuscule,
le reste en minuscules).
§  Pas d’italique pour les citations
longues. Au besoin, associez la
grasse à l’italique, mais limitez
l’effet à une phrase ou deux
seulement (le chapô, par
exemple).
§  Le soulignement est réservé
exclusivement aux hyperliens.

Une écriture en fragments

Une écriture en fragments
§  Microcontenu
§  Macrocontenu
§  Appel à l’action

Une écriture au couteau
La concision est la qualité essentielle de
l’écrit Web: d'un ensemble de termes
inscrits dans une énumération, une série
d'exemples, ou constituant tout
simplement des redites, vous devez savoir
choisir le terme unique qui en sera le
juste équivalent.

Organisez l’information

Organiser l’information, c’est
Rassembler Ordonner

Organiser, c’est classer
42

Organiser c’est classer
Clés d’entrée ﬁables
§  Le tri alphabétique – utilisé par défaut
quand aucune autre logique n’est
applicable ou lorsque les éléments de
la catégorie sont nombreux.
§  Le tri chronologique – Les éléments
les plus récents apparaissent en
premier. Choix le plus courant pour
les actualités, etc. Les éléments les
plus récents apparaissent en haut de
l’écran.
§  Le tri géographique – Logique de
localisation, à l’aide d’une carte, d’un
plan interactif.
Clés d’accès ambiguës
§  Le tri thématique – On classe les
informations par sujet. Les catégories
« parlent » aux cibles.
§  Le tri typologique – Les contenus sont
triés en fonction de leur nature :
articles, photos, règlements,
publications, etc.
§  Le tri pratique – Les informations
sont organisées en fonction des
tâches qu’elles supposent. Cf. les
sites immobiliers où les internautes
viennent pour acheter, louer, vendre,
etc.
§  Le tri identitaire – Les contenus sont
rangés selon les proﬁls
d’utilisateurs : entreprises,
particuliers, presse, etc. Une méthode
utilisée beaucoup sur les sites
institutionnels.
43

{http://bit.ly/1dIkCAk}

Organiser, c’est relier
§  Énumérez l’information – Quels types
de contenus devez-vous publier
(reportez-vous à la leçon 2 : Typologie
des contenus).
§  Classez et triez l’information – Vous
devrez rassembler les types de
contenus qui se ressemblent, créer
des ensembles, des catégories pour
les groupes d'éléments.
§  Formalisez le vocabulaire de
navigation – les noms des boutons
d’action, des hyperliens, des menus,
catégories et autres éléments de la
navigation.
§  Hiérarchisez l’information –
Structurez ces groupes d’information
en partant du plus général au plus
particulier. Placez d’abord les
éléments les plus importants, que ce
soit au niveau vertical (au sein d’un
même texte) ou horizontal (entre
plusieurs textes).

Organiser, c’est visibiliser

Organiser, c’est formaliser
§  des titres de 3 à 4 niveaux à l’intérieur
du texte
§  interligne et espacement sufﬁsants ;
§  paragraphes de type chapô, utilisés pour
les accroches, introductions, etc. ;
§  3 formats d’hyperlien (« vierges »,
survolés et visités) + ancres (liens
internes)
§  des listes à puces de 2 niveaux, pour les
énumérations ;
§  un style pour les citations, qui permet de
mettre en relief des témoignages ;
§  un style « encadré » pour faire ressortir
certains types de contenus (exemples,
cas pratiques, chiffre, …) et créer des
repères visuels
§  un style Tableaux pour présenter des
consignes, des comparaisons de
produits, etc.

Structurez votre propos

Structurer, c’est hiérarchiser
§  1 page: 1
sujet
§  Hiérarchie de
l’information
§  Conclusion>
Contexte
§  Liens reliés

Structurer c’est hiérarchiser
Le lecteur adhère plus
vite à l’information
située au-dessus du pli
de la page.
☞ Commencez toujours
par l’essentiel – la
conclusion
☞ Puis, développez les
causalités et
circonstances.

Structurer, c’est guider
1.  Quel est l’objectif de cette
page?
2.  Pourquoi mes cibles viennent
sur cette page? Que viennent-
elles y faire? Que veulent-elles
y trouver?
3.  Quelles sont les questions de
mon utilisateur type? Quel
vocabulaire utilise-t-il?
4.  Quels sont les points
déterminants dans sa décision?
5.  Quelle est la valeur ajoutée de
mon produit?
51

Péritexte, corps de texte, call to action
§  Microcontenu
§  Macrocontenu
§  Appel à l’action

Au niveau formel
§  Péritexte
§  Titre (70 signes)
§  Description (156
signes)
§  Lien hypertexte
§  Navigation
§  Alt tag
§  Corps de texte
§  Sous-titres
§  Aides à la lecture
§  Balises html
§  Hypertexte
§  Hypermédia

Au niveau rédactionnel
Péritexte
Corps de texte + image
Incitant à l’action
Péritexte
§  Titre, Accroche,
Image, Lien
Corps de texte
§  Intertitres,
paragraphes, aides
à la lecture, images,
tableaux,
§  hypertexte, boutons

Comment s’assurer
que ça marche?

Check-list Objectifs
1.  Quel est l’objectif de cette page?
2.  Pourquoi mes cibles viennent sur cette page?
Que viennent-elles y faire? Que veulent-elles y
trouver?
3.  Quelles sont les questions de mon utilisateur
type? Quel vocabulaire utilise-t-il?
4.  Quels sont les points déterminants dans sa
décision?
5.  Quelle est la valeur ajoutée de mon produit?
56

Feuille de style
§  des titres de 3 à 4 niveaux à l’intérieur
du texte
§  interligne et espacement sufﬁsants ;
§  paragraphes de type chapô, utilisés pour
les accroches, introductions, etc. ;
§  3 formats d’hyperlien (« vierges »,
survolés et visités) + ancres (liens
internes)
§  des listes à puces de 2 niveaux, pour les
énumérations ;
§  un style pour les citations, qui permet de
mettre en relief des témoignages ;
§  un style « encadré » pour faire ressortir
certains types de contenus (exemples,
cas pratiques, chiffre, …) et créer des
repères visuels
§  un style Tableaux pour présenter des
consignes, des comparaisons de
produits, etc.
http://bit.ly/1dQrSkm

Le gabarit éditorial
LOGO | BRANDING
NAVIGATION PRINCIPALE
NAV.
LOCALE
Titre + Chapô +
Image
NAV.
CROISÉE
Corps de texte
Intertitres
Aides à la lecture

Format Description # signes
Repère Indicateur, classement, suivi de prix 3000s
Nécro Parcours, dates clés, inﬂuences 4000s
Point de vue 4 à 5 informations courtes sur une thématique 3000s
Com. presse Informations de service à fournir par le client 1500s
Fiche Produit Info pratiques sur un produit, sujet, destination, recette 3000s
Interview 3 à 4 questions min. + photo ad hoc 4000s
Sélection Sélection de produits sur un même sujet; 3 entrées min. 3000s
Brève Dépêche à diffusion rapide 800s
Agenda Evénements importants sur un sujet (3 min.) 2000s
Dossier Panorama d’un sujet ; plusieurs interlocuteurs 4000s
Annonce Annonce d’un événement à venir 3000s
Commentaire Commentaire à une entrée (diaporama, quizz, ...) 800s
Sommaire Récapitulatif des points marquants d’un événement 4000s
Comparatif Mise en perspective d’au moins deux produits 3000s
Compte-rendu Compte-rendu sur un phénomène, une tendance 3000s
Quizz Jeu illustré de 3 à 5 questions 4000s
Diaporama Album de 10 images commentées sur un thème 4000s
Insolite Sujet ou traitement décalé, pouvant prêter à sourire 1500s
Article Traitement général d’un sujet général 2000s
Sondage Coup de sonde et commentaire 1500s

La check-list Optimisation

La matrice de référencement
§  Description du lecteur ciblé.
§  3 mots-clés (par ordre d’importance)
§  Balise Title et Balise Meta Description
§  Titre d'article contient le 1e mot clé et est codé H1
§  L'accroche comporte le 1e mot clé.
§  Après un ou deux paragraphes (contenant le 1e mot-clé), sous-titre
(contenant le 1e mot clé) codé H2.
§  Le 1e mot clé apparaît encore dans le 1e paragraphe sous ce sous-titre.
§  Ce 1e mot clé est répété plusieurs fois.
§  Usage des aides à la lecture
§  Les 2 autres mots clés sont distillés dans le corps de la page.
§  Le texte comporte 100 mots minimum.
§  Prise en compte des formes, de l'éloignement et de l'ordre des mots
§  Incitant à l'action en bas de page

La checkList Qualité des contenus
(http://bit.ly/1foqemy)

Contact
21-23 Boulevard Haussmann | F-75009 Paris
Tél.: +33 1 84 17 82 43
300 avenue Van Volxem | B-1190 Bruxelles
Tél.:+32 2 340 16 80
www.facebook.com/wearethewords
@wearethewords
@ecrirepourleweb
wearethewords

Ecriture web et ergonomie éditoriale

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (10)

Similaire à Ecriture web et ergonomie éditoriale

Similaire à Ecriture web et ergonomie éditoriale (20)

Plus de Wearethewords

Plus de Wearethewords (12)

Ecriture web et ergonomie éditoriale