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.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 seconde ]
5.1.4 - L'unité de la mise en page
Un site web n'est pas un objet que l'on tient bien en main ou que l'on range : ses pages sont intangibles, on change de site au hasard d'un clic de souris. Pour que le lecteur sache où il se trouve, et qu'il est de nouveau chez vous (après la visite d'un autre site, par exemple), vous lui proposerez une mise en page dont les grandes tendances se répètent ou se déclinent tout au long de vos pages. C'est un élément de régularité qui le rassurera et le mettra à l'aise dans sa lecture de votre site.
Parmi les éléments graphiques qui définissent un style, une identité visuelle, on trouve (liste non exhaustive) : la couleur (ou le motif) du fond de page, la couleur des textes et des liens, la barre de navigation et ses boutons, le logo de votre association, le type d'illustrations, l'articulation texte-images et leur importance respective, la présentation de l'en-tête de page, des titres et des sous-titres...
Une fois ces éléments déterminés, conjuguez-les dès la page d'accueil, cet espace du premier contact entre le site et ses lecteurs, puis créez des modèles pour les pages du ou des niveau(x) suivant(s). Vous utiliserez ces modèles pour y placer textes et images et créer vos pages au fur et à mesure, et serez ainsi sûr de respecter l'unité visuelle de votre site. Et vous n'oublierez pas de demander à votre hébergeur quelle est, sur sa machine serveur, l'URL de la fameuse page "404 not found" (celle qui s'affiche lorsque la page demandée par votre lecteur n'existe pas sur le site), afin de la parer, elle ausi, des atours de votre mise en page, tout en rédigeant un petit texte encourageant.
L'unité s'exprime par la ressemblance, nous venons d'en voir les applications, mais aussi par l'esprit, l'atmosphère de votre site. De même qu'on se rappelle mieux un visage expressif, voire marqué, un site personnel est plus efficace parce qu'il exprime une personnalité unique, la vôtre, celle de votre association. Cette personnalisation s'exprime par le style de rédaction des textes, par la sélection des rubriques et aussi par le graphisme. Communiquer un sentiment, une sensation par le graphisme est un travail de professionnel : il est particulièrement important que vous arriviez à définir la personnalité de votre site avec votre graphiste, ou avec votre prestataire, afin qu'ils en tiennent compte.
Couleurs et images sont ainsi à concevoir en
fonction de l'association, des couleurs, des illustrations
ou des photos qu'elle utilise déjà dans le
reste de sa communication. Vous pouvez vous inspirer de son
journal, de son papier à lettre... Si votre logo est
déjà connu, ou si vous tenez à le faire
connaître, utilisez-le dès la page d'accueil.
Vous pouvez avoir intérêt à le
réutiliser systématiquement sur chaque page,
de manière à ce que toute lecture et toute
impression en soit marquée.
5.1.5 - L'organisation de l'écran
La fenêtre de mon navigateur, dès que j'ai consulté trois ou quatre pages d'un site que je découvre, se sépare dans ma vision, dans ma mémoire, en deux espaces bien distincts :
- l'espace de la localisation (ou zone de navigation), celui où je trouve des repères pour me situer (l'en-tête répond à la question "où suis-je ?") ou pour me déplacer (la barre de navigation m'indique où je peux aller) : c'est habituellement un bandeau en haut ou bien à gauche, plus rarement à droite (ou alors avec des informations de second niveau) ;
- l'espace de la lecture (ou zone informative), celui où je cherche des informations, du contenu, comme le titre de la rubrique et son contenu : il se situe plutôt vers la droite de l'écran, et plutôt sous l'en-tête (13).
Il est fondamental que cette répartition spatiale se maintienne tout au long des pages, car j'acquiers ainsi une aisance et une confiance qui me permettent de consacrer toute mon attention à explorer l'espace du contenu, à lire donc l'information (14). C'est également un point d'ergonomie fondamentale que chaque élément ait un comportement et un seul : si par exemple, sur les pages intérieures, votre logo (dans l'en-tête, en haut, à gauche) mène, en cliquant, vers la page de sommaire, il doit absolument conserver cette fonction tout au long des pages. En ce sens, une stabilité absolue, tant spatiale que fonctionnelle, favorise chez votre lecteur l'intégration des outils de navigation au profit de la lecture proprement dite.
Si par contre, au détour d'une sous-sous-rubrique, l'espace dédié à la navigation change d'endroit, d'apparence ou de fonctionnement, je perds pied : soudain, mes repères s'enfuient, je cherche à retourner en arrière, vers une page que je comprenne, à constater et à contrôler les différences. Bref, je me déconcentre de ma lecture.
Voici une description un peu dantesque, pour vous sensibiliser à ces deux espaces. Vous pouvez sans crainte (et c'est même très confortable) vous répéter : préciser dans votre barre de navigation dans quelle rubrique se trouve le lecteur, en en offrant une image différente (voir illustration du par. 5.1.3), et reprendre de nouveau le nom de cette rubrique comme titre de l'espace consacré à la lecture. Le premier signal indique au lecteur qu'il est arrivé à la fin de son cheminement, le second qu'il peut commencer à lire (15).
Attention à ne pas consacrer trop d'espace à la navigation : 20 % de l'écran doivent suffire, afin que le plus grand espace soit dédié à fournir de l'information, du contenu.
Une bonne idée graphique consiste en soutenir
cette répartition en espaces en donnant à
chacun d'eux une couleur propre (16).
5.1.6 - Les éléments à définir
Pour récapituler, voici une liste rapide, non exhaustive, des éléments que vous aurez à définir dans le graphisme :
1. pour les pages intérieures :
- couleur du fond des pages, couleur et représentation des éléments de navigation si celle-ci est sous forme d'images,
- couleurs des liens non visités, actifs (au moment où on clique dessus), visités,
- création des différentes zones de l'écran : zone d'en-tête, zone de navigation, zone de consultation des informations,
- en-tête : éléments dominant la page, et qui comprennent généralement votre logo, le nom de votre association ; à priori, l'en-tête est inchangé sur toutes les pages, c'est lui qui permet à votre lecteur de reconnaître votre site,
- aspect de la barre de navigation générique (version image et version texte),
- codes pour les différents niveaux de lecture des éléments du texte, dans la zone d'information : titre de la rubrique, titres intermédiaires et sous-titres, texte simple, navigation locale si vous en avez parfois besoin...,
- crédits (pied de page).
Tous ces éléments sont naturellement inclus dans le gabarit qui vous servira à réaliser vos pages.
Il peut être tout à fait intéressant de s'arrêter à réfléchir à la possibilité de créer deux types de pages intérieures. Appelons-les "pages de niveau 1" et "pages de niveau 2". Les "pages de niveau 1" seront utilisées pour les têtes de rubriques, les "pages de niveau 2" pour les pages intérieures. La différence entre les deux gabarits répond à deux soucis d'efficacité :
- vous ne placerez la navigation principale que sur les pages de niveau 1 : ainsi, si vous décidez d'ajouter une rubrique, et donc de modifier la navigation générique, vous ne devrez pas reprendre toutes les pages créées, mais uniquement ces pages-là pour compléter la navigation ;
- les pages de niveau 2 (ou niveau final) ont un graphisme plus léger, la navigation peut ne consister qu'en un "retour à la page d'accueil de la rubrique" et un "retour à la page d'accueil du site" ou au sommaire (un lieu d'où l'on peut naviguer dans une autre direction), elles s'affichent donc plus vite. Elles sont particulièrement adaptées pour l'installation de longs textes d'explication, et à l'utilisation d'un logiciel de "rtf-to-html", ou pour une mise à jour par des personnes peu formées aux arcanes du web, si vous prévoyez une mise à jour décentralisée.
2. pour la page d'accueil :
- reprendre la gamme de couleurs et les typographies utilisées dans les pages intérieures,
- déterminer l'organisation dans l'espace des différents éléments,
- voir si la présentation du site par les mots peut être utilement complétée, enrichie, par une image,
- prévoir une zone pour la navigation en texte seul et pour des éléments que vous voulez fournir discrètement, comme votre adresse, votre téléphone, votre e-mail, votre CCP...
Voici pour les conseils si vous prenez en charge vous-même le graphisme de votre site. Et, encore une fois, n'hésitez surtout pas à vous inspirer de sites qui vous ont plu.
Lorsque vous aurez réalisé vos premières pages et que tout le monde en sera content, notez-en soigneusement tous les composants ainsi que leur technique de fabrication dans le document de réalisation : vous en aurez certainement besoin plus tard pour maintenir la cohérence visuelle de votre site lorsque vous créerez de nouvelles pages ou de nouvelles rubriques.
Complétez cette section :
- L'utilisation de modèles est expliquée en détail dans le par. 5.3 - Gabarits.
- Vous voulez déléguer le travail de conception et de réalisation du graphisme : voyez le par. 5.2 - Si vous avez un graphiste sous la main ou le par. 6.3 - Travailler avec un prestataire
- Voir également, pour la conception de la navigation, le par. 3.3 - Navigation intuitive et adaptée
- Pour compléter le thème de la page d'accueil, voyez bien sûr le par. 3.4 - Une page d'accueil... accueillante
- De la nécessité de noter toutes les caractéristiques de votre graphisme : voir le par. 6.2.2 - Le cahier de réalisation et de suivi, où je tâche d'en donner une liste la plus exhaustive possible
- La mise en ligne de gros documents avec un logiciel "rtf-to-html" est traitée dans le par. 5.4.3 - Conversion en HTML.
- Les possibilités de mise à jour décentralisée sont étudiées dans le par. 4.1.5 - Equipe de suivi.
- Jakob Nielsen, le gourou actuel de l'ergonomie (voir Bibliographie > Contenu > Documents génériques) a écrit un article très complet sur les messages d'erreur et les fameuses pages "404" (en anglais) :
http://www.useit.com/alertbox/20010624.html
Notes
(13) Ceci dû principalement au fait que nous lisons de gauche à droite, et du haut vers le bas.
(14) Un bon exemple de répartition de l'espace dans le site du CRID (Centre de recherche et d'information sur le développement) :
http://www.crid.asso.fr/
Dès la première page intérieure, l'écran est rigoureusement divisé en une navigation globale, dans le bandeau du haut, une navigation par rubrique (donnant également les sous-rubriques) dans la colonne de gauche, et le développé de l'information dans l'espace restant. Difficile à réaliser sans "frames" ?
(15) Voir l'exemple du CCEM, le Comité contre l'esclavage moderne :
http://www.ccem-antislavery.org/
(16) Le site de la CGT est un bon exemple :
http://www.cgt.fr/