Blog

Menu Design Tendances dans les sites Web

Nous avons tous vu des méga navigations et des menus déroulants en plein écran en ligne. Ils sont courants sur le Web et particulièrement utiles sur les sites contenant des tonnes de liens.

Mais concevoir un méga nav qui fonctionne peut être très compliqué. Il n’y a pas de directives strictes pour ces menus, vous devez donc étudier ce que font les autres et essayer de faire quelque chose qui conviendra à votre projet.

Examinons certaines tendances de la méga navigation et voyons comment elles  utilisent les menus déroulants traditionnels  pour les pousser plus loin.

Catégories de niveau profond

Le style de conception le plus précieux pour un méga nav est la  structure en colonne .

Cela vous permet de désigner des «catégories» pour les liens et de créer des liens plus profonds sans utiliser plusieurs menus déroulants. Une liste déroulante de méga navigation peut s’étendre sur toute la page, de sorte que vous pouvez généralement insérer au moins 3 ou 4 colonnes dans une liste déroulante.

mega-navigation-menu_01

Jetez un coup d’œil à  Wayfair,  qui utilise un type de menu déroulant tout à fait unique. Ils ont un lien pour les «départements» où vous pouvez parcourir par catégorie et même sous-catégorie telles que chambres à coucher> tables de nuit.

À côté de ce lien se trouve un menu déroulant «idées de salle» où vous pouvez naviguer en fonction de la salle. Cette liste déroulante contient des images à côté des liens, ce qui vous permet de naviguer beaucoup plus facilement.

Il ne faut pas longtemps pour comprendre qu’ils divisent les éléments de navigation en catégories. Ceux-ci suivent une tendance similaire et la navigation de l’homme de Wayfair n’a besoin que de  deux liens principaux  pour que cela fonctionne!

mega-navigation-menu_02

Alternativement, un autre magasin de commerce électronique,  Puma,  présente une structure en colonnes similaire.

Mais ils divisent les catégories en fonction des données démographiques et des objets, puis dans chaque meganav, vous trouverez des colonnes pour chaque type d’objet (produits présentés, vêtements, sports, etc.).

Notez que les colonnes ont leurs propres en-têtes et que celles-ci se démarquent du reste des liens. Il crée une véritable structure de colonne car vous pouvez commencer par parcourir les en-têtes de colonne et parcourir les sous-liens à partir de là.

Effet similaire sur  Lucky Brand  mais avec une torsion dans le design.

mega-navigation-menu_03

Toutes leurs colonnes ont les mêmes combinaisons de couleurs mais elles utilisent une typographie différente. Cela peut rendre la navigation rapide plus difficile, mais elle reste tout aussi utilisable.

Les effets d’animation de Lucky apportent également une touche agréable, c’est donc un élément à prendre en compte.

Mais si vous avez des difficultés avec une méga hiérarchie de navigation, essayez d’abord d’organiser vos liens en catégories plus profondes.

Larges largeurs

Cette tendance n’est pas utilisée sur tous les sites, mais je la vois beaucoup plus aujourd’hui.

D’énormes menus de navigation peuvent couvrir toute la largeur de la page pour créer plus d’espace pour les utilisateurs d’ordinateurs de bureau et d’ordinateurs portables. Les utilisateurs mobiles ont généralement  des menus cachés, de  sorte qu’ils ne voient jamais vraiment l’effet complet de toute façon.

mega-navigation-menu_04

La navigation pour  Pluralsight  est un excellent exemple comportant un méga-menu en plein écran. Le contenu reste fixe à la même largeur que la page elle-même, mais le menu couvre la totalité de l’écran.

C’est un effet cool car cela crée plus de place dans le menu. Ou cela donne au moins l’illusion visuelle de plus d’espace.

Et si vous utilisez une navigation énorme pour des moniteurs de grande taille, pourquoi ne pas suivre le même chemin?

Digital Spy  a quelque chose de très similaire et leurs navs incluent aussi des pauses de catégorie.

mega-navigation-menu_05

Il existe une distinction égale entre les liens déroulants «normaux» et les liens miniatures menant directement aux articles.

Mais encore une fois, le contenu reste fixe à la même largeur que la page, tandis que le menu couvre la totalité de l’écran.

Effet fantastique si vous pouvez le faire fonctionner.

mega-navigation-menu_06

Vous pouvez même combiner la structure de la colonne et l’effet plein écran dans un même design.

C’est ce que vous voyez sur le  site Web OARS  et c’est un magnifique exemple de super design + super UX.

Mélanger des images et du texte

J’encourage l’ajout de plus d’images à tous les sites Web lorsque cela est possible. Les éléments visuels aident à décomposer tout le texte que nous voyons régulièrement.

Les menus Mega Nav fonctionnent mieux sur des écrans plus grands. Vous pouvez donc dire qu’il y a de la place pour les images. Le  site Web de Sears  divise leur navigation en catégories à niveaux multiples avec des liens et des images.

Certaines des catégories supérieures ont des images pour des appareils de cuisine, des matelas et des meubles de maison. Mais les catégories plus profondes incluent des liens directs vers des éléments tels que la coutellerie et la vaisselle.

mega-navigation-menu_07

Rappelez-vous que vous pouvez faire une méga navigation assez grande tout en la rendant utilisable. Il y a donc place pour une rangée d’images  et  une rangée de liens de texte pour presque tous les navigateurs.

Mais vous pouvez également suivre la route d’un menu plus petit, comme avec les menus  déroulants de la PlayStation .

mega-navigation-menu_08

Leur navigation inclut également un bon mélange d’images et de texte, dont beaucoup sont des étiquettes pour des pages individuelles.

Si vous avez le temps de concevoir des icônes personnalisées, vous pouvez essayer ceci pour votre propre site. Incluez une icône à côté de chaque lien principal pour obtenir des éléments visuels et du texte pour la navigation.

Techniques de remplacement alternatives

Soyez prêt à expérimenter avec vos méga navigations. Il n’y a pas de règles strictes pour cela et une grande expérience utilisateur vient de tester pour voir ce qui fonctionne.

Certains sites Web repoussent réellement les limites des listes déroulantes avec des animations personnalisées, des colonnes multiples et même des menus déroulants qui apparaissent en dehors des méga-navs. Si le menu est utilisable et fonctionne, alors c’est un travail bien fait.

Mais vous pouvez toujours pousser un peu plus loin si vous êtes prêt à essayer.

mega-navigation-menu_09

L’Open  propose un menu de méga navigation typique qui s’agrandit en vol stationnaire. Mais il utilise une technique alternative qui  abaisse la page entière pour faire de la place pour le nouveau menu.

La plupart des méga-navs apparaissent en haut de la page mais celle-ci s’anime tout en déplaçant tout le contenu de la page vers le bas.

Ce n’est certainement pas une idée parfaite pour tous les sites Web, mais c’est unique. Et si cela fonctionne pour le site de The Open, cela pourrait fonctionner pour d’autres.

Cela dépend si vous voulez l’essayer et éventuellement effectuer quelques  tests A / B  sur la convivialité.

Un autre exemple est sur le  site Waterworks  où les listes déroulantes n’apparaissent pas à moins que vous ne cliquiez.

mega-navigation-menu_10

Encore une fois, ils ressemblent aux menus de méga navigation traditionnels. Mais ils s’écartent de la norme (survolant) en ciblant un événement utilisateur différent (en cliquant).

Il comporte un petit bouton «Fermer» dans le coin, ce qui permet de le fermer facilement. Mais cela ne fonctionnera probablement pas pour tous les sites et ce serait très utile pour les très grands déroulants.

Gardez toutes ces tendances à l’esprit lorsque vous avancez avec des idées de méga nav dans vos propres projets.

Les menus de navigation Mega avancent constamment avec de nouveaux styles et techniques de conception. Étudier d’autres exemples est un bon point de départ, mais essayez vraiment d’imaginer vos propres idées pour pousser vos menus encore plus loin.