工具提示不是新的,但它们仍然被误用。

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

(如果你想知道什么是鼠标悬停:要访问页面上的活动元素,用户通常可以移动鼠标到它们或使用键盘在它们之间切换。键盘悬停(Keyboard hover)指的是将键盘的焦点保持在同一元素上较长时间。

工具提示可以附加到页面上的任何活动元素(图标、文本链接、按钮等)。它们为它们的配对元素提供描述或解释。因此,工具提示是高度相关和具体的,并没有解释更大的图景或整个任务流程。

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

因为工具提示是由悬停手势启动的,所以只能在带有鼠标或键盘的设备上使用。它们通常不会出现在触摸屏上。(将来,当用户的目光停留在GUI元素上一段时间时,工具提示可以在支持眼球追踪的设备上启动。)

工具提示vs.弹出提示

尽管工具提示主要局限于台式机和笔记本电脑,但它们也有一个在触屏设备上很常见的姊妹元素:弹出提示。工具提示和弹出提示都有相同的目标:提供有用的、额外的内容。下表显示了弹出提示和工具提示之间的关键相似点和不同点。

工具提示

弹出提示

场地类型

桌面

任何

发起人

悬停(鼠标或键盘)

触摸/点击

终止时

用户离开预定义的交互区域

用户点击关闭或点击屏幕的另一个区域

成对的元素

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

“?”或“i”图标

内容类型

微内容

微内容

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

工具提示使用指南

1.不要使用对完成任务至关重要的信息提示。

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

别:

Amtrak.com上的表单截图,将鼠标悬停在图标上会触发解释字段的工具提示。
美国铁路公司(Amtrak)的网站将密码要求写入了工具提示(通过鼠标悬停访问)。这种类型的信息对于用户成功地完成创建帐户过程至关重要,因此应该始终显示在屏幕上。

做的事:

联邦快递网站的屏幕截图,其中的工具提示包含解释字段为何被列出的内容。
联邦快递使用工具提示为发货表单字段提供附加信息。例如,电子邮件字段有一个工具提示,解释为什么列出该字段。(这个提示可以通过鼠标悬停来访问。)

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

工具提示明显或多余的文字对用户没有好处。如果你想不出特别有用的内容,不要提供工具提示。否则,您只需添加信息污染这样就浪费了那些不幸激活工具提示的用户的时间。

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

别:

Sprint.com截图,带有多余的工具提示和按钮副本。
在Sprint网站上,有一个带有标签的按钮 添加 new line也有一个工具提示,文本为Add new line。这个工具提示是重复的和不必要的。

做的事:

阿里巴巴截屏,工具提示描述了一个未标记的图标
阿里巴巴的搜索栏上有一个没有标签的摄像头图标。当用户将鼠标悬停在这个图标上时,工具提示会显示 搜索由图像出现。许多用户可能不熟悉这个功能,因此描述其用途的工具提示很有帮助。

3.支持这两个老鼠键盘鼠标。

仅在鼠标悬停时出现的工具提示对依赖它的用户是不可访问的键盘导航。在您的设计中要具有包容性,并确保可以通过键盘访问工具提示。

别:

麦当劳屏幕截图显示缺少键盘提示支持。
麦当劳网站不支持通过键盘触发的工具提示。当用户在同一页面(底部)中使用选项卡时,鼠标悬停启动的工具提示(顶部)不可用。

做的事:

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

4.当多个图元位于附近时,请使用工具提示箭头。

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

别:

在屏幕拥挤的区域缺少工具提示箭头的幻灯片截图。
PowerPoint中有几个图标挨得很近。如果没有工具提示箭头,就很难知道哪个工具提示对应于哪个元素。

做的事:

使用工具提示箭头的Witeboard屏幕截图。
白板使用工具提示箭头来表示提示用于哪个图标。虽然图标的间距相当大,但箭头提供了额外的清晰度和最小的视觉噪音。

5.在你的站点中始终使用工具提示。

工具提示很难被发现,因为它们通常缺乏视觉提示。如果工具提示在你的网站上不规则地显示,人们可能永远不会发现它们。重要的是要保持一致,为设计中的所有元素提供工具提示,而不仅仅是一些元素。如果只有一些元素需要额外的解释,那么对这些元素使用弹出提示。

别:

商业内幕网截图显示工具提示的使用不一致。
Business Insider网站的导航菜单上有三个图标,其中有两个使用了工具提示。(注:在Business Insider网站的主页上,地球仪图标确实有一个工具提示,上面写着地球仪图标。然而,这个标签没有帮助,也没有表明它的功能:语言选择器。)一般来说,我们建议不要使用没有标签的图标或者在工具提示中隐藏标签,但是当工具提示标签部署不一致时,这种冒犯就更严重了。

做的事:

Todoist屏幕截图显示工具提示的一致使用。
Todoist始终使用工具提示。主部分中的所有三个图标都有工具提示。一致性通过满足用户的期望来增强用户的信心。

额外的建议

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

大多数图标都有一定程度的模糊性,这就是为什么我们建议为所有图标使用文本标签。如果您固执地不愿为站点上的图标提供文本标签,那么您至少可以为用户提供一个描述性的工具提示。

  • 确保工具提示适中对比背景。

用户通常会看他们点击(或悬停)的地方。然而,由于工具提示缺乏,一个适度的对比是很重要的,以确保用户看到工具提示中的文本。此外,对于有视力障碍的用户来说,带有浅灰色工具提示的白色页面尤其难以阅读。

  • 定位工具提示,这样它们就不会阻塞相关内容。

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

结论

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

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

说明何时使用工具提示的图形。如果这些信息是用户完成任务所必需的,请始终将这些信息显示在屏幕上,而不是显示在工具提示中。