it-swarm.cn

提示弹出前应该延迟多长时间?

我正在一个网站上,一旦鼠标触摸主菜单项之一,就会弹出一个“功能区”子菜单。我试图向设计人员说明,它应该等到光标停在菜单项上,并且当鼠标恰好越过菜单项时才弹出。我不确定等待的时间(以毫秒为单位)。

我无法链接到有问题的网站,但我认为相同的原则适用于标准工具提示。工具提示弹出需要多长时间?

21
Patrick McElhaney

如果有人仍在寻找有关此主题的最新答案,尼尔森·诺曼(Nielsen Norman)对此主题有一篇很棒的文章: https://www.nngroup.com/articles/timing-exposed-content/

  1. 鼠标光标进入目标区域:在0.1秒内显示视觉反馈。
  2. 等待0.3-0.5秒。
  3. 如果光标停留在目标区域内,则在0.1秒内显示相应的隐藏内容。
  4. 继续显示暴露的内容元素,直到光标离开触发目标区域或暴露的内容超过0.5秒。

300-500毫秒的暂停是为了确保用户的意图是查看菜单或工具提示后面的内容,而不会在途中移动鼠标。

13
bentheben

我在此问题上找不到任何约定,但是我发现了几个库,其工具提示似乎设置为默认为500ms,这似乎很合理。

无论如何,我认为您应该从那里继续进行调整,直到感觉正常为止。您可以与一些用户一起试用并评估他们的反馈。

http://msdn.Microsoft.com/en-us/library/ms531435%28VS.85%29.aspx

http://www.jinsight.com/jetchart/api/com/jinsight/jetchart/ToolTip.html

https://www.Adobe.com/livedocs/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=tooltips_074_10.html

13
Nacho

如果缓慢将工具提示淡入,则只要鼠标停留在热点上就可以开始。只要记住当鼠标移开时取消动画,如果鼠标仅滑过一秒钟,工具提示将不会显示,并且如果用户停下来然后继续前进,则您的工具提示不会显示错误页面的一部分。

5
Sruly

这实际上取决于您的工具提示的用途。

我们有很多工具栏控件和按钮,它们仅使用 材质设计图标集 ,而没有文本。其中大多数是不言自明的,但是我们添加了带有说明的工具提示,这些提示还显示了可用的键盘快捷键。

当我们没有拖延的时候,对于那些已经学会了该软件并且不再需要工具提示的用户来说,这是非常烦人的。将鼠标移到几个按钮上将立即显示工具提示。

我们将延迟定为1秒,因为该速度足够慢,无法正常使用,并且当您想查看按钮需要等待一会儿时。

4
Tim

如果使用工具提示的决定经过深思熟虑,并且工具提示有用且重要。 不要拖延它。

延迟可能会增加混乱,您不希望用户在使用您的网站或应用程序时在此询问您相同的问题。

如果您认为工具提示信息不是强制性的,但是如果用户被卡住可能会有所帮助,请使用一个小的问号图标,如果需要更多信息,请他们单击该图标。

2
Jason

当然,总会有一个选项使它基于单击。我认为这样做实际上会更好,并使应用程序普遍可用(手机和平板电脑)。

还有一个JavaScript项目,您可以在此领域中获得启发,hoverIntent项目

http://cherne.net/brian/resources/jquery.hoverIntent.html

高温超导

2
mare

除了@Nacho的答案外,我还列举了一个原因,为什么应该避免使用很短的延迟或瞬时出现作为工具提示:

出现在列表项上方的工具提示,展开式广告以及号召性用语或信息框(例如产品列表页面缩略图上的快速查看框)是具有悬停交互功能的常见元素的其他示例,如果触发也可能使用户感到烦恼敏感地。

如果将工具提示视为适当的显示上下文,则对于应为可选信息的瞬时响应是不希望的。本文还提供了时序准则:

用户可以通过单击或轻击,或在鼠标光标暂停移动并停留在目标区域约0.3-0.5秒后立即公开任何隐藏内容的意图,此时可以安全地将隐藏内容动画化到这一页

资料来源: NNGroup

1
Remy