Comment Ca Marche - Communauté informatique  
   
Accueil - Encyclopédie informatiqueTélécharger l'encyclopédieContribuer à cet article

Webmastering - Webdesign

Navigation d'un site web Encyclopédie


Conception du système de navigation

La structure d'un site web doit être le reflet d'une stratégie. Des scénarios de navigation doivent être élaborés afin de pousser l'utilisateur à suivre un chemin dans le site web.

Néanmoins il ne faut pas emprisonner le visiteur et le laisser libre de s'en aller ou de changer de rubrique à tout moment.

Parcours visuel

Des études ont montré que l'oeil de l'internaute moyen parcourt généralement la page web selon un cheminement global en « zigzag » commençant à l'angle supérieur gauche, jusqu'à l'angle inférieur droit.

parcours visuel d'une page web

La zone centrale supérieure représente ainsi un endroit particulièrement stratégique pour placer des informations.

Structuration du site web

La structuration du site web consiste à bâtir l'architecture globale du site web en organisant les différentes informations.

Il s'agit dans un premier temps de faire l'inventaire des contenus du site web et de les regrouper par thématique afin de constituer des rubriques, on parle alors de rubriquage.

Dès lors que les principales rubriques sont identifiées (on veillera à ne pas dépasser une dizaine de rubriques principales), il faut alors déterminer leur organisation et leur découpage en sous-rubriques. La plupart du temps la structuration du site peut se représenter sous la forme d'une arborescence dont la racine est la page d'accueil :

Rubriquage

Les classiques

Certaines caractéristiques se retrouvent généralement d'un site web à l'autre :

  • Logo du site web en haut à gauche. Un clic sur ce logo conduit directement à la page d'accueil du site ;
  • Lien vers la page d'accueil présent sur chaque page du site ;
  • Eléments de navigation présents sur chaque page afin de permettre à l'utilisateur de se situer dans le site et de revenir facilement à la rubrique principale.

Eléments de navigation

Les éléments de navigation sont des outils permettant au visiteur de savoir où il se situe dans le site, de revenir d'où il vient et de se déplacer dans les rubriques. Il existe plusieurs moyens de mettre en oeuvre des éléments de navigation :

Fil d'ariane

On appelle fil d'ariane (ou chemin de fer et en anglais breadcrumbs trail), un outil de navigation constitué d'une suite de liens hiérarchisée. Le fil d'Arian représente le chemin de navigation et permet à l'usager :

  • de se repérer dans le site 
  • de remonter facilement aux rubriques principales.

Un fil d'Ariane se présente sous la forme suivante :
Accueil > Webmastering > Navigation

Un fil d'Ariane possède les caractéristiques suivantes :

  • Liens séparés par le caractère « > », afin de symboliser la notion de hiérarchie.
  • Dernier lien non cliquable et en gras. Il représente la page sur laquelle le visiteur se trouve.

Le terme anglais « breadcrumb » (littéralement « miette de pain ») fait référence au conte de Grimm, « Hansel et Gretel », relatant l'histoire de deux enfants perdus dans la forêt laissant tomber des morceaux de pain pour retrouver leur chemin.

Le terme français « fil d'Ariane » se réfère à la mythologie grecque. Ariane, amoureuse de Thésée, lui confie une pelote de laine lorsqu'il s'engouffre dans le labyrithe pour tuer le Minotaure. En la déroulant, puis en l'enroulant à nouveau, Thésée parvient à sortir du labyrinthe.

Navigation par onglets

Les onglets sont des outils de navigation utiles permettant de distinguer des rubriques dans un site web et de passer facilement de l'une à l'autre. Des codes couleurs peuvent également être utilisés afin de renforcer la différenciation entre les rubriques.

navigation par onglets

Plan du site

Un plan du site (ou carte du site, en anglais site map) permet aux internautes d'appréhender le site dans sa globalité en un seul coup d'oeil. Un item « vous êtes ici » peut de plus permettre à l'internaute de se situer dans le site.

Flêches de navigation

La présence de flêches de navigation (suivant, précédent, retour au chapitre, retour à la page d'accueil) permet de fournir une navigation intuitive à l'utilisateur.

Trucs & astuces pertinents trouvés dans la base de connaissances

17/02 08h44 Voir à quoi ressemble votre site ailleurs (Webmaster)
23/01 15h45 Comment aspirer un site Web ? (Web)
15/01 22h54 L'icône de votre site dans la barre d'adresse (Webmaster)
22/12 22h09 Publier facilement une vidéo dans une page web (Webmaster)
22/11 13h03 On peut protéger une page web/une image contre la copie (Mythes et légendes)
21/09 10h00 Comment faire son site à partir d'un portail Web (GuppY) (Webmaster)
14/01 15h01 Accès impossible à certains sites web (Web)
27/01 09h18 Récupérer un site web en .chm (Windows Help) (Téléchargement)
20/02 11h26 Que peut faire le web pour vous ? (Web)
17/02 18h26 Créer un site beau, dynamique et respectueux des standards (Webmaster)
site web Plus d'astuces sur « site web »

Discussions pertinentes trouvées dans le forum

02/08 22h40 site web dreamweaver Création d'un site web avec dreamweaver Webmastering 21/02 21h21->RAD ZONE21
15/07 22h26 site web création un site web Internet 05/02 21h18->Grimlinsse21
18/04 12h23 site web [création d'un site web] Webmastering 06/02 03h54->RAD ZONE18
08/05 00h55 site web flash Comment faire un site web en Flash?? Webmastering 12/02 14h19->LBRUSE17
24/08 13h48 tracking site web tracking sur site web Webmastering 27/10 13h33->Hamster16
19/10 12h50 affichage affichage site web [affichage] problème d'affichage sur site web Webmastering 23/10 18h12->kmoulzim15
13/03 18h47 site web Comment crée un site web Internet 07/08 00h04->Giuzmo14
16/08 13h44  vérifier un site web d'achat en ligne Droit/Libertés 20/01 21h31->max11
15/12 19h19 mise ligne site web prob mise en ligne site web Webmastering 25/01 23h39->arwenn9011
25/04 12h34  Les torrents sur mon site web c'est légal? Droit/Libertés 02/05 10h05->sebsauvage10
Discussion fermée Problème résolu site web Plus de discussions sur « site web »

Ce document intitulé « Webmastering - Webdesign » issu de l'encyclopédie informatique Comment Ça Marche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.