PROFDINFO.COM

Votre enseignant d'informatique en ligne

L'architecture d'un bon site Web

Il existe évidemment plusieurs façons de juger un site Web, et donc plusieurs critères possibles.  Toutefois, tout critère sur lequel on évaluera un site tombera pratiquement toujours dans l'une de ces trois catégories:

  1. Le contenu
  2. L'aspect visuel
  3. L'aspect organisationnel ou fonctionnel

Le contenu

Le contenu est à la base du site.  Du simple choix du sujet à sa diversité en passant par sa densité, le contenu fait le site.  Comme le Web est un marché très concurrencé et que la plupart des sujets sont abordés et traités par des dizaines ou des centaines de sites, il faudra évidemment veiller à avoir un contenu de qualité et détaillé.  Toutefois, ceci mis à part, deux préoccupations importantes devraient être à la base de tout site Web:

  1. La mise à jour du contenu
  2. Le découpage du contenu en pages

La mise à jour

En effet, l'internaute moyen, après avoir navigué dans tous les sens pendant quelques mois se limitera généralement à une vingtaine de sites correspondant à ses centres d'intérêts.  Il revisitera ces sites à intervalles réguliers par la suite, utilisant le Web pour autre chose uniquement lorsqu'il aura besoin d'une information particulière, et ce généralement en se servant d'un moteur de recherche.

Cet internaute moyen décidera de revenir souvent visiter cette vingtaine de sites non pas à cause de leur apparence, leur design et leur graphisme puisqu'il le connaît par coeur et ne le regarde même plus.  Il ne les choisira pas non plus pour leur facilité de navigation puisque après les avoir visité quelques fois il y est maintenant parfaitement à l'aise.  Il reviendra régulièrement sur ces sites pour le contenu et surtout pour leur mise à jour régulière.  Mettre son site à jour souvent est la meilleure façon de faire revenir un visiteur.  Un site statique qui ne bouge jamais (ou qui a bougé souvent au début mais qui n'a subi aucune mise à jour dans les 6 derniers mois) sera éventuellement oublié puisque inutile (à moins que son contenu soit extrêmement dense et encyclopédique).

Le découpage

Sur un site Web, on découpera normalement l'information en plusieurs pages.  La raison essentielle à ce découpage est à la base le temps de chargement.  On estime généralement que plus des deux tiers des internautes utilisent encore une connexion modem 56K.  Des pages plus lourdes qu'une centaine de Ko (incluant toutes les images et fichiers associés) sont à déconseiller à cause du temps d'attente trop long (plus de 15 secondes pour une page est généralement trop pour la majorité, particulièrement pour une page d'accueil).  L'Internet est un monde d'impatients, où les gens veulent trouver rapidement l'information voulue.  Comme, pour un sujet donné, un internaute trouvera des dizaines de sites appropriés (et des dizaines d'autres non satisfaisants), un site qui met du temps à télécharger sera vite ignoré et on passera au prochain.  On n'attendra pas longtemps pour voir un site qui ne nous donnera peut-être même pas l'information voulue alors qu'il existe plusieurs autres alternatives prometteuses.

De plus, il est beaucoup plus facile sur un écran d'ordinateur de lire des courts blocs d'information que de longs textes continus.  Le système hypertexte est d'ailleurs pensé en fonction de petites unités d'information.  Lorsque l'on clique sur un lien, on s'attend à trouver un autre bloc d'information complémentaire à la précédente et non un livre complet.

Ce découpage du contenu en blocs exigera toutefois une bonne organisation de ces blocs afin que les visiteurs puissent s'y retrouver aisément.  C'est là toute l'importance de la structure de navigation du site, dont nous discuterons plus loin.

Évidemment, il ne faut tout de même pas abuser de la découpe.  Devoir constamment cliquer sur un lien pour aller lire la prochaine phrase ou le prochain court paragraphe d'un texte devient rapidement frustrant, particulièrement si l'on essaie ensuite de retrouver un passage ou une information rencontrée précédemment.  De plus, certains textes se découpent mal et se prêtent mieux à une lecture en continu, surtout si l'on veut permettre à un visiteur d'enregistrer ou d'imprimer aisément un sujet d'un seul coup.

L'aspect visuel

Les experts considèrent qu'une page d'accueil a en moyenne 30 secondes pour convaincre un visiteur de cliquer quelque part pour entrer dans le site.  C'est dans ces 30 secondes que le visuel prend toute son importance.  Évidemment, un aperçu du contenu plaira certainement aux visiteurs, mais l'aspect graphique de la page est probablement ce qui attirera le plus de visiteurs au départ.  (Et si le visiteur prend 25 de ces 30 secondes pour charger la page, le site est mieux d'être très convaincant!)

N'oublions pas tout de même que le visuel ne doit pas distraire le visiteur du contenu, mais bien l'attirer et le garder sur celui-ci.  N'oubliez pas non plus qu'une partie des internautes est myope, presbyte ou daltonien!  Utilisez des couleurs nettes et du texte lisible.  Évitez les boutons ou les liens texte trop petits pour être vus ou remarqués.  Évitez également de faire étalage de tous vos talents d'infographistes pour le simple plaisir de le faire:  le visuel doit être approprié au contenu et au public cible de votre site.  La plupart du temps, un visuel sobre et attrayant fera amplement l'affaire.

On se servira également du visuel pour donner une "identité" au site.  Toutes les pages d'un site devraient idéalement avoir le même look, à peu de choses près.  Réutiliser les mêmes polices, couleurs, icônes et bannières est une bonne idée.  De plus, comme les images chargées sont placées dans le cache du navigateur, réutiliser les mêmes tout au long du site accélère le chargement des pages après la page d'accueil.

Ne perdez pas de vue la taille de votre page – c'est l'aspect graphique qui prend du temps de chargement, pas le texte.

L'aspect fonctionnel

Toutes vos pages devront être structurées de façon logique afin que l'internaute puisse naviguer efficacement dans votre site.  Le but:  permettre au visiteur d'atteindre l'information qu'il souhaite avoir en un minimum d'étapes.  N'oubliez pas que l'Internet est peuplé de paresseux qui ne s'enfonceront pas longtemps dans un site et qui liront en diagonale jusqu'à ce qu'ils tombent sur ce qu'ils cherchaient.  On doit tout faire pour faciliter leur recherche si on veut qu'ils restent ou reviennent chez nous.

Au départ, il faut choisir une structure pour toutes nos pages.  La structure la plus simple est la structure séquentielle:

1

La structure séquentielle permet de lire les pages du site l'une après l'autre, dans un ordre logique ou littéraire.  Elle est appropriée à des petits sites, ou à des sites qui présentent un document de style "livre", où chaque page correspond (par exemple) à un chapitre.

Des sites un peu plus complexes peuvent utiliser une séquence principale, de laquelle on peut parfois sortir à mi-chemin pour aller explorer autre chose en suivant des liens vers des pages de digressions, d'information complémentaire ou d'information sur un autre site:

2

Pour un site Web plus complexe, la structure séquentielle n'est pas le meilleur choix, particulièrement si notre sujet est découpé en plusieurs morceaux plus ou moins indépendants.  Par exemple, si ces notes de cours étaient placées sur un site Web, pourquoi devrait-on forcer le visiteur à lire d'abord sur le HTML puis ensuite sur Dreamweaver avant de pouvoir accéder au présent chapitre si c'est le seul qui l'intéresse?  Le Web est un monde où chacun vient chercher ce qu'il veut et on doit s'organiser pour plaire à tous.

La majorité du temps, on utilisera donc une structure hiérarchisée:

4

Le Web se prête bien à ce genre d'organisation puisque la plupart des sites offrent d'abord une page d'accueil, qui mène à différentes sections.  Notez que chacune des branches de la hiérarchie n'est en fait rien d'autre qu'une séquence, ici représentée verticalement.
Ce genre de structure, en plus d'être facile à utiliser parce que familière pour tout le monde, force le créateur du site à bien organiser son information et à faire une bonne analyse du sujet avec de créer le site – cela ne peut qu'avoir des répercussions positives sur le site.

La règle des trois clics

Il existe une règle informelle dans le monde du design Web qui prétend que toute information d'un site doit être accessible en 3 clics ou moins à partir de la page d'accueil.  Si le site contient beaucoup de pages, la seule façon d'y arriver est d'utiliser des menus.  La page principale devrait toujours contenir un menu qui pointe vers les différentes sections du site – en un clic, on arrive immédiatement sur la section voulue.

Il faut toutefois éviter de surcharger les menus.  Évidemment, on pourrait très bien placer un menu sur chaque page, qui donne un accès direct à chacune des autres pages.  Peu importe où on serait et où on voudrait aller, on n'aurait jamais plus qu'un clic à faire!  Toutefois, si le site est grand (ou grandit éventuellement), un tel menu serait difficilement utilisable et risquerait d'amener plus de confusion que de clarté.

La solution est alors de faire des "mini pages d'accueil" pour chaque section, avec un menu spécifique à la section.  On peut même encourager les utilisateurs à "entrer" (ou à faire un lien) sur le site directement par une page d'accueil de section.  Ce n'est pas une mauvaise idée d'y laisser également le menu principal mais s'il prend trop de place, un lien évident vers la page d'accueil principal du site est un minimum et pratiquement un pré requis.

Si le site devient très grand, on peut évidemment faire une entorse à cette règle des trois clics.  Si en trois clics un visiteur atteint la première page d'un sujet approprié, et qu'il ne lui reste plus qu'à suivre une séquence pour arriver à l'information précise recherchée, on peut considérer le but atteint.

Les menus

L'utilisation des menus est donc une nécessité.  Encore faut-il s'en servir correctement.  L'internaute moyen préfère les menus graphiques au menus texte.  Il est vite confus si le menu est trop détaillé.  On visera habituellement 4 à 6 items par menu, chaque item étant clair et ne nécessitant pas une grande description.

Si votre public cible est plutôt constitué d'habitués du Web, c'est tout le contraire:  ils détestent devoir naviguer d'un petit menu à un autre pour arriver à leur but.  Ils préféreront un menu détaillé et long qui leur permet de voir dès le départ toutes les options possibles.  Une série de courts menus sera jugée comme contraignante.

La navigation

Pensez à faciliter la navigation du visiteur sur vos pages, particulièrement dans une séquence, en incluant des liens "Précédent", "Suivant" et "Accueil" bien placés (et toujours placés au même endroit d'une page à l'autre).  Plusieurs les placent en entête.  D'autres les placent en bas de page et d'autres encore font les deux en même temps.  Laisser ces liens en bas de page seulement peut être désagréable, surtout si vos pages sont un peu longues, puisqu'on doit faire défiler tout le texte avant d'y arriver.

Pensez à créer des boutons ou icônes clairs pour ces fonctionnalités et à les réutiliser d'une page à l'autre.  Les flèches (vers le haut et le bas ou vers la gauche et la droite) ainsi que la maison sont des classiques.  Il est également intéressant d'annoncer ce qui vient et ce qui précède, ce qui permet au visiteur de mieux se situer dans le site. On peut aussi ajouter à tout cela des liens pour revenir à la page d'accueil de la section en cours et possiblement aux autres sections (s'il n'y en a pas trop):

navigation

Une autre possibilité, si on a une longue séquence de pages qui doivent être lues de façon consécutive (comme les chapitre d'un livre ou d'une narration):  utiliser une barre de navigation affichant un icône pour chaque page:

6

L'important c'est de situer le visiteur.  Il doit avoir une idée d'où il se trouve dans votre site et doit avoir la possibilité de continuer la navigation, de revenir en arrière et de retourner à la page d'accueil en un seul clic.  La constance est toujours de mise dans une structure de navigation:  si vous optez pour une façon de faire, gardez-la sur votre site en entier, ne la changez pas d'une section à l'autre.  Conservez les mêmes icônes et placez-les toujours au même endroit.  Et utilisez ces icônes en plus d'un menu, principal ou secondaire.

Un internaute débutant est vite dérouté par la navigation sur le Web.  Passer d'une page à l'autre dans un ordre qui n'est pas pré-établi mais qui ne dépend que de lui, en plus de pouvoir naviguer d'un site à un autre sans ordre précis non plus, voilà qui est bien différent de lire un livre ou une revue.  Une structure de navigation bien pensée, des icônes clairs et constants et des menus simples ne pourront que l'aider.

La taille des pages

Beaucoup de sites sont optimisés pour une résolution particulière et affichent fièrement la mention "Ce site est optimisé pour une résolution de 800x600".  Toutefois, extrêmement rares sont les gens qui vont changer leur résolution pour visiter un site particulier (en connaissez-vous?).  Quel est alors le but d'optimiser un site pour une résolution précise?

En fait, l'idée de base est de s'assurer que le site est visible correctement et agréable visuellement lorsqu'on utilise une certaine résolution, que l'on choisit généralement un peu plus basse que la plus populaire, afin de plaire à la majorité.  Optimiser un site pour 800x600 c'est s'arranger pour que les gens qui utilisent du 800x600 verront le site comme on l'a conçu.  De façon générale, quelqu'un qui utilise une résolution supérieure (comme 1024x768) n'aura pas de problèmes sur le site – au pire aller, il y aura plus d'espace vide sur les côtés.  C'est normalement les visiteurs avec une résolution plus basse qui auront une expérience moins agréable:  soit ils devront utiliser la barre de défilement horizontale constamment pour aller et venir d'une ligne à l'autre, soit ils verront la mise en page "écrasée" et souvent décalée.

Les largeurs absolues

Tout site qui se respecte utilise des tableaux pour la mise en page.  Ces tableaux peuvent, comme on l'a déjà vu, avoir une taille relative à la taille de la fenêtre ou avoir une taille en pixels fixe.

Le problème avec les tableaux à taille fixe est que si on a une fenêtre plus petite que prévu, on doit utiliser la barre de défilement horizontale, ce qui est extrêmement désagréable.

Par contre, si on utilise des tableaux à taille relative et qu'on y met beaucoup de texte, à haute résolution les lignes de texte sont trop longues et le texte devient beaucoup plus difficile à lire.  En effet, si on a une haute résolution et un grand écran, on devra faire beaucoup de mouvements oculaires pour arriver à lire et on aurait alors avantage à avoir un  tableau plus petit avec de l'espace libre à droite (ou de chaque côté si le tableau est centré).

Dans Dreamweaver, on peut cliquer sur la résolution affichée au bas à droite de notre fenêtre d'édition (pour autant qu'elle ne soit pas maximisée) pour l'ajuster à une résolution précise et ainsi voir directement de quoi le site aura l'air, sans devoir aller vérifier dans un navigateur à chaque changement ou ajout.  Notez que pour toute résolution choisie, Dreamweaver propose une grandeur de fenêtre plus petite, pour tenir compte de l'espace occupé par autre chose (mais pas de la barre des favoris).  Par exemple, 800x600 devient 760x420 (on perd beaucoup plus d'espace à la verticale qu'à l'horizontale, à cause de la barre de titre du navigateur, des menus déroulants, des barres d'outils et d'état).

Les largeurs relatives

L'autre possibilité qui s'offre à nous est d'utiliser une taille relative.  Si, par exemple, on utilise une taille de 75% pour notre tableau, les visiteurs en 1024x768 verront un tableau de 768 pixels de large, donc bien lisible.  Les visiteurs en 800x600 verront un tableau de 600 pixels, lisible aussi.  Les quelques visiteurs utilisant du 640x480 verront un tableau de 480 pixels, lisible bien qu'avec des petites lignes.

L'avantage du mode relatif est que personne n'aura jamais à utiliser la barre de défilement horizontale (du moins, tant que notre tableau ne contient que du texte).  Notre site est "optimisé" automatiquement pour la résolution du visiteur, quelle qu'elle soit.

Toutefois, cet avantage devient également un désavantage:  qu'arrive-t-il au visiteur en 1024x768 qui affiche la barre des favoris?  Il réduit sa fenêtre de navigation, et le tableau occupera maintenant 75% de cet espace réduit.  Résultat:  un tableau un peu trop étroit au goût des habitués du 1024x768.

Et que verront les quelques visiteurs à très haute résolution?  Un tableau trop large pour être lu confortablement.

Qu'en est-il des menus sur notre site?  Supposons un menu vertical graphique.  Comme il est composé d'images, on ne peut pas réduire la taille de la colonne qui le contient.  Même si on utilise une taille relative, la colonne ne pourra jamais devenir plus étroite que les images qui s'y trouvent.  En conséquence, la colonne contenant le texte à droite sera celle qui sera écrasée à outrance pour les basses résolutions, détruisant la mise en page.  Est-ce alors mieux de forcer les usagers à basse résolution à utiliser la barre de défilement?

Les tailles relatives sont donc bien pratiques en règle générale, mais elles comportent quelques inconvénients.  La conclusion, prévisible:  utiliser une taille relative ou une taille fixe optimisée pour une résolution précise est un choix de design qui dépendra de la clientèle cible de la page, du contenu de la page et des préférences du designer.  Il n'y a pas de "bonne solution" applicable à 100% des cas.

La longueur des pages

Bien qu'on ait généralement beaucoup moins de réticence à utiliser la barre de défilement verticale que l'horizontale, il faut savoir qu'une bonne partie des internautes débutants ne l'utilisent jamais.

Même ceux, plus habitués, qui s'en servent couramment, n'aiment généralement pas devoir descendre des écrans et des écrans pour se rendre jusqu'à la fin d'une page.

Une autre règle informelle existe en design Web:  après la règle des 3 clics, il y a la règle des 3 écrans.  Une page devrait normalement utiliser au maximum 3 écrans, selon la résolution pour laquelle vous optimisez.

Même en respectant cela, il faut garder en tête que bien des gens n'utilisent pas le déroulement vertical et par conséquent risquent de manquer tout le contenu des deux derniers écrans.  Il faut donc s'organiser pour que tout le contenu important soit dans le premier écran.  C'est d'autant plus vrai pour la page d'accueil, qui est vue en premier et qui doit "attirer" le visiteur à l'intérieur de votre site.  Si tous les liens utiles et intéressants sont au bas, beaucoup ne les verront jamais.  Il en est de même pour les icônes de navigation mentionnés plus haut:  si on les place au bas des pages, plusieurs visiteurs ne les verront pas et, ne pouvant aller nulle part, reviendront en arrière et iront ailleurs que chez vous.

La plupart du temps, on devra donc découper une page qui ne traite que d'un seul sujet en plusieurs sous-pages.  Parfois on pourra le faire en y identifiant des sous-sujets.  Parfois on ne pourra pas et on se contentera de diviser un texte en plusieurs parties égales qui seront réparties sur plusieurs pages qui devront idéalement être lues en ordre.

Il arrivera parfois des moments où on voudra déroger à cette règle – et ce n'est pas dramatique, tout dépend encore une fois du contenu.  Si on veut permettre à des visiteurs d'imprimer ou d'enregistrer d'un seul coup un sujet, on privilégiera une seule longue page.  À ce moment, penser à des liens à chaque écran qui permettent de revenir au haut de la page peut être une bonne idée.

La page d'accueil:  home sweet home

La page d'accueil est le point d'entrée d'un site Web.  C'est généralement par là que les visiteurs arrivent.  C'est la page qui est affichée en premier lorsque l'on tape l'adresse "www.quelquechose.com".  Dans une structure hiérarchique, c'est la page du haut, de laquelle notre structure découle.  C'est donc normal qu'on y consacre beaucoup de temps.

On l'a déjà dit, la page d'accueil doit inviter le visiteur à entrer.  Elle ne présente pas (ou bien peu) de contenu – elle mène au contenu qui se trouve ailleurs.  Elle doit donc non seulement être attrayante mais aussi être claire et pouvoir diriger les visiteurs vers la bonne section du site Web facilement.

Si la consistance est toujours de mise sur un site Web, on peut sans danger se permettre d'avoir une page d'accueil au design différent des autres pages.  Après tout, elle est unique sur le site et remplit une fonction spéciale.  On utilisera souvent le même aspect graphique (icônes, bannières, logos, couleurs) mais un côté fonctionnel différent (la mise en page).  Si on utilise les modèles Dreamweaver, il est fort probable que la page d'accueil ne soit pas créée à partir du modèle que toutes les autres pages utilisent.

N'oubliez pas que le premier écran doit réunir la majorité des informations utiles puisque beaucoup de gens ne vont pas voir plus bas.  C'est encore plus important sur une page d'accueil que sur toutes les pages du site.

Il existe quatre grandes catégories de pages d'accueil.  Chacune d'elle a des caractéristiques et des usages différents.

La page de menu

Les premières pages d'accueil à avoir été utilisées sur le Web à ses débuts sont les pages de menu.  Ce sont toujours les pages d'accueil les plus répandues sur le Web aujourd'hui.  En gros, elles consistent en une collection de liens vers les autres sections du site.  Le principe de la page d'accueil de type menu est simple:  elle n'a aucun contenu en soi, elle ne fait que pointer vers les autres pages du site.

Évidemment, les pages de type menu de nos jours ne sont pas qu'une simple collection de liens textes l'un en dessous de l'autre...  Le graphisme y est aussi présent qu'ailleurs et l'organisation de ces liens est importante pour qu'on s'y retrouve aisément.

Un exemple de page d'accueil de type menu argus-acia.com:

8

La page de nouvelles

Évidemment, les sites Web de Radio-Canada, CNN et CyberPresse contiennent des exemples évidents de pages d'accueil de type nouvelles – c'est le but du site.  Mais bien d'autres sites Web qui ne donnent pas dans le journalisme peuvent utiliser ce genre de pages d'accueil.

En plus de présenter des liens vers le reste du site (ce qui est indispensable), une section (généralement importante) de la page présente des nouvelles, événements importants reliés au site ou à l'entreprise qu'il représente, annonces, etc.  Pour que ça donne quelque chose, il faut bien sûr que la page soit alors mise à jour régulièrement.  Non seulement les messages importants sont diffusés et attireront l'attention des visiteurs, le fait d'avoir une page d'accueil qui change souvent poussera les visiteurs à revenir.  Tout le monde aime les sites Web qui bougent.

Toutefois, bien que le contenu doive bouger, l'architecture et le design de la page, eux, doivent rester stables.  Étant donné qu'on doit tout de même proposer des liens vers le reste du site en plus du contenu quotidien, ces pages ont tendance à être un peu surchargées.  Si en plus leur mise en page change constamment pour s'adapter au contenu proposé, l'effet risque d'être très désorientant pour le visiteur régulier qui ne peut pas alors s'habituer à un style.

Un exemple de page d'accueil de type "nouvelles":  le site Web de Netscape, à l'adresse netscape.aol.com:

10

Pages à chemins multiples

Plusieurs types de visiteurs peuvent arriver sur votre site avec des buts et des préoccupations différentes.  Par exemple, un étudiant qui visite le site Web d'une université ne cherchera probablement pas les mêmes informations qu'un professeur, un parent d'étudiant ou un ancien de l'université... 

Certains sites Web, nécessairement parmi ceux qui présentent une tonne d'information, divisent leur public en catégories et les envoient à une section du site leur présentant ce qui les touche et risque de les intéresser.

Cette division des visiteurs est intéressante mais n'est pas nécessairement toujours applicable.  Il faut avoir beaucoup de contenu et des catégories des visiteurs évidentes et assez différentes les unes des autres pour justifier des sections à part.

Évidemment, rien n'empêche aux différentes sections d'avoir des points communs, mais il faut qu'elles aient suffisamment de différences pour justifier leur existence.

Un exemple de page à chemins multiples www.umontreal.ca:

12

Les pages d'introduction ("splash screen")

On en voit de plus en plus, des pages d'accueil qui, en plus de n'avoir aucun contenu, ne présentent finalement qu'un seul lien vers une autre page d'accueil.  Cette dernière fera office de véritable page d'accueil, tandis que la première n'a aucune fonction autre qu'esthétique.  Elle est un peu comme une couverture pour un livre.

Plusieurs pages d'introduction montrent le titre du site ainsi qu'un logo et possiblement un slogan ou une devise, dans un design original, travaillé et visuellement plaisant.  Par exemple, le site "Entrez lire" (à www.entrezlire.be) a une page d'introduction graphique.

D'autres utilisent une animation flash pour accueillir les visiteurs de façon plus dynamique.  On y verra souvent des designs abstraits mais au look technologique tout en y entendant de la musique rythmée.  Généralement, un lien "Skip Intro" permet de passer par-dessus l'introduction et se rendre directement au site.  Si on ne le fait pas (ou si on ne peut pas le faire – encore pire), l'introduction nous amènera au site ou affichera un lien vers ce dernier une fois qu'elle sera terminée. 

Beaucoup de gens se questionnent sur l'utilité de ces pages d'introduction.  Il est certain que bien des gens les trouvent fatigantes et inutiles et, lorsqu'ils en voient une, ne cherchent que le fameux lien "Skip Intro"...  Il existe d'ailleurs un site Web appelé "Skip Intro" (à l'adresse www.skip-intro.org) qui donne de la formation sur le sujet de l'heure:  comment utiliser flash pour améliorer des sites Web aux yeux des visiteurs, et non pour les ennuyer et se mettre entre eux et le contenu.

Il existe également une parodie (anglophone) d'introduction flash qui a circulé longtemps sur le Web à www.skipintros.com – elle vaut le détour.

Il est clair que, selon la règle des 3 clics, ajouter une introduction à un site ne fait qu'ajouter un clic entre le visiteur et l'information qu'il souhaite atteindre – c'est ce que disent bien des détracteurs des pages d'introduction.  Les supporteurs du concept répondront qu'il est très possible pour un visiteur d'entrer sur le site directement sur la page qui se trouve après l'introduction (ce qui, toutefois, n'est pas toujours vrai).  Si vous répondez constamment ceci, dites-vous qu'il est probable que votre page d'introduction fasse plus de mal que de bien.

Tout dépend, encore une fois, du contexte et du contenu.  Un site Web dédié à un musée, à un peintre ou à un musicien peut gagner à créer une ambiance artistique de cette façon.  Les visiteurs de ces sites ne s'attendent pas tant à trouver de l'information qu'à trouver un certain divertissement.  Même chose bien entendu pour un site sur l'animation, le design ou autre sujet où le coup d'oeil est important.

C'est ce qu'il faut toujours se rappeler:  on n'est pas dans le même état d'esprit quand on cherche un site Web sur un poète que quand on veut se renseigner sur le syndrome du tunnel carpien.  Il faut penser aux attentes de notre public cible et juger en conséquence.

Le style de la page d'accueil

Une fois qu'on a opté pour une catégorie fonctionnelle de page d'accueil, reste à décider le style à utiliser:  texte ou graphique?  Là est encore une fois la question.

Une page graphique est beaucoup plus attrayante et risque d'attirer le visiteur à l'intérieur du site.  Elle permet de compacter l'information plus aisément qu'une page de texte.  Toutefois, elle peut justement devenir surchargée en plus de demander un plus grand temps de téléchargement.

À l'opposé, une page en texte se charge toujours rapidement mais est beaucoup moins intéressante au niveau visuel.

C'est une excellente idée de faire les deux versions de la page d'accueil.  Ça nous permet du même coup de voir une page faite entièrement en texte (ce qui est très rare de nos jours) et de constater que ça fait une énorme différence au niveau du coup d'oeil.  Même si le contenu est exactement le même, si on tombait sur une page faite uniquement en texte, on aurait beaucoup moins de chances d'y entrer.

La majorité des sites Web maintenant sont des hybrides, qui ont un côté graphique présent mais qui présentent beaucoup de liens et de contenu en texte.  C'est un bon compromis qui a en plus comme avantage que le contenu et les liens sont beaucoup plus faciles à modifier.

Et si je veux vous écrire?

Il est fort important de placer quelque part sur la page d'accueil un lien vers une (ou plusieurs) adresses de courriel permettant de rejoindre le webmestre (et possiblement d'autres personnes importantes selon le contenu du site – ce qui est d'autant plus vrai pour des sites commerciaux ou d'entreprises).  Le Web est un médium à deux sens et il serait fou de ne pas en profiter.

Plusieurs visiteurs veulent envoyer du feedback aux créateurs de sites – souvent plus négatif que positif mais, bien que ça soit moins valorisant, c'est très important.  On peut alors corriger certaines erreurs sur son site (les fameux "liens morts" par exemple, ces liens qui ne mènent plus nulle part) et voir ce que les visiteurs pensent du site.  Idéal pour prévoir des mises à jour.

D'autres visiteurs ont simplement une question à poser en rapport avec le contenu du site.  Rien de tel lorsqu'on visite un site complet mais qui n'a pas l'information voulue que de pouvoir poser une question à quelqu'un.

Les sites commerciaux ou qui présentent une entreprise ont tout intérêt à donner en plus des adresses de courriel pour rejoindre différentes personnes clés ou départements important de l'entreprise (par exemple le service à la clientèle).

Les bâtiments ont aussi des adresses

On a tendance à l'oublier, mais le Web n'est pas (encore) le seul moyen de communication.  Lorsqu'un internaute visite le site d'une entreprise, il arrive qu'il veuille appeler pour parler à quelqu'un de vive voix et non pas par courriel interposé.  Il est également primordial de donner l'adresse civique de l'entreprise ou de ses différents points de vente par exemple.  Toutes ces informations doivent être bien visibles sur la page d'accueil, ou sur une page à part à laquelle on accèdera aisément à partir de la page d'accueil.

Je suis entré chez vous par une fenêtre...

Il ne faut pas oublier que tous les visiteurs n'entrent pas sur un site par la porte principale.  Il est fort possible pour quelqu'un de tomber par hasard (en faisant une recherche ou en suivant un lien) sur une des pages internes de votre site.

C'est pourquoi il est essentiel que sur toutes les pages du site figure un lien évident vers la page d'accueil.  Autrement, bien des visiteurs risqueraient de passer à côté de la majorité de votre contenu et ce serait bien dommage.

L'orthographe est importante

En anglais, on dit "Home Page".  En français, on dit "Page d'accueil" et non "Page d'acceuil" ou "Page d'acueil" ou "Page d'aceuil".  Faites un effort.

Le plan du site

14

Beaucoup de sites complexes offrent une page "plan de site" (ou "site map") qui présente un ensemble de liens vers toutes les pages du site.

Si le site est moindrement développé, il est fort probable que beaucoup de pages ne seront pas accessibles à partir du menu de la page d'accueil (et c'est tant mieux ainsi, autrement on risquerait de le surcharger).  C'est là que la page plan de site prend tout son sens.  Elle permet aux visiteurs d'atteindre directement la page qui les intéresse et de court-circuiter la séquence de navigation pour gagner du temps.

On devrait toutefois éviter de présenter un plan du site sous forme de hiérarchie graphique (similaire par exemple à ce que le gestionnaire de fichiers de Dreamweaver peut faire).  En effet, si le site est moindrement volumineux (ce qui est généralement un pré-requis pour justifier un plan), le diagramme hiérarchique risque d'être trop gros pour entrer confortablement sur une page.  À ce moment, on a le choix entre le rapetisser (et le rendre illisible) ou le simplifier en enlevant des pages (et le rendre inutile).

Il est beaucoup plus simple de présenter une série de liens en texte, organisés par exemple par catégories ou par section.  Contrairement aux autres pages d'un site, une page de plan de site n'a pas besoin d'être courte.  On doit y trouver des liens vers toutes les pages du site (ou à la limite, un lien par sous-section).  Le but ici n'est pas de faire tenir tout ça en un écran  mais simplement de ne rien oublier et de bien organiser les liens.  On doit pouvoir y trouver assez facilement tout ce qu'on veut.

Si vous utilisez une page de plan de site, un lien évident sur votre page d'accueil devrait y mener. 

C'est ce que font une très grande quantité de sites.  Évidemment, une page de plan de site n'est utile que quand le site est assez élaboré et qu'on ne peut pas tout atteindre à partir de la page d'accueil.

Conseils en vrac

Voici quelques conseils en vrac sur l'architecture et le design de sites Web:

    • Évitez d'utiliser une couleur pour mettre de l'emphase sur un mot ou une phrase.  Par exemple, mettre un mot en vert alors que le reste du texte est en noir attire effectivement l'attention sur le mot mais laisse croire qu'il s'agit d'un lien.
    • Pour la même raison, le souligné est de moins en moins utilisé sur le Web.  Le souligné est en fait un héritage des anciennes dactylos, pour lesquelles l'italique et le gras étaient inaccessibles.  Sur le Web, souligné égale lien.
    • Le gras et l'italique sont deux très bons moyens de mettre du texte en emphase.  Évidemment, il ne faut pas en abuser – si tout le texte est en emphase, plus rien ne l'est...  L'italique est plus difficile à lire que le texte standard.  Un mot c'est bien, mais un paragraphe complet c'est trop.
    • Écrire tout en majuscules est également à éviter.  Non seulement écrire en majuscules sur l'Internet équivaut à crier dans la vraie vie, en plus il est prouvé que (fait intéressant) on lit moins vite des majuscules que des minuscules.
    • Le texte et les images devraient occuper au plus 50% de l'espace dans une page.  Le reste doit être réservé à l'image (ou à la couleur) de fond.  Si cette règle n'est pas respectée, on se retrouve avec une page trop dense et donc difficile à lire.
    • Il faut absolument que toutes les pages d'un site aient un titre (avec la balise <title>).  Non seulement ce titre sera celui affiché dans les favoris si un visiteur y inscrit votre site mais en plus il sera utilisé par les moteurs de recherche!  Pensez bien sûr à donner un nom clair et intelligent...
    • L'utilisation d'une page de FAQ ("Frequently Asked Questions" ou "Foire Aux Questions") est toujours une bonne idée.  On devrait y résumer là les questions de base sur le sujet dont traite notre site – il faut au départ tenter de les deviner.  Pensez à tout ce qu'un débutant pourrait vous demander, et organisez ensuite ces questions en catégories.  À mesure que le site vieillit, on peut y ajouter des questions qu'on a couramment reçues par courriel.
    • Les pages "En construction" sont à bannir de vos sites.  C'est une expérience très frustrante pour un internaute de trouver le lien parfait pour lui sur une page pour finalement découvrir qu'il ne mène qu'à une page "en construction".  Mieux vaut ne pas mettre ces liens et les ajouter lorsqu'ils seront réellement prêts (on pourra alors les identifier avec un petit icône "nouveau!" pour attirer l'attention sur eux).  De plus, un site dont des sections sont en construction pendant des mois risque de convaincre les visiteurs qu'il est inutile de revenir.
    • Si on met le site à jour souvent, c'est une bonne idée d'avoir une page du genre "Quoi de neuf?" qui décrit les dernières modifications (ajout de pages, ajout de liens, changement dans la structure du site, mise à jour du contenu, etc).  Ainsi, les visiteurs fréquents n'auront pas besoin de parcourir votre site en entier à la recherche de nouveautés.  Idéalement, la page "Quoi de neuf" devrait proposer des liens directs sur les pages modifiés, en plus de décrire ces modifications.
    • Les compteurs de visiteurs sont passés de mode.  Au départ, c'était une idée originale et le simple fait de découvrir que les visiteurs étaient comptés générait une surprise et un étonnement.  Maintenant le concept est usé et inutile.  Il existe des compteurs invisibles, qui donneront des statistiques au webmestre mais qui ne les afficheront pas sur le site, qui sont très pratiques.  Le compteur visible quant à lui, donne un de deux messages:  s'il est élevé, il donne une impression d'arrogance:  "regardez comme je suis populaire!".  S'il est bas, il donne l'effet contraire, ce qui n'est pas nécessairement positif:  "presque personne ne fréquente ce site Web!".  De plus, rien ne prouve que ce que le compteur dit est vrai et est fiable (est-ce que la moitié de ces visites sont celles de la mère du designer?).
    • Les messages qui défilent dans la barre d'état au bas du navigateur sont énervants.   Premièrement, ils cachent les informations que l'on trouve normalement dans cette barre d'état.  Deuxièmement, ils sont en petits caractères et ne défilent généralement pas assez vite pour être lus confortablement.  Troisièmement, si on ne veut pas les lire (ou si on les a déjà lus), ils attirent l'oeil pour rien.  Quatrièmement, le contenu de la majorité de ces messages n'a en fait aucune importance pour le visiteur.