模态和非模态对话框：如何选择？

链接
为了更好地理解模态对话框和非模态对话框之间的区别，让我们看看术语“对话框”和“模态”的含义。
对话（或对话）是指两个人之间的对话。在用户界面中，对话是系统与用户之间的“对话”，经常向用户请求信息或动作。
用户界面模式是一种特殊状态，在这种状态下，同一系统具有不同的用户界面。每种模式可能带有不同的命令，或者相同的命令（或动作）可能会根据系统的模式产生不同的结果。也就是说，在不同的模式下，同样的输入会有不同的结果。例如，打开 Caps Lock 的计算机处于特殊模式：所有正在键入的字母都将显示为大写字母。当 Caps Lock 打开和关闭时，键入一个字母会产生不同的效果。或者，在 Microsoft Word 的 Track Changes 模式下，所有以前所做的编辑和评论都是可见的（而在正常的默认模式下，它们不会被跟踪或显示）。
有了对“mode”和“dialog”的理解，我们就可以轻松定义模态对话框了。
定义：模态对话框是出现在主要内容之上并将系统移动到需要用户交互的特殊模式的对话框。此对话框禁用主要内容，直到用户明确与模态对话框交互。
模态对话就像我的猫艾玛——它每天早上 7 点喵喵叫，提示我喂她。我可能正在努力睡觉或为这一天做准备，但我的猫会站在我面前，然后不断地喵喵叫，直到我看着她。如果我希望完成我的任务，我必须立即停止我正在做的事情来解决猫。有时她会选择在我们睡觉时在凌晨 3 点这样做。如果我们有客人留下来，它会变得烦人和尴尬。（为了保护我的猫，我喂了她一次，她很平静，有一种甜美善交际的气质。）
相反，非模态（或无模态）对话框和窗口不会禁用主要内容：显示对话框不会改变用户界面的功能。用户可以在对话框打开时继续与主要内容交互（甚至可能移动窗口、最小化窗口等）。继续我们的猫类比，非模态对话就像一只小猫，在用餐时耐心地坐在餐桌旁，等待食物残渣从餐桌上掉下来的机会。当艾玛这样做时，我可以吃饭、交谈和享用晚餐，而不会受到太多干扰。我可以选择完全不理她，或者像我丈夫喜欢做的那样，在饭后在桌子底下给她吃一口食物。（她吃得很好，你可能会说出来。）
模态对话框最初的目的是提醒用户注意错误或需要用户立即采取行动的其他一些系统状态。在这些情况下，必须中断用户以修复错误。因此，将对话框放在屏幕中间作为界面的焦点，非常有效。这种模态对话的最大优势在于它们吸引了用户的注意力，并允许他们承认问题并迅速纠正它。
然而，这种最初的用途已经发展，现在模态对话框和窗口被说服地使用以吸引用户注意，出于正当或不正当的原因。

模态对话框的缺点

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

• 他们需要立即关注。模态窗口本质上是强制性的，需要用户立即采取行动。由于对话将系统置于不同的模式，用户在确认对话之前不能继续他们正在做的事情。
• 它们会中断用户的工作流程。模态对话框首先迫使用户远离他们正在处理的任务。每次中断都会转化为时间和精力的损失，不仅因为用户必须解决对话，还因为一旦他们回到原来的任务，人们将不得不花一些时间来恢复上下文。
• 它们使用户忘记他们在做什么。一旦上下文切换到不同的任务，由于模态对话施加的额外认知负荷，人们可能会忘记与原始任务相关的一些细节。如果是这种情况，恢复原始任务的上下文可能会更加困难。
• 它们使用户创建并解决一个额外的目标——关闭对话。当对话出现时，额外的步骤被添加到用户的工作流程中：阅读和理解对话，然后对该对话做出决定。这种交互成本的增加可能会推迟用户，除非对话有充分的理由并且确实包含重要信息。稍后我们将详细说明这一点。
• 他们在后台阻止内容。当一个对话框出现在当前窗口的顶部时，它可以覆盖重要的内容并删除上下文。因此，当对话询问与刚刚模糊的信息相关的问题时，可能会变得更难对对话做出响应。

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

使用模态对话框的指南

什么时候适合使用模态对话框？以下是一些指导方针，可帮助确定模态对话框是否真的必要。

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

每当用户的工作有可能丢失或某个操作可能产生破坏性的、不可逆转的后果时，请打断用户以避免灾难。
要确定哪个错误严重到足以保证使用模态对话框，请考虑以下事项：

• 如果用户的注意力从任务上移开，问题会更容易纠正还是更难纠正？如果可能的话，在人为错误发生之前防止它总是好的。但是，一旦发生错误，如果错误消息显示在主要内容中而不是模式对话框中，则可能更容易修复它。例如，表单中的错误应在页面上报告错误发生的位置，以便用户在解决问题时可以参考错误消息。但是，通知用户她的计算机将在 10 秒后重新启动可能会显示在一个模式对话框中，以确保用户注意到该消息。
• 错误是不可逆转的吗？不可逆转的错误通常会导致信息丢失，这对于复杂且耗时的任务尤其具有破坏性。例如，未能将商品添加到购物车对于电子商务企业来说可能是一个不幸的错误，但如果用户没有注意到微妙的通知（如果他们真的想要该商品，他们可以重做他们的操作），这对他们来说并非不可逆转。另一方面，覆盖文件或未能保存对数百张幻灯片的更改都是不可逆转的行为，因此非常需要中断，并且经常受到欢迎。

Microsoft Powerpoint 使用模式对话框来防止不可逆转的错误或意外的用户操作，例如在不保存工作的情况下退出应用程序。

Google Mail 桌面应用程序：当用户在邮件中包含“我已附加”或“请参阅附件”等关键短语后忘记附加文件时，会出现此模式对话框。此对话框可防止用户错误（以及尴尬的后续电子邮件）。

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

当缺少信息阻止系统继续用户启动的进程时，模式对话框可以提示用户输入该信息。
如下所示，Etsy 使用模式窗口在用户尝试将项目保存到收藏夹列表时中断用户获取登录信息。

每当用户尝试执行需要进一步步骤才能继续执行的任务时，Etsy 就会使用模式对话框。例如，当用户尝试将某个项目标记为“收藏夹”，而用户未登录时，会出现一个对话框，以获得执行所需操作所需的信息。

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

在工作流程方面，更快并不总是更好。对于耗时且涉及精神（和情感）的任务，一次要求大量信息可能会让人不知所措。在这些情况下，模态对话框可用于将复杂信息分解成更简单、更易消化的块。向导是这种使用模式对话框的常见实例。
但是，重要的是要注意，具有多个步骤的模式只会延长花费在主要任务之外的时间，使用户更有可能忘记他们最初在做什么。所以如果你必须做多步模态，让用户感觉到他们的进步，这样他们就不会立即放弃。也就是说，如果它需要多个步骤开始，它可能有理由将一整页专门用于它。

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

当请求或呈现的信息相关或可以简化当前任务的完成时，模式可以有效地工作。
以房地产网站 Zillow.com 为例，用户无需帐户或房地产经纪人即可浏览房产列表。但是，当他们尝试联系代理以获取列表时，该站点会显示一个模式对话框，询问他们是否已经有代理。这些信息对于下一步（联系上市代理）并不重要，但它对于简化未来的交互仍然很有价值。该对话框使用渐进式分析，并一次呈现一个易于回答的问题。这些问题是低承诺的，并且专注于相关细节。

Zillow.com 会在用户提交有关某个列表的查询后要求他们提供更多信息。在此询问用户是否有房地产经纪人是有意义的观点，因为它减少了将来与其他代理进行冗余对话的机会。
渐进式分析的关键在于它们遵循用户对工作流程的期望——中断只有在它们与当前任务相关或有帮助时才有帮助。

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

如上所述，模态对话框对用户有许多缺点和成本。为了使这些成本合理化，它们与任务的相关性和重要性应该很高。与用户目标不直接相关的模态对话被认为是烦人的，并且会降低对公司的信任。
此外，当非必要信息以高优先级格式（例如模态对话框）呈现时，用户将拒绝关注这种格式的进一步实例。这很像伊索寓言《叫狼来的男孩》——反复误导他人会使他们在你真正需要的时候不信任你。
与普遍的看法相反，邮件列表注册虽然对于产生业务线索至关重要，但对用户来说并不重要。在最近的一项网络可用性研究中，我们听到了对与电子邮件通讯注册有关的模式对话框的发自内心的蔑视。

GoodHousekeeping.com 通过模式邮件列表对话框更进一步——不仅背景被停用，而且完全被全屏照片取代，删除了用户在网站上的所有上下文。它还会在用户首次登陆网站主页后的前 3 秒内出现，让用户没有时间从该页面收集任何价值。对话需要的信息对于用户或他们的工作流程来说不是必需的，并且几乎不提供上下文或感知价值。

顶部：Wayfair 使用模态对话框来请求用户指定应固定此项目的板。另一个 UI 元素（例如主要内容中的选项）将更适合输入此信息。底部：在选择了图板后，Wayfair 使用模式对话框要求用户邀请朋友加入他们的图板——这一操作对用户来说不是必需的，并且会增加固定项目的交互成本。

6. 避免中断高风险流程（如结账流程）的模式对话框。

结帐对于用户和企业来说都是一个高风险的过程：用户希望确保该过程是无缝的、安全的和无错误的，而企业希望确保用户遵循他们的购买决定。模态对话，如果没有根据，充其量只会分散用户的注意力，而最坏的情况会削弱用户的信心。
旧版 Walmart.com 使用模式对话框提示用户在结账时登录。充其量，这种模式可以分散用户的注意力，让他们开始寻找 Walmart.com 密码的完整任务，而不是简单地以访客身份完成结帐。在最坏的情况下，用户可能会觉得他们被迫创建一个帐户——仅此一项就会影响购买决定。此后，沃尔玛重新设计了其网站以删除此模式对话框（但重新设计也完全删除了客人结帐，现在要求用户拥有一个结帐帐户——老实说，这同样令人反感）。

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

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

模态对话框应该用于与用户进行简短、直接的对话。如果模态框需要用户进行复杂的研究或查阅其他信息源（可能被模态框阻止），那么它就不是该交互的正确 UI 元素。

Frontier Airlines 使用模式对话框来促进其基本航班的追加销售。该对话要求用户决定花更多的钱，但它不允许他们访问做出该决定所必需的额外信息（例如，如果还有任何合适的座位）。

考虑使用非模态对话框

在任务不重要的情况下，非模态对话框可能是合适的。非模态对话框没有模态对话框那么令人反感，因为它们允许用户继续他们的活动并在它们不相关时忽略它们。但是，它们仍然可能具有破坏性，尤其是当它们掩盖了屏幕上的重要信息或它们需要过于复杂的交互时。
此外，一些非模态对话框不能很好地跨设备和浏览器进行转换——例如，桌面上 Chrome 中的非模态窗口可能会在 iPhone 上的 Safari 中变成模态窗口，例如下面的 Meowbox.com。

在 Meowbox.com 桌面网站（左）上，主页的右下角出现了一个用于订阅时事通讯的定时非模式对话框。然而，在网站的移动渲染上（右），非模态窗口变成了全屏模态窗口，迫使用户在前进之前提供输入。虽然桌面版可以轻松消除提示，但移动版则不能。
当用户需要在模式之间快速切换以访问某些信息时，非模态窗口很有用。例如，Google Mail 使用非模态窗口作为编写新电子邮件的默认方法。用户可以在此窗口打开的情况下继续工作，最小化撰写的电子邮件而不会丢失它（或可选地将其最大化为模式窗口）。这个单独的视图允许用户查找旧电子邮件或可能有助于撰写当前电子邮件的其他信息。

Google Mail 的非模态窗口允许在书写和阅读信息之间轻松切换。

结论

模态和非模态对话都是有用的，并且请求或鼓励用户参与。在决定这两种类型的对话时，请考虑用户上下文和工作流程。避免不必要地打断用户和打断他们的工作流程。让用户更容易解决问题并实现目标。如果公司希望在实现业务目标方面取得可持续进展，则在这些设计决策中必须优先考虑用户目标。
当谈到模态对话框时，请考虑这一点：没有人喜欢被打断，但如果必须，请确保它物有所值。