Lorsque nous utilisons le terme "menu traditionnel", nous faisons référence à un menu de navigation sous la forme d'une barre dans la page Web qui affiche directement des liens.
Plutôt que d'avoir un bouton de menu, les menus traditionnels présentent toutes les informations à l'utilisateur dès qu'il accède au site. Ces menus affichent souvent des liens sous une forme horizontale en haut de la page (sans doute la plus répandue) ou verticale sur le côté de la page.
Le menu déroulant est une autre alternative aux menus traditionnels et au menu hamburger.
Pour savoir quel menu convient le mieux à votre page Web, il est important de comprendre les avantages d'une conception de menu plus classique et traditionnelle par rapport à un menu hamburger. La conception classique connaît un certain succès dans le monde du design, et pour cause : elle a été testée et approuvée par les utilisateurs.
Mais elle a aussi ses inconvénients, surtout dans un monde de plus en plus centré sur le mobile. Des écrans plus petits, cela signifie moins d'espace à l'écran !
Avantages
À mesure que le paysage numérique évolue, il est très tentant de se concentrer uniquement sur les technologies nouvelles et émergentes pour concevoir un site Web. Mais dans certains cas, les menus traditionnels des sites Web peuvent encore être la meilleure option pour offrir une expérience conviviale à vos utilisateurs.
Découvrez les avantages de l'utilisation d'un menu de site Web traditionnel et les raisons pour lesquelles il peut s'agir du bon choix pour votre site Web.
Structure de navigation claire et visible
Les barres de navigation traditionnelles sont utiles pour orienter l'utilisateur vers vos meilleures pages et l'aider à trouver exactement ce qu'il recherche sans avoir à cliquer sur toute une série d'éléments.
Vue complète du contenu du site Web
Cette conception conviviale offre également une vue d'ensemble efficace de tout ce que votre site Web a à offrir. Cela peut susciter l'intérêt des utilisateurs pour d'autres rubriques et les inciter à explorer les autres pages de votre site Web.
Peut contenir un plus grand nombre de liens et de catégories
Particulièrement adapté aux versions d'appareil de bureau de votre site Web, le menu traditionnel peut contenir un grand nombre de catégories pertinentes avec des liens vers d'autres pages du site. Vous disposez ainsi de la place nécessaire pour résumer efficacement vos produits par catégories.
Par exemple, si vous créez un site Web pour une petite entreprise, vous pouvez ainsi présenter de manière concrète les produits ou services que vous vendez dans des catégories spécifiques, ce qui est très utile pour les personnes qui ne connaissent peut-être pas encore votre marque ou votre entreprise.
Plus accessible pour les utilisateurs handicapés
En réduisant le nombre de clics, vous rendez le site Web plus convivial pour tout le monde, y compris les personnes en situation de handicap.
Inconvénients
Si les menus traditionnels des sites Web sont un élément de base de la conception des sites Web depuis de nombreuses années, ils présentent néanmoins certains inconvénients. Comme les technologies Web et les préférences des utilisateurs sont en constante évolution, les menus traditionnels ne sont pas toujours la meilleure option pour offrir à l'utilisateur une expérience fluide.
La page est davantage chargée
Les menus traditionnels limitent la lisibilité de votre page Web, car ils exigent plus d'attention de la part de l'utilisateur. Une page plus ordonnée, contenant moins d'informations, vous permet de faire ressortir facilement les informations principales que vous voulez communiquer à l'utilisateur.
Moins efficace pour les appareils mobiles
Si vous créez une application mobile, le menu traditionnel ne sera peut-être pas aussi efficace. Ce type de menu prend beaucoup de place sur l'écran, ce qui réduit considérablement l'espace réservé à votre contenu. Il s'agit d'un inconvénient majeur à prendre en compte si vous souhaitez créer une page Web destinée à la fois aux utilisateurs de téléphones portables et d'appareil de bureau.
Le menu hamburger est un menu de navigation qui masque les liens de navigation de la page principale. L'utilisateur doit donc cliquer sur l'icône du hamburger pour afficher le menu et explorer les autres pages à partir de là. Cette fonction est signalée par une icône représentant trois lignes horizontales empilées les unes sur les autres, telles les couches d'un hamburger.
Ce bouton hamburger emblématique est devenu très courant, à tel point qu'il est presque aussi reconnaissable que l'icône du haut-parleur qui indique le volume. La plupart des utilisateurs savent que ces trois lignes horizontales mènent à une liste de liens (également connue sous le nom de tiroir de navigation), généralement sous la forme d'un menu coulissant à parcourir.
Ces éléments de menu apparaissent en haut du contenu principal et proposent une série de liens vers d'autres pages du site Web que les internautes sont susceptibles d'explorer.
Le menu hamburger est généralement utilisé pour les applications mobiles, car il s'adapte très bien aux petits écrans et aux appareils mobiles. Cependant, il peut également être utile sur les sites Web d'appareil de bureau, par exemple si la barre de navigation contient trop de pages vers lesquelles vous devez créer des liens.
Quand il est bien conçu, le menu hamburger réduit l'encombrement de votre page, en vous permettant de regrouper plusieurs liens en un seul menu principal plus compact. Ce menu détaché permet de créer une page Web plus propre et moins encombrée, ce que les utilisateurs apprécient particulièrement.
Il existe de nombreux modèles de menu hamburger, chacun étant adapté à des conceptions et à des objectifs différents. Après avoir pris connaissance des différents styles, vous serez en mesure de décider si vous désirez que votre menu s'affiche sur l'ensemble de l'écran, dans une petite bulle dans un coin ou sur la moitié de l'écran seulement.
L'un des exemples de menu hamburger les plus appréciés est le menu hamburger réactif. Cette méthode n'utilise que des feuilles de style en cascade (Cascading Style Sheets, CSS) et remplace le menu horizontal standard par un menu réactif qui permet d'ouvrir les listes contenant des liens de navigation les unes après les autres.
Autre exemple, celui du menu hamburger centré qui remplace les trois lignes par un autre symbole, comme une croix ou une flèche. Cette animation d'icône permet de montrer à l'utilisateur qu'il n'a qu'à appuyer à nouveau sur l'icône pour sortir du menu principal.
Vous pourrez choisir parmi une grande variété d'animations d'icônes, toutes capables de transformer les trois lignes habituelles de l'icône en une nouvelle image. Cette méthode permet de faire glisser le menu et d'afficher les liens de navigation au centre.
L'icône du hamburger est généralement utilisée dans l'un ou l'autre des coins supérieurs de la page Web. Si la page Web s'adresse à une audience dont la langue maternelle est la lecture de gauche à droite, nombreux sont ceux qui privilégient le coin supérieur gauche, car il correspond à leur façon de lire et ces utilisateurs se dirigeront immédiatement vers le coin gauche pour chercher l'icône du menu.
Mais, compte tenu de la popularité croissante de l'icône du hamburger, il n'est pas vraiment déconseillé de l'inclure dans le coin supérieur droit de la page Web si cela convient mieux à la présentation du site. Il est également conseillé de réserver la partie gauche de l'écran aux informations pertinentes et directes que vous souhaitez communiquer à l'utilisateur, et de placer le menu dans le coin droit de l'écran en tant que fonctionnalité supplémentaire.