多语言展示
当前在线:1632今日阅读:113今日分享:31

如何提升对话框与用户的体验感?

什么是对话框?对话框是覆盖在页面上的弹框,要求用户与之交互,并从用户处获取反馈信息。对话框告诉用户相关的关键信息,要求用户做出选择或者对多任务进行处理。在应用程 序上,网络上,甚至在移动端,对话框被越来越多地应用于将用户的注意力引导到一个特定的任务上,但不需要离开当前的页面。
方法/步骤
1

1. 减少中断尽量少使用对话框,因为对话框会造成操作中断。对话框的突然出现会强迫用户中止当前的任务,被迫聚焦对话框的内容。用户在进行接下来的操作之前不得不先处理对话框,而且还不能访问下面的页面。有时候这是一件好事,比如当用户必须确认一个重要的操作的时候。但大多数时候这是不必要的,甚至是令人头疼的。请求确认这是对话框使用得最有意义的情形——在你需要与用户进行交互之后才能继续操作的地方,或者是错误成本可能非常高的时候。不要突然打开对话框用户还没有进行任何操作的时候就突然弹出对话框,是一种非常糟糕的想法。很多网站弹出的订阅通知就是这种糟糕的例子.一个对话框应该总是基于用户正在做(或者做过)的操作。这些操作可能是点击一个按钮,打开一个链接或者作一个选择。 小结a. 不是每一次选择、设置,或者是查看详情都需要以对话框的方式中断。b. 不论对话框是以菜单还是内联的方式展示,都应该保留当前的上下文。c. 不要突然弹出对话框,以用户可预知的方式来展现对话框。

2

2.  对话框与现实世界的匹配对话框应该使用用户的语言(用户熟悉的用词、短语和概念),而不是特殊的系统术语。明确的问题和选项你应该使用一个明确的问题或声明,再在内容区附带上相关的解释,比如说“擦除您的内存?”或者“删除您的账户?”。通常,你应该避免道歉,用词含糊,或者提出疑问,类似“警告!”,“您确定吗?”避免给用户提供不明确的选项。你应该只使用清晰的选项。在大多数情况下,用户应该只基于标题和按钮上的文本就能够理解选项的意思。反面例子:以下的否定选项“不”没有说明之后将发生什么。正面例子:肯定选项文本“丢弃”清楚地说明了决定的结果。小结a. 在对话框中使用明确的问题和选项;b. 在对话框中提供重要信息;c. 在操作后给用户以反馈。

3

3.  力求简洁你不应该试图将太多内容塞进对话框。保持对话框干净简单(遵循KISS原则,KISS,即Keep It Simple,Stupid)。但简约并不意味着信息不全,所有的信息都应该是有价值和有关联的。大量的元素和选项对话框绝不应该在屏幕上只显示一部分。你不应该让对话框出现滚动条。 反面例子:巴克莱银行支付处理对话框有很多的选项和元素,部分的选项只有滚屏之后才是可用的(尤其对那些屏幕相对较小的移动端设备)。正面例子:Stripe使用了一个简单且智能的对话框,只包含必要的信息,并且在桌面端和移动端都有很好的展示。大量的操作对话框中不应该包括两个以上的操作。第三个操作,比如“了解更多”,将用户引导离开了对话框,可能会留下没有完成的任务。不要在对话框中包含大量的步骤将一个复杂的任务细分成多个步骤是个很不错的想法,但是这也意味着在一个对话框的范围内要完成的工作对用户来说可能有些过于复杂。小结a. 如果你发现你正尝试将很多元素塞进一个对话框,这就意味着这个对话框并不是最好的设计方案;b. 通过移除不支持用户任务的不必要的元素或内容来简化对话框;c. 避免在对话框中放入多个步骤。

4

4.  选择合适的对话框类型对话框有两种主要类型。第一种是用以寻求关注的模态对话框,这种对话框强迫用户在继续接下来的操作之前提供交互信息。模态对话框通常用于分散的,不连续的进程:(1) 为确定接下来的操作,周围的上下文并不是必须的;(2) 为了关闭对话框,需要明确的“接受”或“取消”操作。当用户选择操作前,点击对话框之外的地方对话框不会被关闭;(3) 不允许出现用户的进程是未完成的状态。第二种类型是非模态对话框,允许用户点击对话框之外的地方来关闭对话框。你应该只对非常重要的交互操作(例如删除账户、同意条款和条件选择)使用模态对话框(第一种)。

5

5. 保持视觉的一致性对话框后面的背景当打开一个对话框时,背景变暗是很重要的。这起到两个作用:一是将用户的注意力引导到对话框上,二是让用户知道页面当前是不活动的。明确关闭选项在对话框的右上角上应该有一个关闭选项。许多对话框在窗口的角落有一个“X”按钮,用户点击它可以退出窗口。然而,对很多用户来说,通过“X”按钮退出窗口并不是一件非常简单的事。因为“X”按钮通常很小,用户不得不移到当前位置,并且准确的点击它。让用户通过点击对话框以外的背景区域来退出非模态窗口是一个非常不错的主意。避免对话框叠加对话框对话框应该避免弹出附加的对话框,这会增加网站或者app的景深,增加视觉复杂性。小结a. 允许用户通过点击“X”按钮或点击背景等多种方式退出对话框(模态对话框除外)。b. 应该避免对话框弹出对话框。

推荐信息