it-swarm.cn

这个下拉式反模式有名称吗?

最近,我在鼠标悬停下拉菜单中看到了一个小的UI问题。这是一个此类下拉菜单的示例(尽管彭博并非唯一犯罪者):

https://www.bloomberg.com/view/articles/2017-08-09/yogurt-liquidity-and-listings

编辑:添加标记的屏幕截图以用于历史目的。红线是用户的鼠标路径。输入红色框将立即隐藏“意见”下拉列表。

Bloomberg View - Menu issue

如果您将鼠标悬停在顶部栏中的“意见”上,则会看到与“意见”部分相关的链接。

问题:从“意见”按钮中的位置到某些链接的直线路径将贯穿“政治”部分,从而立即清除“意见”选项。这意味着用户在选择链接时必须自觉考虑其鼠标路径。

这个问题有名字吗?解决它的最佳方法是什么?

edit:这是显示问题的其他gif,这是 Ben Kamens的博客 ,也是 下面由Midas链接

Gif demonstrating menu issue

244
N. Quest

一个解决方案名称的建议来自 这篇很棒的文章定向菜单瞄准

它显示了亚马逊如何通过检测光标的路径来防止用户在悬停其“巨型菜单” 不使用延迟时错误地选择不需要的元素。

在光标的每个位置处,您都可以显示当前鼠标位置与下拉菜单的右上角和右下角之间的三角形。如果下一个鼠标位置在该三角形内,则用户可能会将光标移动到当前显示的子菜单中。亚马逊使用此效果很好。只要光标停留在该蓝色三角形内,当前子菜单就会保持打开状态。

Amazon Hover Menu direction

289
Midas

您所谈论的问题有时被称为“ 窄鼠标走廊 “。导致用户因缺少 用户控制 而感到沮丧。

亚马逊三角方法(最初由 Bruze Tognazzini 在苹果公司于1986年完成)的另一种替代方法是使用 小盒子延伸走廊 。这种特定实现的一个优点是它是纯CSS(伪元素),因此它消除了 对jQuery的依赖 (或Vanilla JS)。

Image from: https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/

(图片来自: https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/

96
Jonathan

在我工作的地方,我们称之为“死亡之星战trench菜单”。我很确定我们没有发明这个名字,但是我找不到它的书。

36
Matthew

从程序员的角度来看,我建议使用一个悬停意图函数(将环境响应延迟300毫秒。这不太明显,可以减少意外关闭/打开菜单的风险)。尽管您可能会发现300ms会加在菜单和子菜单的更复杂树中。

9
Snsa90

我用于此模式的名称是hover tunnel

悬停隧道长期以来一直被认为是有问题的: http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/

悬停菜单最糟糕的事情之一是它们迫使用户在悬停通道上移动鼠标。悬停隧道是用户必须在其上单击鼠标以单击项目的通道。对技术不太了解的老用户通常会在这样做时遇到麻烦。即使是精通技术的用户也感到烦恼,他们必须在有限的路径中移动鼠标。

我怀疑“反模式”只是悬停隧道坍塌的副作用,因为这完全不是引导用户的可靠方法广告或其他内容。

4
Michael Heraghty

不,该模式没有名称。

它只是一个悬停菜单,对于UX来说,悬停菜单是垃圾。即使是我,一位经验丰富的互联网用户也无法在此类菜单中导航,当我不得不使用悬停菜单时,十分之九的时间我会生气。

使此类菜单更加用户友好的一件事是,例如,当用户离开表时设置较小的延迟,以便菜单不会立即关闭,而是具有1-1.5s的延迟,因此用户有机会移动鼠标在正常流动时向后移动。

1
Pectoralis Major