E-commerce Live

Ecrire pour le Web &
ergonomie éditoriale
Wearethewords | info@wearethewords.com
Wearethewords
Content. Marketing. Performance.
4 métiers en marketing et
stratégie de contenu

Des performances sur 3
nive...
Programme
§  Préambule: Internet, écran, comportements

§  L’écrit web, comment ça marche?
§  Organiser l’information à...
Ergonomie éditoriale

Lisibilité
Utilisabilité
Utilité

Wearethewords | info@wearethewords.com

Typologie
Besoins
Comporte...
Information digitale?
Forme

Publication
des données

Traitement
des données

§  Aspects formels –
Lisibilité à l’écran
F...
Humain trop humain
Wearethewords | info@wearethewords.com
La dématérialisation

Wearethewords | info@wearethewords.com
La désorientation et la surcharge
cognitive
§  L’utilisateur est désorienté
lorsqu’il ne peut pas/plus se
représenter le ...
Les limites de chacun(e)
40-60%

Wearethewords | info@wearethewords.com

8-10%
L’internaute cherche, navigue, butine

Wearethewords | info@wearethewords.com
Déficit d’attention -- http://bit.ly/19o75hi

Wearethewords | info@wearethewords.com
Organisez l’information
Wearethewords | info@wearethewords.com
Organiser l’information, c’est
Rassembler

Wearethewords | info@wearethewords.com

Ordonner
Organiser, c’est classer

Wearethewords | info@wearethewords.com

14
Organiser c’est classer
Clés d’entrée fiables

Clés d’accès ambiguës

§ 

Le tri alphabétique – utilisé par défaut
quand a...
{http://bit.ly/1dIkCAk}

Wearethewords | info@wearethewords.com
Organiser, c’est relier
§ 

§ 

§ 

§ 

Énumérez l’information – Quels types
de contenus devez-vous publier
(reportez-...
Organiser, c’est visibiliser

Wearethewords | info@wearethewords.com
Organiser, c’est formaliser
§ 
§ 
§ 
§ 

§ 
§ 
§ 

§ 

des titres de 3 à 4 niveaux à l’intérieur
du texte
interlig...
Structurez votre propos
Wearethewords | info@wearethewords.com
Structurer c’est hiérarchiser

Wearethewords | info@wearethewords.com
Structurer c’est hiérarchiser

Wearethewords | info@wearethewords.com
Structurer, c’est hiérarchiser
§  1 page: 1
sujet
§  Hiérarchie de
l’information
§  Conclusion>
Contexte
§  Liens reli...
Structurer c’est hiérarchiser
Le lecteur adhère plus
vite à l’information
située au-dessus du pli
de la page.
☞ Commencez ...
Structurer, c’est guider
1.  Quel est l’objectif de cette
page?
2.  Pourquoi mes cibles viennent
sur cette page? Que vienn...
§  EPP | 10:13

À vos claviers
Wearethewords | info@wearethewords.com
La méthodologie
§  Qui a fait quoi, quand, où
et pourquoi ? (+ combien
et comment)
§  Quel élément
d’information
l’inter...
Au niveau formel
§  Le fond de l’écran est clair et
uni, les polices de caractère
sont foncées.
§  Les textes sont align...
Au niveau formel
§  Péritexte
§  Titre (70 signes)
§  Description (156
signes)
§  Lien hypertexte
§  Navigation
§  A...
Au niveau rédactionnel
§ 

Être concis ne veut pas dire,
nécessairement, faire court « au
total », même si la longueur d'...
Au niveau rédactionnel
Péritexte
Corps de texte + image

Incitant à l’action
Wearethewords | info@wearethewords.com

Périt...
Au niveau rédactionnel

Wearethewords | info@wearethewords.com
Péritexte, corps de texte, call to action
§  Microcontenu
§  Macrocontenu
§  Appel à l’action

Wearethewords | info@wea...
Ecrire pour le Web, c’est écrire pour Google
§ 
§ 
§ 
§ 
§ 
§ 
§ 
§ 
§ 
§ 
§ 
§ 
§ 

Description du lecteur c...
Au niveau rédactionnel

Wearethewords | info@wearethewords.com
Abonnez-vous à nos newsletters
Wearethewords.com (mensuelle)
> http://eepurl.com/f300D

Wearethewords | info@wearethewords...
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.:+3...
Prochain SlideShare
Chargement dans…5
×

Ecoecrirepourleweb0214 140213050450-phpapp01

379 vues

Publié le

Publié dans : Marketing
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
379
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
10
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Ecoecrirepourleweb0214 140213050450-phpapp01

  1. 1. E-commerce Live Ecrire pour le Web & ergonomie éditoriale Wearethewords | info@wearethewords.com
  2. 2. Wearethewords Content. Marketing. Performance. 4 métiers en marketing et stratégie de contenu Des performances sur 3 niveaux de retour: §  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 §  R.O.I. > Retour sur investissement §  R.O.A. > Retour sur attention §  R.O.C. > Retour sur contenu Wearethewords | info@wearethewords.com 2
  3. 3. Programme §  Préambule: Internet, écran, comportements §  L’écrit web, comment ça marche? §  Organiser l’information à l’écran §  Structurer l’information à l’écran Wearethewords | info@wearethewords.com
  4. 4. Ergonomie éditoriale Lisibilité Utilisabilité Utilité Wearethewords | info@wearethewords.com Typologie Besoins Comportements
  5. 5. Information digitale? Forme Publication des données Traitement des données §  Aspects formels – Lisibilité à l’écran Fond §  Aspects rédactionnels – Règles formelles Technique La gestion des données Wearethewords | info@wearethewords.com §  Aspects techniques – Interface et hypertexte
  6. 6. Humain trop humain Wearethewords | info@wearethewords.com
  7. 7. La dématérialisation Wearethewords | info@wearethewords.com
  8. 8. La désorientation et la surcharge cognitive §  L’utilisateur est désorienté lorsqu’il 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 se retrouve "perdu". Il « saute » d'un nœud d'information à un autre sans forcément savoir où cela va le mener. Wearethewords | info@wearethewords.com §  Trop d’informations (pertinentes et/ou non pertinentes) sollicitent la mémoire de travail. §  L’internaute doit décider quelles informations sont en lien avec sa recherche, son besoin, plutôt que de se concentrer directement sur l’utilisation de l’interface. §  Difficulté à comprendre et intégrer la mécanique de l’interface : son fonctionnement, son dispositif de communication et son système de représentation.
  9. 9. Les limites de chacun(e) 40-60% Wearethewords | info@wearethewords.com 8-10%
  10. 10. L’internaute cherche, navigue, butine Wearethewords | info@wearethewords.com
  11. 11. Déficit d’attention -- http://bit.ly/19o75hi Wearethewords | info@wearethewords.com
  12. 12. Organisez l’information Wearethewords | info@wearethewords.com
  13. 13. Organiser l’information, c’est Rassembler Wearethewords | info@wearethewords.com Ordonner
  14. 14. Organiser, c’est classer Wearethewords | info@wearethewords.com 14
  15. 15. Organiser c’est classer Clés d’entrée fiables Clés d’accès ambiguës §  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 thématique – On classe les informations par sujet. Les catégories « parlent » aux cibles. §  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 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. §  Le tri géographique – Logique de localisation, à l’aide d’une carte, d’un plan interactif. Wearethewords | info@wearethewords.com 15
  16. 16. {http://bit.ly/1dIkCAk} Wearethewords | info@wearethewords.com
  17. 17. 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). Wearethewords | info@wearethewords.com
  18. 18. Organiser, c’est visibiliser Wearethewords | info@wearethewords.com
  19. 19. 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. Wearethewords | info@wearethewords.com
  20. 20. Structurez votre propos Wearethewords | info@wearethewords.com
  21. 21. Structurer c’est hiérarchiser Wearethewords | info@wearethewords.com
  22. 22. Structurer c’est hiérarchiser Wearethewords | info@wearethewords.com
  23. 23. Structurer, c’est hiérarchiser §  1 page: 1 sujet §  Hiérarchie de l’information §  Conclusion> Contexte §  Liens reliés Wearethewords | info@wearethewords.com
  24. 24. 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. Wearethewords | info@wearethewords.com
  25. 25. Structurer, c’est guider 1.  Quel est l’objectif de cette page? 2.  Pourquoi mes cibles viennent sur cette page? Que viennentelles 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? Wearethewords | info@wearethewords.com 25
  26. 26. §  EPP | 10:13 À vos claviers Wearethewords | info@wearethewords.com
  27. 27. La méthodologie §  Qui a fait quoi, quand, où et pourquoi ? (+ combien et comment) §  Quel élément d’information l’internaute va-t-il vouloir connaître en premier ? §  Permet de structurer l’information. Wearethewords | info@wearethewords.com
  28. 28. 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. Wearethewords | info@wearethewords.com
  29. 29. Au niveau formel §  Péritexte §  Titre (70 signes) §  Description (156 signes) §  Lien hypertexte §  Navigation §  Alt tag Wearethewords | info@wearethewords.com §  §  §  §  §  §  Corps de texte Sous-titres Aides à la lecture Balises html Hypertexte Hypermédia
  30. 30. Au niveau rédactionnel §  Être concis ne veut pas dire, nécessairement, faire court « au total », même si la longueur d'un texte influence aussi sa clarté. §  §  Phrases courtes, voix active, impératif, présent historique, … Syntaxe optimale : mots, tournures les plus simples §  §  Être économe: en effets, en images et métaphores, en mots, en moyens, en messages. §  Être parcimonieux: écrire avec mesure, éviter l’inutile. §  §  §  Votre discours est concret  §  §  §  §  Economisez les adjectifs et adverbes (surtout ceux qui se terminent par – ment Méfiez-vous des mots abstraits (ceux en –isme et en –tion, notamment) Remplacez les participes présents par une autre forme Votre propos est précis, concret  §  Wearethewords | info@wearethewords.com Pratiquez un langage plus convivial, interactif Evitez le jargon Définissez les concepts et noms de produits ou services, utilisez des conjugaisons simples, évitez les jeux de mots et circonlocutions. Donnez du sens réel à vos message (« Get the name of the dog »)
  31. 31. Au niveau rédactionnel Péritexte Corps de texte + image Incitant à l’action Wearethewords | info@wearethewords.com Péritexte §  Titre, Accroche, Image, Lien Corps de texte §  Intertitres, paragraphes, aides à la lecture, images, tableaux, Incitant à l’action §  hypertexte, boutons
  32. 32. Au niveau rédactionnel Wearethewords | info@wearethewords.com
  33. 33. Péritexte, corps de texte, call to action §  Microcontenu §  Macrocontenu §  Appel à l’action Wearethewords | info@wearethewords.com
  34. 34. Ecrire pour le Web, c’est écrire pour Google §  §  §  §  §  §  §  §  §  §  §  §  §  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 250 mots minimum. Prise en compte des formes, de l'éloignement et de l'ordre des mots Incitant à l'action en bas de page Wearethewords | info@wearethewords.com
  35. 35. Au niveau rédactionnel Wearethewords | info@wearethewords.com
  36. 36. Abonnez-vous à nos newsletters Wearethewords.com (mensuelle) > http://eepurl.com/f300D Wearethewords | info@wearethewords.com Ecrirepourleweb.com (hebdomadaire) > http://eepurl.com/Ba6ar 36
  37. 37. 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 | info@wearethewords.com @wearethewords @ecrirepourleweb wearethewords

×