Y a-t-il un nom pour cet anti-motif déroulant?
Récemment, j'ai vu un petit problème d'interface utilisateur dans les listes déroulantes de la souris. Voici un exemple d'une telle liste déroulante (bien que Bloomberg ne soit pas le seul contrevenant):
https://www.bloomberg.com/view/articles/2017-08-09/yogurt-liquidity-and-listings
edit : Ajout d'une capture d'écran balisée à des fins historiques. La ligne rouge est le chemin de la souris de l'utilisateur. Si vous entrez dans la case rouge, le menu déroulant Opinion sera instantanément masqué.
Si vous survolez "Opinion" dans la barre supérieure, des liens vers la section Opinion vous seront présentés.
Le problème: un chemin en ligne droite entre les positions du bouton Opinion et certains des liens traversera la section "Politique", effaçant instantanément les options d’opinion. Cela signifie que l'utilisateur doit réfléchir à son cheminement de souris en sélectionnant le lien.
Y a-t-il un nom pour ce problème? Quels sont les meilleurs moyens de le résoudre?
edit : Voici un gif supplémentaire affichant le problème, gracieuseté de blog de Ben Kamens , qui est également lié par Midas ci-dessous :
Une suggestion pour un nom pour une solution est de ce grand article est le menu directionnel visant .
Il montre comment Amazon empêche les utilisateurs de sélectionner incorrectement un élément indésirable tout en survolant leur "méga-menu", sans utiliser de retards, en détectant le chemin du curseur.
À chaque position du curseur, vous pouvez visualiser un triangle entre la position actuelle de la souris et les coins supérieur et inférieur droit du menu déroulant. Si la position de la souris suivante se trouve dans ce triangle, l'utilisateur déplace probablement son curseur dans le sous-menu actuellement affiché. Amazon l'utilise pour un bel effet. Tant que le curseur reste dans ce triangle bleu, le sous-menu actuel restera ouvert.
Le problème dont vous parlez est parfois appelé " couloir de souris étroit ". Un couloir de souris étroit peut les utilisateurs deviennent frustrés par le manque de contrôle utilisateur .
Une alternative à l'approche triangulaire d'Amazon (qui a été initialement réalisée par Bruze Tognazzini en 1986 avec Apple) consiste à utiliser petites cases pour étendre le couloir . Un avantage de cette implémentation particulière est que c'est du pur CSS (pseudo-éléments) donc il supprime le dépendance à jQuery (ou Vanilla JS).
(Image de: https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/ )
Là où je travaille, nous appelons cela un "menu de tranchée d'étoile de la mort". Je suis presque sûr que nous n'avons pas inventé ce nom, mais je ne trouve pas le livre dont il est issu.
Du point de vue du programmeur, je suggérerais une fonction d'intention de vol stationnaire (retardant la réaction de l'environnement d'environ 300 ms. Ce n'est pas trop visible et réduirait le risque de fermeture/ouverture accidentelle des menus). Bien que vous puissiez constater que les 300 ms s'additionneraient dans des arbres plus complexes de menus et de sous-menus.
Le nom que j'utilise pour ce modèle est tunnel de survol .
Les tunnels de vol stationnaire sont depuis longtemps reconnus comme problématiques: http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/
L'une des pires choses à propos des menus de survol est qu'ils obligent les utilisateurs à déplacer leur souris dans les tunnels de survol. Les tunnels de survol sont des passages que les utilisateurs doivent déplacer avec leur souris pour cliquer sur un élément. Les utilisateurs plus âgés qui sont moins technophiles auront souvent du mal à le faire. Même les utilisateurs avertis peuvent trouver ennuyeux de devoir déplacer leur souris dans un chemin confiné.
Je soupçonne que l'anti-modèle n'est qu'un effet secondaire de l'effondrement du tunnel en vol stationnaire car, dans l'ensemble, ce ne serait pas un moyen fiable de diriger les utilisateurs aux publicités ou autres contenus.
Non, il n'y a pas de nom pour ce modèle.
Ce n'est qu'un menu de survol, les menus de survol sont des poubelles en ce qui concerne l'UX. Même moi, un internaute expérimenté a du mal à naviguer dans ces menus et dans 9 cas sur 10, je me fâche quand je dois utiliser un menu en survol.
Une chose pour rendre ces menus un peu plus conviviaux est par exemple de définir un petit délai lorsque les utilisateurs naviguent hors du tableau afin que le menu ne se ferme pas immédiatement mais ait un délai de 1 à 1,5 s pour que l'utilisateur ait la possibilité de se déplacer la souris revient dans son flux normal.