Projet de conception du site web de l`Universite Adventiste d`Haiti

PROJET DE CONCEPTION DE SITE WEB
Parce que les règles de graphisme auxquelles obéit le web sont différentes de celles de
l'édition traditionnelle, vous concevez votre site pour y faire venir l'internaute
(référencement, nom de domaine etc...), lui donner envie d'y rester (graphisme,
arborescence des pages, rapidité de navigation) et le faire revenir (information
regulierement mis a jour, promotion, action de marketing, concours...)
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...).
Voici donc 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.
Contenu cible - Contrat de lecture
Il représente les attentes de l'internaute lorsqu'il arrive pour la première fois sur votre site.
La page d'accueil doit lui indiquer clairement ce qu'il va trouver sur le site. Les quinze
premières secondes sont capitales pour éviter les malentendus.
Parcours de visite
Il faut se mettre à la place de l'internaute, afin d'essayer de créer un parcours naturel
capable de répondre au mieux à ses attentes.
Hiérarchisation de l'information
Plus encore que sur la papier, le placement des icones est important. Le mouvement des
yeux est naturel, et s'apparente à un trajet en Z, de gauche à droite et de haut en bas, Il
faut en conséquence hiérarchiser l'information en fonction de ce trajet.
Navigation et points de repères
Il faut une cohérence dans l'architecture du site. Par exemple un même type d'icones doit
se référer à une même catégorie de liens.
Séduction graphique
Un même graphisme ne produit pas le même effet sur écran que sur papier. Il faut
respecter le format d'écran de 640x480 ou 800x600 pixels, qui est le plus courant sur
internet. On évitera ainsi au visiteur de trop utiliser les ascenseurs.
Définition de la taille de l'offre et sa présentation
Elle concerne le positionnement du site, qu'il soit éditorial ou commercial. Moins le site
est connu, plus l'offre et sa présentation devront être ciblées.
Mise en forme de la taille de l'offre
un catalogue papier donne une vision globale et immédiate de l'offre, ce qui n'est pas
posssible sur internet, car le visiteur découvre le site page par page.Certaines astuces
permettent de donner un apperçu de la richesse éditoriale ou commerciale d'un site. Ce
peut être une cartographie du site ou l'indication du nombre d'articles dans la rubrique
d'un catalogue.
Niveau de personnalisation
Il faut mettre en place différents moyens de personnalisation du contenu, de façon à tenir
compte des attentes manifestées par l'internaute (réponse à un formulaire ou e-mail).
Spécificités et fonctionnalités
Le site doit utiliser au mieux les fonctionnalités et les atouts d'internet (liste de diffusion,
animation vidéo, vue panoramique...
Tonalité web
C'est ce qui va donner sa personnalité et son esprit à un site (la regularite dans la mis a
jour des informations du site, le professionalisme de la charte graphique, et l'interaction
avec l'internaute, la suivie ponctuelle donne aux requetes de l'internaute)
LES RÈGLES D’OR
1 - Ergonomie
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.
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.
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.
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.
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.
Mieux vaut des pages graphiquement dépouillées, avec un petit nombre de polices, de
couleurs, un bandeau-titre limité au logo de l'institution 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.
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).
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.
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.
2 - 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).
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.
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.
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).
3 - 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.