Download - Ecriture web-et-ergonomie-editoriale
![Page 1: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/1.jpg)
Wearethewords | [email protected]
E-Day PME bxl IZEO | 08.05.14
Ecrire pour le Web & ergonomie éditoriale
![Page 2: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/2.jpg)
Wearethewords | [email protected]
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 flux 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
![Page 4: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/4.jpg)
Wearethewords | [email protected]
Abonnez-vous à nos newsletters
Wearethewords.com (mensuelle) > http://eepurl.com/f300D
Ecrirepourleweb.com (hebdomadaire) > http://eepurl.com/Ba6ar
4
![Page 5: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/5.jpg)
Wearethewords | [email protected]
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
![Page 7: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/7.jpg)
Wearethewords | [email protected]
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
![Page 9: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/9.jpg)
Wearethewords | [email protected]
Adapter ses écrits aux normes et usages
1. Activation de la marque
2. SEO 3. Trafic 4. Acquisition 5. Fidélisation 6. Vente
2
6
1 3
4 5
9
![Page 12: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/12.jpg)
Wearethewords | [email protected]
Adapter ses écrits aux normes et usages Déficit d’attention -- http://bit.ly/19o75hi
![Page 16: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/16.jpg)
Wearethewords | [email protected]
Écrire pour des utilisateurs
Besoins Comportements
Lisibilité Utilisabilité
![Page 18: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/18.jpg)
Wearethewords | [email protected]
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.
![Page 20: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/20.jpg)
Wearethewords | [email protected]
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.
§ Difficulté à comprendre et intégrer la mécanique de l’interface : son fonctionnement, son dispositif de communication et son système de représentation.
![Page 22: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/22.jpg)
Wearethewords | [email protected]
Ecrire pour le Web n’existe pas
Dispositif
Utilisateur
§ Indexation § Syndication § Structuration § Intégration § Publication § Promotion
![Page 24: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/24.jpg)
Wearethewords | [email protected]
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.
![Page 25: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/25.jpg)
Wearethewords | [email protected]
Ecrire pour le Web est la partie d’un tout
Définir 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
![Page 28: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/28.jpg)
Wearethewords | [email protected]
Une écriture d’héritage
§ Techniques de rédaction
§ Techniques typographiques
§ Techniques de signalisation
![Page 29: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/29.jpg)
Wearethewords | [email protected]
Techniques de rédaction
Quoi, qui, pourquoi?
Quand, où?
Combien, comment?
![Page 31: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/31.jpg)
Wearethewords | [email protected]
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 fil 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».
![Page 32: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/32.jpg)
Wearethewords | [email protected]
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.
![Page 38: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/38.jpg)
Wearethewords | [email protected]
Une écriture en fragments
§ Microcontenu § Macrocontenu § Appel à l’action
![Page 39: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/39.jpg)
Wearethewords | [email protected]
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.
![Page 43: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/43.jpg)
Wearethewords | [email protected]
Organiser c’est classer
Clés d’entrée fiables § 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 profils d’utilisateurs : entreprises, particuliers, presse, etc. Une méthode utilisée beaucoup sur les sites institutionnels.
43
![Page 45: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/45.jpg)
Wearethewords | [email protected]
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).
![Page 47: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/47.jpg)
Wearethewords | [email protected]
Organiser, c’est formaliser
§ des titres de 3 à 4 niveaux à l’intérieur du texte
§ interligne et espacement suffisants ; § 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.
![Page 49: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/49.jpg)
Wearethewords | [email protected]
Structurer, c’est hiérarchiser
§ 1 page: 1 sujet
§ Hiérarchie de l’information
§ Conclusion>Contexte
§ Liens reliés
![Page 50: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/50.jpg)
Wearethewords | [email protected]
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.
![Page 51: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/51.jpg)
Wearethewords | [email protected]
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
![Page 52: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/52.jpg)
Wearethewords | [email protected]
Péritexte, corps de texte, call to action
§ Microcontenu § Macrocontenu § Appel à l’action
![Page 53: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/53.jpg)
Wearethewords | [email protected]
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
![Page 54: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/54.jpg)
Wearethewords | [email protected]
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,
Incitant à l’action § hypertexte, boutons
![Page 56: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/56.jpg)
Wearethewords | [email protected]
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
![Page 57: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/57.jpg)
Wearethewords | [email protected]
Feuille de style
§ des titres de 3 à 4 niveaux à l’intérieur du texte
§ interligne et espacement suffisants ; § 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
![Page 58: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/58.jpg)
Wearethewords | [email protected]
Le gabarit éditorial
LOGO | BRANDING NAVIGATION PRINCIPALE NAV. LOCALE
Titre + Chapô + Image
NAV. CROISÉE
Corps de texte Intertitres Aides à la lecture
Incitant à l’action
![Page 59: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/59.jpg)
Wearethewords | [email protected]
Format Description # signes
Repère Indicateur, classement, suivi de prix 3000s
Nécro Parcours, dates clés, influences 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
![Page 61: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/61.jpg)
Wearethewords | [email protected]
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
![Page 63: Ecriture web-et-ergonomie-editoriale](https://reader034.vdocuments.us/reader034/viewer/2022051411/545c7d07b1af9f320a8b47a8/html5/thumbnails/63.jpg)
Wearethewords | [email protected]
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