编辑指南:你有没有这样的经历，工作的时候突然弹出一个窗口，打断你的思考，让人生气？弹出窗口原本只是为了提醒用户，却给用户留下了非常糟糕的用户体验。本文结合作者自己的经历分析了这个问题，所以不要错过对弹窗感兴趣的童鞋。

无论是使用模态弹出窗口还是非模态弹出窗口，大部分弹出窗口出现的时间都是错误的，在关键任务中打断用户，使用不良语言，导致用户迷失方向。

通过几十年的用户研究，我们发现用户并不喜欢弹出窗口及其出现模式。

在最近的一次可用性研究中，我记住了这个道理。当试图完成一项任务时，一个参与者在连续遇到几个弹出窗口后，将手机扔向桌子的另一边。失望之余，他放弃了任务，给网站和企业留下了非常不好的印象。其他几个参与者也有类似的观点，即使他们没有扔手机。

弹出窗口(也称为覆盖窗口或浮动窗口)是出现在页面内容顶部的窗口或对话框。它可以根据两个维度进行分类:

1.用户可以与页面的其他部分交互吗？

模态弹出:在用户显示的弹出内容完成交互之前，页面上的其他内容将被禁用。

模态弹出:当弹出显示时，用户仍然可以与背景内容交互(例如，单击链接或单击按钮)。

2.背景是否黑暗:

如果背景内容变暗(通常百分比为黑色，如40% no #000000)，弹出窗口为灯箱。

背景内容不变暗时，没有特殊名称。

灯箱的弹出效果虽然在很多情况下是模态的，但是也有一些区别。如下图所示:

从弹出窗口结构分析，模态弹出窗口会禁用所有背景内容(图中左侧)，非模态弹出窗口会保留用户与背景内容交互的能力，灯箱的弹出效果会使背景内容变暗。

在几周的时间里，我收集并统计了我在网站和移动应用中遇到的每个弹出窗口的截图:平均每周有25个弹出窗口，远远超出了任何一个用户应该忍受的极限(在一定程度上也代表了现在的互联网用户体验)。

这个数据，加上我的可用性研究，揭示了很多不好的实践尝试，证明了弹出式窗口的过度使用还远没有结束。我们已经接近了网站如此滥用这些元素以至于出现很多问题的地步，但是很少有弹出窗口能够有效解决这些问题。

在本文中，我将概述我观察到的问题，并讨论要考虑的关键因素，以及可以保留企业意图和用户体验的弹出窗口的实用替代解决方案。

一、弹出时间:互动前或关键任务时不要提示

问题1:在加载主页内容之前显示弹出窗口

无论使用何种更改，在用户从您的网站或应用程序获得有价值的内容之前，不要显示弹出窗口。在加载主页内容之前显示弹出窗口非常令人不安，因为它会在用户进入页面之前中断他们正在进行的任务。

在用户的心理模型中，过早出现的弹出窗口通常是无用的，用户通常会忽略它们，或者立即找到最快的方法关闭弹出窗口，返回当前任务。页面加载前会出现弹出窗口，会让网站看起来很绝望，让用户体验变差。此外，因为谷歌惩罚让用户感觉难以使用的网站(尤其是在移动设备上)，那些没有意识到这个道理的网站将有在搜索引擎中排名较低的风险。

解决方案:

小心使用弹出窗口，直到它与用户前后的操作密切相关。

使用对等原则:在询问访问者任何事情之前，给他们一些选择，无论是询问电子邮件地址还是拒绝弹出窗口。进行用户测试，确定由于前后的操作环境，您希望在弹出窗口中显示什么内容，并找出显示内容的最佳方式；在大多数情况下，弹出窗口不是最佳选择。

当您的网站有法律义务要求用户同意使用cookie或验证其年龄时，唯一可接受的解决方案是在加载页面内容之前显示任何类型的弹出窗口(尽管我们希望欧盟和其他监管机构对GDPR和类似规则采取不那么令人讨厌的解释)。

《赫芬顿邮报》在加载主页内容之前，会向用户显示一个灯箱弹出效果的弹出窗口。这是一种可以接受的使用方法，因为网站在寻求个人数据(包括位置)时，在法律上有义务征求同意。

问题2:用户登录后会立即显示一个弹出窗口

用户登录后立即显示的弹出窗口和加载页面内容前显示的弹出窗口一样烦人。

用户登录自己的账号时，想到的是下一步或者后续任务是什么，不然为什么要登录？

此时显示任何弹出窗口都会分散他们的注意力，阻止他们完成下一个任务。因为他们更专注于下一个任务，所以用户可能不会关注弹出窗口内容或直接关闭它。不仅如此，他们还可能会因为被打断、关闭或移除弹出窗口所需的额外时间和交互成本而感到沮丧。

解决方案:

用户登录账号后，给用户一些时间和空完成任务，不要立即显示弹出窗口。一段时间后，可以显示有用的帐户提示、指南或新功能，前提是呈现的内容或新功能可以增强或进一步支持用户完成任务。

在这些情况下，更倾向于使用较少干扰的方案，例如工具提示和小的非模态弹出窗口来传达内容信息。

Gmail使用一个相对不显眼的非模态弹出窗口来引入一个新功能，支持用户当前清理收件箱的任务。它在用户与收件箱交互时显示，而不是在登录后立即显示。

问题3:在互动前要求一个电子邮件地址

许多网站和应用程序在用户有机会与内容交互之前，会使用弹出窗口询问用户的电子邮件地址。

电子商务、新闻网站和应用、博客经常使用这种“非法”的设计方案。这种方法是有问题的，因为用户不仅对弹出窗口、弹出时间和网站请求电子邮件地址太快感到恼火，而且认为网站会向他们发送不需要的垃圾邮件。

比如用户登录不凡品网站，会有一个模态弹出窗口向她打招呼，要求她填写电子邮件订阅获得折扣资格，这让她非常不满意。她说:“在我做网站上的其他事情之前，突然出现这样的事情，真的让我很恼火。我刚参观过这里。我如何知道我是否想订阅电子邮件？希望以后再说。”

一名用户在访问网站后不久显示了一个模态弹出窗口，并询问了她的电子邮件地址，这让她对罕见商品感到愤怒。

当请求用户的电子邮件地址时，有许多权衡要考虑。网站和应用往往使用不成熟的模型，生成的指标会在短时间内得到快速提升。然而，短期指标往往是以击败许多用户为代价的，这些用户不是以“折扣资格”为动机的。

解决方案:

与其过早地显示请求电子邮件的弹出窗口，不如考虑用户最愿意何时与我们共享他们的电子邮件地址。

有没有适合他们浏览的类别的推广活动？或者他们只是阅读(或扫描)了一整篇博文。这些操作可能是干扰最小的非模态弹出窗口的触发器，可能出现在右上角或右下角附近，使用相当大的屏幕空。为用户提供有价值的、有形的东西来换取他们的邮箱地址，不要指望用户主动提供。

在用户到达博文底部后，MarkManson.net会显示一个干扰最小的非模态弹出窗口。弹出窗口还提供免费电子书作为奖励。

问题4:在人们完成任务之前，请用户提供反馈

从用户那里获得反馈很重要，但是你不应该在用户在你的网站上做任何事情之前征求他们的反馈。

网站和应用倾向于立即向用户提供反馈弹出窗口，希望用户在继续完成任务之前给予高度评价。用户很少在这个时候填写反馈；更多时候，用户会快速关闭弹出窗口，不想再看到。

在体验合适的时刻从用户那里获得有意义的反馈，深入了解他们的痛点。但是，如果你要求反馈太快，你可能在最重要的时候得不到任何反馈。

例如，当在ATT.com支付电话费时，一名研究参与者对这种反馈方法感到沮丧，这种反馈方法会在她输入账单时立即显示出来。她说:“嗯，我本来会在结账后给出反馈的，但是现在我很沮丧，因为我没有做任何我能给出反馈的事情。”

一名研究参与者在试图支付电话费时不情愿地关闭了一个反馈弹出窗口。她说，她没有在网站上做任何事情来确保她能够提供客观的反馈。

解决方案:

请用户在完成您网站上的第一项任务后立即提供反馈。这种方法最大限度地减少了任务中断，并确保反馈基于实际的交互。例如，会议结束后，视频会议软件蓝战士要求用户提供反馈。请求不提前显示，而是前后操作相关内容，在适当的时间显示。

一旦用户完成关键任务，就询问他们的反馈，而不是在他们到达你的网站时。这样，你就增加了获得客观评论或评级的机会。在这种情况下，使用模态弹出窗口可以减少用户的烦恼和干扰。

问题5:在关键任务中打断用户并要求反馈

用户讨厌被打断，但在完成关键任务的过程中，大量网站和应用会跳出反馈弹出窗口打断用户。在大多数情况下，提供反馈不是您的用户要访问的主要任务，所以不要在关键任务中间出现弹出窗口来打断用户。

在关键任务“取回登机牌”期间，联合航空的应用程序显示一个评分模式弹出窗口。

解决方案:

除了要求用户在关键任务完成后提供反馈外，还应该提供一种静态的、无干扰的方法，以便用户可以随时提供反馈。屏幕侧面的标签、页脚的链接或导航中的链接都是可以接受的替代方案，允许用户在准备好的时候分享他们的意见。

雀巢没有用弹出反馈来打断用户，而是在其网站页脚加入了反馈链接。

英国航空公司在其所有页面的右侧显示一个标有“反馈”的按钮。

问题6:一个接一个地覆盖并显示多个弹出窗口

继续在弹出窗口上叠加显示弹出窗口，会让你的网站看起来不专业，混乱无序，也会让用户不堪重负，迫使他们花精力一个个关闭。如果您的网站使用许多不同类型的弹出窗口，请进行相应的测试，以避免同时向用户显示多个弹出窗口。

解决方案:

如果您必须在弹出窗口中显示关键信息(例如，防止或纠正错误的重要警告)，请确保一次只显示一个。

当然，最好不要在弹出窗口中显示关键信息，因为人们经常在没有阅读的情况下关闭信息。相反，使用一个视觉上不同的元素，并将其直接放在页面上最合适的位置，以确保该元素能够清楚地传达用户需要做什么来纠正问题并继续前进。

结账过程结束时，Lulus显示了几个反馈弹出窗口。最好一次只显示一个，或者将反馈表单嵌入确认页面。

Canva非常擅长直接在页面上显示关键信息。它用一个弹出框代替弹出窗口，放在最上面。这种信息有助于用户理解他们需要采取的纠正措施。

二、弹出环境:不阻止跳转或访问内容

问题7:在用户移动到新的子网站或外部网站之前显示弹出窗口

一些公司网站链接到子网站或外部网站上的内容或应用程序。在用户离开主站点之前，会出现一个弹出窗口来提醒用户即将进行的跳转。这种类型的弹出窗口是有问题的，因为它过于强调跳转，这使用户感到迷失和困惑——尤其是当子网站在新的浏览器选项卡中打开时。

在我们的一次可用性测试中，一名在汇丰网站上找工作的参与者在尝试一项任务时遇到了两种不同的过渡模式，这项任务基本上是在三个不同的网站上划分的。他说:“哇，它一直带我去别的网站，我都不知道自己在哪。如果他们的求职流程这么复杂，脱节，我真的觉得不是一个好的工作选择。这个网站再好看，也是一团糟。”

单击“职业”后，一个弹出窗口警告用户他们将离开初始站点。

在同一个网站上，还会向用户显示另一个弹出窗口样式，表示他们将前往第三个网站申请该职位。

解决方案:

删除弹出窗口，尽量减少站点之间的跳转，在将用户链接到外部属性时，始终保留返回主站点的路径和导航。如果你真的需要在离开网站时警告你的用户，请使用不那么打扰的选项(例如，链接上的工具提示)来使转换更加巧妙和自然。

礼来公司公司:它为用户提供了一个信息丰富的工具提示，让他们知道他们想访问其他网站。工具提示帮助用户记住他们在哪里以及他们要去哪里。

问题8:通过模式弹出窗口中断对内容的访问

当人们加载一篇文章或其他长格式内容(如通常在网站的“关于我们”或“新闻”部分找到的内容)时，会立即出现一个模态对话框，使其看起来像是在限制对内容的访问。这种情况特别讨厌，因为会降低可信度和信任感。

CNN手机应用上的一个用户，在打开一篇自己想看的文章后，立刻弹出了一个新闻订阅的模态弹出窗口，这让他感到非常沮丧。他说:“这让我对CNN的怀疑达到了顶点。不要问我要我的电子邮件或注册任何东西。”

当用户登录阅读文章时，CNN的移动应用程序会显示弹出窗口。这是有问题的，因为用户现在只想看文章。

解决方案:

允许用户不受干扰地立即使用内容。将弹出窗口替换为页面顶部易于注意的横幅弹出框。这种弹出框的替代方法使用户能够自行订阅新闻通信服务，而不会干扰他们阅读信息的主要任务。

康德的“Nast旅行家”网站在导航下方的一个巧妙且不干涉(可关闭)的横幅中介绍了它的时事通讯。这种设计允许感兴趣的用户订阅时事通讯，而不会分散那些只想阅读网站内容的人的注意力。

三、弹出内容:不要假设弹出窗口会很好的传递消息

问题9:对GDPR和Cookie通知使用模式

用户通常会匆忙关闭模态弹出窗口，因为他们认为这样做没有用。为了传达使用GDPR和曲奇的重要信息，请不要使用模态弹出窗口。

解决方案:

将无模式弹出窗口放在页面的底部或侧面。它们的破坏性小得多，允许用户继续执行任务，确保提供关于如何收集和使用用户个人数据的足够信息。

Reddit用一个小的、不干涉的非模态覆盖，来征求用户对Cookie的同意；然而，描述如何使用用户数据的语言过于模糊。

NNgroup.com使用无模式弹出窗口，并使用透明的语言描述Cookie的使用。我们准确地描述了我们为什么收集人们的数据，以及如何使用这些数据来为他们的利益服务。

问题10:鼓励模式弹出窗口中的页面跳转，但不传达具体的好处

我们经常看到从移动网站跳转到相关移动应用的弹出鼓励，尤其是在电子商务或新闻网站上。这些弹出窗口在很多情况下会造成破坏性的问题:通常Web用户都是一次性用户，不愿意为了偶尔的任务下载应用。

这个没有错。企业希望用户下载应用，但鼓励弹出不是推广移动应用的正确方式。即使是在手机上安装了你的应用的用户，也可能因为担心重启当前的任务流而不愿意换频道，模态弹出只会打扰他们。

解决方案:

为企业移动应用程序创建可见性，但不能以干扰用户当前任务为代价。支持低调的方法，如标准的顶部横幅，并概述使用该应用程序简化人们向该渠道过渡的好处。

Wayfair用一个弹出窗口打断了用户，鼓励他们下载移动应用程序。用户认为他们将不得不在另一个渠道努力重新开始他们的任务，而没有感觉到明显的好处。

梅西百货在鼓励从其移动网站下载移动应用方面做得很好。页面底部的无模式弹出窗口包含刺激频道切换和显示应用程序用户评级的功能。

四.结论

弹窗，弹窗，它从未停止出现！这不是可接受的用户体验，请停止使用弹出窗口。

考虑到这个一般结论，你可能会想什么时候使用弹出窗口是可以接受的。答案是:请小心。抵制随大流的冲动，不要用干扰淹没你的用户来提高短期指标。探索其他方式尊重用户需求，保持企业收集反馈、通知用户数据收集、获取电子邮件地址或鼓励跳转的意图。

只有在适当的时候，才小心翼翼地使用模态弹出来传达关键信息。不要用令人不安的弹出窗口打断基本任务或阻止相关内容。进行可用性测试，以确保弹出窗口不会让用户失望，可用性测试的另一个好处是可以帮助您真正了解用户，改善您的整体体验。