5 - QUELQUES CONSEILS DE RÉALISATION
5.1 - Graphisme simple, efficace et adapté au thème
• 5.1.1 - Un exemple de la vie quotidienne : typographie et ergonomie
• 5.1.2 - La lisibilité
• 5.1.4 - L'unité de la mise en page
• 5.1.5 - L'organisation de l'écran
• 5.1.6 - Les éléments à définir
[ Cette section 5.1 est divisée en plusieurs fichiers : lisez donc aussi la première partie ou la dernière ]
5.1.2 - La lisibilité
Relisez déjà ce qui est dit au chapitre 1 - La technique, sur l'accès universel et la rapidité de chargement. C'est d'abord ça, la lisibilité sur le web.
Attention à la taille de l'écran sur lequel vous concevez vos pages : pensez que la majorité de vos lecteurs sont modestement équipés (écran de 15 ou 17 pouces pour le commun des mortels). Quant aux personnes qui ont un grand écran, elles en profitent souvent pour ouvrir deux fenêtres (réduites) à la fois, afin de naviguer plus vite (elles consultent un site tandis que le suivant se télécharge).
La majorité des écrans possède encore une carte graphique leur donnant une définition (4) de 640 x 480 pixels (5). Si vous travaillez une mise en écran à partir de tables de taille fixe, prévoyez une largeur maximum de 600 pixels : je préconise en fait une taille légèrement inférieure (535 pixels), si vous voulez vous assurer que votre document peut être imprimé sur un format A4 standard de 21 cm x 29,7 cm. Vous pouvez utiliser un logiciel de création d'images type Photoshop (si vous le maîtrisez un tant soit peu) pour travailler la visualisation de vos pages : créez une image de 600 x 350 pixels, elle représentera la partie utile de l'écran de vos lecteurs. Vous y effectuerez, pour en vérifier la lisibilité, vos essais de barre de navigation avec ses petites images en guise de liens, ou tout autre effet visuel à base d'image, et testerez tout particulièrement votre page d'accueil. A partir de sa version 4, Photoshop propose de placer les éléments sur des calques différenciés, afin d'en modifier sans peine la taille ou l'emplacement respectifs.
Vos lecteurs ont des écrans fort différents, non seulement en taille, mais en qualité. Certains n'ont encore que 256 couleurs à leur disposition, voire un écran noir et blanc. Les écrans Mac et PC ont en commun 216 couleurs que vous pouvez utiliser en toute sécurité pour vos dessins, vos à-plats, vos boutons de navigation..., avec l'assurance qu'elles seront vues par tous : une palette les contenant est disponible sur le web (6), afin que vous fassiez votre choix.
Second facteur de différenciation : le "calibrage" de l'écran, c'est-à-dire la visualisation des couleurs, qui varie selon les marques d'écran et le soin qu'y a apporté votre lecteur. Les écrans Mac, par exemple, éclaircissent les couleurs, tandis que les écrans PC les assombrissent (7). Lorsque vous chercherez votre gamme de couleurs, soignez donc surtout le contraste entre elles, tant au niveau de la luminosité (clair vs. sombre) que des teintes (rouge ou vert ou bleu). Une astuce : visualisez vos pages en noir et blanc pour en apprécier le contraste. Et pensez que certains de vos lecteurs n'auront qu'une imprimante noir et blanc pour l'impression de vos pages. Ce conseil est valable pour la gamme de couleurs utilisées comme repères (couleurs de liens, de la barre de navigation, etc.), mais aussi pour vos dessins et vos photos (8). Pour les couleurs de liens, les valeurs par défaut sont un bleu vif pour les liens non visités, et un violet sombre pour les liens visités : par habitude, on prendra une couleur claire (mais pas trop, sinon on ne peut plus l'imprimer, et certains écrans un peu défectueux la visualiseront mal) et vive pour les premiers, une couleur sombre et plus terne, pour les seconds.
Si vous tenez à utiliser, sur toutes vos pages, une image comme fond (la mode semble un peu passée, actuellement, au profit d'une jolie couleur pâle ou du blanc), veillez à ce qu'elle soit discrète : utilisez votre logiciel de retouche d'images pour l'éclaircir et en baisser le contraste, et modifiez sa couleur afin qu'elle ne rentre pas en compétition avec celle du texte. Enfin, faites des tests de lecture avec des amis. Je trouve pour ma part que l'image de fond est une assez mauvaise idée, qui diminue le confort de lecture, ralentit le chargement et use inutilement l'encre lorsqu'on veut imprimer la page (tous vos lecteurs ne savent peut-être pas qu'ils peuvent désactiver l'impression du fond, en configurant leur navigateur).
Pour la lisibilité du texte, on n'a encore rien inventé de mieux que le noir sur le blanc... Les textes blancs sur fond noir sont certainement plus "racoleurs", mais assez fatigant à lire, sur plusieurs pages. Cependant, c'est la technique utilisée, en modifiant les préférences d'affichage de leur navigateur, par certaines personnes handicapées visuel.
Le langage HTML met à votre disposition six niveaux (de H1 à H6) pour vos textes : utilisez-les à bon escient et avec parcimonie. N'abusez pas des grands titres : lorsque, dans une assemblée, tout le monde crie, on n'entend plus personne ! Vous pouvez mettre en valeur une information avec un peu de couleur, ou en la détachant de quelques lignes de blanc, avant et après. Si vous utilisez des feuilles de style (CSS), attention à ne pas fixer une taille trop petite, pour le texte ! (9)
Par contre, vous pouvez prévoir une taille réduite pour votre barre de navigation : je pense que c'est son emplacement privilégié dans l'écran (si elle est horizontale, en haut ; si elle est verticale, à gauche), ainsi que sa permanence, qui la met en valeur, et non la taille des caractères. Une fois déchiffrée lors de la recontre avec les premières pages, ses éléments sont reconnus à leur emplacement, et non plus réellement lus (à la manière d'un panneau de signalisation), d'où la nécessité, déjà évoquée, de ne pas la modifier, ni dans ses composantes ni dans son emplacement... (10)
5.1.3 - La hiérarchie
Vous avez définie au par. 3.2 - Structure claire et logique, une hiérarchie structurelle de l'information : à vous de la souligner maintenant par une hiérarchie visuelle. Par exemple, vous pouvez différencier les rubriques des sous-rubriques : proposez un grand en-tête pour les pages de niveau 2, un en-tête plus simple pour les pages de niveau 3. Ou bien les têtes de rubrique (niveau 2) peuvent bénéficier d'une image, et les pages de niveau 3 (niveau final) ne contenir que du texte.
Travailler avec des pages de niveau final très simples à créer vous permettra d'y placer vos énormes rapports sans avoir à y passer trop de temps ni de soin, et le résultat, privilégiant le texte, sera rapide à afficher. Vous pourrez également utiliser un outil du type "rtf-to-html", sans trop de difficultés et avec un bon résultat en accord avec votre charte graphique.
La hiérarchie s'exprime aussi par les notions de "semblable/différent". Pour différencier entre elles les rubriques, et créer une unité à l'intérieur de chacune, entre les têtes de rubriques et leur développé, on peut choisir d'attribuer à chaque rubrique une couleur donnée (fond de page, couleur d'image, etc.) : cette couleur sera proposée dès la page d'accueil, dans la présentation des rubriques, par exemple (11).
Jouez avec la couleur pour aider votre lecteur à se repérer dans sa visite. Dans la barre de navigation, l'icône de la rubrique actuellement consultée peut changer de couleur, comme dans l'exemple ci-dessous :
Au moment de concevoir le graphisme de votre navigation principale (la réflexion vaut pour la page d'accueil, également), réfléchissez s'il ne convient pas de séparer (visuellement, graphiquement, spatialement) les intitulés des rubriques d'information de ceux des rubriques de service. La tendance en ce sens est très forte, en ce moment, et semble correspondre à un réel confort pour le lecteur. Les deux navigations sont fortement différenciées sur le plan visuel (typo, taille, couleur, emplacement...). On voit beaucoup de sites avec une navigation-services plutôt discrète (mais néanmoins omniprésente et toujours accessible), placée sur une bande horizontale en haut, et une navigation-contenu plus présente, plus visible (voire plus visuelle, plus attrayante), installée latéralement sur le côté gauche (12).
Différencier les navigations, c'est reconnaître que vous vous adressez de manière différente à des demandes (des publics) différents. Les rubriques d'information sont en général plus vastes et exhaustives, et satisfont une première visite de découverte, ou une recherche de documentation générale ; les rubriques de service répondent à des questions plus précises, pour un public plus averti ou qui revient périodiquement. D'autres informations, elles aussi très pointues, peuvent faire leur apparition dans la barre de navigation (comme votre numéro de compte-chèque, par exemple) et y rester discrètement, alors que vous avez décidé de ne pas l'afficher en page d'accueil. C'est le cas de tout type d'information répondant à une demande précise et urgente, à satisfaire en un clic, que ce soit une aide pour la recherche d'information ou les coordonnées permettant un contact plus direct.
[ Cette section 5.1 est divisée en plusieurs fichiers : lisez donc la première partie ou bien la suite ]
Complétez cette section :
- La taille adéquate pour être imprimé sur un A4 est également traitée dans le par. 5.3.1 - Pour une impresson efficace
- En bibliographie, (Contenu > Traitement des images pour le web) un peu d'aide si vous connaissez Photoshop mais ne l'avez jamais utilisé pour le web.
- Vous pouvez vous aider du schéma 1 pour mieux visualiser les niveaux (rubriques et sous-rubriques).
- Les feuilles de style sont proposées dans le par. 2.1.1 - Du côté de chez le client, ainsi que dans la bibliographie > Technique > Le HTML > Sur le web.
- pour la conversion de gros textes en HTML, et les logiciels "rtf-to-html", voir le par. 5.4.3 - Conversion en HTML, et plus concrètement la note 23.
- voyez l'annexe 5 - Accès des sites web aux personnes handicapées, pour que votre graphisme (et votre code HTML) soient accesibles au plus grand nombre.
Notes
(4) La résolution dépend des écrans. Par défaut, l'écran des Macs est à 72 ppp (pixels par pouce) ; celui des PC sous Windows varie entre 70 et 80. Pour les grands écrans, avec une carte graphique appropriée et une mémoire suffisante, on peut obtenir une résolution de 110 ppp.
(5) Pour un public plus "haut de gamme", c'est-à-dire mieux équipé, vous pouvez miser sur une taille d'écran de 800 x 600 pixels (voire 1024 x 768 pixels), mais n'utilisez pas toute la largeur : le lecteur aime garder, à côté de sa fenêtre de navigateur, un peu de place pour atteindre l'icône de son disque dur, ou sa poubelle...
(6) Vous trouverez cette palette, ainsi que des explications sur son utilité et son utilisation, sur le site de Linda Weinman (en anglais) :
http://www.lynda.com/hex.html
ou sur le site "Big Nose Bird" (en anglais) :
http://bignosebird.com/safecol.shtml
Une jolie page pesant moins de 5 ko (voir le concours mentionné au chapitre 2.3 - Rapidité de chargement en note 29) vous propose une visualisation de cette palette, sous la forme de textes ou d'un pavé de couleur, ou même comme couleur de fond :
http://entries.the5k.org/171/visualizer.html
(7) Le Yale Web Style Guide (voir bibliographie, la section "Contenu") propose les corrections suivantes, effectuées sur le contrôle du "gamma" (cet utilitaire règle les paramètres de luminosité, de contraste et de teinte dominante de l'écran) proposé par Photoshop, afin de visualiser l'apparence de votre site sur une autre station :
- sur Mac, pour simuler un écran PC, utiliser un gamma de 2.2 avec un ajustement général de -43. Les corrections s'appliquent à l'écran, quelle que soit l'application utilisée ;
- sur PC, pour simuler un écran Mac, utiliser un gamma de 2.2. Cette correction ne s'appliquera qu'à vos images, sous Photoshop, et non à l'ensemble du moniteur.
(8) Cf. les judicieux ouvrages de Lynda Weinman, en bibliographie (Contenu > Conception graphique) à ce sujet.
(9) J'ai visité un site dont les textes étaient systématiquement rédigés avec une typographie de taille -2 : quelle drôle d'idée ! Je pars quant à moi du principe que mon lecteur a paramétré son navigateur pour obtenir le maximum de confort possible à la lecture, et que diminuer sa taille favorite de caractères de deux niveaux l'oblige à plisser des yeux pour déchiffrer les textes.
(10) Voyez la taille des onglets de navigation, sur le site de Yeba. Petits, donc discrets, et pourtant parfaitement lisibles et fonctionnels. Faire simple, gai et efficace,un pari réussi :
http://www.yeba.org/sommaire.htm
(11) Le site de la Fédération démocratique des femmes (FDIF) utilise une couleur différente pour chaque rubrique, qu'il reprend dans la présentation de l'en-tête, le nom de la rubrique en zone informative, la teinte de l'image de fond et la couleur des liens :
http://www.fdif.eu.org/
(12) Voir en guise d'illustration la barre de navigation du site de Médecins du Monde, en page intérieure : les grandes rubriques sont clairement séparées, en haut, des rubriques de service, en bas, plus discrètes :
http://www.medecinsdumonde.org/
Ou encore le site du GISTI. Dans les pages intérieures, les images menant aux têtes de rubriques sont en haut, au milieu, et celles des services ("Plan du site", "Recherche", "Aide"), sont plus petites et sur la droite : un très bon choix, à la fois actuel et fonctionnel (mais n'est-ce pas la même chose ?...)
http://www.gisti.org