菜单 关闭

模态和非模态对话框:何时(何时不)使用它们

通过 Therese Fessenden2017年4月23日

摘要:模态对话框打断用户和一个行动的需求当用户的注意力需要针对重要信息时,它们是合适的。


为了更好地理解模态和nonmodal对话框之间的区别,让我们看看什么术语“对话框”和“模态”的意思。

一个对话框(或对话)指的是两个人之间的对话在用户界面,一个对话框是系统和用户之间的“对话”,并经常从用户请求信息或一个动作。

用户界面模式是特殊状态,其中同一系统具有稍微不同的用户界面每个模式可能会用不同的命令,或相同的命令(或行动)可以产生不同的结果取决于系统的模式换句话说,在不同的模式,同样的输入会有不同的结果例如,一台计算机与大写锁定打开在一个特殊的模式:所有的信件被输入将会显示为大写字母输入一个字母大写锁定时都有不同的效果和当它关闭或者,在Microsoft Word的跟踪变化模式,所有以前编辑和评论是可见的(而在正常,默认模式没有跟踪或显示)。

这种理解的“模式”和“对话框”,我们可以很容易地定义模态对话框。

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

一个模态对话框就像我的猫,喵喵叫艾玛,每天早上7点钟促使我去喂她我可能正在试着睡觉或为一天做好准备,但是我的猫会把自己放在我面前,然后喵喵叫,不停地说,直到我看着她如果我希望完成任务,我必须立即停止我正在做的事情来解决这个问题有时她选择做这个凌晨3点在我们睡觉我们应该有客人来住,它可以获得烦人和尴尬(在捍卫我的猫,一旦我喂她,她很平静,有一种甜的和友善的气质)。

相反,非模态(或非模态的)对话框和窗口不关闭的主要内容:显示对话框不会改变用户界面的功能用户可以继续与主要内容进行交互(甚至把窗口最小化,等等)在对话框打开继续我们的猫类比,nonmodal对话框就像一个猫人耐心地坐在餐桌在附近吃饭,等待机会,食物残渣从表中可能会下降当艾玛是这样做,我可以吃,有一个对话,享受晚餐没有中断I can choose to either ignore her altogether, or, as my husband likes to do, slip a bite of food to her under the table near the end of the meal(她非常肥胖的,你可以告诉)。

Modal dialogs were originally intended to alert users to an error or to some other system state that required immediate user action在这些情况下,为了解决问题,必须中断用户错误因此,将对话框在屏幕中间的焦点接口,使它非常有效这种模态对话框的很大的优势是,他们吸引用户的注意力,让他们迅速承认问题并改正它。

However, this original use has evolved, and now modal dialogs and windows are used persuasively to attract user attention for legitimate or less legitimate reasons.

缺点的模态对话框

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

  • 他们需要立即注意。模态窗口,就其本质而言,是强制性的,需要用户立即行动以来,对话框将系统在不同的模式下,用户无法继续他们在做什么,直到他们确认对话框。
  • 它们会中断用户的工作流程。模态对话框迫使用户远离他们处理的任务放在第一位每个中断将失去的时间和精力,不仅因为用户必须解决的对话框,还因为,一旦他们回到他们原来的任务,人们需要花些时间恢复上下文。
  • 他们导致用户忘记自己在做什么。一旦上下文切换到另一个任务,由于附加认知负荷由模态对话框,人们可能会忘记一些细节与原始任务有关如果是这种情况,恢复原始任务的上下文可能会更加困难。
  • 他们导致用户创建并解决一个额外的目标——将对话框。对话框时,额外的步骤添加到用户的工作流:阅读和理解的对话框,在这个对话框中然后做出决定这增加了交互成本用户可能会推迟,除非对话确实是合理的和包含重要的信息我们以后将在这一点上进行更详细的描述。
  • 它们会阻止后台内容。当对话框出现在当前窗口的顶部时,它可以覆盖重要内容并删除上下文因此,当对话框询问与刚被遮挡的信息相关的问题时,可能变得更难以响应对话框。

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

使用模态对话框的指南

When is it appropriate to use modal dialogs? Here are a few guidelines to help determine if modal dialogs are truly necessary.

1使用模态对话框进行重要警告,以防止或纠正严重错误。

只要有机会,用户的工作丢失,或者一个动作可能具有破坏性的,不可逆转的后果,打断用户,以避免一场灾难。

要确定哪个错误严重到足以保证模态对话框,请考虑以下事项:

  • 问题会更容易还是更难纠正如果用户的注意力是带走的任务?总是好的在它发生之前避免人为错误如果可能的话,然而,一旦错误,它可能更容易解决它呈现错误消息中的主要内容,而不是在一个模态对话框举个例子,一个错误的形式应该是页面上的报道,在那里发生,这样用户可以引用错误消息时解决这个问题但是通知用户她的计算机将在10秒内重新启动可以在模式对话框中显示,以确保用户注意到该消息。
  • 这个错误是不可逆转的吗?不可逆转的错误常常导致信息丢失,可以特别损害为复杂和耗时的任务例如,未能将商品添加到购物车可能是电子商务业务的一个不幸错误,但如果他们没有注意到一个微妙的通知(如果他们真的想要该商品,他们可以重做他们的行动),对其用户来说不是不可逆转的。另一方面,覆盖一个文件或未能保存更改数以百计的幻灯片都是不可逆操作,而且,因此,急需一个中断,通常受到欢迎。
模态对话框在微软Powerpoint
微软Powerpoint使用模态对话框,以防止不可逆转的错误或意想不到的用户操作,如不保存退出应用程序工作。
模态对话框在GMail
谷歌邮件桌面应用程序:这个模态对话框后当用户忘记附上文件包括关键短语,如“我有附加”或“请参阅附加”消息此对话框可防止用户错误(以及尴尬的后续电子邮件)。

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

当丢失的信息可以防止系统延续了用户发起的过程,一个模态对话框可以提示用户输入信息。

Etsy,如下所示,使用模态窗口打断用户的登录信息,当用户试图拯救一个项目的列表。

Etsy上的模态对话
Etsy使用模态对话框当用户尝试一个任务需要进一步措施在继续之前举个例子,当一个用户试图条目标记为“最喜欢的”,用户没有登录,会出现一个对话框,以获得所需的信息进行所需的行动。

3.模态对话框可用于片段一个复杂工作流为简单的步骤。

谈到工作流程,速度并不总是更好耗费时间和精神上和情感上)参与任务,这要求大量的信息是无法避免的在这种情况下,模态对话框可用于复杂信息分解成更简单、更便捷向导是使用模态对话框的常见实例。

但是,重要的是要注意,具有多个步骤的模态只会延长远离主要任务所花费的时间,从而使用户更有可能忘记他们首先要做的事情。所以如果你必须做多工位的情态动词,给用户的感觉他们的进展,所以他们不立即放弃也就是说,如果它需要多个步骤开始,它可能有理由将整页专用于它。

4使用模态对话框询问提供的信息,这些信息可以显着减少用户的工作或工作量。

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

对于Zillow.com(一个房地产网站),用户可以在没有帐户或房地产经纪人的情况下浏览房产列表但是,当他们尝试联系代理商进行列表时,该站点会显示一个模式对话框,询问他们是否已有代理商此信息对于下一步(联系上市代理)并不重要,但它在简化未来交互方面仍然很有价值对话框使用渐进式剖析并提出一个容易回答的问题这些问题是low-commitment并关注相关细节。

Zillow.com问用户更多信息后提交询问一个清单是有意义的问用户是否拥有一个房地产经纪人 点, 因为它减少了冗余的机会在未来与其他代理的对话。

渐进分析的关键在于,他们跟随用户的工作流的期望——中断只有帮助当他们相关的或有助于当前的任务。

5不要使用模态对话框的信息与当前用户流。

正如上面所讨论的,模态对话框有很多缺点和成本转嫁给用户为了使这些成本是合理的,他们的相关的任务和重要性应该很高模态对话框不直接关系到用户的目标被认为是令人讨厌的,可以减少信任在公司里。

此外,当不必要的信息呈现在一个高优先级格式如一个模态对话框,用户将拒绝给关注更多的这种格式的实例It’s much like in Aesop’s fable, “The Boy Who Cried Wolf”— repeatedly misleading others will make them not give you their trust when you really need it.

与流行的看法相反,邮件列表用户生成的关键业务领导,不是用户的关键在最近的一份网络可用性研究中,我们听到发自内心的蔑视与电子邮件时事通讯注册有关的模态对话框。

GoodHousekeeping.com是模态的额外英里邮件列表对话框背景——不仅是无效的,但它是完全取代全屏照片,删除所有用户在网站上的上下文It also appears within the first 3 seconds after the user first landed on the site’s homepage, giving users no time to glean any value from that page对话框需要对用户或其工作流程不重要的信息,并且几乎不提供上下文或感知价值
莫代尔Wayfair
上图:Wayfair使用模态对话框来请求用户指定应该固定此项目的板另一个UI元素(例如主要内容中的选项)更适合输入此信息底部:在选择了电路板后,Wayfair使用模态对话框要求用户邀请朋友加入他们的电路板 - 这一操作对用户来说并不重要,并增加了固定项目的交互成本。

6避免模态对话框打断高风险的过程,如检出流。

结帐是一个高风险的过程对于用户和企业:用户希望确保这个过程是无缝的,安全,无差错,和企业希望确保用户按照他们的购买决定如果没有根据,模态对话框最多会分散用户的注意力,并在最坏的情况下侵蚀用户的信心。

一个旧版本的Walmart.com使用模态对话框提示用户登录在结帐在最好的情况下,这个模态会分散用户,然后发射到一个成熟的寻求找到Walmart.com密码而不是简单地完成客人结帐在最坏的情况下,用户可能会觉得他们迫于压力单独创建一个帐户,可以影响购买决定沃尔玛已经remanbetx官方网站手机版ed其网站上删除这个模态对话框(但remanbetx官方网站手机版也完全删除客人结账,现在需要用户拥有一个帐户检查出——说实话,只是讨厌)。

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

7Avoid modal dialogs for complex decision making that requires additional sources of information unavailable in the modal.

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

莫代尔边疆
边疆航空公司使用一个模态对话框来促进一个增销在其基本的航班的对话框要求用户决定花更多的钱,但它不允许他们访问所需的额外信息做出决策(例如,如果有任何像样的座位左)。

考虑Nonmodal对话框,而不是

在任务不重要的情况下,一个nonmodal对话框可能是合适的Nonmodal比模态的对话框不进攻,因为他们允许用户继续他们的活动和忽视他们,如果他们是无关紧要的然而,他们仍然可以是破坏性的,特别是如果他们模糊的重要信息在屏幕上或如果他们需要太复杂交互。

此外,一些非模态对话框在设备和浏览器之间无法很好地转换 - 例如,桌面Chrome中的非模态窗口可能会成为iPhone上Safari的模态窗口,例如下面的Meowbox.com。

非模态Meowbox
在Meowbox.com桌面网站(左),定时nonmodal通讯注册对话框出现在首页的右下角但是,在网站的移动渲染(右),非模态窗口变为全屏模式窗口,迫使用户在向前移动之前提供输入While the desktop version allows easy dismissal of the prompt, the mobile version does not.

Nonmodal windows是有用的,当用户需要迅速切换模式为了访问特定的信息例如,谷歌邮件使用nonmodal windows作为默认的方法编写新邮件消息用户可以继续使用这个窗口打开,减少由电子邮件而不失去它(或可选,它变成一个模式窗口最大化)This separate view allows users to locate older emails or additional information that might be helpful for composing the current email.

Nonmodal Gmail
谷歌邮件的nonmodal windows允许简单的读写信息之间的转换。

结论

模态和nonmodal对话框都是有用的,请求或鼓励用户参与时决定在这两种类型的对话框,考虑用户上下文和工作流避免不必要的打断用户和破坏他们的工作流程方便用户解决问题和完成他们的目标如果一个公司想要取得可持续的进步对业务目标、用户目标必须优先考虑在这些manbetx官方网站手机版的决定。

模态对话框时,请考虑这个:没有人喜欢被打断,但如果你必须确保它的成本是值得的。