megas

Systèmes de navigation pour site de contenus : le mégamenu

La navigation est une problématique récurrente sur les sites présentant un certain volume de contenus et une arborescence assez dense – typiquement les sites institutionnels ou e-commerce. Comment présenter de façon optimale l’organisation des contenus d’un site web sans occasionner pour autant une surcharge visuelle ? Un système de navigation rendant visible l’arborescence dans sa globalité serait-il efficace et respectueux d’un design sobre ? Listes déroulantes trop longues, multiplication des barres de menus, sidebar « accordéon » peu ergonomiques… le web est hélas truffé de choix malheureux en ce qui concerne les solutions de navigation.

Menu de zalando.fr

Menu de zalando.fr

Un exemple de hiérarchisation visuelle peu évidente : le menu du site zalando.fr. Ce menu présente 5 niveaux de hiérarchie des catégories ; saurez-vous les identifier du premier coup d’oeil ?

Un des menus de couleur-mode.com

Un des menus de couleur-mode.com

Autre système de navigation à l’efficacité discutable sur couleur-mode.com : outre le fait que le menu latéral et la seconde barre de menu horizontal présentent absolument les mêmes liens (une cohérence critiquable), le choix d’un mégamenu pour ce dernier est absolument déconcertant : 960px par 200px pour afficher… deux liens !

Pourtant cette solution de mégamenu, à condition d’être adaptée au sujet et bien exploitée, peut se révéler un excellent choix pour la navigation d’un site complexe. En effet, son plus grand intérêt est de permettre une hiérarchisation visuelle des sous-menus :

Le megamenu de time-performer.com

Le mégamenu réalisé par Canal-Web pour time-performer.com

Sa largeur permet également d’ajouter des contenus à même le menu, ce qui est particulièrement intéressant dans le cas de sites e-commerce, où le menu se fait espace promotionnel et permet de mettre en avant une thématique, une collection ou une offre spéciale ; une tête de gondole en quelque sorte.

Visiter le site de Canal E-commerce

Vous souhaitez en savoir d'avantage sur les différentes solutions e-commerce que propose Canal-web ?

Visiter Canal E-commerce
Le mégamenu d'Amazon

Le célèbre mégamenu d’Amazon

L’utilisation de mégamenus pour les sites institutionnels ou « à contenus » est un peu moins fréquente. C’est pourtant une possibilité technique tout à fait adaptée à ce type de site, où les systèmes de navigation classique échouent à mettre en valeur l’ensemble de l’arborescence par peur de noyer le visiteur. Pourtant, organiser la présentation visuelle d’une navigation complexe et l’accompagner d’informations ou images contextualisées peut s’avérer une solution particulièrement élégante.

Le mégamenu réalisé pour l'ARS Ile-de-France

Le mégamenu réalisé pour l’ARS Ile-de-France

Bien entendu, le mégamenu ne doit pas être un pansement destiné à camoufler une organisation boiteuse des contenus, mais un complément astucieux à une bonne arborescence, des parcours logiques etc… Il ne faut jamais perdre de vue, lors de la réalisation, l’objectif principal d’orientation de l’internaute vers ce qu’il cherche.

Pour aller plus loin (en anglais)

Notez cet article

A propos de Deborah

Déborah a rejoint Canal-Web en septembre 2012. Son objectif : en apprendre toujours plus autour des problématiques inhérentes à la réalisation web afin d'opter pour des solutions élégantes et efficaces.

Laissez un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>