Par "design",
on entend ici à la fois l'aspect visuel du site, son ergonomie
(système de navigation, etc.) mais aussi (au sens premier
du terme) son architecture (arborescence des fichiers qui le constituent,
etc...).
Cet article donne une série de conseils pour produire un
site web à la fois pratique pour les visiteurs, et facile
à mettre à jour ou à modifier, orienté
vers la réutilisation de composants.
On se place ici du point de vue du webmaster/webdesigner et/ou du
développeur.
De futurs articles proposeront des détails et exemples plus
précis sur divers points abordés dans ce panorama.
Ergonomie
1. La règle d'or de l'ergonomie d'un site web est
la simplicité. Cela ne signifie pas, bien sûr,
que les pages doivent contenir un minimum d'information. Des pages
surchargées de liens ne perdront pas toujours l'internaute,
pourvu, bien sûr, que ces liens soient bien organisés
et bien hiérarchisés, en rubriques, sous-rubriques,
colonnes, tétières, etc.
2. De manière évidente, les liens les plus
importants doivent être fortement mis en valeur (la boutique
pour un site de vente en ligne, les nouveautés sur le site,
etc.), mais cela n'interdit pas que la page d'accueil soit très
riche d'autres liens.
3. Il est préférable de souligner les liens,
notamment parce que l'internaute est habitué à cette
démarche, et non de leur appliquer un style CSS différent.
La simplicité porte plus sur le graphisme et le système
de navigation.
4. D'une manière générale, il est préférable
d'utiliser le moins possible d'images lourdes ou d'effets type
Flash ou Shockwave, non seulement pour alléger le chargement
des pages, mais aussi pour ne pas énerver l'internaute pressé
qui recherche une information précise. Les effets ne doivent
être utilisés que pour attirer l'attention de l'utilisateur,
mais il faut garder à l'esprit que les bannières publicitaires
éventuellement présentes sur le site ont également
cet objectif. Rajouter des effets risque de créer de la confusion,
et surtout de fatiguer l'utilisateur (cela paraît trivial,
mais n'oublions pas que la consultation passive d'un écran
d'ordinateur n'autorise qu'un très faible temps de concentration).
Quant aux grandes images, on s'aperçoit qu'elles sont souvent
inutiles, et ralentissent excessivement les pages.
5. Particulièrement, rappelons que le texte sous
forme d'image, même si cela permet de mieux en contrôler
la présentation, est non seulement rédhibitoire
du point de vue du temps de chargement, mais également pour
les moteurs de recherche. A n'utiliser qu'avec parcimonie.
6. Mieux vaut des pages graphiquement dépouillées,
avec un petit nombre de polices, de couleurs, un bandeau-titre
limité au logo de l'entreprise et/ou au nom du site, et concentrer
ses efforts de graphisme sur de petits pictogrammes qui donneront
un aspect plus professionnel. L'exemple du site Le
Monde est à cet égard révélateur.
Suite à l'échec de la formule "ultra-graphique",
le site actuel présente une grande simplicité visuelle.
7. Par ailleurs le système de navigation doit être
lui aussi simple. Cela signifie surtout qu'il doit être intuitif.
Inutile de proposer tous les liens sur la page accueil. Une barre
de navigation vers les principales rubriques suffit (cela n'interdit
pas, néanmoins, de proposer un système d'accès
rapide sous forme, par exemple, de menu déroulant en Javascript).
8. Multiplier les systèmes de navigation alternatifs est
en général une bonne chose (par exemple: une barre
de menu sous forme graphique, avec des effets "rollovers"
simples, une barre de navigation texte, le menu déroulant
dont nous parlions) pourvu que ces systèmes soient bien distincts
visuellement, et correspondent à de réelles facitilités
de navigation. Ainsi, les grouper tous au même endroit de
la page n'a probablement pas beaucoup de sens, tandis que les répartir
en tenant compte du parcours de l'internaute sur la page est plus
pertinent.
9. Enfin,
il est bon de retrouver ces différents systèmes
de navigation sur toutes les pages, et non seulement sur la
page d'accueil (ainsi d'ailleurs que le bandeau-titre du site).
Cela dit, la page d'accueil doit apparaître comme telle, et
se différencier du reste du site de manière claire,
même si cela ne doit pas affecter le design de la page ni
le ou les systèmes de navigation.
Architecture
L'architecture des fichiers d'un site web est importante pour
deux raisons: d'une part, le site devra probablement être
fréquemment mis à jour, ce qui impose de retrouver
rapidement les parties du site à modifier, et de produire
du code html (éventuellement associé à un langage
de script) compréhensible; d'autre part, un éventuel
changement de la charte graphique du site (consécutive, par
exemple, à un changement de la charte graphique de l'entreprise
qui l'édite), ou tout simplement un changement du système
de navigation ou de l'organisation des rubriques, aura des répercussions
sur pratiquement toutes les pages (si l'ergonomie du site est bien
conçue).
10. Dans ce cas, la réutilisation de composants
(html ou autres) par les pages de site est nécessaire.
Ces composants pourront être la barre de navigation, la barre
de menu, le bas de page, l'en-tête de page, l'éventuelle
colonne de droite, de gauche, des services type abonnement à
la lettre d'information, une boîte de recherche ou bien d'autres
choses encore.
La méthode la plus pratique pour gérer ceci consiste
en l'utilisation des Server Side Includes (SSI), à condition
de paramétrer le serveur HTTP du site en conséquence.
On peut également développer ou utiliser un outil
de gestion de contenu, généralement écrit en
PHP/ASP/CGI ou JSP.
11. Quel que soit le choix effectué dans ce domaine,
l'arborescence des fichiers du site doit être la plus hiérarchisée
et la plus rationnelle possible afin, on l'a dit, de retrouver
plus facilement les composants à modifier. Mais ceci doit
s'accompagner d'une bonne gestion des liens, surtout si l'on utilise
des fichiers SSI. En pratique, il est par exemple préférable
de préciser le chemin d'un fichier depuis la racine, non
depuis le noeud de l'arborescence où l'on se trouve. Si le
fichier contenant le lien doit être déplacé
d'un niveau de l'arborescence à l'autre, mais que le fichier
sur lequel pointe le lien n'est pas déplacé, il ne
sera ainsi pas nécessaire de modifier le lien. Bien sûr,
des outils comme Dreamweaver gère la modification des liens
d'un fichier déplacé, mais mieux vaut prendre toutes
ses précautions.
12. Utiliser des modèles de pages est également
une bonne chose, soit à l'aide d'un outil comme Dreamweaver,
soit à l'aide d'un langage de script (mais attention au référencement
dans ce deuxième cas).
Conclusion
Il est important de noter que certains sites sont dans une problématique
complètement différente que celle évoquée
dans ce qui précède. Le site d'une agence Web, par
exemple, peut avoir pour objectif de faire la démonstration
des technologies qui y sont développées. Il reste
que dans la grande majorité des cas, et même pour les
agences, l'internaute surfe sur le web pour trouver une information.
Tant que l'Internet haut-débit ne se sera pas démocratisé,
l'information devra être accessible avec le minimum de fioritures
et le maximum de simplicité. Ce simple principe est sans
doute le seul qui doit être retenu. Du point de vue de la
conception, c'est un peu la même chose: une mise à
jour, une modification affectant l'ensemble des pages, doit être
rapidement mis en oeuvre, ce qui implique des techniques "d'ingénierie"
performantes, mais également la clarté du code source
(html ou langage de script) pour faciliter l'accès aux zones
à modifier.
|