Récemment, je rédigeais un cahier des charges pour le nouveau site Web d’un client. Rendu à l’étape de la conception de l’arborescence du menu, je me suis buté à une question existentielle : est-ce que le menu s’ouvre lors du « hover » (glisser son curseur par-dessus l’élément sans devoir le cliquer) ou au clic?

J’en entends plusieurs se demander pourquoi cette question m’habitait tant! « Laisse les développeurs te proposer la meilleure solution », me direz-vous! Mais non! Un bon cahier des charges doit également comprendre une réflexion sur le UX, c’est-à-dire quelle expérience le site doit offrir aux visiteurs afin de faciliter l’accès à l’information (et aussi la conversion).

Pour illustrer mon déchirement, je vous propose cette mise en situation. Dans l’arborescence de mon site Web, j’ai une section « À propos », sous laquelle se retrouvent plusieurs pages, comme « Notre équipe », « Ce qui nous différencie » et « Responsabilités d’entreprise ». Dans le menu de navigation, l’élément visible sera « À propos », qui représente également une page informative où on présente l’entreprise à haut niveau. Quelle est donc la meilleure option dans ce cas? Étudions les deux options possibles.

Un menu avec « hover »

Avec le « hover », l’utilisateur glisse sa souris et le sous-menu s’ouvre. Il peut décider d’accéder à l’une des pages qui s’y trouvent ou bien de simplement cliquer sur « À propos » afin d’accéder à la page générale. Ce type de menu offre une facilité de navigation et permet d'atteindre une page précise avec moins de clics. Il peut aussi offrir une meilleure expérience de marque (plus fluide).

Les défis :

• Sur mobile, le « hover » n’existe pas! L’utilisateur se retrouve donc à devoir cliquer de toute façon. Mais considérant que « À propos » est une page elle aussi, est-ce que le clic renvoie l’utilisateur vers cette page ou bien ouvre le sous-menu? J’ai vu quelques sites sur mobile où le clic sur le mot « À propos » renvoie vers la page, alors que le clic sur la petite flèche adjacente ouvre le sous-menu. Pas très intuitif pour le visiteur moyen.
• Plusieurs utilisateurs non voyants naviguent sur le Web grâce à leur clavier et la technologie de lecture de l’écran. Dans ce cas, la touche Entrée ouvre-t-elle le sous-menu ou la page « À propos »?
• Qui n’a jamais été frustré par un menu de navigation qui disparaît dès que le curseur sort de la zone de « hover »?

Un menu au « clic »

Si l’utilisateur clique cette fois sur l’élément du menu pour ouvrir le sous-menu, il devra ensuite cliquer à nouveau sur le sous-élément qui l’intéresse. Ce type de menu offre une expérience mobile et desktop similaires. Il est également plus intuitif, tant pour les personnes non voyantes que les utilisateurs moins habiles avec le Web (et la navigation par « hover »).

Les défis :

• Puisque « À propos » est également une page dans mon exemple, l’utilisateur risque de ne pas réaliser qu’il peut cliquer à nouveau sur l’élément principal pour accéder à son contenu. Toutefois, devoir cliquer une première fois sur un menu, puis une seconde fois sur le même élément afin d’accéder à son contenu n’est pas du tout intuitif.
• Le même problème survient sur mobile. Qu’est-ce qui déclenche l’affichage du sous-menu et qu’est-ce qui déclenche l’ouverture de la page générale?
• Il faut aussi prévoir une mécanique de fermeture du menu. Est-ce déclenché par le curseur qui sort de la zone? Un petit « X » dans le coin? Un clic à l’extérieur du menu? Un nouveau clic sur l’élément « À propos »? Attention, cette dernière proposition est un piège : cela va plutôt ouvrir la page de contenu plutôt que de fermer le menu!

Identifier la meilleure option

Le lot de mes recherches m’a mené dans un cul-de-sac. Il ne semble pas y avoir de consensus sur la question. Ceci dit, j’ai pu récolter assez d'informations pour faire rejaillir quelques pistes de réflexion.

Le site de Stantec, firme de génie-conseil, design industriel et architecture, propose une solution bien intéressante. L’utilisateur doit cliquer sur l’élément principal du menu pour l’ouvrir, puis on lui propose la page générale dans le sous-menu. Dans l’exemple ci-dessous, lorsque je clique sur « Idées », on me propose un lien « Voir toutes les idées » parmi les éléments disponibles.

À mon sens, il faut tendre vers l’élimination des pages générales qui ne servent qu’à rediriger l’utilisateur vers les sous-pages. Avec moins de clics à faire, l’accès à l’information est plus rapide. C’est justement une tendance qui prend de plus en plus d’ampleur avec les fameux « mégamenus ». Ces derniers permettent d’accéder à une page précise sans devoir passer par plusieurs autres pages avant cela. Si votre site Web a assez d'informations pour meubler une page complète, le « mégamenu » est une option à considérer. Le menu du site de Walmart en est d’ailleurs l’exemple par excellence.

En fin de compte, il n’y a rien de mieux qu’une série de tests AB pour comprendre comment les utilisateurs naviguent sur votre site Web! Si le temps et le budget vous le permettent, faites des tests utilisateurs surtout avant le lancement de votre nouveau site. Encore mieux! Des outils comme Hotjar et Crazy Egg vous permettent aussi de voir les zones de clics, en plus d’offrir l’enregistrement vidéo du comportement d’utilisateurs.

Et vous, quelle est votre opinion sur la question? Si vous avez d’autres pistes de solution, écrivez-moi!