UI|让你的UI更具可用性的工具提示是怎么回事

工具提示是UI设计中的相当实用的一个组成部分,它帮助用户快速了解未知的和不熟悉的UI控件与对象。从某种意义上来说,工具提示是一种相当实用的UI简化方式:它在用户需要时提供信息,尽可能减少用户的工作量,还能够让开发者更为高效地利用屏幕空间,降低UI的复杂度。

工具提示常常是一个小的弹出窗口,它指向用户未知的控件或者对象,其中涵盖的内容则是对这个控件的功能或者作用的说明。

UI|让你的UI更具可用性的工具提示是怎么回事

不过,如果工具提示设计不当,会让人分心,低可用性的工具提示会让人感觉厌烦。

工作原理

工具提示大多运用在网页当中,当用户将光标悬停在特定的UI控件上的时候,会自动显示工具提示,而当用户点击UI控件或者移走鼠标光标或者超时的时候,工具提示会消失。

UI|让你的UI更具可用性的工具提示是怎么回事

当然,还值得注意的是键盘交互也是不容忽视的。使用Tab键切换按钮的时候,也会显示工具提示。

什么时候使用

·控制没有文本标签的按钮/图标。如果以个按钮、标签或者图标没有相应的文本标签或者描述性内容,但是又需要一些简短的解释,那么工具提示可以很好地帮这些控件进行信息补足。

UI|让你的UI更具可用性的工具提示是怎么回事

·需要进一步说明或者补充说明的地方。工具提示可以作为一种渐进式信息展示机制,避免了在屏幕上持续展示大量文本内容的状况。如果是必须的内容,应当固化在UI中,让用户始终看到;而非必须的重要内容,又希望用户能够便捷地看到,工具提示就是一种很好的展现方式了。

UI|让你的UI更具可用性的工具提示是怎么回事

·需要单独的解释的、少有人使用的功能或者特性。这类功能和特性因为本身比较特殊或者少有人使用,使得用户在真正用到的时候,大多需要借助工具提示来了解和熟悉。

UI|让你的UI更具可用性的工具提示是怎么回事

这是一个名为StackExchange的应用,如果没有详细的说明告知用户这些是按钮,估计会有用户会以为它们是可以上下滚动的。

什么时候避免使用

也许最值得遵循的准则是,永远不用使用工具提示去替代那些好的设计。如果一个按钮或者控件需要永不不断查看提示来了解它,那么它就算不上是好设计。调整一下,或者干脆重新设计吧。

在下面的情况下,也最好不要使用工具提示:

·当用户需要同提示内容进行交互的时候。由于工具提示会随着光标移走而无法使用,所以用户是无法与其中内容=进行交互的。

·当用户在移动端APP或者移动端网站上浏览的时候。同样的逻辑,由于移动端设备是基于触摸的,也许有的时候触摸可以激活工具提示,但是这是违背用户可预测的直觉交互的。

UI|让你的UI更具可用性的工具提示是怎么回事

优秀的工具提示设计

好的工具提示通常会遵循下列的设计规则:

容易被发现

工具提示最大的问题在于,它自带隐藏属性,缺乏视觉线索,通常用户的鼠标光标滑过相应控件的时候,指针状态发生改变,这可能是为数不多的视觉线索。但是即便如此,用户依然需要根据以往的经验或者通过不断试验,去发现工具提示的存在。

所以,你可以通过一致的工具提示的设计,来提升用户在同一网站上发现工具提示的机率,换句话来说,就是提升工具提示的可预测性。如果你为一个对象提供了工具提示,那么其他的同类的、相似的控件最好也添加工具提示以及用户可能会需要的补充信息。有时候,这样的做法是有一定挑战性的,因为你必须保证提供的信息是有帮助的,并且不会过于明显,影响设计。

提供合适的信息

好的工具提示会包含简明而有用的信息:

·工具提示的弹出框最好是足够简短明了的短语和短句,以及格式化的文本。

UI|让你的UI更具可用性的工具提示是怎么回事

不要使用大段难以阅读的句子。

UI|让你的UI更具可用性的工具提示是怎么回事

使用格式化和易于快速扫视阅读的文本。

·工具提示的文本必须提供有效的信息。它不能简单的重复已有的内容,而是要给出实用的、有用的的信息,否则就毫无意义了。

UI|让你的UI更具可用性的工具提示是怎么回事

包含静态的信息

用户并不希望工具提示的内容发生改变,并且他们并不太能主动的、快速的发现其中内容发生了更改。一般而言,包含静态的信息是最好的。

当然,例外情况也是存在的。通知区域的动态图标。这些动态图标本身是标识状态改变的,随着图标状态的改变,对应的工具提示也应该作出相应的调整。

UI|让你的UI更具可用性的工具提示是怎么回事

UI|让你的UI更具可用性的工具提示是怎么回事

应当处于合理的展示位

工具提示通常需要悬浮在UI控件附近,通常是在光标的头部或者尾部(一般而言)。值得注意的是,它一定不能挡住输入框、图标等用户关注的、感兴趣的关键位置。

UI|让你的UI更具可用性的工具提示是怎么回事

不要遮盖住用户需要参与交互的控件。

UI|让你的UI更具可用性的工具提示是怎么回事

始终置于关键部位的周围,不要覆盖,哪怕这样会原理光标的尖端。

结语

工具提示典型的辅助性的UI设计元素,但是它本身相当实用,在合适的时候出现,能够让整个UI的可用性得到极大的提升。

【Nick Babich 的用户体验设计经验之谈】

  1. 输入框设计:《讲真,你真的懂得文本输入框设计的那些潜规则么?》
  2. 表单设计:《抠细节!设计高效好用表单的10个技巧》
  3. 极简APP UI:《超赞!帮你打造极简风APP UI 的实用设计技巧》
  4. 前端开发:《有法可依!帮你衡量一个动效是否合格的六个核心因素》
  5. 面包屑:《并不简单!网页中为你指路的面包屑到底应当怎么使用?》
  6. 移动端页面:《跟着建议走!这样的移动端网站设计才对头》

原文地址:Medium
原文作者:Nick Babich
优设译文:@陈子木

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量180万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

收藏 3
点赞

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。