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
5.1 - Graphisme simple,
efficace
et adapté au thème
et adapté au thème
Lorsqu'on leur parle graphisme, la plupart des gens pensent à des images, plus ou moins rigolotes (petits Mickeys pour animer un texte), plus ou moins esthétiques (version David Hamilton ou Andy Warhol, selon l'ambiance désirée). Ça, ce n'est pas du graphisme, c'est de l'illustration. Les illustrations ne sont qu'un des éléments du graphisme : un bon graphiste est aussi un illustrateur ; un illustrateur n'est pas forcément un graphiste.
Qu'est-ce que le graphisme, alors ? C'est un ensemble de techniques visant à soutenir la structure d'un texte, ou d'un ensemble de textes, afin d'en faciliter la lecture et la compréhension, tout en donnant une cohérence visuelle esthétique à l'ensemble, en adécuation avec le style utilisé dans les textes et le lectorat visé. Voyez la presse : le type de mise en page et les éléments du graphisme vous donnent déjà une idée du genre d'information que vous trouverez dans une revue, qu'elle soit sobre et mesurée, ou au contraire aguicheuse et sensationnaliste (1).
Il y a un graphiste (en l'occurence, un directeur artistique, la version et la paye au-dessus) à l'origine de la refonte de la maquette du journal Le Monde (et pourtant ça manque d'illustrations, non ?), des maquettes de la presse magazine (vous savez distinguer, n'est-ce pas, d'un coup d'œil par dessus l'épaule de votre voisin, s'il lit Gala ou Télérama), même du texte que vous parcourez en ce moment. C'est sciemment que je ne vous propose ici que des exemples de la presse et de l'édition : votre site web se compose, comme ces médias, d'un ensemble de textes complétés (ou non) par des images.
Je ne prétends pas, dans les quelques pages qui suivent, faire de vous un graphiste : mais j'aimerais vraiment vous montrer comment et pourquoi ça "fonctionne", pour reprendre le vocabulaire de la profession. J'espère ainsi vous aider à regarder le graphisme d'autres sites d'un œil plus connaisseur, afin que vous empruntiez des solutions qui marchent et s'adaptent à votre cas particulier.
En ouvrant l'oeil, vous apprendrez à reconnaître les grandes tendances qui régissent l'occupation de l'espace (celui de l'écran), la présentation de la navigation, l'espace laissé à l'information, les couleurs utilisées, l'emplacement de différents éléments... : il n'y a pas dans ce domaine de tables de la loi édictées par les "gourous" du graphisme ou de l'ergonomie, sur le web, mais une lente évolution des sites, vers un confort de lecture et une efficacité de recherche accrus, pour les lecteurs, accompagnés d'un effet de mode certain mais également adapté à un lectorat tout à la fois plus à l'aise (dans son maniement du web) et plus exigeant (on "surfe" moins, maintenant que le web est devenu un outil et qu'on y cherche une information précise).
Quelques exemples : la navigation est généralement placée à gauche de la page, ou en haut. C'est logique, car ces deux espaces sont apparents, quelle que soit la taille de l'écran. Mais ces emplacements sont également le produit de nos pratiques de lecture, de la gauche vers la droite, et du haut vers le bas. En balayant la page du regard, ces deux espaces sont "acquis" dès le départ, tout en n'occupant pas l'espace de réflexion, qui se trouve à la suite du parcours de lecture, vers le bas et la droite, et comprend habituellement le contenu informatif de la page. On retrouve là la pratique des quotidiens, avec le titre en haut, le sommaire sur un côté, et l'espace de lecture au milieu.
Une autre habitude, développée ces derniers temps : l'espace du haut est souvent occupé par une bannière publicitaire (sa taille standard : 468 x 60 pixels). Un grand nombre de lecteurs ont pris l'habitude de "glisser" sur cet espace, et de ne pas le lire : évitez donc, en haut de vos pages, de placer une image ou une information ressemblant à ces bandeaux...
Ce que vos lecteurs ont appris en naviguant sur le web, dans leur pratique d'autres sites, et acquis en terme d'habitudes, ils n'ont plus à le réinventer en visitant le vôtre, et vont plus rapidement droit au but. Voilà pour l'efficacité obtenue en reproduisant les pratiques des autres sites. Quant à l'innovation, c'est elle qui est à la base de la diversité du web, je n'aurai donc rien contre...
En suivant ces recommandations, vous éviterez les écueils majeurs. Sinon, un seul conseil : faites simple, discret et fonctionnel !
5.1.1 - Un exemple de la vie quotidienne : typographie et ergonomie
La typographie, c'est-à-dire le travail sur la présentation du texte grâce aux variables concernant la lettre (type de caractère, corps, interlignage, couleur, niveaux de titres, etc.) est un élément fondamental d'ergonomie (2) appliquée à la compréhension d'un texte. Prenons l'exemple d'un livre technique, donc pédagogique, où le rendu du raisonnement, de l'organisation de la pensée est primordial. La matière de l'ouvrage est divisée en chapitres, puis en sous-chapitres, puis en sous-sous-chapitres, etc.
Il existe plusieurs méthodes pour rendre visible cette architecture :
- on peut structurer l'énoncé des titres et des sous-titres. Par exemple, dans le texte que vous lisez, j'ai utilisé des chiffres (1, 2, 3, etc.) pour différencier les chapitres ; puis, à l'intérieur de chaque chapitre, j'ai nommé les sous-chapitres : 1.1, 1.2, 1.3, etc. ; enfin, les sous-sous-chapitres 1.1.1, 1.1.2, 1.1.3, etc. ;
- on peut également renforcer l'ordre des titres et des sous-titres par le graphisme : chaque niveau est représenté par une typographie dont l'apparence définit clairement la place dans la hiérarchie. Par exemple, des titres en majuscules, centrés au milieu de la page, pour les noms de chapitre. Des sous-titres en minuscules et gras, dans un corps assez important, pour les sous-chapitres. Des sous-sous-titres en minuscules, dans un corps moindre, mais séparés du paragraphe précédent par un espace blanc, pour les sous-sous-chapitres...
La reconnaissance et la mémorisation de ce code graphique (qui s'enrichit énormément dans la presse) fait partie intégrante de notre culture de lecteur, et ce dès nos livres scolaires. Eliminez cette aide visuelle, rendez-la inopérante et confuse, et votre texte technique sera beaucoup plus difficile à lire. L'évidence de la structure aide à la compréhension de l'enchaînement des idées et donc à leur mémorisation.
Il y a bien d'autres éléments qui concourent à guider l'œil du lecteur dans son parcours et à lui indiquer la structure de l'idée dans l'espace de la page : l'utilisation des couleurs (et du blanc), dans la typographie ou comme fond, le morcellement de l'espace total en sous-espaces, l'utilisation d'illustrations, de filets (ces lignes noires qui entourent ou séparent les textes)... Amusez-vous à analyser les pages de votre journal préféré !
Le graphisme, dans le web, va intervenir dans la "mise en écran" (pour paraphraser la notion de "mise en page" propre à l'édition sur papier). Nous avons étudié, tout au long du chapitre 3, l'importance de la réflexion en ce qui concerne l'architecture de votre information : il faut maintenant travailler à ce que l'aspect de vos pages web soutienne cette hiérarchie, grâce à un graphisme réfléchi. Je tâche ici de vous donner quelques conseils de bon sens ; les recommandations de l'annexe 3 sur l'ergonomie sont également à garder à l'esprit.
Le web est jeune, et l'on découvre ses spécificités, ses contraintes, ses atouts : les graphistes professionnels travaillent encore à rechercher un style propre à ce nouveau media, on voit des modes s'installer puis disparaître. Un seul conseil, si vous n'êtes pas graphiste : déterminez ce que vous voulez dire, et dites-le simplement. Recherchez des sites similaires, sachez les analyser et les apprécier, et inspirez-vous en. On trouve actuellement en librairie de grands livres avec beaucoup de couleurs, fort chers, qui vous proposent un choix des "meilleurs sites du web". Il s'agit souvent d'une simple reproduction de la page d'acccueil de ces sites : pas de réflexion sur la structure, la navigation, les possibilités d'accès ou la rapidité de chargement. A éviter. Vous aurez aussi vite fait, et à moindre coût, de feuilleter le web en ligne avec votre propre grille de lecture.
En bibliographie, quelques rares livres intelligents (3) abordant ce thème.
A ce niveau de votre réflexion, vous avez déjà bien avancé. Structure, informations et bonnes résolutions sont là, rangées à côté de vos crayons de couleur. Alors, surtout, n'oubliez pas les premières au bénéfice des seconds. Dès le début, nous avons pris pour base que l'information était votre préoccupation principale. Le site d'une association n'est pas un site publicitaire, qui doit attirer et retenir le client en lui proposant non pas un contenu, mais un produit : au contraire, votre graphisme doit se mettre au service de votre information, et rester discret et utile. Comme partout, comme ailleurs, comme toujours (ce n'est pas parce que le web est tout neuf qu'il faut oublier ce qu'on a appris depuis le temps des moines-copistes, foi de maquettiste), le graphisme de votre site doit se soumettre à trois priorités : lisibilité, hiérarchie de l'information, unité de la mise en page. C'est à cette condition seulement qu'il remplira efficacement sa mission fondamentale : guider l'œil pour faciliter la lecture, la compréhension et la mémorisation du texte.
[ Cette section 5.1 est divisée en plusieurs fichiers : lisez donc la suite ]
Complétez cette section :
- Pour réviser la réflexion sur l'architecture de votre site, voyez le chapitre 3 - Les éléments de l'architecture
- Une grille de lecture de sites est proposée au par. 6.1.1 - Analyse de sites
- Le graphisme contribue à une ergonomie réussie : voir l'annexe 3 - Ergonomie sur le web
Notes
(1) Pour le sensationnalisme, voyez le site de Paris-Match, en cohérence avec la version papier :
http://www.parismatch.tm.fr/
Plus sobre, le site du Monde diplomatique :
http://www.monde-diplomatique.fr/
(2) Voir la présentation de l'ergonomie au par. 3.7 - Ergonomie sur le web, et le développé en annexe 3. En bibliographie, vous trouverez les références du livre de Jakob Nielsen, l'un des gourous (auto-proclamé) nord-américains de l'ergonomie.
(3) Les ouvrages que j'ai lus n'abordent
pas (encore) les spécificités du graphisme
pour le web. Ils mêlent conseils de bon sens (comme
ici), astuces techniques et innovations visuelles qui
peuvent vous être utiles.