Menus de navigation, on se trompe et on s’obstine…

J’ai lu récemment un article très intéressant sur le site www.uxmovement.com[en], qui interpellait sur un détail d’interface que l’on connait tous : les menus déroulant (ou menu « hover », comprenez qui s’affiche au survol de la souris). Je m’inspire donc librement de cet article pour vous présenter mon avis sur la question et ouvrir le débat.

Ces éléments de navigation sont devenus en quelques années (grâce notamment aux apports du Javascript et des librairies telles que Jquery) des standards du web moderne.

Si ce type de menu apporte en effet une interactivité supplémentaire et peut présenter à priori un aspect pratique, cet article nous montre, par l’exemple, que l’on fait fausse route. Ces menus présentent un certain nombre de défaut non négligeables. Qu’ils fassent appel à des notions ergonomiques basiques ou simplement au bon sens, ces quelques exemples sont simples à comprendre et peuvent vous convaincre qu’une réflexion sur le sujet est intéressante à mener.

Le chemin le plus court est toujours le meilleur…

…sauf avec les menus déroulants.

Le chemin naturel de la souris affichera un autre élément du menu On voit bien sur cette image que le parcours visuel et donc le chemin suivi naturellement par la souris ne correspond pas au mode de fonctionnement du menu. Si je veux aller du menu

« Pas de Calais » au sous-menu « Saint-Omer » je suis instinctivement tenté de suivre la flèche. Mais ce chemin rencontre d’autres éléments, notamment « Nord ». Le sous-menu va donc changer et dans le meilleur des cas je vais devoir recommencer, dans le pire des cas je ne verrais pas le changement de sous-menu et je vais donc cliquer sur le mauvais élément.

Pour atteindre l’élément ciblé du sous-menu, je dois faire un détour Pour atteindre mon sous-menu je dois donc me concentrer et suivre le deuxième chemin, quelle perte de temps ! Et encore, sur cet exemple le sous-menu est relativement « haut » et pas très étendu, j’en ai vu des bien moins haut où la maitrise du glisser de souris sur longue distance était indispensable pour espérer ouvrir la page tant convoitée… Ce problème apparait également sur ce type de menu (et pourtant c’est celui d’Amazon.fr ;)) :

Le même problème en présentation verticaleLe même problème en présentation verticaleLà encore le menu mLà encore le menu m’oblige à utiliser un chemin détourné peu naturel

Apparition non-voulue

Le menu est classiquement positionné entre le header et le contenu de la page. Lorsque l’utilisateur passe sa souris de la zone « header » à la zone « contenu » il passe obligatoirement au-dessus du menu, provoquant ainsi l’ouverture du sous-menu, sans que l’utilisateur ne l’ai voulu et qui l’empêche d’accéder à la zone qu’il visait. Si une solution existe (ajouter une latence – un délai entre le moment où débute le survol de l’élément et l’affichage du sous-menu) elle est trop peu souvent mise en place et on se retrouve avec de nombreux menus qui frustre l’utilisateur, ralentisse son accès à l’information et dégrade donc son expérience de visite (c’est par exemple le cas sur le site Fnac.com).

Difficulté d’accès aux derniers éléments

Un autre problème apparait lorsque l’on présente un menu vertical au survol comme le fait le site euroguitar.fr (si vous vous demandez c’est qu’effectivement je vais m’acheter une nouvelle guitare, comme ça vous savez tout :) – oui je sais il y peu de chance que cela vous intéresse mais ça fait une petite pause détente).

Le dernier élément du sous-menu m’oblige a être précis pour ne pas que le menu ne disparaisse si je sors du cadre Pour atteindre les premiers éléments pas de problème, il suffit de descendre dans le sous-menu avec sa souris, mais pour cliquer sur le lien

« Pack guitare », il faut être précis et ralentir le mouvement de sa souris afin de ne pas quitter la zone de « sous-menu ». On perd encore un peu de temps et si l’utilisateur n’est pas assez précis et sors du menu il va là encore « s’énerver ». Pour cela aussi, des solutions existe, des zones actives plus grande (en ajoutant de la marge entre le texte et la fin du sous-menu), ou la latence. Mais pourquoi essayer de trouver des palliatifs alors que la solution à tous ces problèmes existe depuis toujours : le menu « au clic ».

On abandonne le menu « hover » et on revient aux menus « au clic » ?

D’apparence plus « austère », ils remplissent pourtant à merveille leur rôle, à savoir permettre une navigation fluide, efficace et intuitive. Comme je le disais plus haut, les menus déroulants sont devenus des « standards » et les utilisateurs ont pris l’habitude – aussi mauvaise et désagréable soit-elle pour eux – d’afficher les menus au survol. Revenir, sans distinction, à des menus « au clic » présente donc aussi son lot d’inconvénients.

On sait que l’expérience que les internautes acquièrent est un des critères important dans la conception web, en utilisant les standards latents de la conception web on limite au maximum le besoin de réflexion. Le risque étant alors de perturber l’internaute qui vient de visiter plusieurs sites avec des menus déroulants et au survol de notre magnifique menu, « Damned, il ne se passe rien ! ». Des indicateurs graphique doivent permettre de faire comprendre à l’utilisateur le fonctionnement de ce type de menu qui n’a rien de révolutionnaire non plus.

Il n’est jamais facile de rompre avec un certains confort et il faut assumer le fait de se dire : « ce n’est pas parce qu’il est si populaire qu’il est le plus efficace ».

Il faut donc penser à son menu de navigation – en tant qu’il est un élément central de la conception du site (même si sur ce point aussi un débat pourrait être lancé, et je le ferais sûrement ;)) – en fonction de l’arborescence du site, des autres éléments de navigation et de ses utilisateurs cibles.

Le menu « au clic » me semble gagner la bataille puisqu’il ne souffre pas de défaut d’utilisation majeur (je n’ai pas présenté ici les différents mode de fonctionnement possible mais l’article d’UxMovement le fait en détail[en]), il nécessite peut-être un peu d’éducation des utilisateurs, l’habitude et les astuces graphiques résolvant à merveille cette problématique.

Pour moi, le seul argument qu’il reste avant de « clore » le débat est celui de l’interactivité ou plutôt du « joli effet animé ». Mais, objectivement, si on parle d’ergonomie ce n’est plus un argument ?!

Je vous conseille de lire l’excellent article de UxMovement[en] qui a très fortement inspiré cet article.