为了更好地理解情态对话和非情态对话之间的区别,让我们来看看“对话”和“情态”这两个术语的意思。

一个对话框(或对话指的是两个人之间的对话。在用户界面中,对话框是系统和用户之间的“对话”,通常向用户请求信息或操作。

用户界面模式是同一系统具有不同用户界面的特殊状态。每个模式都可能有不同的命令,或者根据系统模式,相同的命令(或动作)可能产生不同的结果。换句话说,在不同的模式下,相同的输入会产生不同的结果。例如,打开大写锁定的计算机处于一种特殊模式:所有键入的字母都将显示为大写字母。开启“大写锁定”和关闭“大写锁定”时,输入字母的效果是不同的。或者,在Microsoft Word的Track Changes模式中,所有以前做过的编辑和注释都是可见的(而在正常的默认模式中,它们不会被跟踪或显示)。

通过对“情态”和“对话”的理解,我们可以很容易地定义情态对话。

定义一个模态对话框是一个出现在主要内容上方的对话框,它将系统移动到一个需要用户交互的特殊模式。这个对话框禁用主要内容,直到用户显式地与模态对话框交互。

模态对话就像我的猫Emma,它每天早上7点喵喵叫,提示我喂它。我可能正在睡觉或准备开始新的一天,但我的猫会把自己放在我面前,然后喵喵叫得更响,不停地,直到我看它。如果我希望完成我的任务,我必须立即停止我正在做的事去解决猫。有时她会选择在凌晨3点我们还在睡觉的时候做这件事。如果我们有客人留下来过夜,会很烦人和尴尬。(我要为我的猫辩护一下,一旦我喂了它,它就会变得非常平静,而且性情温顺、好交际。)

相比之下,nonmodal(或非模态的)对话框和窗口不会禁用主要内容:显示对话框不会改变用户界面的功能。当对话框打开时,用户可以继续与主要内容交互(甚至可能移动窗口,最小化它,等等)。继续我们的猫类比,非模态对话就像一只小猫在吃饭时耐心地坐在餐桌旁,等待食物残渣从桌子上掉下来的微小机会。当艾玛这样做的时候,我可以吃饭、聊天、享受晚餐而不会受到太多干扰。我可以选择完全不理睬她,或者像我丈夫喜欢做的那样,在晚餐快结束时在桌子底下塞给她一口食物。(你可能看得出来,她吃得很好。)

模态对话框最初的目的是提醒用户发生错误或需要用户立即操作的其他系统状态。在这些情况下,为了修复故障,必须中断用户错误.因此,将对话框置于屏幕中间作为界面的焦点非常有效。这种模式对话框的最大优点是吸引了用户的注意,允许他们承认问题并迅速纠正。

然而,这种最初的用途已经发生了变化,现在模态对话框和窗口被用来吸引用户的注意,理由正当或不正当。

模态对话的缺点

以下是由模态对话框引起的一些常见问题:

  • 它们需要立即关注。模态窗口本质上是强制性的,要求用户立即采取行动。由于对话框将系统置于不同的模式,用户在确认对话框之前不能继续他们正在做的事情。
  • 它们会中断用户的工作流程。模态对话框迫使用户从他们正在工作的第一个地方的任务。每次中断都会造成时间和精力的损失,这不仅是因为用户必须处理对话,还因为一旦他们回到原来的任务,就必须花一些时间恢复上下文。
  • 它们会让用户忘记他们在做什么。一旦上下文切换到不同的任务,因为额外的认知负荷由于受到模态对话框的影响,人们可能会忘记与原始任务相关的一些细节。如果是这种情况,恢复原始任务的上下文可能会更加困难。
  • 它们会导致用户创建并解决一个额外的目标——取消对话框。当出现对话框时,会在用户的工作流程中添加额外的步骤:阅读和理解对话框,然后对该对话框做出决定。这增加了交互成本很可能会让用户反感,除非对话框非常合理且确实包含重要信息。我们将在后面详细说明这一点。
  • 它们会屏蔽背景中的内容。当对话框出现在当前窗口的顶部时,它可以覆盖重要的内容并删除上下文。因此,当对话询问与刚刚模糊的信息相关的问题时,可能会更难回答对话。

由于这些缺点,模态对话框在用于非关键活动时就会出现问题。

使用模态对话框的指南

什么时候使用模态对话框合适?这里有一些指导方针来帮助确定模态对话框是否真的必要。

1.对重要警告使用模态对话框,作为防止或纠正严重错误的一种方法。

当用户的工作有可能丢失或某个行为可能产生破坏性、不可逆转的后果时,应中断用户以避免灾难。

要确定什么错误严重到足以保证一个模态对话框,请考虑以下问题:

  • 如果用户的注意力从任务上转移开,问题会变得更容易还是更难纠正?这总是好的防止人为错误发生(如果可能的话)。然而,一旦出现错误,如果错误消息显示在主要内容中而不是在模态对话框中,则可能更容易修复它。例如,表单中的错误应该报告在页面上,就在它发生的位置旁边,以便用户在修复问题时可以参考错误消息。但是通知用户她的电脑将在10秒内重新启动可以在一个模态对话框中显示,以确保用户注意到消息。
  • 这个错误是不可逆转的吗?不可逆的错误通常会导致信息的丢失,这对于复杂和时间密集的任务尤其有害。例如,未能将商品添加到购物车对电子商务来说可能是一个不幸的错误,但如果用户没有注意到一个微妙的通知(如果他们真的想要该商品,他们可以重做操作),这对用户来说是不可逆转的。另一方面,覆盖文件或未能将更改保存到数百张幻灯片都是不可逆的操作,因此,中断是非常必要的,而且通常是受欢迎的。
在Microsoft Powerpoint上的模态对话框
Microsoft Powerpoint使用模态对话框来防止不可逆转的错误或意外的用户操作,比如不保存工作就退出应用程序。
GMail上的模态对话
谷歌邮件桌面应用程序:当用户在邮件中包含关键短语如“我已附加”或“请见附加”后忘记附加文件时,会出现这个模态对话框。这个对话框可以防止用户出错(以及尴尬的后续邮件)。

2.使用模态对话框请求用户输入对继续当前流程至关重要的信息。

当缺少信息导致系统无法继续用户发起的进程时,一个模态对话框可以提示用户获取该信息。

Etsy,如下所示,使用一个模式窗口来中断用户登录信息,当用户试图保存一个项目到收藏列表。

Etsy上的模态对话
Etsy使用模态对话框,当用户尝试一个任务,在继续之前需要进一步的步骤。例如,当用户试图将某项标记为“收藏”,但用户没有登录时,将出现一个对话框,以便获得执行所需操作所需的信息。

3.模态对话框可以用来将复杂的工作流分割成更简单的步骤。

说到工作流程,速度并不总是越快越好.对于耗时且涉及精神(和情感)的任务来说,一次要求大量信息可能会让人不知所措。在这些情况下,可以使用模态对话框将复杂的信息分解成更简单、更易于理解的块。向导是使用模态对话框的常见实例。

然而,需要注意的是,一个包含多个步骤的模式只会延长用户离开主要任务的时间,使用户更有可能忘记他们最初在做什么。所以,如果你必须使用多步骤情态动词,那就给用户一种进度感,这样他们就不会马上放弃。也就是说,如果一开始就需要多个步骤,那么就有理由用一整页的篇幅来介绍它。

4.使用模态对话框询问信息,如果提供这些信息,可以显著减少用户的工作或努力。

情态动词可以有效地工作,当被要求或提出的信息是相关的,或可以简化当前任务的完成。

以房地产网站Zillow.com为例,用户无需账户或房地产中介就可以浏览房产信息。然而,当他们试图联系一个代理为一个清单,网站显示一个模态对话框,询问他们是否已经有一个代理。该信息对于立即进行的下一步(联系上市代理)并不重要,但对于简化未来的交互仍然很有价值。对话框使用进步的分析每次只提出一个简单的问题。这些问题都是低承诺和专注于相关细节。

Zillow.com会在用户提交对某一商品的查询后,询问更多信息。询问用户是否有房地产代理是有意义的 点,因为它减少了未来与其他代理进行冗余对话的机会。

渐进分析的关键是它们遵循用户对工作流的期望——只有当它们与当前任务相关或有帮助时,中断才有帮助。

5.不要将模态对话框用于与当前用户流程无关的非必要信息。

如上所述,模态对话框对用户有许多缺点和成本。为了使这些费用合理,它们与任务的相关性和重要性应该很高。与用户目标没有直接关系的模态对话框会被认为是令人讨厌的,并且可能会减少信任在公司里。

此外,当非必要信息以高优先级格式(如模态对话框)显示时,用户将拒绝关注这种格式的其他实例。这很像伊索寓言中的“狼来了”——反复误导别人会让他们在你真正需要的时候不再信任你。

与普遍的看法相反,邮件列表注册虽然对产生业务线索至关重要,但对用户并不重要。在最近的一项网络可用性研究中,我们听到了对与电子邮件通讯注册相关的模式对话的发自内心的蔑视。

GoodHousekeeping.com在模式邮件列表对话框上做了额外的努力——不仅背景被禁用,而且它被全屏照片完全取代,删除了用户在网站上的所有上下文。它还会出现在用户首次登录网站主页后的前3秒内,让用户没有时间从该页面收集任何价值。对话框所需要的信息对用户或他们的工作流来说并不是必需的,并且几乎不提供上下文或感知价值
模态Wayfair
顶部:Wayfair使用模态对话框请求用户指定一个板,该项目应该被固定。另一个UI元素(例如主内容中的一个选项)更适合输入此信息。下图:在选择好公告栏后,Wayfair会使用一个模态对话框来邀请用户邀请好友到他们的公告栏中——这个操作对用户来说并不重要,而且增加了固定物品的交互成本。

6.避免模式对话框中断高风险流程(如签出流)。

结帐对于用户和企业来说都是高风险的流程:用户希望确保流程是无缝的、安全的、无错误的,而企业希望确保用户执行他们的购买决定。如果不合理,模态对话框最好的情况是分散用户的注意力,最坏的情况是削弱用户的信心。

旧版本的Walmart.com使用一个模态对话框来提示用户在结账时登录。最好的情况是,这种模式可以分散用户的注意力,让他们投入到寻找Walmart.com密码的全面探索中,而不是简单地以客人的身份完成结账。在最糟糕的情况下,用户可能会觉得他们是迫于压力才创建一个账户——而这一点就会影响他们的购买决定。沃尔玛已经重新设计了它的网站,删除了这个模态对话框(但重新设计也完全删除了顾客结账,现在要求用户有一个帐户为了检查——说实话,这也同样令人不快)。

模态沃尔玛
沃尔玛的模式对话框有可能成为相关但非关键任务的危险兔子洞。

7.避免使用模态对话框进行复杂的决策,因为这需要模态中不可用的额外信息源。

模态对话框应该用于与用户进行简短、直接的对话。如果一个模态要求用户做复杂的研究或咨询额外的信息源(可能被模态阻止了),那么它不是那个交互的正确UI元素。

模态前沿
前沿航空公司使用一个模式对话框来促进其基本航班的追加销售。这个对话框要求用户决定花更多的钱,但不允许他们获得做出这个决定所需的额外信息(例如,是否还有合适的座位)。

考虑非模态对话框

在任务不是关键的情况下,非模态对话框可能是合适的。非模态对话框没有模态对话框那么无礼,因为它们允许用户继续他们的活动,如果他们不相关就忽略他们。然而,它们仍然具有破坏性,特别是当它们模糊了屏幕上的重要信息或它们需要过于复杂的交互时。

此外,一些非模态对话框不能很好地跨设备和浏览器转换——例如,桌面Chrome中的非模态窗口可能会变成iPhone Safari中的模态窗口,例如下面的Meowbox.com。

Nonmodal Meowbox
在Meowbox.com桌面网站(左),一个定时的非模态对话框的通讯注册出现在主页的右下角。然而,在站点的移动呈现(右)中,非模态窗口变成了全屏模态窗口,迫使用户在继续前进之前提供输入。虽然桌面版本允许很容易地取消提示,但移动版本不允许。

当用户需要快速切换模式以访问某些信息时,非模式窗口非常有用。例如,谷歌Mail使用非模态窗口作为编写新电子邮件消息的默认方法。用户可以打开此窗口继续工作,最小化已编写的电子邮件而不丢失它(或可选地,将其最大化到一个模态窗口)。这个单独的视图允许用户定位旧的电子邮件或可能对编写当前电子邮件有帮助的附加信息。

Nonmodal Gmail
谷歌邮件的非模态窗口允许在写和读信息之间轻松切换。

结论

模态对话框和非模态对话框都很有用,可以请求或鼓励用户参与。在决定这两种对话框类型时,要考虑用户上下文和工作流。避免不必要的打断用户破坏他们的工作流程.让用户更容易地解决问题和实现目标。如果一个公司希望朝着业务目标取得可持续的进展,那么在这些设计决策中必须优先考虑用户目标。

当提到模态对话框时,请考虑以下情况:没有人喜欢被打断,但如果你必须这样做,请确保这是值得的。