Ecoecrirepourleweb0214 140213050450-phpapp01

37
Wearethewords | [email protected] E-commerce Live Ecrire pour le Web & ergonomie éditoriale

Transcript of Ecoecrirepourleweb0214 140213050450-phpapp01

Page 1: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

E-commerce Live

Ecrire pour le Web & ergonomie éditoriale

Page 2: Ecoecrirepourleweb0214 140213050450-phpapp01

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 3: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

Programme

§  Préambule: Internet, écran, comportements §  L’écrit web, comment ça marche? §  Organiser l’information à l’écran §  Structurer l’information à l’écran

Page 4: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

Ergonomie éditoriale

Lisibilité Utilisabilité Utilité

Typologie Besoins Comportements

Page 5: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

Information digitale?

§  Aspects formels – Lisibilité à l’écran

§  Aspects rédactionnels – Règles formelles

§  Aspects techniques – Interface et hypertexte

Forme

Publication des données

Traitement des données

La gestion des données

Technique

Fond

Page 6: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

Humain trop humain

Page 7: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

La dématérialisation

Page 8: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

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.

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

Page 9: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

Les limites de chacun(e)

40-60% 8-10%

Page 10: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

L’internaute cherche, navigue, butine

Page 11: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

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

Page 12: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

Organisez l’information

Page 13: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

Organiser l’information, c’est

Rassembler Ordonner

Page 14: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

Organiser, c’est classer

14

Page 15: Ecoecrirepourleweb0214 140213050450-phpapp01

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.

15

Page 16: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

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

Page 17: Ecoecrirepourleweb0214 140213050450-phpapp01

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 18: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

Organiser, c’est visibiliser

Page 19: Ecoecrirepourleweb0214 140213050450-phpapp01

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 20: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

Structurez votre propos

Page 21: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

Structurer c’est hiérarchiser

Page 22: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

Structurer c’est hiérarchiser

Page 23: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

Structurer, c’est hiérarchiser

§  1 page: 1 sujet

§  Hiérarchie de l’information

§  Conclusion>Contexte

§  Liens reliés

Page 24: Ecoecrirepourleweb0214 140213050450-phpapp01

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 25: Ecoecrirepourleweb0214 140213050450-phpapp01

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?

25

Page 26: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

À vos claviers

§  EPP | 10:13

Page 27: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

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.

Page 28: Ecoecrirepourleweb0214 140213050450-phpapp01

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 29: Ecoecrirepourleweb0214 140213050450-phpapp01

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 30: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

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

§  Être économe: en effets, en images et métaphores, en mots, en moyens, en messages.

§  Être parcimonieux: écrire avec mesure, éviter l’inutile.

§  Phrases courtes, voix active, impératif, présent historique, …

§  Syntaxe optimale : mots, tournures les plus simples §  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.

§  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  §  Donnez du sens réel à vos message

(« Get the name of the dog »)

Page 31: Ecoecrirepourleweb0214 140213050450-phpapp01

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 32: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

Au niveau rédactionnel

Page 33: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

Péritexte, corps de texte, call to action

§  Microcontenu §  Macrocontenu §  Appel à l’action

Page 34: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

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

Page 35: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

Au niveau rédactionnel

Page 36: Ecoecrirepourleweb0214 140213050450-phpapp01

Wearethewords | [email protected]

Abonnez-vous à nos newsletters

Wearethewords.com (mensuelle) > http://eepurl.com/f300D

Ecrirepourleweb.com (hebdomadaire) > http://eepurl.com/Ba6ar

36

Page 37: Ecoecrirepourleweb0214 140213050450-phpapp01

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