为了更好地了解模态和非透模对话的区别,让我们来看看术语“对话框”和“模态”的意思。

一种dialog(或者dialogue)指两个人之间的谈话。在用户界面中,对话框是系统和用户之间的“会话”,并且经常请求来自用户的信息或动作。

用户界面模式是特殊状态,其中相同的系统具有稍微不同的用户界面。每个模式可能都有不同的命令,或者相同的命令(或动作)可以根据系统模式产生不同的结果。换句话说,在不同的模式中,相同的输入将具有不同的结果。例如,具有CAPS锁的计算机上打开了特殊模式:所键入的所有字母将显示为大写字母。当盖帽锁定与关闭时,键入字母具有不同的效果。或者,在Microsoft Word的曲目更改模式下,所有先前制作的编辑和注释都是可见的(而在正常的默认模式下,它们未跟踪或显示它们)。

有了对“模式”和“对话框”的理解,我们可以轻松定义模态对话框。

定义一种模态对话框是一个对话框,它出现在主内容之上,并将系统移动到需要用户交互的特殊模式。此对话框禁用主内容,直到用户明确地与模态对话框进行交互。

模态对话框就像我的猫,艾玛 - 谁每天早上早上7点才能促使我喂她。我可能试图睡觉或准备这一天,但我的猫会在我面前放在我面前,然后喵喵叫,直到我看着她。如果我希望完成任务,我必须停止我正在做的事情来解决猫。有时她选择在睡觉时在凌晨3点这样做这个。如果我们有客人,可以留下来,它可能会变得令人讨厌和令人尴尬。(在防御我的猫,一旦我喂她,她非常平静,有一个甜蜜和善于善的气质。)

相比之下,非透明度(或者范围)对话框和Windows不会禁用主要内容:显示对话框不会更改用户界面的功能。在对话框打开时,用户可以继续与主内容(并且可能甚至移动窗口,最小化I等)。为了继续我们的猫类比,一个非透明度对话就像在一顿饭期间耐心地坐在餐桌附近的小猫,等待食物废料可能从桌子下降的机会。当艾玛这样做时,我可以吃,有谈话,享受晚餐,没有太多的中断。我可以选择完全忽略她,或者,正如我丈夫喜欢的那样,在饭后旁边的桌子上向她留下一口食物。(她很好吃,因为你可能会告诉。)

模态对话框最初旨在提醒用户对所需用户操作所需的错误或其他一些系统状态。在这些情况下,用户必须被中断以便修复错误。Thus, placing the dialog box in the middle of the screen as the focal point of the interface, made it very effective. The big advantage of such modal dialogs was that they attracted users’ attention and allowed them to acknowledge the problem and correct it quickly.

但是,此原始使用已经进化,现在模态对话框和窗口被说服地吸引了用户注意力,以获得合法或更少的合法原因。

Disadvantages of Modal Dialogs

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

  • 他们需要立即关注。莫代尔窗口,他们的性质是强制性的,并要求用户立即采取行动。由于对话框以不同的模式将系统放置,因此在确认对话框之前,用户无法继续他们正在进行的操作。
  • 他们中断用户的工作流程。Modal dialogs force users away from the tasks they were working on in the first place. Each interruption translates in lost time and effort, not only because users must address the dialog, but also because, once they go back to their original tasks, people will have to spend some time recovering context.
  • 他们导致用户忘记他们在做什么。一旦上下文切换到不同的任务,因为额外的认知负荷模态对话框施加,人们可能会忘记与原始任务相关的一些详细信息。如果是这种情况,则恢复原始任务的上下文可能更加困难。
  • 它们导致用户创建和解决额外的目标 - 解除对话框。呈现对话框后,将添加额外的步骤在用户的工作流程中:要读取和理解对话框,然后在该对话框中作出决定。这增加了互动成本可能会推迟用户,除非对话对话很好,否则确实包含重要信息。我们稍后会详细阐述。
  • 它们阻止了背景中的内容。当对话框显示在当前窗口的顶部时,它可以介绍重要内容并删除上下文。因此,当对话框询问与刚刚遮挡的信息有关的问题时,可能会更难回复对话框。

由于这些缺点,当用于非临界活动时,模态对话框变得有问题。

使用模态对话框的指南

什么时候使用模态对话框是什么时候?以下是一些有助于确定模态对话框是否真正必要的指导方针。

1.使用模态对话框进行重要警告,作为防止或纠正临界错误的方法。

每当有可能丢失用户的工作或动作可能具有破坏性,不可逆转的后果时,会中断用户以避免灾难。

要确定哪些错误严重才能保证模态对话框,请考虑以下内容:

  • 如果用户的注意力从任务中带走,问题是否会更容易或更难以纠正?它总是好的在发生之前防止人为错误, 如果可能的话。但是,一旦出错,如果错误消息在主内容中而不是模态对话框中呈现错误消息,则可能更容易修复它。例如,应在页面上报告表单中的错误,旁边发生在发生的位置,以便用户可以在解决问题时引用错误消息。但是通知用户她的计算机将在10秒内重新启动,可以在模态对话框中显示,以确保用户注意到消息。
  • 错误是不可逆转的吗?不可逆转的错误通常导致信息丢失,这对于复杂和时间密集的任务来说可能尤为损害。例如,未能将物品添加到购物车可能是电子商务业务的不幸错误,但对其用户而言并非不可逆转,他们不应该注意到微妙的通知(如果他们真的想要该项目,他们可以重做行动。另一方面,覆盖文件或无法保存到数百次幻灯片的更改是不可逆转的动作,因此,需要中断,并且通常欢迎。
Microsoft PowerPoint上的模态对话框
Microsoft PowerPoint使用模态对话框来防止不可逆转的错误或意外用户操作,例如在不保存工作的情况下退出应用程序。
Gmail上的模态对话框
Google Mail Desktop App:当用户忘记在包括“我已附加”或“请参阅附加”中的关键短语时,将出现此模态对话框。此对话框可防止用户错误(和尴尬的后续电子邮件)。

2.使用模态对话框请求用户输入关键的信息,以继续进行当前进程。

当缺少信息阻止系统继续用户启动的进程时,模态对话框可以提示用户提供该信息。

如下所示,如下所示,使用模态窗口中断用户在用户尝试将项目保存到收藏夹列表中时的登录信息。

etsy上的模态对话框
每当用户尝试在继续之前,使用任务时,etsy使用模态对话框。例如,当用户尝试将项目标记为“收藏”时,并且用户未登录,则会出现一个对话框,以便获得所需的信息来进行期望的动作。

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

谈到工作流程,更快的并不总是更好。耗费时间和精神上和情感上) involved tasks, it can be overwhelming to ask for lots of information all at once. In those situations, modal dialogs can be used to break complex information up into simpler, more digestible chunks. Wizards are common instances of such a use of modal dialogs.

但是,重要的是要注意,具有多个步骤的模态将延长远离主要任务的时间,使用户更有可能忘记他们首先做的事情。因此,如果您必须进行多步模块,请为用户提供他们的进展感,因此他们不会立即放弃。也就是说,如果需要多个步骤开始,它可能就是致力于它的完整页面。

4.使用模态对话框询问信息,当提供时,可以显着减少用户的工作或努力。

Modals can work effectively when the information being requested or presented is relevant or can streamline the completion of the current task.

在zillow.com的情况下,房地产网站,用户可以在不拥有帐户或房地产经纪人的情况下浏览房产列表。但是,当他们尝试联系代理人进行清单时,该站点显示模态对话框,询问它们是否已有代理。此信息对立即下一步(联系上市代理)并不至关重要,但它仍然可以在简化未来的互动方面具有重要价值。对话框使用progressive profiling并一次呈现一个易于回答的问题。这些问题是低承诺,并专注于相关细节。

zillow.com在提交有关某个上市时的询问后询问用户更多信息。询问用户是否有房地产经纪人是有意义的 point,因为它在将来降低了与其他代理商的冗余对话的机会。

具有逐步分析的关键是,他们遵循用户对工作流程的期望 - 中断只有当他们相关或有帮助时有助于当前任务。

5.请勿使用与当前用户流无关的非态性信息的模态对话框。

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

另外,当以高优先级格式呈现非优先级格式时,用户将拒绝注意这种格式的进一步实例。这就像在Aesop的寓言中一样,“狼人哭泣的男孩” - 反复误导他人会让他们在真正需要它时不会让他们信任。

与流行的信念相反,邮件列表注册,同时对生成业务引线至关重要,对用户来说并不重要。在最近的网络可用性研究中,我们听到了与电子邮件通讯注册有关的模态对话的内脏蔑视。

GoodhooneHealing.com与模态邮件列表对话框进行额外的英里 - 不仅是停用的背景,而且它将完全替换为全屏照片,从而删除用户位于网站上的所有上下文。它还出现在用户首次登陆网站的主页后的前3秒内,向用户提供从该页面的任何值收集。该对话框需要对用户或其工作流程不是必需的信息,并且几乎没有上下文或感知价值
Modal Wayfair
TOP:Wayfair使用模态对话框请求用户指定该项目应该固定的电路板。另一个UI元素(例如主内容中的选项)更适合输入此信息。底部:选中板后,Wayfair使用模态对话框来询问用户邀请朋友到他们的电路板 - 一种对用户不必不为的行动,并提高了钉扎物品的交互成本。

6.避免模态对话框,即中断诸如结账流程的高股份流程。

退房是用户和企业的高股份流程:用户希望确保该过程是无缝,安全和无错误的,并且企业希望确保用户在购买决策上遵循。模态对话框(如果没有andranted)可以最好地分散用户的注意力,并且在最坏的情况下侵蚀用户信心。

一种n older version of Walmart.com used a modal dialog to prompt users to log in during checkout. At best, this modal could distract users and launch them into a full-fledged quest to find the Walmart.com password rather than simply completing checkout as a guest. At worst, users may feel that they’re pressured into creating an account — and that alone can influence a purchasing decision. Walmart has since redesigned its website to remove this modal dialog (but the redesign also removed guest checkout completely and now要求用户有一个帐户为了签出 - 诚实,是诚实的,就像脱掉了)。

莫代尔沃尔玛
Walmart的模态对话可能具有危险的兔子洞,进入相关,但不是关键任务。

7.避免复杂决策的模态对话框,需要在模态中不可用的其他信息来源。

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

莫代尔边疆
Frontier Airlines使用模态对话框来促进其基本航班上的upsell。该对话框要求用户决定花费更多的资金,但它不允许他们访问制作该决定所需的其他信息(例如,如果剩下任何体面的座位)。

考虑非阳极对话框

在任务不关键的情况下,非透模对话可能是合适的。非透明度对话框不如模态的对话,因为它们允许用户继续他们的活动并忽略它们,如果它们无关紧要。但是,它们仍然可以是破坏性的,特别是如果他们在屏幕上掩盖了重要信息,或者他们需要过于复杂的互动。

Moreover, some nonmodal dialogs do not translate well across devices and browsers — for example, a nonmodal window in Chrome on a desktop may become a modal one in Safari on an iPhone, such as with Meowbox.com below.

Nonmodal Meowbox
在MeoWbox.com桌面站点(左)上,在主页的右下角显示了一系列通讯注册的非透析对话框。但是,在网站(右)的移动渲染上,非透镜窗口成为全屏模态窗口,迫使用户在前进之前提供输入。虽然桌面版本允许轻松解雇提示,但移动版本没有。

当用户需要在模式之间快速切换以访问某些信息时,非透视窗口很有用。例如,Google Mail使用非透明窗口作为构思新电子邮件的默认方法。用户可以继续使用此窗口打开,最大限度地减少组合的电子邮件而不丢失它(或可选地,最大化将其最大化到模态窗口中)。此单独的视图允许用户找到可能有助于构图当前电子邮件的旧电子邮件或其他信息。

nonmodal gmail.
Google Mail的非二极管窗口允许在写作和阅读信息之间轻松切换。

结论

模态和非透明度对话都很有用,请求或鼓励用户参与。在决定这两种类型的对话框方面,请考虑用户上下文和工作流程。避免不必要地中断用户和扰乱他们的工作流程。让用户更容易解决问题并完成目标。如果公司希望对业务目标进行可持续发展,必须在这些设计决策期间优先考虑用户目标。

谈到模态对话框时,请考虑一下:没有人喜欢中断,但如果你必须,请确保它是值得的。