Modèles de conception frustrants : menus de survol méga-déroulants

Les sites Web complexes reposent souvent sur une navigation complexe. Lorsqu'un site Web contient des milliers de pages, souvent combinés à des micro-sites Web et à des centaines de sous-sections, la navigation finira par être approfondie et large. Et avec une navigation à plusieurs niveaux aussi complexe, afficher l'étendue des options nécessite un peu d'espace. Pensez aux grands détaillants de commerce électronique et aux grands sites d'entreprise, s'adressant à de nombreux publics et disposant de nombreux points d'entrée.

Il n'est pas étonnant qu'une façon courante de gérer cette complexité consiste à exposer rapidement les clients à une grande quantité de navigation. C'est exactement pourquoi les méga-listes déroulantes sont devenues une sorte d'institution sur le Web, bien que principalement pour des 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 mélange de liens, de boutons, de vignettes et parfois de listes déroulantes et de superpositions imbriquées.

Depuis des décennies, un comportement courant pour ce type de navigation consiste à 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 la manière et le moment où 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 à l'écran pendant un certain temps, bien que le pointeur de la souris se trouve déjà dans une partie très différente de la page, ou sur une toute autre page.

Pourquoi les menus déroulants méga-déroulants sont-ils frustrants ?

La principale raison pour laquelle les méga-listes déroulantes peuvent être fastidieuses à utiliser est l' 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. 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 la 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.

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

1. Le client souhaite rechercher des options de méga-liste déroulante tout en saisissant une saisie semi-automatique de recherche. Pour ce faire, ils doivent continuer à rouvrir la méga-liste déroulante ou utiliser des onglets de navigation séparés, positionnés côte à côte.
2. Le client peut utiliser un pavé tactile (ou une souris) pour faire fonctionner un grand écran 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 en haut de la page.
3. Le client souhaite ouvrir la page de catégorie , il se rend donc sur le lien de la catégorie, clique dessus, mais constate un scintillement car une méga-liste déroulante apparaît retardée.
4. Avec des sous-menus imbriqués dans une méga liste déroulante , le client souhaite explorer des éléments similaires dans la catégorie dans laquelle il se trouve actuellement, mais en raison de l'imbrication, il doit rouvrir la méga liste déroulante encore et encore et parcourir le même tunnel de vol stationnaire encore et encore.
5. Imaginez une situation dans laquelle vous souhaitez 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 contextuel continue de s'afficher, simplement parce que vous avez trop rapproché le curseur de votre souris.
6. L'utilisateur commence à faire défiler lentement vers le bas pour évaluer le contenu d'une page, mais le menu continue d'apparaître. 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.

Délai d'entrée/sortie de vol stationnaire

L'une des premières solutions, et aussi l'une des plus courantes encore, consiste à introduire un délai d'entrée/sortie en vol stationnaire. Nous devons nous assurer que le menu ne s'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 tampon d'environ 0,5 seconde pour :

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

En d'autres termes, tant que le client reste dans la méga superposition 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 qu'il résolve le problème du scintillement accidentel sur la page, il introduit un décalage dans les cas où un utilisateur a quitté la méga-liste déroulante pendant plus de 0,5 seconde. En conséquence, cela 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 de fondu enchaîné pour rendre l'apparition d'un méga-déroulant moins soudaine, mais en pratique, cela entraîne une augmentation du délai d'entrée/de sortie à 0,8-0,9 s, ce qui introduit également un effet plus perceptible. décalage. ADAC.de en est un exemple, avec un délai de fondu entrant de 100 ms et une transition de fondu sortant de 300 ms. (Cependant, la transition ne s'applique pas lors du passage d'une catégorie à l'autre de la méga-liste déroulante.)

Évidemment, plus la superposition reste visible longtemps, plus nous pénalisons sévèrement les personnes qui veulent intentionnellement é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.

Chemins de mouvement de souris indulgents : triangle de trajectoire

Au lieu d'introduire un délai, nous pouvons essayer d'être plus généreux avec les chemins que les clients parcourront. É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 déroulante. Si cette zone est censée apparaître à côté des catégories sur la droite (comme indiqué dans l'image ci-dessous), nous connectons le pointeur de la souris avec les 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 méga-zone déroulante, la superposition est toujours affichée. Si l'utilisateur choisit de voyager en dehors du triangle , le contenu de la superposition méga-déroulante changera en conséquence. Et bien sûr, il disparaîtra immédiatement une fois que l'utilisateur sera complètement sorti de la liste des catégories.

Chris Coyier met en évidence certaines des subtilités techniques de cette technique dans son article sur les menus déroulants avec des chemins de mouvement de souris plus indulgents, ainsi qu'une démo JavaScript vanille d'Alexander Popov sur "Aim-Aware Menus".

Avec cette technique, nous minimisons le frottement de la disparition soudaine et de la réapparition de la 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 du 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 recalculions également 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 en 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 réactive, donc si la sous-navigation ne tient pas sur l'écran, elle flottera à côté de l'élément de navigation principal , affiché en pleine largeur ou en 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 de travail de la technique en action sur 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 vu avec les retards de survol, elle provoquera un scintillement lorsque le client parcourra accidentellement une grande liste de catégories qui incitera la méga-liste déroulante à s'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 le moment où les méga-listes déroulantes s'ouvrent et se ferment, 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 de problèmes d'accessibilité cachés.

Les pièges de l'ouverture des méga-déroulements au 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 s'appuyant 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-listes déroulantes qui s'ouvrent au survol présentent 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 disposition générale, nous devons être prudents quant à l'endroit où le méga-déroulant est placé.

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

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

À moins qu'un délai d'entrée/sortie suffisamment long ne soit utilisé, la superposition méga-déroulante gênera toujours la recherche et les résultats 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 inversement), la méga-liste déroulante gêne.

Plusieurs sous-navigations apparaissant avec des retards

L'expérience va être fastidieuse lorsqu'il y a plusieurs sous-navigations qui s'ouvrent en survol retardé , les unes après les autres. Un exemple malheureux de celui-ci en action est le site Web de Vodafone ci-dessous. 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 à de nombreux clics de rage sur tout le site Web.

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 au survol avec une 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 contextuel fera brièvement son apparition semi-cassé - n'ayant souvent pas assez de temps pour passer à la vue appropriée pour être enregistré par un client.

Ajoutez à cela 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.

De plus, comme le 4ème niveau de navigation n'apparaît qu'au survol si le 3ème niveau de navigation est déjà ouvert, et que le 3ème niveau de navigation n'apparaît qu'au survol si le 2ème niveau de navigation est déjà ouvert, 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.

Nous multiplions essentiellement les retards et les problèmes de tunnel de vol stationnaire dont nous avons parlé plus tôt, en faisant toujours attendre les utilisateurs que la navigation apparaisse et en 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.

Si vous devez faire face à une navigation complexe de ce type, il peut être utile de tester si les problèmes disparaissent lorsqu'un seul (plutôt que deux) menu de survol est utilisé. Ce menu serait légèrement plus grand et hébergerait toutes les options dans des colonnes. Ou si possible, pour chaque catégorie, envisagez d'afficher toutes les options de navigation de cette catégorie sous la forme d'une barre de navigation permanente (barre latérale ou barre supérieure collante) - cela devrait généralement éliminer tous ces problèmes.

Les titres de catégorie font trop de choses

Comme nous l'avons vu précédemment, les titres de catégorie ont parfois deux fonctions différentes . D'une part, chaque titre de catégorie pourrait ê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 de méga-liste déroulante. Ainsi, si l'utilisateur survole le titre pendant suffisamment longtemps, la méga liste déroulante s'ouvrira, mais l'utilisateur aura peut-être déjà cliqué sur un lien, ce qui provoquera un scintillement. Pour les clients, difficile d'avoir les bonnes attentes quand l'interface ne donne 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 ouvrir uniquement la méga-liste déroulante et ajoutez un lien vers la section "Accueil" de la catégorie dans la superposition de la méga-liste déroulante. Il pourrait é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 une superposition, tandis que le titre de la catégorie est un lien. Lors de nos tests d'utilisabilité, nous avons remarqué que chaque fois qu'une icône est présente (et peu importe de quelle icône il s'agit), 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 déclenché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, à ce que la page de catégorie apparaisse. Plus important encore, ils semblent s'attendre à ce que le menu s'ouvre au toucher/clic, plutôt qu'au survol .

Mailchimp est un bon exemple de méga-liste déroulante qui évite la plupart des problèmes décrits ci-dessus, 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 surbrillance comme soulignée , et cela pourrait amener certaines personnes à supposer que le titre s'est transformé en lien, notamment parce que le soulignement est exactement le même pour le lien "Prix" en haut de la navigation. Peut-être que le mettre en évidence avec une couleur de fond 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 de multiples fonctions. 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 : toute la zone doit servir d'extension, affichant les options de navigation lorsque vous appuyez ou cliquez dessus. Dans la plupart des cas, c'est juste plus simple et moins frustrant de cette façon.

Concevoir une meilleure méga-liste déroulante : appuyez/cliquez sur le menu

L'une des raisons courantes pour lesquelles les méga-listes déroulantes s'ouvrent souvent en survol, car de nombreuses grandes entreprises souhaitent exposer rapidement leurs clients à l'étendue des options disponibles sur le site. Avec les options de navigation changeant au 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 la navigation par survol est remplacée par une navigation tap/click . En fait, la plupart des problèmes répertoriés ci-dessus peuvent être résolus facilement en procédant ainsi : la superposition méga-déroulante ne s'ouvrira et ne se fermera que lorsque l'utilisateur demandera explicitement cette action particulière. Par conséquent, il n'est pas nécessaire de suivre le pointeur de la souris ou d'ajuster les délais d'entrée/sortie de 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 tapant / cliquant pour mobile d'une manière ou d'une autre, afin que nous puissions le garder ainsi pour les écrans plus grands également.

Un bon exemple de cela en action est le site Web du Musée juif de Berlin. Non seulement la barre de navigation supérieure ouvre des méga-menus déroulants en appuyant dessus 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 surbrillance 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 tapant/cliquant.

Si vous avez un peu plus de navigation, un exemple légèrement plus avancé est Allianz.de. Au lieu d'utiliser une seule grande superposition de méga-listes déroulantes, la sous-navigation est regroupée en listes déroulantes plus petites. 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-déroulant est un groupe d'accordéons , avec un bon choix de contraste de couleurs et d'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 consulter In Praise of the Unambiguous Click Menu, dans lequel Mark Root-Wiley montre comment créer un menu contextuel accessible. L'idée est de commencer à construire le menu sous la forme d'un menu de survol CSS uniquement 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 <button> , 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.

Accordéons vs superpositions vs menus divisés sur mobile

Il va sans dire que toutes les méga-listes déroulantes sur tap/click ne fonctionnent pas bien. Target.com est un autre exemple intéressant pour une grande navigation accessible qui évite la mise en page multi-colonnes et n'affiche qu'un seul niveau de navigation à l'heure — le tout s'ouvrant par simple pression/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é sur la même superposition à 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, avec la navigation en haut complétée par une icône en forme de chevron, et s'ouvrant également par pression/clic.

Dans certaines autres implémentations, on peut voir plusieurs superpositions apparaissant les unes sur les autres. C'est d'ailleurs le cas chez Unilever (exemple ci-dessous). La 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 lorsqu'il clique dessus ?

"Nos marques" mène à une page distincte tandis que chaque étiquette sous celle-ci ouvre une nouvelle superposition de navigation au-dessus de la méga-liste déroulante. Avez-vous remarqué que "Toutes les marques" est souligné, alors que le reste de l'option de navigation ne l'est pas ? On peut voir l'intention des designers créant le menu. En effet, « Toutes les marques » est un lien, alors que les autres libellés ouvrent une superposition :

Avec toutes ces options en place, comment s'y prendrait-on pour afficher une navigation méga-déroulante sur mobile ? Il s'avère qu'il est difficile de regrouper de telles superpositions méga-déroulantes sur mobile : il n'y a généralement pas assez d'espace ni d'aide visuelle pour mettre en évidence différents niveaux différemment et les rendre faciles à distinguer. Dans l'exemple ci-dessus, cela peut prendre un certain temps pour déterminer sur quelle page nous avons réellement atterri.

Il est un peu plus facile de comprendre à quel niveau nous sommes actuellement et quelles sont les options que 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 car ils conduisent les clients vers la page de la catégorie. De plus, toute la barre de catégorie 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 sections sont relativement courts, on pourrait 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-listes déroulantes sur mobile, les accordéons verticaux semblent être plus rapides et plus prévisibles que les superpositions (qu'il s'agisse d'une seule colonne ou de plusieurs couches). Et les menus divisés semblent être plus rapides et plus prévisibles que les accordéons.

Les accordéons et les menus partagés présentent quelques avantages :

• Il n'est pas nécessaire d'afficher un bouton "Retour" pour revenir à la page parent.
• L'œil n'a pas à sauter entre le haut du menu de navigation et la sous-navigation de la section à chaque saut.
• Les clients peuvent naviguer plus rapidement entre plusieurs niveaux : au lieu d'appuyer plusieurs fois sur "Retour", ils peuvent passer à l'accordéon qu'ils trouvent intéressant.
• Les clients peuvent explorer plusieurs sections en même temps (sauf si l'implémentation ferme automatiquement un accordéon lorsqu'un autre a été ouvert). Ce n'est pas possible avec les superpositions.

En général, les accordéons et les menus partagés semblent être une meilleure option . Mais ils ne semblent pas bien fonctionner lorsqu'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 d'utiliser des superpositions à la place.

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

Quand Mega-Dropdown n'est peut-être pas nécessaire après tout

Nous avons déjà fait référence au travail de l'équipe Gov.uk dans l'article précédent, mais leurs idées sont également précieuses dans le contexte des méga-listes déroulantes. Pour une navigation large et à plusieurs niveaux, l'équipe a décidé d'utiliser les conclusions du principe d'une chose par page de Caroline Jarrett, experte en formulaires. Selon Caroline, « des questions qui vont naturellement de pair du point de vue des designers […] n'ont pas besoin d'être sur la même longueur d'onde pour fonctionner pour les utilisateurs ». Caroline l'a principalement appliqué à la conception de formulaires Web, mais nous pourrions également l'appliquer dans le contexte de la navigation.

L'idée est donc d' éviter complètement les méga-listes déroulantes complexes et de fournir aux clients un moyen clair et structuré de naviguer dans les tranchées du site Web, d'une page à l'autre. Dans le cas de Gov.uk, cela semble se produire grâce à une architecture d'information et à des guides bien pensés, qui guident les visiteurs à travers des étapes prévisibles vers l'objectif.

Le canton de Zurich utilise le même modèle. Au lieu de couches de navigation méga-déroulante, toutes les options sont affichées de manière structurée, avec les principaux sujets présentés en haut en tant que "sujets principaux" et la navigation dans chaque section affichée sous la forme d'une barre de navigation collante en haut.

Une approche alternative consiste à utiliser le modèle de navigation "Je veux" . En plus de la navigation conventionnelle, nous pourrions proposer une « liste déroulante de navigation » pour permettre aux clients de construire une requête de navigation de leur choix et d'être dirigés directement vers la page qu'ils recherchent. Fondamentalement, il s'agit d'une série de listes déroulantes qui apparaissent sous une autre pour permettre à l'utilisateur de sélectionner ce qu'il a l'intention de faire ou de trouver sur le site Web.

Pendant un certain temps, le motif a été utilisé sur Commonbond (voir la vidéo ci-dessus), et il est également utilisé sur Corkchamber.ie. Une manière intéressante, bien que non conventionnelle, de donner accès à un niveau de navigation approfondi sans avoir à utiliser du tout une méga-liste déroulante.

Liste de vérification de la conception de la navigation méga-déroulante

Chaque fois que nous évoquons une conversation sur les méga-menus déroulants, tout le monde semble s'installer dans quelques groupes : certains collègues préfèrent le survol, d'autres préfèrent taper et cliquer, certains préfèrent les deux, et les autres ne s'en soucient pas non plus tant qu'il y a est à la fois un lien de catégorie et une icône qui ouvre le menu.

Il est impossible de dire qu'une approche est toujours meilleure que les autres, mais à la fois en termes d'implémentation technique et d'UX, l'ouverture du menu par tap/click cause généralement beaucoup moins de problèmes et beaucoup moins de frustration tout en permettant une implémentation simple, et donc résultante dans une navigation prévisible et sereine. Avant de passer à un menu de survol, nous pourrions essayer de conserver d'abord le comportement de toucher/cliquer, de mesurer l'engagement et d'étudier si le survol est nécessaire après tout.

Et comme toujours, voici quelques éléments généraux à garder à l'esprit lors de la conception et de la création d'une méga-liste déroulante :

• Évitez de placer des éléments importants et fréquemment utilisés à proximité de la navigation méga-déroulante (par exemple, barre de recherche, CTA, icône de panier d'achat) (en cas de survol),
• Évitez plusieurs sous-navigations dans le méga-menu déroulant apparaissant les unes après les autres avec des retards (en cas de survol),
• Évitez de surcharger les titres de catégories avec plusieurs fonctions.
• Soulignez les titres des catégories pour les identifier comme des liens vers la page de la catégorie (bien sûr s'ils sont liés à la page de la catégorie).
• Si vous le pouvez, ajoutez un lien "Accueil" ou un bouton "Parcourir tout" dans chaque sous-catégorie au lieu de lier directement la catégorie.
• Évitez les superpositions horizontales et envisagez de les remplacer par des accordéons verticaux et des menus divisés,
• Ajoutez une icône pour indiquer qu'un titre de catégorie déclenche une méga-liste déroulante au clic (par exemple, un chevron) et faites-la toujours assez grande pour un tapotement confortable (par exemple, 50 × 50px),
• Éviter les longues transitions de fondu entrant/sortant lorsqu'un méga-déroulant apparaît/disparaît (au plus 300 ms),
• Envisagez de tester un guide structuré ou une requête de navigation (modèle de navigation « Je veux ») à la place ou en plus de la méga-liste déroulante.
• Évitez si possible les méga-menus déroulants .