通过观察弹窗，我们会发现大多数弹窗都存在着破坏用户体验，降低用户好感度的效果。因此本文结合这一现象，讲具体分析背后的原理以及避免的方法。
通过进行数十年的用户研究，我们知道人们不喜欢弹出窗口和弹出框。在最近的一次可用性研究中，我想起了这一事实。在尝试完成任务时，一名参与者在连续遇到多个弹出窗口后将他的手机扔到了桌子上。令人沮丧的是，他放弃了任务，离开了网站，给组织留下了非常坏的印象。其他几个用户也有类似的看法，尽管他们没有扔掉他们的手机。
弹出窗口（也称为叠加或弹出）是覆盖在页面内容上部（层）显示的窗口或对话框。弹出窗口可以根据两个维度进行分类：
（1）用户是否可以与页面的其余部分进行交互：
（2）背景是否变暗：
虽然在许多情况下lightbox属于模态框（Modal），但并非总是如此。
在弹出窗口的定义中，模态框（Modal）禁用所有背景内容，非模态框（nonmodal）叠加保留用户与背景内容交互的能力，lightbox使背景内容变暗。
几个星期以来，我捕获了在网站和移动应用程序中遇到的每个弹出窗口的屏幕截图：平均每周25个弹出窗口，这比任何人能够忍受的都要多（但非常能代表今天的互联网用户体验）。
这个实验连同我的可用性研究一起出现了无数糟糕的实践，并证明叠加已经远远被过度使用了。我们已经接近网站滥用这些元素的程度，以至于有问题的实例远远超过弹出窗口仍然是一种有用的设计策略的情况。
在本文中，我将概述我观察到的问题并讨论要考虑的关键因素，以及弹出窗口的实际替代方案，以遵循组织的意图和用户体验。
弹出窗口的时机：在交互之前或关键任务期间不要提示1.在加载主页内容之前显示弹出窗口
无论使用何种变体，在用户可以从你的网站或应用程序中收集有价值的内容之前，切勿显示弹出窗口。这种趋势是非常具有侵入性的，因为用户的任务在他们登陆页面之前就被打断了。人们已经习惯于在网站上看到过早的弹出窗口并且通常忽略它们或者立即寻找最快的方式来关闭弹出窗口返回任务。在页面加载之前出现的弹出窗口使网站看起来很不舒服，用户体验感让人抓狂。
替代方案：
在加载主页面内容之前，HuffPost向用户提供了一个lightbox。这是一种可接受的使用其他有问题的做法，因为该网站在使用个人数据（包括位置）时在法律上有义务征得同意。
3.在交互之前询问电子邮件地址
许多网站和应用程序在有机会与内容交互之前使用弹出窗口来询问用户的电子邮件地址。
电子商务、新闻网站和应用程序以及博客是此类别中最大的违规者。这种方法存在问题，因为人们不仅会因为弹出窗口、其弹出时机以及网站过早要求电子邮件地址这一事实感到恼火，而且他们还会认为该网站会向他们发送垃圾邮件。
例如：登陆UncommonGoods网站的一个用户在受到模态框（Modal）的问候时感到不满，其要求输入她的电子邮件地址才可以访问秘密销售。
她说：
“在网站上做其他事情之前，这样的东西突然出现，真让我恼火。如果我第一次来到这个网站，我怎么知道我是否想成为电子邮件订阅者？我希望稍后再说。”
在询问用户的电子邮件地址时，需要考虑许多权衡因素。网站和应用程序通常使用过早的模态框（Modal），因为它们产生的指标会在短期内上升。然而，短期指标通常会以使许多用户感到沮丧为代价，而这些用户并非出于任意激励，例如秘密销售。
与其在早期显示电子邮件弹出窗口，不如考虑用户何时最愿意与您共享其电子邮件地址。他们是否正在浏览具有适用促销代码的类别？或许他们只是阅读（或扫描）了整篇博文。这些动作可能是最小侵入性非模态叠加的适当触发器，可能出现在靠近右上角或右下角的位置，使用合理数量的屏幕空间。向用户提供有价值的和有形的内容，以换取他们的电子邮件地址;不要只是指望他们主动交出来。
4.在人们做了任何有意义的事情之前要求反馈
接收用户的反馈非常重要，但当用户在你的网站上做任何事情之前，不应该向他们发送反馈提示。网站和应用程序倾向于立即向用户提供反馈弹出窗口，希望他们能够给予高度评价并继续他们的任务。但是这种情况很少发生;更常见的是，用户迅速关闭弹出窗口，无意再次寻找它。
在体验中的适当位置从用户那里获得有意义的反馈，可以深入了解他们面临的挑战和障碍。但是如果你过早地要求反馈，你可能会在最重要的时候没有得到任何反馈。
要求用户在完成您网站上的顶级任务后立即提供反馈。此方法可以最大限度地减少中断并确保反馈基于实际的互动。
5.在关键任务期间中断用户请求反馈
用户讨厌被打断，但是在完成关键任务的过程中，大量网站和应用程序通过反馈弹出窗口干扰用户。大多数情况下，提供反馈并不是用户访问网站的首要原因，因此也不要在关键任务中使用弹出窗口来扰乱人们。
美联航应用程序在关键任务中间显示模态框叠加：检索登机牌。
雀巢应用程序没有使用反馈模式中断用户，但在网站的页脚中包含反馈链接。
英国航空公司在其所有页面的右侧显示一个标记为**反馈**的按钮。
6.逐个显示多个弹出窗口
在彼此上方显示多个弹出窗口会使你的网站看起来不专业、绝望和杂乱无章。它还会压倒用户并迫使他们花费精力来关闭每个窗口。如果你的站点使用许多不同类型的弹出窗口，测试实施以避免一次向用户显示多个弹出窗口。
如果你必须在弹出窗口中显示关键信息（例如重要警告以防止或纠正错误），请确保一次只显示一个。更妙的是，不要在弹出窗口中显示关键信息，因为人们倾向于在没有阅读的情况下关闭它们。相反，使用视觉上不同的元素并将其直接放在页面上，其中消息提示最适合上下文。确保副本清楚、准确地传达用户需要做些什么来纠正问题并继续前进。
在结账流程结束时，Lulus同时提供了多个反馈模式。更好的方法是一次只显示一个或将反馈表单嵌入确认页面。
Canva在页面上直接显示关键信息做得很好。它使用位于顶部的视觉上不同的内容模块而不是弹出窗口。消息提示帮助用户了解他们需要做些什么来纠正问题。
弹出上下文：不妨碍内容的转换或访问7.在用户移动到新的子域或外部站点之前显示模态框覆盖
某些公司网站会链接到位于子域和外部站点上的内容或应用程序。在用户离开主站点之前，会出现一个模态框叠加图，提醒用户即将发生的转换。这种类型的弹出窗口是有问题的，因为它过分强调了过渡，使用户感到迷茫和困惑，特别是如果子站点是在新的浏览器选项卡中打开时。
在我们的一次可用性测试会议期间，一位在HSBC网站上寻找工作的参与者在尝试基本上分为3个不同网站的任务时遇到了两种不同的过渡模式。
他说：
“它一直把我带到其他网站，我甚至不知道我在哪里了。如果他们的工作申请流程如此复杂和脱节，我真的不认为这是一个好的工作地方。无论这个网站看起来多么漂亮，这似乎都是一团糟。”
点击Careers菜单后，模态框警告用户他们即将离开初始站点。
在同一个网站上，用户还看到了另外一种模式，表明他们要去第三个网站申请这份工作。
将用户链接到外部属性时，删除模态框，最小化站点之间的过渡，并始终保留回主站点的导航。如果你的用户确实需要在离开你的网站时收到警告，使用较少侵入性的选项（例如链接上的工具提示）以淡化过渡转换。
EliLilly：向用户提供了一个信息丰富的工具提示，让他们知道他们将访问不同的网站。工具提示帮助用户记住他们的位置和去向。
8.通过模态框叠加中断对内容的访问
“这导致我对CNN的怀疑达到顶峰。不要要求我填写电子邮件或立即注册任何内容。”
允许用户在不中断的情况下直接使用内容。将弹出窗口替换为页面顶部的易于关闭的横幅。弹出窗口的替代方案将允许用户如果想要订阅时事通讯时可以自行订阅，而不会阻断他们收看信息的主要任务。
Conde’NastTraveler的网站在导航下方的一个微妙且非侵入性的横幅中介绍了其简报订阅。这种设计允许感兴趣的用户订阅时事通讯，但并没有分散那些只想阅读网站内容的人的注意力。
弹出内容：不要假设模态框叠加将传递消息9.使用模态框叠加来进行GDPR和cookie通知
替代方案：最好放置在页面底部或侧面的非模态框叠加。这些功能的侵入性要小得多，并且允许用户继续执行任务。确保提供有关如何收集和使用用户个人数据的足够信息。
Reddit使用小而不显眼的非模态框覆盖来请求用户是否同意cookie;但是，描述人们数据使用方式的语言过于模糊。
NNgroup.com使用非模态框覆盖，其中包含有关cookie使用的清晰语言。我们概述了为什么我们收集人们的数据以及这些数据是如何专门用于他们利益。
10.鼓励模态叠加中的频道转换，而不传达特定的好处
可以理解的是，组织希望鼓励应用程序下载，但模式覆盖不是宣传你的移动应用程序的正确方法。即使是手机上有应用程序的用户也可能不愿意切换频道，因为害怕重新开始他们的流程。模态框叠加只会困扰他们。
为组织的移动应用程序创建意识，但不以侵入用户当前任务为代价。偏向于低调的方法，例如标准的顶部横幅，并概述了使用该应用程序来简化人们向该频道过渡的好处。
Wayfair用一种鼓励下载其移动应用程序的通用模式打断了用户。用户认为他们必须投入大量的工作才能在另一个渠道上重新开始他们的任务，而不会带来实际的好处。
梅西百货在鼓励手机应用程序下载方面做得不错。页面底部的非模态框叠加包含对频道转换的奖励以及显示应用的用户评级。
总结
鉴于这个总体结论，你可能想知道何时可以使用弹出窗口；答案是——谨慎使用。
抵制跟随人群的冲动，不要因为中断而淹没用户以支持短期指标。探索尊重用户需求的替代方法，并保持组织收集反馈的意图，通知用户数据收集，获取电子邮件地址或鼓励频道转换。