弹出窗口(如何制作电脑弹出窗口)

本文列举了近年来网站和应用程序中一些常见的滥用弹出窗口的情况，并指出了更好的替代方法。希望对你有帮助。

摘要

无论是否采用模态窗口，大多数弹出窗口出现的时间都是错误的，在关键任务时中断了用户的进程，使用了不良文案，打乱了用户的使用路径。

经过几十年的用户研究，我们都知道人们不喜欢弹出窗口和模态窗口。在最近的一项可用性研究中，它再次让我想起了这一点。

在尝试完成一个任务时，有参与者接连遇到几个弹窗，然后沮丧地扔掉手机，带着对网站非常不好的印象停止了任务。其他几个用户也有类似的感受，虽然他们没有扔掉手机。

弹出窗口是显示在页面内容顶部的窗口或对话框。弹出窗口可以根据两个维度进行分类:

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

模态窗口:在用户明确与弹出层交互之前，页面上的其他内容被禁用；

无模式窗口:用户仍然可以与背景内容交互(例如，通过选择链接或单击按钮)，而弹出层仍然可见。

2)背景暗吗？

如果背景变暗，弹出窗口称为灯箱；；

没有视觉变暗的背景内容没有特殊名称。

虽然灯箱在许多情况下是模态的，但并不总是如此。

在弹出结构方面，模态浮动层禁用所有背景内容，非模态浮动层保留用户与背景内容交互的能力，而灯箱则使背景内容变暗。

过去几周，我对自己在网站和移动应用中遇到的每一个弹出窗口都进行了截图:平均每周有25个弹出窗口，超出了任何人的承受能力(但也代表了如今的互联网用户体验)。

这个实验，以及我的可用性研究，展示了许多糟糕的实现实践，并证明了对弹出窗口覆盖的过度使用远未结束。我们已经接近了过度滥用这些元素的临界点，以至于问题已经远远超过了弹出窗口的价值。

在本文中，我将总结观察到的问题，并讨论要考虑的关键因素，以及可以保持组织意图和用户体验的现实替代方案。

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

错误:加载主页内容前显示弹出窗口。

无论你使用哪种变体，在用户可以从你的网站或APP获得价值之前，不要弹出窗口。这种趋势非常令人不安，因为用户的任务甚至在进入页面之前就被中断了。

人们习惯于在网站上看到过早的弹出窗口，通常会忽略它们，或者立即找到最快的方法关闭弹出窗口返回任务。

页面加载前出现的弹出窗口让网站看起来绝望，让用户体验疯狂。此外，没有意识到这一事实的网站可能在搜索引擎结果中排名较低，因为谷歌将惩罚那些让用户(尤其是移动设备上的用户)难以访问内容的网站。

正确的方法:让等待的内容显示在弹出窗口中，直到它与用户上下文相关。

运用对等原则:无论你是要求填写电子邮件地址还是确认取消弹出窗口，在要求访客做任何事情之前，你都应该为他们提供有价值的东西。运行用户测试，以确定适合您打算在弹出窗口中显示的内容的上下文信息，并找出显示内容的最佳方式；在许多情况下，它不会出现在弹出窗口中。

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

在加载主页内容之前，《赫芬顿邮报》向用户展示了一个灯箱。这是一种可以接受的做法，因为当使用包括位置在内的个人数据时，网站在法律上有义务寻求许可。

错误:用户登录后会立即显示弹出窗口。

这就像页面内容加载前显示的弹出窗口一样烦人。当用户登录账号时，会想到下一个或者后续的任务，否则，为什么要登录？

立即出现任何类型的弹出窗口都会分散他们的注意力，阻止他们完成下一步。因为他们关注的是下一步，所以用户很可能不会注意到弹出的窗口或立即关闭它。不仅如此，他们还可能遭受中断、关闭或移除弹出窗口所需的额外时间和交互成本。

正确的做法:给用户一些时间和空的时间，让用户登录账号后完成任务，不要马上显示弹出窗口。

一段时间后，最终可以提供有用的账户提示、指南或新功能，这是可以接受的，但前提是呈现的内容或新功能能够增强或进一步支持用户的任务。即使在这些情况下，它也总是倾向于使用侵入性较小的方法(如工具提示)和小的非模式覆盖层来传达关于这些元素的信息。

Gmail使用了一个相对简单的非模态覆盖层来引入一个新功能，帮助用户清理收件箱。该弹出层在用户与收件箱交互后显示，不是在登录后立即显示，也不是以非模态方式显示。

错误3:在交互前请求电子邮件地址。

许多网站和应用程序使用弹出窗口来请求用户的电子邮件地址，用户甚至没有机会与内容进行交互。这种情况在电子商务、新闻网站和应用程序以及博客中最为常见。

这种方法也有缺点，因为用户不仅会因为过早被要求提供电子邮件地址而感到恼火，还会认为网站会发送垃圾邮件。

比如用户登录不凡品网站时，会出现一个窗口询问她的邮箱地址，会让用户感到非常不满意:“当我还没有在网站上做其他事情的时候，突然出现这样的事情，真的很困扰我。如果我是新来的，我如何知道我是否想成为电子邮件订阅者？我希望以后再决定。”

用户在打开网站后会立即显示一个模态弹出窗口，询问她的电子邮件地址，这将会惹恼稀有商品网站的用户。

当询问用户的电子邮件地址时，需要考虑许多权衡。而网站和应用往往采用过早显示的模式，因为这样产生的指标短期内会增加。然而，短期指标通常是以让许多用户不舒服为代价的，但这些用户并没有得到专属商品等激励。

正确的方法:不要过早地显示电子邮件弹出窗口，想想用户最愿意与你分享电子邮件地址的时间。

他们正在浏览带有促销代码的类别吗？或者他们刚刚阅读(或浏览)了整篇博文。这些动作可能是具有最低干扰和非模态的合适触发因素。它们可以出现在右上角或右下角附近，并使用合理的屏幕空。为用户提供一些有价值和具体的东西来交换他们的电子邮件地址，而不仅仅是期望他们把它给别人。

在人们浏览到博文底部后，MarkManson.net展示了最小干扰无模式浮动层。弹出窗口还提供免费电子书作为奖励。

错误4:在人们做任何有意义的事情之前，寻求反馈

获得用户反馈很重要，但是你不应该在人们对你的网站做任何事情之前给他们反馈。

而且网站和应用往往会立即向用户显示反馈弹出窗口，希望用户给予高度评价，继续完成任务。这种情况很少发生。通常，用户会快速关闭弹出窗口，并且永远不会再主动找到它。

在正确的时间从用户那里获得有意义的反馈，以深入了解他们面临的挑战和障碍。但是，如果你太早要求反馈，你可能在最重要的时候得不到任何反馈。

例如，当试图在ATT.com支付电话费时，研究参与者在打开账单时会被询问反馈，这让用户非常沮丧。她说:“嗯，我可能会在付完账单后给出反馈，但现在我很不开心，因为我还没有做任何需要反馈的事情。”

一名研究参与者在试图支付电话费时不情愿地关闭了一个反馈窗口。她说她没有做任何事情在网站上提供反馈。

正确方法:要求用户在完成网站上的主要任务后立即提供反馈。

这种方法最大限度地减少了干扰，并确保反馈将基于实际的互动。比如会后，视频会议软件蓝战士要求用户提供反馈。该请求不会过早显示，而是在上下文相关的适当时间显示。

在完成关键任务后立即询问用户的反馈，而不是在他们打开网站后立即询问他们的反馈。这样，你就增加了获得相关评论或评级的机会。在这种情况下，使用模式浮动层可以减少用户的麻烦和干扰。

错误5:在关键任务中干扰用户的反馈

用户讨厌被打扰，但是在关键任务完成期间弹出反馈窗口的例子很多。在大多数情况下，提供反馈不是用户访问的主要原因，所以在执行关键任务时不要使用弹出窗口打扰用户。

当是获取登机牌的关键任务时，联航APP会显示一个模态弹出窗口。

正确做法:除了不要求用户在关键任务完成前提供反馈外，还应该提供一种静态的、非侵入式的方式，让用户可以随时随地提供反馈。

屏幕侧面的标签、页脚的链接或者导航中的链接都是可替代的干扰模式，可接受的替代方案可以让用户在准备好的时候分享自己的观点。

雀巢没有用模态反馈来打扰用户，而是在网站页脚添加了反馈链接。

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

错误:连续显示多个弹出窗口。

以重叠的方式显示多个弹出窗口会使网站看起来不专业、绝望和混乱。这也让用户感到困惑，迫使他们花费精力关闭每一扇窗户。

如果您的网站使用了许多不同类型的弹出窗口，请首先进行测试，以避免同时向用户显示多个弹出窗口。

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

更好的是，不要在弹出窗口中显示关键信息，因为人们倾向于在没有阅读它们的情况下关闭它们。相反，使用视觉上不同的元素，并将它们直接放在最适合上下文的页面上。确保副本清楚地传达了用户需要做什么。

结账过程结束时，Lulus会同时弹出多个模态弹出窗口。更好的方法是一次只显示一个，或者将反馈表单嵌入确认页面。

Canva采用了一种很好的方式，直接在页面上显示关键信息。它不使用弹出窗口，而是在顶层使用视觉上完全不同的内容模块。这些信息可以帮助用户了解他们需要做什么来纠正问题。

二、弹出窗口的上下文，不要干扰跳转过渡或访问内容。

错误7:在用户跳转到辅助页面或外部站点之前显示模式覆盖。

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

在我们的一次可用性测试中，一名在汇丰网站上找工作的参与者遇到了两个不同的模态窗口，提醒他跳转，因为这个过程基本上被分配到了三个不同的网站。

他说:“哇，它一直带我去其他网站，我甚至不知道我在哪里。如果他们找工作的过程这么复杂分散，我真的觉得这不是一个好工作的地方。不管这个网站看起来有多美，看起来都是一团糟。”

点击“位置”后，一个模态窗口警告用户他们将离开当前站点。

在同一个网站上，用户看到另一个模态窗口，提示他们在第三个网站上申请工作。

正确做法:当用户链接到外部时，删除模态窗口，尽量减少站点之间的跳转，始终保持导航回主站点的功能。

如果你真的需要在离开网站时警告你的用户，请使用侵入性较小的选项(例如，链接上的工具提示)来使过渡更加巧妙。

礼来公司:为用户提供一个有用的工具提示，让他们知道跳转到其他网站。提示可以帮助用户记住他们在哪里，他们要去哪里。

错误:通过模式叠加中断对内容的访问

当人们加载一篇文章或其他长内容时(例如，通常在网站的“关于我们”或“新闻”部分)，会立即出现一个模态对话框，这似乎限制了对内容的访问。

这种情况特别烦人，因为会降低用户的信任度和信任感。在美国有线电视新闻网的应用程序上，用户打开他想阅读的文章后，会立即看到一个订阅新闻的模态窗口。他说:“这让我对CNN峰产生了怀疑。不要再问我要邮件，也不要让我注册任何东西。”

当用户阅读文章时，CNN的APP会显示一个模态窗口。这是非常糟糕的，因为注册CNN的新闻公告不是用户在这个页面的原因，用户是在这里阅读内容的。

正确的方法:允许用户不受干扰地立即使用内容。

将弹出窗口替换为页面顶部的短横幅，这样很容易关闭。这种替代方法将使用户在订阅新闻时能够自己操作，而不会干扰他们阅读内容的主要任务。

Conde 'Nast Traveller的网站在导航栏下用一个微妙的、非侵入性的、可关闭的横幅介绍其新闻传播。这种设计允许感兴趣的用户订阅时事通讯，但不会分散只想阅读网站内容的用户的注意力。

三.弹出窗口的内容:不要假设模态窗口可以传递信息。

错误9:在通知GDPR(欧盟一般数据保护条例)和cookie时使用模式窗口

用户匆忙关闭了窗口，因为他们认为自己不会得到任何好处。为了传达使用GDPR和Cookie的重要信息，请不要使用模态窗口。

正确的方法:选择将其放在页面底部或侧面的非模态浮动层中。

这种方式侵入性小得多，允许用户继续执行任务。确保提供足够的信息来解释如何收集和使用用户的个人数据。

Reddit使用一个小的、非侵入式的无模式浮动层，询问用户的Cookie同意；然而，描述如何使用用户数据的语言过于模糊。

NNgroup.com使用了非模态浮动层和关于Cookie使用的透明语言。我们已经准确地概述了为什么我们收集人们的数据，以及如何专门使用这些数据来造福他们。

错误10:鼓励用户在模态覆盖中跳转到平台，但看不到任何鼓舞人心的好处。

您经常可以看到许多模态弹出窗口，鼓励用户从移动网站切换到应用程序，尤其是在电子商务或新闻网站上。这些窗口在许多情况下都是破坏性的，并且存在问题:网络用户通常是一次性用户，他们不愿意为偶尔的任务下载应用程序。

可以理解，企业希望鼓励应用程序的下载，但模态叠加不是宣传应用程序的正确方式。即使是手机上有APP的用户，也可能因为担心整个过程会重启，模态弹出窗口只会打扰到他们，而不想跳转到平台。

正确的方法:为APP创造感知，但不要以代价侵入用户当前的任务。

使用低调的方法(比如标准的顶部横幅)，说明使用APP的好处，方便人们跳转到平台。

Way的鼓励下载APP的窗口中断了用户。用户认为他们将不得不采取许多步骤在另一个平台上重启他们的任务，而没有任何明确的好处。

下一篇：怎么关闭qq业务（手机qq怎么关掉svip标识）
上一篇：越狱后怎么下载软件（iOS8.4越狱后如何免费下应用）