Menus de survol MegaDropdown

Les sites Web complexes reposent souvent sur une navigation complexe. Lorsqu'un site Web héberge des milliers de pages, souvent associées à des micro-sites Web et à des centaines de sous-sections, la navigation finit par devenir profonde et large. Et avec une navigation à plusieurs niveaux aussi complexe montrer l'étendue des options nécessite un peu d'espace. Pensez aux grands détaillants de commerce électronique et aux grands sites d'entreprise, qui s'adressent à de nombreux publics et disposent de nombreux points d'entrée.

Il n'est pas étonnant qu'une manière courante de gérer cette complexité consiste à exposer rapidement les clients à une grande quantité de navigation. C’est exactement la raison pour laquelle les méga-listes déroulantes sont devenues en quelque sorte une institution sur le Web, bien qu’elles soient principalement destinées aux projets complexes et de grande envergure. Une méga-liste déroulante est essentiellement une grande superposition qui apparaît sur l'action d'un utilisateur. Habituellement, il comprend un ensemble mixte de liens, de boutons, de vignettes et parfois de listes déroulantes et de superpositions imbriquées.

Pendant des décennies, un comportement courant pour ce type de navigation est d'ouvrir le menu au survol de la souris . Et pendant des décennies, la plainte d'un utilisateur courant à propos de ce modèle a été le manque absolu de certitude et de contrôle sur comment et quand la sous-navigation s'ouvre et se ferme.

Parfois, le sous-menu apparaît de manière inattendue et parfois il disparaît soudainement, et parfois il reste sur l'écran pendant un certain temps, bien que le pointeur de la souris soit déjà dans une partie très différente de la page, ou sur une autre page. Une méga-liste déroulante s'ouvrant en survol sur Wayfair.com . Un composant commun pour les grands magasins de détail. ( Grand aperçu )

La ​​principale raison pour laquelle les méga-listes déroulantes peuvent être fastidieuses à utiliser est à cause d'une inadéquation des intentions et des attentes . Avec les menus déroulants, nous essayons de déduire et d'agir sur une intention particulière en suivant le comportement de la souris, mais nos clients peuvent avoir des objectifs très différents et des limitations très différentes lors de l'accès à une page.

Le comportement du client est généralement imprévisible , même si nos analyses peuvent raconter une histoire légèrement différente avec des points de données collectés et normalisés sur une plus longue période de temps. Nous pouvons rarement prédire le comportement avec précision.

Les scénarios courants que nous explorons habituellement sont:

1. Le client vise le lien de catégorie et s'y rend directement pour explorer les éléments de sous-navigation de cette catégorie
2. Le client déplace la souris vers une cible sur l'écran mais la trajectoire que la souris doit parcourir couvre un lien de navigation qui ouvre une méga-liste déroulante. [19659012] Les tunnels de survol peuvent être frustrants à naviguer. De: Menus déroulants avec des chemins de mouvement de souris plus tolérants . ( Grand aperçu )

   Cependant, il y a aussi beaucoup d'autres situations à considérer. Pour n'en nommer que quelques-uns:

   1. Le client souhaite rechercher des options de méga-liste déroulante lors de la saisie d'une recherche automatique. Pour ce faire, ils doivent continuer à rouvrir la méga-liste déroulante ou utiliser des onglets de navigation séparés, placés côte à côte.
   2. Le client peut utiliser un trackpad (ou une souris) pour faire fonctionner un grand affichage secondaire, de sorte que les mouvements du pointeur seront plus lents, brusques et imprécis. Cela entraînerait l'ouverture involontaire de la méga-liste déroulante chaque fois que l'utilisateur s'arrête lorsqu'il se rend aux CTA ou au panier d'achat en haut de la page.
   3. Le client souhaite ouvrir la page de catégorie alors il voyage vers le lien de catégorie, cliquez dessus, mais le scintillement se produit car une méga-liste déroulante semble retardée.
   4. Avec sous-menus imbriqués dans une méga-liste déroulante le client souhaite explorer des éléments similaires dans la catégorie dans lequel ils se trouvent actuellement, mais à cause de leur imbrication, ils doivent rouvrir le méga-menu déroulant encore et encore, et parcourir le même tunnel de vol stationnaire encore et encore.
   5. Imaginez une situation où vous voulez redimensionner la fenêtre et juste au moment où vous êtes sur le point de vous aligner sur le bord droit de la fenêtre, un menu de survol continue de s'afficher – simplement parce que vous avez déplacé le curseur de votre souris trop près.
   6. ] L'utilisateur commence à faire défiler lentement pour évaluer le contenu sur un page, mais le menu continue de s'afficher. Et chaque fois que l'utilisateur repousse un curseur pour lire le contenu de la méga-liste déroulante, le menu disparaît accidentellement.

   Le problème est que nous devons soutenir toutes ces intentions et tous ces accidents, mais en même temps, nous devons nous assurer que nous ne créons pas non plus une expérience ennuyeuse et frustrante pour aucun de ces cas. Bien sûr, en tant que concepteurs et développeurs, nous avons inventé un certain nombre de techniques pour résoudre ce problème.

   Hover Entry / Exit Delay

   L'une des premières solutions, et aussi l'une des plus courantes encore, est de introduire un délai d'entrée / sortie de survol . Nous devons nous assurer que l’enu m n’ouvre pas et ne se ferme pas trop tôt . Pour y parvenir, nous introduisons un délai, généralement d'environ 0,5 seconde. Cela signifie que nous donnons aux clients un buffer d'environ 0,5 seconde pour:

   • Traverser la trajectoire vers une cible distante si nécessaire, ou
   • Indiquer qu'ils ont l'intention d'explorer la navigation en restant sur le méga -lien de catégorie de liste déroulante, ou
   • Corrigez une erreur s'ils ont quitté les limites d'un méga-liste déroulante par accident.

   En d'autres termes, tant que le client reste dans la superposition méga-liste déroulante , nous continuons à l'afficher. Et nous masquons la superposition une fois que le client a déplacé le curseur de sa souris en dehors de la superposition de sous-navigation pendant au moins 0,5 seconde.

   Bien que cela résout le problème du scintillement accidentel sur la page, il introduit un lag dans les cas où un utilisateur a quitté la méga-liste déroulante pendant plus de 0,5 seconde. En conséquence, il ralentit chaque interaction avec la méga-liste déroulante sur l'ensemble du site. Malheureusement, cela devient très vite très perceptible, surtout si la navigation est beaucoup utilisée.

   Certaines implémentations ajoutent une transition fondu d'entrée / sortie pour rendre l'apparence d'une méga-liste déroulante moins soudaine, mais en pratique, cela se traduit par une augmentation du délai d'entrée / sortie à 0,8-0,9 s, ce qui introduit également un décalage plus notable. Un exemple de cela est ADAC.de avec un délai d'entrée en fondu de 100 ms et une transition en fondu en sortie de 300 ms. (La transition ne s'applique pas lors du passage d'une catégorie à l'autre de la méga-liste déroulante.)

   De toute évidence, plus la superposition reste visible longtemps, plus nous pénalisons sévèrement les personnes qui veulent délibérément échapper à la superposition . En réalité, cela devient un problème car nous introduisons un délai superficiel entre l'action de l'utilisateur et la réponse de l'interface utilisateur.

   Forgiving Mouse Movement Paths: Trajectory Triangle

   Au lieu d'introduire un délai, nous pouvons essayer d'être plus généreux avec le les chemins empruntés par les clients. Étant donné que les mouvements de la souris sont intrinsèquement imprécis, pour minimiser la frustration, nous pouvons éviter les tunnels de survol étroits et agrandir les couloirs de déplacement.

   Par exemple, nous pouvons utiliser la technique du triangle d'Amazon dans laquelle nous avons construit un triangle de trajectoire qui relie la position actuelle du pointeur de la souris aux bords de la méga zone de liste déroulante. Si cette zone est censée apparaître à côté des catégories à droite (comme indiqué dans l'image ci-dessous), nous connectons le pointeur de la souris aux bords supérieur droit et inférieur droit du conteneur dans lequel les catégories sont répertoriées.

   

   Tant que l'utilisateur reste dans le triangle ou dans toute la zone de méga-liste déroulante, la superposition est toujours affichée. Si l'utilisateur choisit de voyager à l'extérieur du triangle le contenu de la superposition méga-déroulante changera en conséquence. Et bien sûr, elle disparaîtra complètement immédiatement une fois que l'utilisateur aura complètement quitté la liste des catégories.

   Chris Coyier met en évidence certaines des subtilités techniques de cette technique dans son article sur Menus déroulants avec des chemins de mouvement de souris plus tolérants avec une démo JavaScript vanille par Alexander Popov sur «Aim-Aware Menus».

   Avec cette technique, nous minimisons le frottement de la disparition soudaine et de la réapparition de sous-navigation. Mais cela peut devenir inefficace si les liens de catégorie sont positionnés trop près les uns des autres, ou si nous affichons le menu de survol en survolant un bouton plus grand. Nous pouvons faire un peu mieux avec les zones de sortie de chemin SVG.

   Zones de sortie de chemin SVG

   Lors du calcul d'un triangle de trajectoire avec la technique précédente, nous suivions parfois non seulement la position exacte du pointeur de la souris, mais aussi recalculer le triangle à chaque mouvement du pointeur – tout le temps. Nous pouvons améliorer la stratégie en calculant une fois la zone de superposition SVG globale et en vérifiant si le pointeur de la souris se trouve à l'intérieur – sans recalculer le triangle tout le temps. Un bon exemple de cela est l'implémentation de Hakim el Hattab qui dessine les zones dynamiquement avec SVG en fonction de la position de l'élément de navigation sur l'écran.

   

   La ​​solution de Hakim est en fait responsive donc si la sous-navigation ne rentre pas sur l'écran, elle flottera à côté de la navigation principale article affiché en pleine largeur ou hauteur. La zone du chemin SVG sera recalculée en conséquence, mais uniquement si l'utilisateur fait défiler verticalement ou horizontalement. Vous pouvez voir une démonstration fonctionnelle de la technique en action dans le mode d'affichage de débogage de Hakim du modèle de menu .

   Bien que cette option soit précise et élimine entièrement le décalage que nous avons constaté avec les retards de survol, cela provoquera un scintillement lorsque le client se déplacera accidentellement. une grande liste de catégories qui invite la méga-liste déroulante à ouvrir sur chaque élément de navigation.

   Encore une fois, la racine du problème est que les clients n'ont aucun contrôle sur l'ouverture et la fermeture des méga-listes déroulantes , et ils ne comprennent souvent pas non plus quand ces menus apparaîtront ou disparaîtront. Ce manque de prévisibilité conduit souvent à des erreurs et des frustrations. Mais parfois les méga-listes déroulantes ont encore plus, des problèmes d'accessibilité cachés.

   Pièges des méga-listes déroulantes s'ouvrant en survol

   Comme mentionné ci-dessus, toutes les techniques énumérées ci-dessus partagent le même objectif. Ils tentent de prédire l'intention de l'utilisateur d'ouvrir et de fermer le menu de navigation, en se basant sur certaines observations concernant la vitesse des mouvements de la souris, la durée du séjour dans une seule zone ou la position exacte sur l'écran. Ces prédictions échoueront à un moment ou à un autre pour certains clients, et il n'y a pas vraiment grand chose à faire à ce sujet.

   Les méga-menus déroulants qui s'ouvrent en survol ont de nombreux problèmes d'accessibilité . De toute évidence, nous devons prendre en charge la navigation dans la méga-liste déroulante pour les utilisateurs de clavier uniquement, et nous devons également nous assurer que les éléments sont correctement annoncés aux lecteurs d'écran. Mais aussi en termes de mise en page générale, nous devons être prudents quant à l'emplacement de la méga-liste déroulante.

   Recherche interrompue par une méga-liste déroulante

   Si une fonctionnalité importante est affichée assez près de la méga-liste déroulante, cela causera généralement un bon nombre de problèmes et de plaintes. Par exemple, si une barre de recherche est affichée au-dessus de la méga-zone de liste déroulante, cela finira par causer une quantité incroyable de frictions et de frustration.

   À moins qu'un délai d'entrée / sortie de survol suffisamment long ne soit utilisé, le mega-dropdown-overlay sera toujours entre les résultats de recherche et de recherche, comme c'est le cas sur Thesauraus.com ci-dessous. Chaque fois qu'un utilisateur s'éloigne de la barre de recherche vers les résultats (et retour), la méga-liste déroulante se met en travers.

   Plusieurs sous-navigations apparaissent avec des retards

   L'expérience va être lourde lorsqu'il y a plusieurs sous-navigations ] ouverture en vol stationnaire retardée l'une après l'autre. Le site Vodafone ci-dessous en est un exemple malheureux. Si dans ce cas, chaque élément de navigation agit également comme un lien autonome vers la catégorie (en plus d'ouvrir une méga-liste déroulante), nous devrions nous attendre à beaucoup de clics de rage partout sur le site.

   Dans l'exemple ci-dessus, il y a 4 niveaux de navigation affichés les uns sous les autres, et 2 d'entre eux s'ouvrent en survol avec un Transition de 300 ms . Dans le même temps, étant donné que chaque titre de catégorie est également un lien vers la page de la catégorie, les utilisateurs peuvent également accéder directement à la page de la catégorie. Mais une fois qu'ils ont cliqué – et pendant qu'ils attendent que la nouvelle page apparaisse – le menu de survol prendra brièvement son apparence semi-cassée – souvent n'ayant pas assez de temps pour passer à la vue appropriée pour être enregistré par un client. [19659003] Ajoutez-y tout problème de mémoire ou de traitement sur l'appareil légèrement plus ancien de l'utilisateur, quelques extensions de navigateur lourdes et une vérification antivirus en arrière-plan, et l'expérience globale deviendra rapidement insupportable.

   Par ailleurs, puisque le 4ème niveau de navigation n'apparaît qu'en survol si le 3ème niveau de navigation est déjà ouvert, et le 3ème niveau de navigation n'apparaît qu'en survol si le 2ème niveau de navigation est déjà ouvert, pour se déplacer entre les pages du 4ème niveau, les utilisateurs doivent rouvrir la navigation encore et encore et se rappeler où ils ont cliqué précédemment pour survoler le tunnel jusqu'au 4ème niveau.

   En gros, multiplions les retards et survolent les problèmes de tunnel dont nous avons parlé Earl ier, obligeant toujours les utilisateurs à attendre que la navigation apparaisse, et leur demandant d'être très précis dans un couloir de vol stationnaire une fois que la navigation apparaît . C’est de là que vient la frustration.

   

   Au cas où vous auriez à faire face à une navigation complexe de ce type, il pourrait être utile de tester si les problèmes disparaissent lorsque un seul (au lieu de deux) le menu de survol est utilisé. Ce menu serait légèrement plus grand et contiendrait toutes les options dans des colonnes. Ou si possible, pour chaque catégorie, envisagez d'afficher toutes les options de navigation dans cette catégorie sous la forme d'une barre de navigation permanente (barre latérale ou barre supérieure collante) – généralement, cela devrait éliminer tous ces problèmes.

   Titres de catégorie faire trop de choses

   Comme nous l'avons vu précédemment, les titres de catégories ont parfois deux fonctions différentes . D'une part, chaque titre de catégorie pouvait être lié à la page de la catégorie, afin que les clients puissent cliquer dessus pour accéder directement à la page. D'autre part, ils pourraient également ouvrir une superposition méga-déroulante. Donc, si l'utilisateur survole le titre pendant suffisamment longtemps, la méga-liste déroulante s'ouvrira, mais l'utilisateur a peut-être déjà cliqué sur un lien, ce qui provoquera un scintillement. Pour les clients, il est difficile d’avoir les bonnes attentes lorsque l’interface ne fournit pas vraiment d’indices.

   

   Il existe quelques options pour résoudre ce problème:

   1. Pour indiquer que le titre de la catégorie est un lien, il peut être utile de le souligner
   2. Pour rendre la distinction entre le titre de la catégorie et une liste déroulante plus évidente, ajoutez un séparateur vertical (par exemple, une ligne verticale) et une icône (chevron),
   3. Laissez le titre de la catégorie ouvrant uniquement le méga-liste déroulante, et ajoutez un lien vers la section «Accueil» de la catégorie dans la superposition méga-déroulante. Il peut également s'agir d'un bouton "Voir toutes les options" bien visible (voir l'exemple The Guardian ci-dessus).

   Comme mentionné ci-dessus, vous pouvez parfois voir une icône supplémentaire utilisée pour indiquer que le menu ouvre un superposition, tandis que le titre de la catégorie est un lien. Dans nos tests d'utilisabilité, nous avons remarqué que chaque fois qu'une icône est présente (et peu importe quelle icône est), les utilisateurs font souvent une distinction mentale entre l'action qui sera déclenchée par un clic sur une icône et l'action invitée. par un clic sur le titre de la catégorie.

   Dans le premier cas, ils s'attendent généralement à ce qu'une liste déroulante s'ouvre, et dans le second cas, la page de catégorie apparaisse. Plus important encore, ils semblent s'attendre à ce que le menu s'ouvre sur tap / click, plutôt que sur .

   Mailchimp est un bon exemple de méga-liste déroulante qui évite la plupart des problèmes décrits ci-dessus , avec les titres de catégorie agissant uniquement pour ouvrir une méga-liste déroulante. La liste déroulante est accessible aux utilisateurs de clavier avec un style : focus . Une fois sélectionnée, chaque catégorie est mise en évidence comme souligné et cela peut amener certaines personnes à supposer que le titre s'est transformé en lien, en particulier parce que le soulignement est exactement le même pour le lien «Tarification» en haut de la navigation. Peut-être que le mettre en évidence avec une couleur d'arrière-plan serait un peu plus à l'épreuve des balles. Un excellent exemple de référence à considérer pour les menus de survol.

   En général, il semble être une bonne idée d'éviter de surcharger les titres de catégories avec des fonctions multiples. Cela vaut non seulement pour les méga menus déroulants, mais à peu près pour tous les menus, y compris les accordéons ou les info-bulles: la zone entière doit servir d'expansion, affichant les options de navigation lorsque vous appuyez ou cliquez dessus. Dans la plupart des cas, c'est simplement plus simple et moins frustrant de cette façon.

   L'une des raisons courantes pour lesquelles les méga-listes déroulantes s'ouvrent souvent en survol, car de nombreuses grandes entreprises veulent exposer rapidement leurs clients à l'étendue des options disponibles sur le site. . Avec les options de navigation changeant en survol, nous pouvons afficher plus d'options plus rapidement et le client peut également explorer plus d'options plus rapidement. C'est pourquoi il est difficile d'imaginer un grand détaillant de commerce électronique sans une grande superposition de navigation, par exemple.

   Cependant, c'est une bonne idée de tester si le temps d'engagement et les taux de clics restent les mêmes (ou augmentent) si le survol de la navigation est remplacé par un navigation tap / click . En fait, la plupart des problèmes énumérés ci-dessus peuvent être résolus facilement en faisant exactement cela: la superposition méga-liste déroulante ne s'ouvrirait et se fermerait que lorsque l'utilisateur invite explicitement cette action particulière. Par conséquent, il n'est pas nécessaire de suivre le pointeur de la souris ou de régler avec précision les délais d'entrée / sortie du survol. De plus, comme il n'y a pas de survol sur mobile de toute façon, nous devons fournir une option pour ouvrir le menu en appuyant / en cliquant pour mobile dans un sens ou dans l'autre, afin que nous puissions le garder ainsi pour les écrans plus grands également.

   Le site Web du Musée juif de Berlin en est un bon exemple. Non seulement la barre de navigation supérieure ouvre les méga menus déroulants en appuyant et en cliquant, mais il en va de même pour la navigation dans la barre latérale basée sur des icônes. De plus, comme l'utilisateur doit activement ouvrir / fermer la superposition, nous pouvons mettre en évidence la catégorie sélectionnée avec les styles : focus / : active .

   Le site Web n'utilise aucune icône pour indiquer que le menu peut être ouvert ou fermé, et les options de menu ne sont pas des liens menant à une page distincte. Cela rend l'expérience globale très calme et prévisible, bien que probablement plus lente à exposer les options de navigation par rapport aux menus de survol.

   Cependant, comme le site Web n'a pas beaucoup d'options de navigation à afficher, cela semble très bien fonctionner. Et c'est un excellent exemple de référence à garder à l'esprit lorsque vous travaillez sur une méga-liste déroulante accessible qui s'ouvre en tap / click.

   Si vous avez un peu plus de navigation, un exemple un peu plus avancé est Allianz.de . Au lieu d'utiliser une seule grande superposition de méga-liste déroulante, la sous-navigation est regroupée en menus déroulants plus petits. Cependant, le menu n’affiche pas toujours toutes les options pour chaque catégorie. Au lieu de cela, il met en évidence les options les plus importantes avec un lien pour voir toutes les options en bas. Le seul détail qui pourrait manquer est un chevron indiquant qu'un menu déroulant apparaîtrait au clic.

   Sur mobile, le méga-liste déroulante est un groupe d'accordéons avec un bon choix de contraste de couleur et une indentation pour indiquer la hiérarchie de la navigation. Chaque accordéon n'affiche jamais plus de 4 éléments de navigation à la fois. Un excellent exemple de référence pour une navigation méga-déroulante complexe qui fonctionne bien.

   

   Si vous recherchez une implémentation technique, vous pouvez vérifier À l'éloge du menu contextuel sans ambiguïté dans lequel Mark Root-Wiley montre comment construire un menu clic accessible . L'idée est de commencer à créer le menu sous la forme d'un menu survolant uniquement CSS qui utilise li: hover> ul et li: focus-within> ul pour afficher les sous-menus.

   Ensuite, nous utilisons JavaScript pour créer les éléments définir les attributs aria et ajouter les gestionnaires d'événements. Le résultat final est disponible en tant qu'exemple de code sur CodePen et en tant que référentiel GitHub . Cela devrait également être un bon point de départ pour votre menu.

   Il va sans dire que tous les méga-menus déroulants en tap / click ne fonctionnent pas bien. Target.com est un autre exemple intéressant de navigation large et accessible qui évite la mise en page multi-colonnes et n'affiche qu'un seul niveau de navigation sur le temps – le tout s'ouvrant au toucher / clic.

   La ​​liste déroulante affiche les options dans une seule colonne à la fois, de sorte que lorsque vous vous déplacez dans les catégories, vous restez toujours concentré dans la même superposition sur l'écran. Chaque section sélectionnée occupe toute la colonne. L'expérience est prévisible et calme, mais encore une fois, le client peut voir moins de navigation à la fois.

   Dinoffentligetransport.dk un site Web de service de transport public du Danemark, utilise plusieurs colonnes à la place, la navigation en haut étant complétée par une icône en chevron,

   Dans certaines autres implémentations, on peut voir plusieurs superpositions apparaître au-dessus les unes des autres. En fait, c’est le cas chez Unilever (exemple ci-dessous). Le méga-liste déroulante s'ouvre au toucher / clic, avec plusieurs chevrons affichés en même temps. Que représente chaque chevron? Et à quoi le client doit-il s'attendre en cliquant dessus?

   <img loading = "lazy" decoding = "async" importance = "low" width = "677" height = "545" srcset = "https: // res .cloudinary.com / indysigner / image / fetch / f_auto, q_auto / w_400 / https: //cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3ea87a88-6d80-4464-95ca-5691b750 -mega-dropdown-hover-menus.png 400w,
   https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3ea87a88-6d80-4464- 95ca-5698b7506131 / 11-mega-dropdown-hover-menus.png 800w,
   https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3ea87a88-6d80-4464- 95ca-5698b7506131 / 11-mega-dropdown-hover-menus.png 1200w,
   https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3ea87a88-6d80-4464- 95ca-5698b7506131 / 11-mega-dropdown-hover-menus.png 1600w,
   https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3ea87a88-6d80-4464- 95ca-5698b7506131 / 11-mega-dropdown-hover-menus.png 2000w "src =" https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent. com / assets / 344dbf88-fdf9-42bb-adb4-46f01eedd629 / 3ea87a88-6d80-4464-95ca-5698b7506131 / 11-mega-dropdown-hover-menus.png "tailles =" 100vw "alt =" Unilever.com avec des chevrons dans la méga-liste déroulante. "/>

   “ Nos marques » mène à une page distincte tandis que chaque étiquette en dessous ouvre une nouvelle superposition de navigation en haut de la méga-liste déroulante. Avez-vous remarqué que« Toutes les marques »est souligné, tandis que le reste de la navigation On peut voir l'intention des concepteurs de créer le menu. En effet, «Al l marques ” est un lien, tandis que les autres étiquettes ouvrent une superposition:

   

   Avec tous ces éléments options en place, comment pourrions-nous afficher une méga navigation déroulante sur mobile ? Il s'avère qu'il est difficile de regrouper de telles superpositions méga-déroulantes sur mobile: généralement, il n'y a pas assez d'espace ni d'aide visuelle pour mettre en évidence les différents niveaux différemment et les distinguer facilement. Dans l'exemple ci-dessus, il peut prendre un certain temps avant de savoir sur quelle page nous sommes arrivés.

   

   Il est un peu plus facile de comprendre à quel niveau nous en sommes actuellement et quelles options nous avons avec une approche accordéon, comme nous pouvons le voir sur Dinoffentligetransport.dk . Cependant, il peut être judicieux de souligner les liens dans chaque sous-section lorsqu'ils dirigent les clients vers la page de la catégorie. En outre, la barre de catégorie entière devrait probablement être cliquable et développer l'accordéon.

   

   Dans l'exemple ci-dessus, la plupart du temps, nous pourrons probablement afficher un nombre limité de sections de navigation à la fois. Mais si les titres de chaque section sont relativement courts, nous pourrions diviser l'écran horizontalement et afficher plusieurs niveaux en même temps. LCFC.com est un bon exemple de ce modèle en action.

   

   Quelle option fonctionne le mieux?

   D'après mon expérience personnelle, lorsque nous comparons les implémentations de méga-menus déroulants sur mobile, les accordéons verticaux semblent plus rapides et plus prévisibles que les superpositions (qu'il s'agisse d'une seule colonne ou de plusieurs couches). Et les menus fractionnés semblent être plus rapides et plus prévisibles que les accordéons.

   Il y a quelques avantages que les accordéons et les menus fractionnés offrent:

   • Il n'y a pas besoin pour afficher un bouton «Retour» pour revenir à la page parente.
   • L'œil n'a pas besoin de sauter entre le haut du menu de navigation et la sous-navigation de la section à chaque saut.
   • Les clients peuvent naviguer entre plusieurs niveaux plus rapides: au lieu de frapper «Retour» plusieurs fois, le peut sauter à l'accordéon qu'il trouve intéressant.
   • Les clients peuvent explorer plusieurs sections en même temps (à moins que l'implémentation ferme automatiquement un accordéon quand un autre a été ouvert) . Ce n’est pas possible avec les superpositions.

   En général, les accordéons et les menus fractionnés semblent être une meilleure option . Mais ils ne semblent pas bien fonctionner quand il y a beaucoup de navigation en place. Chaque fois que chaque catégorie contient plus de 6 à 7 éléments il s'est avéré judicieux d'ajouter un bouton «Parcourir tout» sous 6 à 7 éléments dans un autre accordéon (ou sur une page distincte), ou utiliser des superpositions à la place.

   Donc, en fonction de la quantité de navigation, nous pouvons commencer avec des menus fractionnés puis si ce n'est pas viable, passer aux accordéons, et si la navigation devient encore complexe, éventuellement transformez les accordéons en superpositions.

   Quand Mega-Dropdown pourrait ne plus être nécessaire après tout

   Nous avons déjà fait référence au travail de l'équipe de Gov.uk dans l'article précédent de mais leurs idées sont précieuses dans le contexte des méga-dropdowns également. For large, multi-level navigation, the team has decided employed findings by form expert Caroline Jarrett’s one thing per page principle. According to Caroline, “questions that naturally ‘go together’ from the point of designers […] don’t need to be on the same page to work for users”. Caroline primarily applied it to the design of web forms, but we could apply it in the context of navigation as well.

   The idea, then, is to avoid complex mega-dropdowns altogetherand provide customers with a clear, structured way to navigate through the trenches of the website, from one page to another. In the case of Gov.ukit seems to be happening through a well-considered information architecture and guides, that lead the visitors through predictable steps towards the goal.

   

   The Kanton Zürich is using the same pattern. Instead of layers of mega-dropdown navigation, all options are displayed in a structured way, with main topics featured on the top as “Top topics” and the navigation within each section displayed as a sticky navigation bar on the top.

   An alternative approach is to use the “I-want-to” navigation pattern. In addition to the conventional navigation, we could provide a “navigation dropdown” to allow customers to construct a navigation query of their choice, and be directed straight to the page they are lookin for. Basically, it’s a series of drop-downs that appear under another to let the user select what they intend to do or find on the website.

   For a while, the pattern was used on Commonbond (see the video above), and it’s also used on Corkchamber.ie. An interesting, albeit unconventional way to provide access to a deep level of navigation without having to use a mega-dropdown at all.

   Mega-Dropdown Navigation Design Checklist

   Every time we bring up a conversation about mega-dropdown menus, everyone seems be settling in a few groups: some colleagues prefer hover, the others prefer tap and click, some prefer both, and the others don’t mind either as long as there is both a category link and an icon that opens the menu.

   It’s impossible to say that one approach is always better than the others, but both in terms of technical implementation and UX, opening the menu on tap/click usually causes way less trouble and way less frustration while allowing for a simple implementation, and thus resulting in a predictable and calm navigation. Before moving to a hover menu, we could try keeping tap/click behavior first, measure the engagement, and study if hover is needed after all.

   And as always, here are some general things to keep in mind when designing and building a mega-dropdown:

   • Avoid placing important, frequently used items close to the mega-dropdown navigation (e.g. search bar, CTA, shopping cart icon) (if hover),
   • Avoid multiple sub-navigations within mega-dropdown appearing after each other with delays (if hover),
   • Avoid overloading category titles with multiple functions.
   • Underline category titles to identify them as links to the category’s page (of course if they are linked to the category page).
   • If you can, add a “Home” link or a “Browse all” button within each sub-category instead of linking the category directly.
   • Avoid horizontal overlays and consider replacing them with vertical accordions and split-menus,
   • Add an icon to indicate that a category title triggers a mega-dropdown on click (e.g. chevron) and always make it large enough for comfortable tapping (e.g. 50×50px),
   • Avoid long fade-in/fade-out transitions when a mega-dropdown appears/disappears (at most 300ms),
   • Consider testing a structured guide or a navigation query (“I-want-to” navigation pattern) instead or additionally to the mega-dropdown.
   • Avoid mega-dropdown hover menus if possible.

   Related Articles

   If you find this article useful, here’s an overview of similar articles we’ve published over the years — and a few more are coming your way.

   (il)