提升“对话框”设计易用性的5个UX准则

1

如果你合理地设计和使用对话框,它会是非常有效的用户界面元素。它们可以帮助你的用户更快,更容易地完成他们的目标。但如果用户犯错了,对话框也会使他们感到挫败。了解如何设计对话框可以让你用不使用户厌恶的方式使用对话框。

什么是对话框?

一个对话框是一个覆盖层,需要用户与其进行交互,并设计得要引起用户的响应。对话框通知用户关键信息,请求用户做决定,或是用于多项任务。在应用程序和网页上,移动对话框被越来越多地应用于指引用户注意到一个特定的任务,而不使他们离开当前页面。

2

会话过期对话框

现在让我们综述对话设计的最佳使用案例。

1. 减少中断

交互设计师很少使用对话框的原因是它们会打断用户。它们的突然出现迫使用户停止当前任务,并把关注点放在对话内容上。用户必须先处理对话框才能继续访问对话

框下面的页面。有时这是一件好事,比如用户必须确认一项重要行为时。但大部分时间这是不必要的,而且往往是非常讨厌的。

请求确认

在你需要用户进行交互或错误成本很高的情况下,使用对话框是非常有意义的。

3

要求确认,通知用户有关情况

不要突然弹出对话框

用户没有进行任何操作就突然弹出对话框是一个非常糟糕的设计。像下面的例子一样,很多网站用弹出的box(指对话框形式)轰炸用户。

4

这样的对话为未使用键盘的用户制造了很多麻烦

一个对话框应该始终在用户做某事时(或做过某事后)打开。可能是点击一个按钮或下面的一个链接,或者是选择了一个选项。

小结 :

  ·不是所有的选项,设置或细节都需要中断。

  ·选择菜单或行内展开作为对话框,并注意保持当前页面。

  ·不要只是弹出对话框,对用户来说,对话框的展现应当是可预测的。

2. 匹配对话和现实世界

对话框应该使用用户的语言(词语、句子和用户熟悉的概念),而不是特殊的系统术语。

明确问题及选择

你应该使用一个明确的问题或含有解释内容的声明,如“确定要删除存储?”或“注销您的帐户?”一般来说,你应该避免含糊不清的提问如“警告!”或“你肯定吗?”

5

左边对话框提出了一个模棱两可的问题,影响范围还不清楚。

右边的对话框提出了一个具体的问题,描述了对用户的影响,并提供了明确的选择。

避免出现模棱两可的或不明确的选择。你应该只应当使用明确的选项。在大多数情况下,用户应该可以只根据标题和按钮文本就能理解选项。

失败案例 :这个操作文本提供了“否”作为问题的回答,但没有告诉用户选择后会发生什么。

6

安卓系统的对话框

来源: Material Design

优秀案例 :操作文本“丢弃”这一选项,清楚地说明了这一决定的结果。

7

安卓系统对话框

来源: Material Design

提供重要信息

重要的是,对话框不应掩盖掉对用户有潜在价值的信息。例如,对话框要求用户确认删除某些项目时应列出这些项目。

8

此对话框简要阐述了操作的影响

也避免使用“了解更多”的动作来访问帮助文档;而应在对话框中使用行内展开。如果需要更广泛的信息,在进入对话之前就应该提供出来。

提供反馈信息

当一个进程结束时,记得要显示一个通知信息(或视觉反馈)。让用户知道,她已经做了所有的需要她做的事。

9

一个运行成功的例子

小结 :

   ·  在对话框中使用明确的问题和选项。

   ·  对话框应阐述重点内容。

   ·  操作后通知用户。

3. 力求简约

你不应该尝试把太多的内容塞进一个对话框中。保持它的清晰简单(遵循kiss原则)(译者注:kiss原则即 keep it simple)。但简约并不意味局限。所有显示的信息应该是有价值的,相关的。

失败案例 : Barclays Bank 付款处理对话框有很多的选项和元素,部分的选项只能使用滚动才能查看(特别是对于使用小屏移动设备的用户)。

 10

来源: Barclays

成功案例 : Stripe使用了一个简单的智能对话框,只显示基本信息。这在电脑屏幕和移动终端上看起来都很不错。

11

选项名称

对话中不应包含两个以上的选项。第三个选项,如“了解更多”会引导用户离开对话,这可能会留下未完成的任务。

12

“了解更多”会引导用户离开这个对话框,使之处于不定状态

(译者注:有些“了解更多”并不触发页面跳转,需具体情况具体分析)

不要在一个对话框中包含多个步骤

把一个复杂的任务分解成多个步骤是一个好主意。但是这也是一个信号:这些事情太复杂了,无法让用户在对话框的范围内完成。

 13

如果一个交互复杂到需要多个步骤(例如下面的例子),那么我们有必要为其单独设计一个页面。

14

多步对话窗口

来源: Dribbble

小结:

   ·  如果你正试图把大量的元素塞进一个对话框中,那么这通常意味着这个对话框的设计不是最好的。

   ·  通过消除不必要的元素或内容来简化对话框,这些元素和内容往往无益于用户任务。

   · 尽量避免在一个对话框中进行多个步骤的操作。

4. 选择适当的对话框类型

对话框有两种主要类型。第一种致力于寻找一种模态对话框,迫使用户与之进行交互才能进行下一步继续操作。模态对话框通常用于分离的,封闭的进程,如:

·不需要周围的环境来决定采取什么交互行动。

·要求明确的“接受”或“取消”的行动来关闭它,而点击其他区域不会关闭它。

·不允许用户进程处于部分完成状态。

第二种是非模态对话框,允许用户直接点击或点击对话框以外的区域来关闭它。在非常重要的交互行为时(如删除账户,同意条款和条件),你才能使用模态对话框(第一种)。

15

模态对话框:用户必须通过点击删除才能确认删除操作

移动系统(本地)对话框是模态的,它通常有以下几个基本要素:内容、行为和标题。

16

安卓的模态对话框

5. 视觉一致性

对话框背景

打开一个对话框时,该页后面背景稍暗是很重要的。它有两个作用:首先,它提示用户注意到它的覆盖; 其次,它让用户知道该页目前是不是激活状态。

17

安卓的模态对话框

小心用色。如果你使背景太暗,用户将无法看到背景页内容。如果你使背景太亮,用户可能会认为该背景页面仍然是激活状态的,甚至可能不会注意到上层页面的对话。

明确的关闭选项

在右上角的对话框中应该有一个关闭选项。许多对话窗口的角落有一个“×”按钮,用户可以用它退出窗口。然而,这个“×”按钮是对于普通用户来说不是一个容易的离开出口。通常用户需要花费很多的时间和精力去点击“×”。因为它的尺寸较小,难以点击。

最好让用户点击窗口以外的背景区域来退出非模态窗口。

18

在Twitter点击“×”和背景都可以关闭退出窗口

避免用对话框启动新对话框

应该避免对话框附带简易对话,这会为网站或APP增加“Z轴”深度和视觉复杂性。

19

错误案例:对话框附带对话框

小结:

   · 在大多数情况下允许用户点击背景来关闭对话框(除了模态对话框)。

   · 对话框应该避免触发新的对话框。

结论

我希望这些优秀案例足够有趣,能够在原型设计阶段起到重要作用。记住,用户体验是关于人的,而不是关于技术的。为主要对话框建立原型,并邀少数用户来测试这些对话框,就很容易可以找到最适合你用户及其任务的设计。

1 1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部