提示不是新的,但他们仍然被滥用。

定义: 一种工具提示是出现短暂的,信息性消息当与元件中的图形用户界面的用户交互(GUI)。提示通常以两种方式之一启动:通过鼠标悬停手势或通过键盘悬停的手势。

(In case you’re wondering what keyboard hover is: to access the active elements on a page, users can usually move the mouse to them or tab through them using the keyboard. Keyboard hover refers to maintaining the keyboard focus on the same element for a longer time.)

工具提示可以连接到一个页面上的任何有源元件(图标,文本链接,按钮等)。他们为他们的配对元素描述或解释。因此,提示是高度情境和具体,不解释大局观或整个任务流程。

提示的一个重要方面是,它们是用户触发的。因此,弹出页面上的提示,告知新功能或用户如何使用特定的功能没有工具提示。

因为工具提示由悬停手势发起的,它们只能在具有鼠标或键盘设备来使用。他们通常不会在触摸屏上可用。(在未来,工具提示可以在当用户的凝视了一定时间的GUI元素上驻留使眼动追踪的设备启动。)

提示与提示弹出

虽然提示主要局限于台式电脑和笔记本电脑,他们有一个妹妹元素是常见的在触摸屏设备:弹出提示。这两种工具提示和弹出提示有相同的目标:为客户提供帮助,更多的内容。下表显示了关键的相似之处,并弹出提示和提示之间的差异。

提示

弹出提示

类型的网站

桌面

任何

悬停(鼠标或键盘)

触摸/点击

时解除

用户离开预定义互动区

用户点击关闭或点击屏幕的其他区域

配对元素

图标,文本链接,按钮,图像

”?或“i”图标

内容类型

微内容

微内容

本文将重点讨论工具提示及其在桌面站点上的使用。

Tooltip-Usage指南

1.不要用工具提示那就是任务完成的重要信息。

用户不需要找到工具提示来完成他们的任务。当工具提示为一些用户不熟悉的表单字段提供额外的解释,或者对看似不寻常的请求进行推理时,工具提示是最好的。记住工具提示会消失,所以指令或其他直接可操作的信息,如字段要求,不应该出现在工具提示中。(如果是的话,人们将不得不把它记在工作记忆里,以便能够根据它采取行动。)

别:

在Amtrak.com网站上的一个表单的截图,将鼠标悬停在一个图标上会触发一个解释字段的工具提示。
特拉克网站把密码要求为工具提示(通过鼠标悬停访问)。这种类型的信息是向用户成功完成创建帐户过程中必不可少的,因此应始终存在在屏幕上。

做:

从联邦快递网站的屏幕截图,其中工具提示包含解释为什么一个字段被列出的内容。
联邦快递使用的工具提示提供航运,表单字段的附加信息。例如,电子邮件字段有一个提示,解释为什么该领域的上市。(此工具提示是通过鼠标悬停访问。)

2.在工具提示中提供简短和有用的内容。

有明显的提示或多余的文本对用户没有好处。如果你想不出特别有用的内容,就不要提供工具提示。否则,您只需添加信息污染你的UI和浪费用户的时间足够谁倒霉以激活提示。

此外,冗长的内容不再是“尖”,所以保持简短。工具提示微内容- 短文本片段旨在自给自足。只要只要是有关你的副本可以是单或者多行,它不会阻止相关内容。

别:

Sprint.com截图带有冗余工具提示和按钮的副本。
在Sprint的网站上,带有标签的按钮 添加 新的生产线还与文本提示添加新的生产线。这提示是重复和不必要的。

做:

阿里巴巴截图与工具提示描述的未标记的图标
阿里巴巴曾与未标记的照相机图标搜索栏。当用户鼠标悬停在该图标,一个工具提示, 按图搜索出现。这个功能很可能不熟悉的许多用户,因此,描述其用途的提示是有帮助的。

3.支持鼠标键盘悬停。

仅出现在鼠标悬停工具提示无法访问用户依赖键盘导航。在你的设计中要包含工具提示,并确保你的工具提示可以通过键盘访问。

别:

麦当劳屏幕快照缺少键盘提示支持。
麦当劳网站不支持通过键盘触发器的工具提示。鼠标悬停启动的工具提示(顶部)在用户切换到同一页面(底部)时不可用。

做:

维基百科截图显示工具提示通过键盘触发。
维基百科支持的键盘触发工具提示。同样的提示出现在鼠标悬停和键盘悬停。

4.当附近有多个元素时,使用工具提示箭头。

箭头是有益清楚地识别哪个元件工具提示相关联。当有几个附近的元素,这些箭头有助于避免混淆。

别:

PowerPoint演示屏幕快照示出了在屏幕的稍微拥挤区域缺乏提示箭头。
PowerPoint中有几个图标在靠近彼此。无需工具提示箭头,很难知道哪些工具提示对应于哪个元素。

做:

使用工具提示箭头的白板截图。
Witeboard使用工具提示箭头以表示哪个图标尖端为。尽管图标被相当隔开,箭头提供具有最小视觉噪声更高的透明度。

5.使用工具提示始终在您的网站。

提示很难发现,因为他们往往缺乏视觉线索。如果工具提示不稳定整个网站显示,人们可能永远不会发现它们。要一致,并在设计中的所有元素,而不仅仅是一些提供工具提示是非常重要的。如果只有某些元素需要额外的说明,使用弹出提示,而不是这些元素。

别:

商业内幕屏幕截图显示的不一致使用的工具提示。
在商业内幕网站上使用工具提示在导航菜单2 3图标。(注:在商业内幕网站的主页,地球图标也有一个提示,上面写着地球图标然而,标签是没有帮助的,也不表示它的功能:如语言选择器)一般情况下,我们建议不要使用图标没有标签和隐藏的内部标签提示,但这种进攻是更严重时,提示标签不一致部署。

做:

显示一致使用工具提示的待办事项截图。
Todoist一贯使用工具提示。主部分的三个图标都有工具提示。一致性通过满足用户的期望来给用户灌输信心。

其他建议

  • 提供未标记的工具提示图标

大部分图标都有歧义一定程度上,这也就是为什么我们建议所有图标的文字标签。如果你太固执在网站上提供的图标文本标签,你至少可以做的是向用户提供一个描述性提示。

  • 确保提示有中度对比映衬。

用户通常看他们点击(或悬停)。然而,由于缺乏工具提示,适度的反差是很重要的,以保证用户看到的提示文字。此外,对于有视觉障碍的用户,用浅灰色工具提示白色页面是特别难以阅读。

  • 定位工具提示,使他们不会阻止相关内容。

当工具提示阻塞了它们相关的内容时,它们会导致用户重复步骤(例如,移动鼠标关闭工具提示,再次阅读信息或字段,悬停显示工具提示)。测试工具提示的位置,以确保内容不会阻塞与用户目标相关的其他信息。

结论

当用户无法理解某个功能时,工具提示通常是一种故障保护措施。如果人们遵循其他设计准则(例如,标记图标),那么今天的许多工具提示用例都可以被省略。重要的信息应该总是在页面上;因此,工具提示不应该是用户在你的网站上完成任务所必需的。

我们追求极端的更多极简主义,我们需要的工具提示越多,为用户提供的工作就越多。下次考虑工具提示时,问一问:工具提示中的信息对于用户完成任务是必需的吗?如果答案是否定的,工具提示是非常合适的。否则,信息应该显示在屏幕上。

图形解释时使用的工具提示。如果信息是需要用户来完成任务,始终保持在屏幕上,而不是在工具提示中的信息。