L’ouverture d’un menu peut nuire à l’expérience utilisateur de votre eCommerce

Ce matin, je me suis aperçu d’une chose désagréable pendant ma navigation : l’ouverture incontrôlée d’un menu !

Problématique : L’utilisateur parcours la page d’un site et souhaite faire une recherche. Le curseur de sa souris est placé au centre de la page et doit survoler le menu pour arriver jusqu’au champ de recherche. Rien d’anormal me direz-vous, sauf que dans certains cas, le menu s’ouvre  et ça peut devenir agaçant pour l’utilisateur.

Voici un schéma pour illustrer mes propos :

optimiser experience utilisateur mathieu fauveaux

Une règle d’ergonomie simple

Une règle d’ergonomie précise que l’utilisateur doit pouvoir contrôler à tout moment l’interface. Dans ce cas,  cette règle ne s’applique pas et peut provoquer quelques effets secondaires.

L’utilisateur ne s’en rend pas compte

Lors de tests utilisateurs, certains utilisateurs ouvrent le menu de cette manière sans s’en rendre compte. L’utilisateur pense même être sur une nouvelle page quand la hauteur du menu est trop importante, difficile d’y croire ? Pourtant c’est ce qui se passe.

Sur la fiche produit de la Fnac avec une résolution de 1024, survoler une entrée du menu ouvrira systématiquement ce dernier. Il  cache toute la zone de contenu (call-to-action, prix du produit etc..) et devient difficile pour l’utilisateur de fermer le menu et l’oblige à se déplacer sur les bords de l’écran :
optimiser ergonomie site fnac fauveaux mathieu

Quelle est l’incidence d’arrêter brutalement le parcours de l’utilisateur sur sa navigation ? Est-ce une conversion perdue ?

Comment tester ?

Vous pouvez regarder comment réagit le menu avec vos utilisateurs ou collègues. Même si l’utilisateur ne se plaint pas de cette ouverture, comment s’est comporté le menu ?

Si le menu s’ouvre, mettez un temps de latence plus important à l’ouverture et refaites l’essai. Le timing doit être très précis, l’utilisateur ne doit pas attendre trop longtemps pour ouvrir le menu, mais il ne doit pas l’ouvrir quand il le survol sans s’y intéresser.

Vous pouvez essayer ces sites qui ont des comportements bien différents. Okaidi semble le plus intéressant :

 

Partager sur facebook
Facebook
Partager sur pocket
Pocket
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn

Articles en relation :

Newsletter

Recevez les 10 meilleures actualités autour du CRO tous les mois: articles, process, outils, conférences, ...

Vous voulez savoir où et comment démarrer l'optimisation de votre site ?

Je peux détecter vos opportunités d'optimisation et vous délivrer les recommandations à appliquer, mais êtes-vous prêt ?

3 Comments

Jeremie Guilbert · 28 février 2013 at 12 h 31 min

En effet, les megamenu qui s’ouvrent de façon intempestive est un problème récurrent, j’avais vu un exemple de megamenu bien géré sur un site ecommerce, il y avait un temps de latence bien géré qui évitait d’ouvrir au simple survol mais juste après un court délai. C’était plutôt bien géré, je ne retrouve pas l’exemple malheureusement.

Prestarocket · 20 mars 2014 at 13 h 13 min

Hello,

Pour éviter ce genre de problème, j’utilise un plugin jquery : hoverintent (http://cherne.net/brian/resources/jquery.hoverIntent.html);
En gros, ce plugin permet de « deviner » l’intention de l’utilsateur : si il passe très vite la souris sur l’item du menu, il n’y a pas d’ouverture du mega menu.
+
@prestarocket

7 grosses erreurs d’UX à éviter · 14 janvier 2013 at 14 h 35 min

[…] de vos pages est probablement même inférieure 10 secondes. Je vous conseille également de lire l’excellent article de Mathieu Fauveaux concernant l’utilisation des méga […]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.