Lcriture Web

1
Lécriture Web

• Une présentation du

2
Avant décrire pour le Web

• Quels sont les comportements des internautes
  lorsquils naviguent?

3
Lecture à lécran

• À l'écran, on lit 25  moins vite que sur un
  support papier.
• À cause notamment de la luminositéet du
  clignotement de lécran.
• On se fatigue donc plus vite, doù limportance
  de la clarté et de la concision des contenus.

4
Lecture en ligne

• Parmi les internautes, 79 ne font que parcourir
  rapidement les pages comportant des textes.
• Seulement 16  lisent mot à mot tout le contenu
  qui leur est présenté.

5
Lecture par balayage

• Donc, sur un écran, les gens ne lisent pasun
  texte mot à mot, ils survolent plutôt les
  contenus.
• La rédaction de contenus pour affichage à l'écran
  doit donc tenir compte de ce facteur majeur.

6
Page Web ou HTML

• Le langage HTML, à partir duquel sont codées les
  informations diffusées dans le Web, ne prévoit
  pas de délimiteur de page.
• Le terme page Web utilisé dans ce contexte ne
  fait donc référence à aucune réalité concrète.

7
Page Web ou HTML (suite)

• En fait, une page Web est lespace de navigation
  compris entre le haut et le bas de lascenseur.
• Elle est composée dune ou de quelques
  pages-écrans. Exemple

8
Page-écran

• Cest une portion de page Web qui occupe un écran
  standard dordinateur.
• On la calcule au moyen de la touche Page
  suivante .

9
Page-écran (suite)

• Si vous appuyez sur celle-ci une fois pour faire
  défiler votre texte, ce dernier compte alors deux
  pages-écrans.
• Il est recommandé de ne pas dépasser la limite de
  trois pages-écrans par page Web. Exemple

10
Page imprimée

• Peu dinternautes impriment un contenu Web.
• Un exemple? En août 2001, à peine 2 des usagers
  du site dEl Pais, premier quotidien espagnol,
  ont imprimé lun de ses contenus.

11
Page imprimée (suite)

• Comportement différencié
• internautes en milieu institutionnel qui ont
  accès à un parc sophistiqué dimprimantes
• internautes à la maison ou dans les ONG qui sont
  souvent à court dencre et de papier...

12
Disposition recommandée dune page

• Balayage de lil de haut en bas et de gauche à
  droite.
• Disposition dune page daccueil
• identification et menu de navigation dans la
  partie supérieure
• menu thématique dans la colonne de gauche
• manchettes ou nouvelles dans la partie centrale
• des rubriques dans la colonne de droite
• Résultat un portail Exemple

13
Disposition recommandée dune page (suite)

• Disposition dune page intérieure
• identification et menu de navigation dans la
  partie supérieure
• menu de navigation secondaire à gauche
• matière rédactionnelle dans la partie centrale ou
  restante
• parfois surface encadrée à droite
• Résultat une grille 1/4, 3/4 ou 1/3, 2/3
  Exemple

14
Couleur du fond décranet des pavés

• Il est recommandé de limiter le nombre de
  couleurs à 3 ou 4.
• Tenir compte des particularités culturelles
  (stéréotypes de perception). Par exemple, en
  Occident
• vert permission, en marche/GO
• rouge danger, interdit, alerte, chaud, ON
• orange et jaune attention, tiède
• bleu froid, éteint, OFF

15
Couleur du fond décranet des pavés (suite)

• Les teintes de rouge et ses dérivés sont à éviter
  (exemple le vert, l'orange...).
• Ne pas abuser des images animées qui provoquent
• excitation de lil
• et ralentissement de la lecture

16
Couleurs des caractèreset du document

• Couples à ne jamais utiliser ensemble (soit
  caractères/fond ou caractères/caractères)
• Rouge avec bleu
• Jaune avec violet
• Jaune avec vert
• Ces couples causent une sollicitation excessive
  de la rétine, provoquant de l'inconfort qui peut
  s'aggraver avec le vieillissement.

17
Couleurs des caractèreset du document (suite)

• La couleur ne doit pas être utilisée uniquement à
  des fins esthétiques... mais comme un moyen
• d'augmenter la lisibilité du contenu
• ou daméliorer le format et la présentation de
  l'affichage

18
Défilement horizontal proscrit

• Trop souvent, des images ou des tableaux trop
  grands, ainsi que certains concepts graphiques,
  créent une barre de défilement horizontal.
  Exemple
• La largeur dune page doit sajuster à la
  résolution du moniteur (dimension relative) ou
  correspondre à la résolution plancher actuelle
  des moniteurs, soit 800 pixels (dimension
  absolue).

19
Défilement horizontal proscrit (suite)

• La grille graphique idéale pour faciliter la
  lecture
• 1/3 à gauche pour des menus, des images, des
  boutons ou encore du blanc pour reposer loeil
• et 2/3 à droite pour la matière rédactionnelle

20
Défilement vertical minimal

• Parmi les utilisateurs, 25 ne pensent pas à
  faire défiler les pages d'accueil ou celles
  essentiellement destinées à la navigation...
  s'ils ne trouvent pas ce qu'ils cherchent dans la
  partie supérieure de l'écran!
• Jacob Nielsen a démontré dans ses premières
  recherches (1994) que seulement 10 des
  internautes utilisaient la barre de défilement
  verticale.

21
Défilement vertical minimal (suite)

• Dans ses dernières recherches (1997), il constate
  que la majorité des internautes commencent à
  utiliser cette barre de défilement.
• Le changement de comportement, selon ce
  chercheur, est dû à un accroissement dexpérience
  avec les pages Web à défiler.
• Le standard est de 3 pages-écrans,le maximum est
  de 7 pages-écrans.

22
Trois clics maximum

• Un visiteur qui ne trouve pas en trois clics une
  information risque d'aller la chercher ailleurs.
• Le visiteur est paresseux et ne cherchera pas
  au-delà de quelques pages.

23
Trois clics maximum (suite)

• Hiérarchiser l'information selon une structure
  efficiente pour minimiser la navigation vers le
  contenu.
• La facilité avec laquelle les internautes
  trouveront ce quils recherchent déterminera la
  fréquence avec laquelle ils reviendront dans le
  site.

24
Temps de chargement dune page

• 51 des internautes deviennent impatients après
  15 secondes (le WWW devient le World Wide Wait).
• 40 Ko maximum pour la page daccueil, une
  nécessité pour un téléchargement en moins de 10
  secondes.

25
Temps de chargement dune page (suite)

• Le temps de chargement est différent selon le
  mode et la vitesse de connection (modem28 Kb, 56
  Kb, haute vitesse, réseau, câble)
• Limiter le nombre dimages dans une page, à cause
  de leur poids en octets.

26
Modes de navigation

• Creuser systématiquement les thèmes et les
  sous-thèmes dun site. Exemple
• Sauter à pieds joints sur les liens ou voies
  rapides (raccourcis) pour économiser des clics.
  Exemple

27
Modes de navigation (suite)

• Lire les nouvelles à la une dun site pour
  connaître les actualités de lorganisme. Exemple
• Exploiter le moteur de recherche du site. Exemple

28
Modes de navigation (suite)

• Suivre le fil dAriane et les pistes de
  navigation laissées derrière. Exemple
• Consulter le plan du site pour découvrir la
  structure de linformation. Exemple

29
Lécriture Web

• ou lart de segmenter linformation!

30
(langage) HTML

• Définition Langage de balisage de texte qui
  permet la création de documents hypertextes
  affichables par un navigateur Web, tel Netscape
  Navigator ou Internet Explorer.
• Note HTML est labréviation de Hypertext Markup
  Language. (voir Web)

31
Web

• Définition Système dinterconnexion de réseaux
  basé sur lutilisation de lhypertexte, qui
  permet la recherche, laccès et la visualisation
  dinformation dans Internet notamment.
• Note Internet englobe le Web et dautres
  services dont le courriel. (retour)

32
Exemple de la longueur dune page Web ou HTML
Suite
Ascenseur
33
Exemple de la longueur dune page Web ou HTML
Suite
Ascenseur 7 pages-écrans
34
Exemple de la longueur dune page Web ou HTML
Retour
Ascenseur 14 pages-écrans
35
Exemple de pages-écrans Retour
Première page-écran
Page Web ou HTML entière
Deuxième page-écran
36
Exemple dune page daccueil Retour
37
Exemple dune page intérieure Retour
38
Exemple dun défilement horizontal Suite
39
Exemple dun défilement horizontal Retour
40
Exemple de thèmes et de sous-thèmes Retour
41
Exemples de liens rapides ou de raccourcis Suite
42
Exemples de liens rapides et de raccourcis Retour
43
Exemple dactualités Retour
44
Exemple dun moteur de recherche Retour
45
Exemple dun fil dAriane Retour
46
Exemple dun plan de site Retour