对话框设计中五个关键的用户体验准则

程序员也需要了解的对话框设计技巧

本文由 @段子手蒜瓣儿 翻译自 uxplanet.org

恰到好处的设计和使用的对话框是一种高效的用户界面元素。它可以帮助用户简单迅速的找到目标。然而,如果使用不当,对话框很可能使用户迷惑。了解如何设计对话框,能够避免让用户感觉烦躁。

什么是对话框?

一个对话框覆盖了所有页面,要求用户与之互动,并获取用户的响应。对话框被用来通知用户重要的信息,或者要求用户做出选择,或者参与到多任务中。在应用程序、网页甚至在手机上,对话框被用来使用户的注意力集中在一个特别的任务上,并且不用带他们离开当前的屏幕。

Image

会话超时对话框

现在,来看看最佳的对话框设计惯例和使用这些惯例的例子。

1.减少侵扰

尽量减少对话框的使用,因为它们会中断用户的操作。如果突然出现对话框,就会迫使用户停下手中的任务,专注于对话框中的内容。用户必须先处理对话框中的内容,并且不能继续操作对话框下面的页面。有时这很好,但大多数时候没什么必要,并且会让人非常烦。

请求确认

当你需要与用户进行互动,或者误操作可能带来非常大的代价的时候,使用对话框是最有意义的。

Image

请求确认,通知用户某种情况

不要突然打开对话框

用户没有进行任何操作之前弹出一个对话框是非常错误的方式。很多网站用类似如下这种订阅栏轰走了用户。

Image

这种对话框给用户带来了无数问题

任何一个对话框都应该在用户正在做某事或者刚刚完成某些事的时候弹出。比如点击按钮,点开链接或者确定选项的时候。

小结

  • 不是所有的选项,设置或者细节都需要对话框。
  • 可以替换对话框的有菜单栏或者行内展开,这些都可以保持目前的内容不变。
  • 不要随意的弹出对话框,要让用户觉得这是意料之中的事情。

2.在现实和对话框之间取得平衡

对话框应该使用用户所选的语言(使用用户熟悉的单词,词组或者概念),而不是专业性的术语。

使问题和选项变得明晰

你应该使问题或者声明变得尽可能清晰,在内容区加上解释,比如「擦除所有存储空间?」或者「删除你的账户?」。总之,尽力避免道歉、歧义或者问题,比如「警告!」,或者「你确定吗?」。

Image

避免向用户展示模糊的选项。你只能使用清晰的选项。大多数时候,用户不能理解只有标题和选项的对话框。

错误案例:拒绝按钮中的「不」回答了提出的问题,但不能展示接下来会发生的事情。

Image

安卓系统对话框

优秀案例:确认操作中的「丢弃」清晰的表达了相应操作带来的结果。

Image

安卓系统对话框

只提供重要信息

对话框不应该展示无关紧要的信息。比如,下面对话框中的内容是一个已经确认被删除的项目是否应该被删除。

Image

这个对话框简要论述了影响

同时也要避免使用「了解更多」来创建指向帮助文档的链接,行内展开功能才是应该使用的功能。如果更多的信息需要被用户了解,在弹出对话框之前就应该提供给用户。

提供显眼的反馈

当用户完成一个步骤的时候,记得展示一个通知消息(或者视觉反馈)。让用户知道他完成了所有需要完成的步骤。

Image

操作成功的实例

小结

  • 在对话框中使用简洁的问题和选项。
  • 设计封闭的对话框。
  • 在用户完成之后发出通知。

3.为极简主义努力

不要试着在对话框中塞满东西。保持简洁(遵循KISS原则)。但是极简不意味着拘束。所以的信息都要重要有价值。

元素和选项的数量

对话框不能只有部分显示在屏幕上。可以滚动的对话框也不应该出现。

错误案例:Barclays Bank的支付过程的对话框中包含了很多的元素和选项,一部分选项只有通过滚动才能看到(这对手机用户来说尤为痛苦,因为没有足够大的屏幕)。

Image

优秀案例:Strip使用了一个简单轻快的对话框,上面只有一些关键的信息。无论在电脑或者手机上看起来都很棒。

ea4fc476113e66dfcc4a12cfca5b6098[1].png


选项的数量

对话框不应该包含两个以上的操作选项。第三个选项,比如「了解更多”,很有可能让用户离开当前的对话框,使得任务被留在未完成的状态。

Image


不要在对话框中包含多步操作

打碎繁杂的步骤并分为几个简单的步骤不失为一种很棒的想法,但需要用户多次完成对话框中的内容可能让用户觉得很复杂。

29f33e15dff041637aadf7a6f47a95a7[1].png

如果一次互动太复杂以至于不得不分步进行(比如下面这个例子),也是可以保证在一个页面中进行的。

ede96df39fd6a845dc597c255508fe7e[1].jpg

包含多步操作的对话框

小结:

  •  如果发现你尝试在对话框中塞下许多的元素,这通常意味着对话框不是最佳的选择。
  •  移除那些对用户毫无帮助的内容和元素来简化对话框。
  •  尽量避免使用多步对话框。

4.选择正确的对话框类型

对话框有两种常用的类型。第一种模态框强制吸引用户的注意力,如果用户不进行操作就无法继续。模态框通常用来离散和阻拦以下内容:

  • 周围的内容需要确定使用那种操作。
  • 确认请求关闭的命令。除非它外面的内容被点击,否则不会关闭。
  • 用户操作的未完成的状态是不可接受的。

第二种是非模态框,它允许用户点击框外的内容来取消它。

只有在非常重要的情况的下才应该使用模态框(第一种)(比如删除账户,确认条款等)。

6ca1beeef561f694c8a79183dc32bfbc[1].png

与此同时,手机系统一般只有模态框,并且通常有有以下三个基本元素:内容,操作和标题。

51c230196ca2e9350fb4a771028c3ad6[1].png


5.视觉一致性

对话框后面的背景

当打开一个对话框的时候,背景的亮度被轻微调低非常重要。它完成了两件事。第一,将用户的注意力集中在最上层,其次让用户明白当前页面不可操作。

f932b93652e4a0753652e61dab20b18c[1].png

安卓模态框

调整亮度一定要小心。如果太暗,用户可能看不见背景中的页面。太亮的话用户也许不能意识到页面已经不可用或者不一定注意到对话框的重要性。

清楚的关闭按钮

关闭应该在对话框的右上角出现。许多对话框有一个x按钮来让用户离开当前的窗口。但是x按钮不不是很容易能点到。因为它通常比较小,用户需要花更多的时间来找到并点击它。

点击背景区域来允许用户离开非模态框是一个好主意。

923b244f70e2dde7423f301099d389f1[1].png

Twitter既使用了x按钮,又可以通过点击背景退出

避免对话框中又出现对话框

对话框应该尽量避免再次出现对话框。因为这加深了网站和应用的垂直深度,提高了视觉复杂度。

65ac7f0b9c31d36f2d825df1b099a721[1].png

错误实例:对话框中出现额外的对话框

小结

  • 允许用户点击背景区域来关闭对话框(模态框除外)。
  • 对话框中应该尽力避免出现额外的对话框。

总结

我希望这些最佳准则听起来很有趣,并且能在原型设计中发挥作用。记住,用户体验事关人类,而不是技术。很容易就可以总结出如何优化用户体验和他们的任务:做出对话框的原型,并找一些人来测试。

谢谢!

本文来自GET社区翻译计划,每翻译一篇高质量文章,可获100元奖金。翻译计划赞助商:
转载必须保留来源和以上赞助商信息。

本文由 Easy 第一时间收藏到GET,原文来自 → uxplanet.org

「GetParty」

关注微信号,推送好文章

微信中长按图片即可关注

更多精选文章

评论
微博一键登入