TUTORIELS 
Design d'un site web: les 12 règles d'or
Quelques conseils pour un site web facilement modfiable et facilement consultable.  (22 mai 2001)
 

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.

 
[ Jérôme MorlonJDNet
 
Accueil | Haut de page