GraphQuel exemple de navigation web choisir ? Portfolio, boutique et site de services
Un portfolio gagne souvent à proposer quelques liens visibles, tandis qu’une boutique doit organiser ses rayons et permettre de revenir facilement aux catégories. Un bon exemple de navigation web se juge donc autant sur les parcours qu’il facilite que sur son apparence. Voici des modèles concrets à adapter à votre contenu, avec leurs avantages et leurs limites.
La navigation organise un parcours, pas seulement un menu
La navigation d’un site désigne l’ensemble des liens et des repères qui permettent de passer d’un contenu à un autre : menu principal, liens dans les pages, fil d’Ariane ou pied de page. Elle répond à trois besoins : comprendre où l’on se trouve, savoir où aller et pouvoir revenir en arrière.
Elle ne doit pas être confondue avec le navigateur web, le logiciel utilisé pour consulter Internet. Ici, il s’agit de concevoir les déplacements à l’intérieur d’un site, indépendamment du logiciel employé.
Plusieurs dimensions peuvent se combiner. Un menu horizontal décrit la disposition des liens ; un menu déroulant décrit leur comportement ; un menu fixe reste visible pendant le défilement. Une même interface peut donc réunir ces trois caractéristiques sans contradiction.
Le point de départ n’est pas « quel menu est le plus moderne ? », mais « que vient faire le visiteur ? ». Consulter un projet, comparer des produits ou réserver une prestation ne demande ni les mêmes raccourcis ni la même profondeur de navigation.
Trois exemples de navigation web à adapter à votre site
Un portfolio : les projets d’abord, les repères toujours visibles
Imaginez un portfolio de photographe avec un en-tête sobre : « Projets », « À propos », « Contact ». La page d’accueil présente une sélection d’images, puis chaque projet ouvre une série accompagnée de liens « Projet précédent » et « Projet suivant ». Le visiteur peut explorer librement sans devoir repasser systématiquement par l’accueil.
Le défilement vertical convient à une succession de séries et de textes. Une présentation horizontale peut évoquer une galerie, mais elle doit rendre la suite évidente, avec des commandes visibles. Un menu horizontal n’impose pas un défilement horizontal : ce sont deux choix distincts. Sur mobile, une présentation verticale constitue souvent une adaptation plus simple.
Une boutique : des rayons lisibles et un chemin de retour
Pour une boutique de mobilier, l’en-tête peut afficher « Salon », « Chambre », « Bureau » et « Rangement », avec une recherche et un accès au panier. Un méga-menu déploie ensuite les sous-catégories en colonnes : sous « Salon », on trouve par exemple canapés, fauteuils et tables basses. Cette présentation expose plusieurs destinations sans multiplier les ouvertures successives.
Sur une fiche produit, un fil d’Ariane comme « Accueil › Salon › Fauteuils » permet de remonter dans le catalogue. Les filtres servent, eux, à affiner une sélection par matière ou dimensions : ils complètent la navigation sans remplacer les catégories. La limite du méga-menu apparaît lorsque trop de liens occupent l’écran et rendent le choix laborieux.
Un site de services : aller directement vers l’offre ou le contact
Un cabinet de conseil peut retenir « Expertises », « Réalisations », « Équipe » et « Contact », avec un bouton distinct pour prendre rendez-vous. Un menu déroulant sous « Expertises » suffit si chaque prestation possède sa page. Pour une offre unique, une navigation ancrée peut plutôt mener aux sections « Méthode », « Prestations » et « Contact » d’une même page.
Cette dernière formule convient aussi à un événement : programme, intervenants, lieu et inscription deviennent des destinations immédiatement accessibles. Si l’en-tête reste fixe, il faut vérifier qu’il ne masque pas le titre de la section atteinte. Le défilement parallaxe peut enrichir l’ambiance, mais ne remplace pas ces repères.
Comparer les modèles selon le contenu à organiser
Le menu classique convient lorsque les rubriques principales tiennent confortablement dans l’en-tête. La barre latérale devient intéressante pour des contenus structurés en chapitres ou pour une interface de travail. Le tableau suivant aide à comparer les compromis, plutôt qu’à chercher un modèle universel.
Le guide officiel pour rendre vos contenus web accessibles : Découvrez les recommandations WCAG 2.1 pour concevoir des menus, une navigation et des contenus web accessibles à tous.
| Modèle | Usage adapté | Atout | Limite et adaptation mobile |
|---|---|---|---|
| Menu horizontal | Site vitrine, petit portfolio | Rubriques visibles immédiatement | Manque de place ; peut devenir un menu dépliable |
| Barre latérale | Documentation, espace de formation | Hiérarchie consultable pendant la lecture | Occupe de la largeur ; panneau à ouvrir sur mobile |
| Menu déroulant | Rubriques avec quelques sous-pages | En-tête compact | Doit fonctionner au clic, au toucher et au clavier |
| Méga-menu | Catalogue étendu | Vue organisée de nombreuses catégories | Risque de surcharge ; réorganisation nécessaire sur petit écran |
| Menu hamburger | Interface mobile | Libère de l’espace | Cache les destinations jusqu’à son ouverture |
| Menu fixe | Pages longues | Accès permanent aux liens prioritaires | Peut réduire excessivement la surface de lecture |
Le pied de page accueille utilement les coordonnées, les informations légales et des accès secondaires. Il ne devrait pas être le seul endroit où trouver une page essentielle. De même, le fil d’Ariane complète le menu principal : il situe une page dans l’arborescence, mais ne présente pas toutes les destinations du site.
Construire une arborescence qui parle aux visiteurs
Avant de dessiner le menu, listez les pages et regroupez-les selon les besoins du public. Préférez « Tarifs » à un intitulé créatif difficile à interpréter. HubSpot donne un repère indicatif de sept catégories maximum dans le menu principal : c’est une invitation à hiérarchiser, pas une règle qui oblige à créer sept entrées ou à cacher une rubrique nécessaire.
La racine d’une arborescence n’est pas toujours le point d’entrée réel du visiteur. Une personne peut arriver directement sur une réalisation ou une fiche produit depuis un moteur de recherche. Examinez donc chaque page comme une petite porte d’entrée : indique-t-elle à quelle famille elle appartient, comment explorer les contenus voisins et où retrouver l’offre générale ? Ce raisonnement évite de concevoir un parcours compréhensible uniquement depuis l’accueil.
Conservez les mêmes intitulés et le même emplacement de navigation entre les pages. Signalez aussi la rubrique active, sans vous appuyer uniquement sur la couleur. Une identité graphique originale peut s’exprimer dans la typographie ou les images ; elle n’exige pas de réinventer le sens des liens.
Valider le menu sur mobile et par des tâches réelles
Un menu responsive ne consiste pas seulement à ranger tous les liens derrière une icône. Sur téléphone, rendez le bouton d’ouverture identifiable, prévoyez une fermeture évidente et évitez les sous-menus dépendant uniquement du survol. Des zones tactiles suffisamment espacées limitent les erreurs de sélection.
Vérifiez également la navigation au clavier : le focus doit rester visible, les commandes accessibles et les sous-menus refermables. Une fois un panneau fermé, le focus doit revenir à un emplacement logique. Les intitulés doivent permettre de comprendre la destination sans dépendre d’une icône seule.
Un prototype simple, même sans habillage graphique, suffit pour commencer les vérifications :
- Demandez de trouver une information précise, comme un tarif ou une condition de retour.
- Observez le premier choix, les hésitations et les retours en arrière.
- Faites commencer le parcours sur une page intérieure, puis sur mobile.
- Corrigez les libellés ou les regroupements qui provoquent des erreurs.
Retenez finalement le modèle qui rend les tâches importantes évidentes. Une navigation réussie peut être discrète ou expressive, mais elle laisse toujours au visiteur la maîtrise de son parcours.