User Experience / UX : les Mega menus

Auteur(s) de l'article

Un mega menu, c’est quoi?

C’est un grand bloc unique qui apparait quand on survole un onglet du menu. Il présente toutes les options de navigations (catégories, sous-catégories et éléments par exemple). Il est possible qu’il contienne des icônes ou des images et pas seulement du texte.
Les méga menus peuvent sembler être la solution idéale pour naviguer. Ils affichent tout le contenu dans un seul bloc (pas besoin de scroller ou de devoir fermer un onglet de menu pour en voir un autre). Ils permettent de bien organiser les éléments et aussi d’ajouter des illustrations ou des images. Ils offrent une grande flexibilité ainsi que beaucoup de liberté de création.
Les mega menus sont un bon compromis entre de simples menus et les menus expansibles.
exemple de méga menu

Ils ont malheureusement beaucoup d’inconvénients

C’est un menu hover, c’est-à-dire que quand on passe la souris sur un des onglets (même involontairement), le menu s’ouvre et lorsque l’on enlève sa souris, il se ferme. Le problème est donc qu’il peut s’ouvrir et se fermer sans qu’on le désire si l’on est pas très précis et qu’on sort de sa zone d’affichage.
Il peut être difficile de suivre le chemin sans sortir du menu (pour ne pas le fermer), ça demande parfois de la précision et du temps (que l’on a pas toujours).

Il est maintenant possible de détecter l’angle du mouvement de la souris pour savoir si l’utilisateur veut se rendre dans une sous-catgorie ou simplement descendre dans le menu. Le temps d’affichage s’adapte en fonction de cela.  Pour en savoir plus:http://bjk5.com.
menu hover
En voulant cliquer sur les éléments qui se trouvent autour du menu, on risque de l’ouvrir accidentellement.
Quand ils sont ouverts, ces menus cachent d’autres éléments qui peuvent être importants.
Le plus grand inconvénient est que ces menus ont été imaginé avant l’arrivée des supports tactiles (smartphones, tablettes). Avec ces outils, il n’y a pas de hover (l’ouverture du menu au survole de la souris). Il faut donc imaginer autre chose pour l’affichage sur ceux-ci.
Ils contiennent en général beaucoup (trop) d’informations, il est donc difficile de trouver celle que l’on cherche sans perdre du temps et abandonner.
Ils s’ouvrent par-dessus le contenu du site. Ils cachent donc des informations qui peuvent être importantes pour l’utilisateur.

Les solutions et les alternatives

Ouvrir son menu lors du clic (et non du hover) permet de résoudre beaucoup de problèmes: il n’y a pas de risque qu’il s’ouvre ou se ferme sans qu’on le désire et il est possible d’utiliser le chemin le plus court pour accéder à un élément.
Utiliser un collapsible menu (un menu qui pousse le contenu en s’ouvrant) peut être une solution pour ne pas cacher ce qui se trouve juste en-dessous.
Simplifier son menu le maximum possible empêche les utilisateurs de se perdre dans la navigation.
Il faut impérativement guider les utilisateurs. La structure du menu doit être claire et pour cela il est nécessaire de bien choisir le nom de ses catégories ainsi que les mots-clés des sous-catégories.

Best practices

Si vous voulez malgré tout utiliser les mega menu, voici quelques règles à bien respecter:D’après le site smashing magazine.
  • Eviter de faire plus de 2 niveaux
  • Ajouter un effet sur le hover et le active car cela permet à l’utilisateur de se situer dans le menu
  • Le menu doit obligatoirement être clair, il faut assez espacer les liens, utiliser une typographie ou une couleur différente pour les catégories et les sous-catégories ou les éléments. Il est aussi utile de bien choisir ses termes.
  • Rester simple

Si vous désirez en savoir plus, voici quelques sources