Comment équilibrer le menu de navigation en planant sur la lenteur et la convivialité?
Je crée un menu de navigation avec de nombreuses icônes. Passer la souris sur une icône étendra une sous-barre différente tout en masquant les autres.
Le délai que j'ai choisi de 180 ms est d'éviter aux utilisateurs de changer accidentellement de section tout en déplaçant leur souris vers un lien dans le sous-menu. Avec <100 ms, il y a un vrai problème de convivialité, les gens signalent ne pas pouvoir cliquer sur les liens dans le sous-menu. L'augmentation du retard, cependant, le rend lent et effrayant. De nombreux utilisateurs ont signalé une mauvaise expérience à 180 ms.
Je pense que cela pourrait être une bonne expérience utilisateur, mais je dois encore trouver le bon équilibre entre ce que cela ressent pour l'utilisateur et comment éviter qu'il soit inutile.
J'ai cherché et trouvé de nombreux articles sur la perception humaine (c'est-à-dire enquête sur la latence de la réponse visuelle humaine ), car je pense que ce problème d'expérience utilisateur concerne davantage la perception et la subjectivité.
Je n'ai pas pu trouver dans la littérature quoi que ce soit sur le "nombre magique" de ms qui résoudra mes problèmes.
Je recherche des suggestions, si quelqu'un a déjà fait face à mon même problème ou a une autre approche à proposer.
En écrivant, j'ai même trouvé ceci: Quel est le terme correct pour la période de grâce quand un utilisateur ne focalise pas un élément Cependant, il ne semble pas y avoir de solutions pour le menu horizontal et je ne suis toujours pas sûr de ce cas peut être considéré comme un problème de vol stationnaire.
Vous pouvez le voir fonctionner sur cette DÉMO: http://jsfiddle.net/xC6Bh/
Ne vous fiez pas uniquement à un délai!
Comme vous l'avez déjà expérimenté, il n'y a pas vraiment de bonne valeur qui fait que la technique de retard présente une bonne UX. Pour certains utilisateurs, ce délai sera trop court et pour d'autres, il sera trop long.
Éclatez votre rapporteur
Au lieu de cela, vous pouvez utiliser des calculs simples pour calculer les coordonnées auxquelles vous devez effectuer une transition de menu. Calculez l'angle entre l'origine de l'élément de menu parent et le début et la fin des éléments de sous-navigation. Cela crée un triangle naturel que vous pouvez utiliser pour déterminer si la souris de l'utilisateur est "en route" vers un élément de menu ou si elle se transforme en un élément parent différent. J'ai dessiné un croquis ci-dessous de votre violon:
Notez que c'est la technique utilisée par le méga-menu sur Amazon.com :
(photo prise sur le blog ci-dessus)
Évidemment, cela vous donne un peu plus de travail à faire en termes de conception (en vous assurant que vos éléments de navigation parents sont proportionnellement proportionnels en taille/position par rapport aux enfants, etc.) et en implémentation Javascript, mais je pense que cette solution est bien meilleure que d'utiliser un retard temporisé simple. (Vous pouvez maintenant ajouter des fonctionnalités comme un délai si l'utilisateur n'a pas progressé sur l'axe des y, par exemple.)
J'ai lu cette question plusieurs fois avant d'essayer d'en tirer la question. Si je devais essayer de reformuler votre question, vous essayez de comprendre la meilleure méthode pour afficher les sous-menus?
Je pense qu'en général, je dirais qu'il n'y a pas de nombre magique. Que si quelque chose change sans le consentement de l'utilisateur et sans qu'il s'attende à ce que cela change, ce ne serait pas une bonne expérience utilisateur. Le type de menu que vous avez dans votre exemple ne fonctionnerait pas non plus sur mobile.
La meilleure façon de réaliser ce type de menu est d'utiliser les clics comme moyen de mettre à jour le sous-menu. Lorsque l'utilisateur clique ou éloigne sa souris des limites définies, vous fermez le menu tel qu'il apparaît.
Si vous n'utilisez pas de clic, vous devez basculer dans ce menu immédiatement. Le sous-menu toujours visible n'est plus quelque chose que vous voyez car ce sont généralement des menus extensibles. Si vous suivez des exemples que les gens utilisent en utilisant Bootstrap vous constaterez qu'ils sont tous instantanés et fonctionnent tous sur mobile. L'effet de survol ne fonctionne malheureusement que comme prévu sur le bureau et de nombreux sites ont des problèmes de fonctionnement sur mobile pour cette raison même.