Download Ecrire pour le web

Ecrire pour le web
Optimiser le contenu éditorial hypertexte
[email protected]
CNRS
11 et 12 septembre 2007
Les Issambres
Ce qui a changé avec Internet
Qu’est-ce qui a changé avec Internet
> Rapport à l’espace
Qu’est-ce qui a changé avec Internet
> Rapport au temps
#1- Immédiateté
1 mn
Qu’est-ce qui a changé avec Internet
> Rapport au temps
#2- Flux continu VS périodique
Qu’est-ce qui a changé avec Internet
> Mode d’indexation
Dewey
(classification décimale)
TAGS
(mots clé)
Qu’est-ce qui a changé avec Internet
> Mode d’archivage
2006
1997
www.archive.org
Qu’est-ce qui a changé avec Internet
> Demande de valeur ajoutée
Services
Contenu
Transparence
Valeur d’usage
Qu’est-ce qui a changé avec Internet
> Demande de valeur ajoutée
¾ Plus grande attente du public
- public moins indulgent, moins patient, plus averti
¾ Besoin de réactivité / immédiateté
¾ Besoin de services
Existence d’un nouveau territoire de communication
vers lequel il faut aller, en y renforçant sa crédibilité, avec
ses valeurs
Comportement :
Réactivité – Simplicité - Usabilité
Les modes de lecture d’un
contenu multimédia
From Jean-Marc Hardy
Les modes de lecture d’un contenu multimédia
> Recherche / Consommation
Les modes de lecture d’un contenu multimédia
> Scanning / Reading
> 79 % des internautes
lisent en diagonales
¾16% lisent mot à mot
¾25% quittent le site à
chaque clic
Les modes de lecture d’un contenu multimédia
> Textes VS Images
Les modes de lecture d’un contenu multimédia
> Lecture en « F »
(comme fast)
From Jakob Nielsen
http://www.useit.com/alertbox/reading_pattern.html
Les modes de lecture d’un contenu multimédia
> Lecture en « F »
On remarque que l'attention des utilisateurs commence dans le haut de la page
Les yeux suivent une verticale. Il faut donc guider le regard
Dés qu'un élément intéressant est repéré dans le cheminement vertical, l'utilisateur
se détourne de sa recherche pour se faire à nouveau un opinion.
Cela démonte notre tendance naturellement paresseuse
N'attendez jamais qu'un utilisateur se fatigue pour lire votre page.
Un utilisateur "scanne" visuellement une page au lieu de la lire.
From Laurent Goffin
http://www.gwix.net/web_gwix/article.asp?filID=233
Les modes de lecture d’un contenu multimédia
> Les zones prioritaires
Les modes de lecture d’un contenu multimédia
> Quelques données
> On lit 25 % moins vite à l’écran
> Les internautes scrollent
¾Les internautes consultent
plusieurs sites en même temps
Exercice n°1
Analyse critique de quelques sites http://www.enseignementsup-recherche.gouv.fr/
http://www.cnrs.fr/compratique/index.htm http://www.institut-de-france.fr/ http://www.gip-anr.fr/ http://www.liberation.fr/
Les bonnes pratiques
éditoriales sur le web
Les bonnes pratiques éditoriales pour le web
Si la formation durait 10 minutes…
¾
¾
¾
¾
¾
¾
¾
¾
¾
¾
¾
¾
Le jargon : le feuillet, le filet, la brève
Ecrire concis & faire court
Le web n’est pas le papier
Du synthétique vers l’exhaustif
L’essentiel toujours en premier
Un angle par « papier »
Une info par phrase
Ne pas vouloir trop en dire
Mettre en relief
Penser au référencement
Resituer l’article par rapport à son contexte
Respecter la hiérarchie de l’information dans la page
Les bonnes pratiques éditoriales pour le web
> Soigner les micro-contenus
Portes ouvertes chez Eurotronics
Le 3 février 2005, la jeune société
iséroise vous invite à découvrir son
laboratoire
CLIC
¾ Titre
¾ Accroche
¾ Chapô
¾ Texte
¾Accroche
Portes ouvertes chez Eurotronics
Leader des systèmes de vision, l’entreprise
d’Echirolles organise une journée d’information
et de démonstration. L’occasion de découvrir
le contrôle qualité au guidage de robot en passant
par la lecture et la vérification optique.
Le pari était pourtant loin d’être gagné pour cette
Jeune société spécialisée dans la robotique.
Pourtant, les salariés ont su saisir leur chance.
TEXTE TEXTE TEXTE TEXTE TEXTE
TEXTE TEXTE TEXTE TEXTE TEXTE
La titraille
Faire des titres informatifs
INFORMATIF
Georges Simenon est mort
INCITATIF
Maigret casse sa pipe
Exercices n°2 et 3
Les bonnes pratiques éditoriales pour le web
Evitons la langue de bois !
(par pitié…)
Les bonnes pratiques éditoriales pour le web
Utiliser des mots forts
> Eviter l’écriture automatique, qui engendre
des expressions toutes faites
> Eviter les lieux communs
> Chercher le mot précis, juste
Eviter les pièges
> Traquer les erreurs et pièges courants
(du genre: après qu’il soit venu, vous n’êtes pas sans savoir…)
Les bonnes pratiques éditoriales pour le web
Aérer, donner du relief
> Intertitres (inter)
> Illustrations
> Tableaux
> Gras (éviter l’italique)
> Mise en exergue
(retrait, guillemet, fond de couleur,)
> Eviter la justification
> Découper en paragraphes
Les bonnes pratiques éditoriales pour le web
Ecrire multimédia
¾Les photos
- recadrées sur détail
- avec titre et légende
¾ Son : podcasting (Emission audio téléchargeable sur Internet)
¾Vidéo : stream plutôt que download
(notion de flux continu VS téléchargement un peu long)
> Animation (penser aux plug-in)
Et surtout…
> Proposez des ressources complémentaires
(ex lemonde.fr)
Les bonnes pratiques éditoriales pour le web
Ecrire hypertexte
> Environ 7 liens par page
> Couleur différente
> Intitulé clair
> Pas de redondance
> Au sein du texte VS sur la droite
> Indiquer si pas HTML (PDF, etc…)
> Vers où je vais ?
> Utiliser l’infobulle
Exercice n°4
Architecture de
l’information hypertexte
(hypertexte = texte enrichi; documents liés entre eux par des hyperliens)
Architecture de l’information hypertexte
> Au niveau d’un site
7 clés d’organisation du contenu :
> Alphabétique
> Géographique
> Thématique
RUBRIQUAGE
> Typologique
> Chronologique (actualité)
> Orienté action
> Orienté audience = hiérarchie de l’information
From Jean-Marc Hardy
Architecture de l’information hypertexte
> Au niveau d’un site
Le rubriquage structure le site
Architecture de l’information hypertexte
> Au niveau d’un site
Laisser voir ce qu’il y a en profondeur …
Importance des
micro contenus
www.europarl.eu.int
www.liberation.fr
Architecture de l’information hypertexte
> La logique dossier
> Type « sommaire détaillé »
LES RANDONNEES A PIED EN ANE DE BÂT
Le principe
Pendant une semaine, partez à la découverte
de la nature avec un animal sympathique.
L’âne, mode d’emploi
Les conseils pour bâter correctement et organiser
sa randonnée sans stresser.
Les adresses de loueurs
Toutes les coordonnées, région par région
Historique
L’âne à travers les âges, ou histoire d’un incompris.
Les chiffres clés
>65 loueurs d’ânes
en France
>2 fédérations de professionnels
Pour en savoir plus…
> Fédération ânes et randonnées
> Dossier randonnée sur
> Salon de la randonnée
> Les assurances à avoir
Dossier réalisé par Joël Ronez
Mise en ligne le 10 Jan 2004
Dernière mise à jour : 07 juin 2004
Contact : [email protected]
Architecture de l’information hypertexte
> La logique dossier
Les différents genres éditoriaux: L’article simple L’article avec l’encadré qui le
complète La brève L’interview et ses deux formes : écrite et QR Le reportage (style
manifestation) Le dossier : il apporte plusieurs éclairages sur un sujet au travers de
plusieurs articles Le QR L’enquête
LES RANDONNEES A PIED EN ANE DE BÂT
Dossier réalisé par Joël Ronez
La randonnée en âne bâté est en plein essor.
Surfant sur la vague des sports de plein air,
les professionnels se sont organisés en
fédération et proposent de nombreux circuits
partout en France.
Nous avons regroupé pour vous les
ressources pour préparer ses vacances.
¾ Les chiffres clés
¾ Témoignages
¾ L’âne, mode d’emploi
¾ Les adresses
¾ Les choses à savoir
Mise en ligne le 10 Jan 2004
Dernière mise à jour : 07 juin 2004
Contact : [email protected]
Pour en savoir plus…
> Fédération ânes et randonnées
> Dossier randonnée sur
> Salon de la randonnée
> Les assurances à avoir
TELECHARGEMENT
-Guide rando PDF
- Carte France des pros
Blogs de vacances
-La famille Moulinot en âne
(vidéo MPEG 1,Mo)
Architecture de l’information hypertexte
> Au niveau d’une page
(inter)
From Xavier de Mazenod, Adverbe
Architecture de l’information hypertexte
> Au niveau d’une page
Chaque page est une page d’accueil
> Via les moteurs, le visiteur entre par n'importe quelle page
> Contextualiser : lui donner les moyens de se repérer
(charte graphique, titraille, chapôs, illustration, cohérence, …)
¾Dater les publications & actualisations
Exercice n°5
From Xavier de Mazenod, Adverbe
Architecture de l’information hypertexte
> La pyramide inversée
(ex dépêche AFP)
Essentiel
(AFP) Mardi 16 novembre 2005
TITRE
+ Neuf
+ Important
+ Proche
CHAPÔ
TEXTE
Détail
+ général
+ détails
+ explicatif
Architecture de l’information hypertexte
> La pyramide inversée
(ex dépêche AFP)
Essentiel
(AFP) Mardi 16 novembre 2005
MONTPELLIER –Une école maternelle dans l’Hérault
endommagée par un incendie
Un incendie « non accidentel » a endommagé dans la nuit de
mardi à mercredi les locaux d’une école maternelle à Lunel
(Hérault); a-t-on appris auprès du groupement de
gendarmerie de Languedoc-Roussillon.
Cet incendie, « qui n’est pas accidentel » mais dont les
causes restaient indéterminées, a pris vers 22h30 et
endommagé des locaux qui ne sont pas des salles de class,
ce qui devrait permettre à l’école de rouvrir lundi, a-t-on
précisé.
Détail
La gendarmerie de la brigade territoriale de Lunel et la
brigade de rapprochement et d’investigation judiciaire à
Montpellier ont été chargées de l’enquête.
Architecture de l’information hypertexte
> Les 5 W
¾ Who
¾ When
¾ Where
¾ Why
¾ What
¾ Qui
¾ Quand
¾ Où
¾ Pourquoi
¾ Quoi
¾ How
¾ How Much
¾ Comment
¾ Combien
Exercice n°6
RUBRIQUAGE SUPERIEUR
parties principales du site (visible pendant toute la nav)
SOUS – MENU
CONTENU
APPROFONDISSEMENT
Who ? When ? Where ?
+ important,
Why ? What ?
récent
- encadré
- téléchagts
- illustrat°
- liens
- focus
- dossiers
- zoom…
etc…
+
Services
(Rechercher
Galerie photos
Annonces
Boutique…)
+ ancien, détaillé
BAS DE PAGE : contact, plan du site
Architecture de l’information hypertexte
> Au niveau d’un texte
Who ? When ? Where ?
Why ? What ?
> La pyramide
inversée
+ Neuf
+ Important
+ Proche
+ général
+ détails
+ explicatif
Auto-évaluer son site
Auto-évaluer son site
Les 5 axes qualité
> Qualité de visibilité
¾Qualité de perception
> Qualité technique
> Qualité du contenu / hiérarchie de l’info
> Qualité des services
http://www.temesis.com/publications/auto-evaluation/
Auto-évaluer son site
Les 4 volets qualité des contenus
> Qualité de présentation
> Qualité du style
> Qualité de la structure
> Qualité de fond
http://www.redaction.be/exemples/grilledecontrolequalite_aout_05.htm
Social Software / Web
Social Software / Web 2.0
> Encore un changement d’ère ?
¾ Premier âge de l’Internet :
-> Adaptation au media
¾Deuxième âge :
-> Ere du partage
Nouvelles sociabilités
Nouveaux codes
Nouvelle culture
Nouveaux outils
Ce qui compte n’est plus de détenir une information,
mais de savoir la partager
3) Social Software / Web 2.0
« Arrêtons de parler de pages, à
propos du web
David Sifry
PDG Technorati
www.technorati.com
Le web est un flux de
conversations
Et le lien hypertexte n’est pas un
lien entre documents, mais une
forme d’action sociale »
Social Software / Web 2.0
> Le wiki : définition
Un site web dynamique
permettant à tout individu
d’en modifier les pages à volonté
Social Software / Web 2.0
> Qu’est-ce qu’un blog ?
Le premier format
éditorial né du web
Social Software / Web 2.0
> Un blog qu’est-ce que c’est ?
Un site web…
... composé d’articles
classés par date…
… et par catégories
Social Software / Web 2.0
> Un blog qu’est-ce que c’est ?
Un système de
publication
simplifié
Social Software / Web 2.0
> Les nouveautés de format
Les permaliens
Les flux RSS
Permet de mettre une
partie du contenu
du site à disposition
des autres web
masters qui auront
créé un script
.
Les retroliens
Les commentaires
Social Software / Web 2.0
> Les nouveautés de contenu
un format court et concis
un grande sensibilité à
l’actualité
un ton et un contenu informel
> Typologie de blogs internes
> Blogs de salariés
(IBM : 4 000 blogueurs, Compass)
> Blogs évènements
(rebranding blog, Cap Gemini)
> Blogs projet
> Blogs expression
(syndicat, association, ..)
> Blogs intranet
(PME: ex AGOSPAP)
> 7 bonnes pratiques
pour que ça marche…
1 > Respecter le format et son état d’esprit
2 > Former tous les utilisateurs (1h suffit)
3 > Constituer un comité éditorial de blog
4 > Adopter une charte de publication
5 > Ne pas censurer ni polémiquer, dialoguer
6 > Montrer l’exemple
7 > Donner des consignes rédactionnelles
Flux RSS
Real Simple Syndication
Flux RSS
> Un nouveau format d’échange d’information
Blog
t
en
nt
co
nt
content
con
te
Moteurs de recherche…
Logiciel
Autres blogs & sites
Flux RSS
> Qui diffuse en RSS ?
> Tous les blogs
> Certains sites web
(presse, ministères, …)
> Moteurs spécialisés
(technorati, …)
Flux RSS
> Qu’est-ce qu’on diffuse ?
Sur le blog ou via un agrégateur (application
permettant de rassembler (agréger) et de
synthétiser des informations publiées sur
différents sites web.)
> Entête, résumé
> Contenu complet
> Images
¾Son -> Podcasting
> Vidéo -> Videocasting