关于弹出式窗口（如何制作一个电脑弹窗）的知识大家了解吗？以下就是小编整理的关于弹出式窗口（如何制作一个电脑弹窗）的介绍，希望可以给到大家一些参考，一起来了解下吧！
弹出窗口(如何让电脑弹出窗口)
(资料图片仅供参考)
本文列举了近年来网站和app中滥用弹窗的一些常见做法，并指出了更好的替代方案。希望对你有帮助。
摘要
无论是否采用模态窗口，大多数弹出窗口都出现在错误的时间，打断了用户在关键任务中的进程，使用了糟糕的文案，打乱了用户的使用路径。
经过几十年的用户研究，我们都知道人们不喜欢弹出窗口和模态窗口。在最近的可用性研究中，它再次提醒了我这一点。
一个参与者在尝试完成一个任务时，连续遇到了几个弹窗，然后沮丧地把手机一扔，带着对网站非常不好的印象停止了任务。其他几个用户也有类似的感受，虽然他们没有扔掉手机。
弹出窗口是出现在页面内容顶部的窗口或对话框。弹出窗口可以根据两个维度进行分类:
1)用户可以与页面的其他部分交互吗？
模态窗口:在用户与弹出层显式交互之前，页面上的其他内容被禁用；
无模式窗口:用户仍然可以与背景内容交互(例如，通过选择链接或单击按钮)，同时弹出层仍然可见。
2)背景暗吗？
如果背景是深色的，弹出的窗口叫lightbox；
没有视觉变暗的背景内容没有专门的名称。
尽管lightbox在许多情况下是模态的，但情况并非总是如此。
在弹出结构方面，模态浮动层禁用所有背景内容，非模态浮动层保留用户与背景内容交互的能力，lightbox使背景内容变暗。
在过去的几周里，我对我在网站和移动应用中遇到的每一个弹出窗口进行了截图:平均每周有25个弹出窗口，这超出了任何一个人的能力(但这也代表了当今的互联网用户体验)。
这个实验和我的可用性研究显示了许多糟糕的实现实践，并证明过度使用弹出窗口覆盖还远远没有结束。我们已经接近过度滥用这些元素的临界点，以至于问题已经远远超过了弹窗的价值。
在本文中，我将概述观察到的问题，并讨论要考虑的关键因素，以及可以保留组织意图和用户体验的现实替代方案。
一、弹出时间:不要在交互前或关键任务中弹出。
错误:在加载主页内容之前显示弹出窗口。
无论你使用哪种变体，在用户能够从你的网站或应用中获得价值之前，不要弹出来。这种趋势非常令人不安，因为用户的任务甚至在进入页面之前就被中断了。
人们习惯于在网站上看到过早的弹出窗口，通常会忽略它们，或者立即寻找最快的方法关闭弹出窗口以返回到他们的任务。
页面加载前出现的弹窗让网站看起来很绝望，让用户体验很疯狂。此外，没有意识到这一事实的网站可能会在搜索引擎结果中排名较低，因为谷歌会惩罚那些让用户(尤其是移动设备上的用户)难以访问内容的网站。
正确的做法:让等待的内容显示在弹出窗口中，直到与用户的上下文相关。
运用对等原则:无论是请求填写邮件地址，还是确认取消弹出窗口的操作，在要求访问者做任何事情之前，你都应该向他们提供一些有价值的东西。运行用户测试，以确定适合于您打算在弹出窗口中显示的内容的上下文信息，并找出显示该内容的更佳方式；在许多情况下，它不会出现在弹出窗口中。
在页面内容加载之前可以显示弹出窗口的唯一用例是当您的网站在法律上有义务要求用户同意接受使用cookie或验证他们的年龄时。(尽管我们希望欧盟和其他监管机构对GDPR和类似规则的解释不会那么令人讨厌。)
在加载主页内容之前，《赫芬顿邮报》向用户展示了一个灯箱。这是一种可以接受的做法，因为网站在使用包括位置在内的个人数据时，在法律上有义务征求同意。
错误:用户登录后立即显示弹出窗口。
这和页面内容加载前显示的弹窗一样烦人。用户在登录账号的时候，想到的是下一步或者下一个任务，否则为什么要登录？
立即呈现任何类型的弹出窗口都会分散他们的注意力，阻止他们完成下一步。因为他们关注的是下一步，所以很可能用户不会注意弹出窗口或者立即关闭它。不仅如此，他们还可能遭受中断、关闭或删除弹出窗口所需的额外时间和交互成本。
正确做法:给用户一些时间和空在登录账号后完成任务，不要马上显示弹窗。
一段时间后，最终可以提供有用的账户提示、指南或新功能，这是可以接受的，但前提是呈现的内容或新功能能够增强或进一步支持用户的任务。即使在这些情况下，也总是倾向于使用较少干扰的方法(比如工具提示)和小的非模态覆盖层来传达关于这些元素的信息。
Gmail使用相对简单的非模态叠加来引入一个新功能，帮助用户清理收件箱。这个弹出层是在用户与收件箱交互后显示的，而不是在登录后立即显示，它也是非模态的。
错误:在交互之前请求电子邮件地址。
许多网站和应用程序使用弹出窗口来请求用户的电子邮件地址，用户甚至没有机会与内容进行交互。这种情况在电子商务、新闻网站和应用、博客中最为常见。
这种方法也有缺点，因为用户不仅会因为过早地被要求提供电子邮件地址而感到恼火，还会认为该网站会发送垃圾邮件。
比如，当用户登录不常用商品的网站时，会出现一个窗口要求输入她的邮箱地址，这会让用户感到非常不满:“当我还没有在网站上做任何其他事情时，突然出现类似的东西，这真让我恼火。如果我是新来的，我如何知道我是否想成为电子邮件订户？希望以后再决定。”
用户在打开网站后立即显示一个模态弹出窗口，要求她的电子邮件地址，这将使不常见商品网站的用户感到烦恼。
当向用户询问电子邮件地址时，需要考虑很多权衡。而站点APP往往采用过早展示的模式，因为生成的指标会在短时间内增加。但是短期指标通常是以让很多用户不舒服为代价的，但是这些用户并没有受到专属产品的鼓励。
正确的做法:与其提前显示电子邮件弹出窗口，不如想想用户什么时候最愿意与你分享电子邮件地址。
他们在浏览带有促销代码的类别吗？或者，也许他们只是阅读(或浏览)了整篇博文。这些动作可能是具有最小干扰和非模态的合适触发。他们可以出现在右上角或者右下角附近，使用合理的屏幕空。为用户提供一些有价值和具体的东西来交换他们的电子邮件地址，而不是仅仅期望他们放弃它。
在人们浏览到博客帖子的底部后，MarkManson.net展示了最小的令人不安的非模态浮动层。弹出窗口还提供免费电子书作为奖励。
错误4:在人们做任何有意义的事情之前，寻求反馈。
从用户那里获得反馈很重要，但是你不应该在他们对你的网站做任何事情之前给他们反馈提示。
而网站和app往往会立即向用户展示反馈弹窗，希望他们能给予很高的评价，继续完成任务。这种情况很少发生。通常情况下，用户会很快关闭弹出窗口，并且永远不会主动再次找到它。
在适当的时候从用户那里获得有意义的反馈可以让你洞察他们的挑战和障碍。但是，如果你太早要求反馈，你可能在最重要的时候得不到任何反馈。
例如，当试图在ATT.com上支付 *** 费时，研究参与者在打开账单时会被要求反馈，这让用户非常沮丧。她说:“嗯，我可能会在买单后反馈，但现在我很不开心，因为我没有做任何需要反馈的事情。”
一名研究参与者在试图支付 *** 费时，不情愿地关闭了一个反馈窗口。她说她还没有在网站上提供反馈。
正确方法:在网站上完成之一个任务后，要求用户立即提供反馈。
这种方法更大限度地减少了干扰，并确保反馈是基于实际的交互。例如，会议结束后，视频会议软件蓝战士要求用户提供反馈。请求不会过早显示，而是在上下文相关的适当时间显示。
在完成关键任务后立即询问用户的反馈，而不是在他们打开网站后立即询问他们的反馈。这样，你就增加了获得相关评论或评分的机会。在这种情况下，使用模式浮动层可以减少用户的烦恼和干扰。
错误5:在关键任务期间打扰用户寻求反馈
用户讨厌被打扰，但是在关键任务期间有很多弹出反馈窗口的例子。在大多数情况下，提供反馈并不是用户访问的首要原因，所以在执行关键任务时，不要使用弹出窗口来打扰用户。
美联航的APP在获取登机牌时显示模态弹窗，这是关键任务。
正确的做法:除了不要求用户在关键任务完成前提供反馈，还应该提供一种静态的、非侵入式的方式，让用户可以随时随地提供反馈。
屏幕边上的标签，页脚的链接或者导航中的链接都是替代的干扰模式，可接受的替代方式允许用户在准备好的时候分享自己的观点。
雀巢没有用模态反馈打扰用户，而是在其网站的页脚添加了一个反馈链接。
英航空在所有页面的右侧都显示一个标有“反馈”的按钮。
6:连续显示多个弹出窗口。
多个弹窗重叠会让网站看起来不专业，绝望，混乱。这也让用户感到不知所措，迫使他们花费精力关闭每个窗口。
如果您的网站使用许多不同类型的弹出窗口，请首先测试它们，以避免同时向用户显示多个弹出窗口。
正确的做法:如果您必须在弹出窗口中显示关键信息(例如，防止或纠正错误的重要警告)，请确保一次只显示一个。
更好的是，不要在弹出窗口中显示关键信息，因为人们倾向于不读就关闭它们。相反，使用视觉上不同的元素，并将它们直接放在最适合上下文的页面上。确保文本清楚地传达了用户需要做什么。
在结帐过程的最后，Lulus同时弹出多个模态弹出窗口。更好的方法是一次只显示一个，或者将反馈表嵌入确认页面。
Canva采用了一种很好的方式，将关键信息直接显示在页面上。它没有使用弹出窗口，而是在顶层使用了视觉上完全不同的内容模块。这些信息可以帮助用户了解他们需要做些什么来纠正问题。
第二，弹出窗口的上下文，不要妨碍跳转过渡或访问内容。
错误:在用户跳转到二级页面或外部网站之前显示模式重叠。
一些公司网站，链接到二级页面和外部网站上的内容或应用程序。在用户离开主站点之前，会出现一个模态弹出窗口来提醒用户即将到来的跳转。这种类型的弹出窗口是有问题的，因为它过分强调跳转过渡，让用户感到困惑和混乱，尤其是当二级页面只在新的浏览器标签中打开时。
在我们的一个可用性测试中，一个在汇丰银行的网站上找工作的参与者遇到了两个不同的模态窗口来提醒他跳转，因为这个过程基本上被分配到了三个不同的网站。
“哇，它一直把我带到其他网站，我甚至不知道我在哪里，”他说。如果他们的求职过程如此复杂和分散，我真的不认为这是一个工作的好地方。这个网站再好看，看起来也是一塌糊涂。"
点击“位置”后，一个模态窗口警告用户他们将离开当前站点。
在同一个网站上，用户看到了另一个模态窗口，提示他们在第三个网站申请该工作。
正确做法:链接用户到外部时，删除模态窗口，尽量减少站点间跳转，始终保留导航回主站点的功能。
如果你真的需要在离开网站时警告你的用户，使用较少干扰的选项(例如，链接上的工具提示)使过渡更加微妙。
礼来公司:为用户提供有用的工具提示，让他们知道他们想跳转到其他网站。工具提示可以帮助用户记住他们在哪里，他们要去哪里。
错误8:通过模态叠加中断对内容的访问。
当人们加载文章或其他长内容时(例如，通常在网站的“关于我们”或“新闻”部分)，模态对话框会立即出现，看起来好像它们在限制对内容的访问。
这种情况特别讨厌，因为会降低用户的信任度和信赖度。在CNN的应用程序上，用户打开想要阅读的文章后，会立即看到一个订阅新闻的模式窗口。他说:“这让我对CNN的怀疑达到顶峰。不要再问我要邮箱，也不要问我注册什么。”
当用户阅读一篇文章时，CNN的应用程序会显示一个模态窗口。这是非常不好的，因为这不是用户注册CNN的时事通讯的理由，而是用户是来看内容的。
正确的做法:允许用户不受干扰地立即使用内容。
在页面顶部用一个短的易于关闭的横幅代替弹出窗口。这种替代方法将使用户能够自己订阅新闻，而不会干扰他们阅读内容的主要任务。
Conde"Nast Traveller的网站在导航栏下用一个微妙的、非侵入性的、可关闭的横幅介绍其时事通讯。这种设计允许感兴趣的用户订阅时事通讯，但不会分散那些只想阅读网站内容的用户的注意力。
三。弹出窗口的内容:不要假设模态窗口可以传递信息。
错误9:在GDPR(欧盟通用数据保护条例)和cookie的通知中使用模式窗口
用户因为不认为自己会得到什么好处，已经匆匆关闭了窗口。为了传达使用GDPR和Cookie的重要信息，请不要使用模态窗口。
正确的做法:选择放在页面底部或者侧面的无模式浮动层。
这大大减少了干扰，并允许用户继续执行任务。确保提供足够的信息来解释如何收集和使用用户的个人数据。
Reddit使用一个小的、无干扰的非模态浮动层来请求用户同意Cookie然而，描述用户数据用途的语言过于模糊。
NNgroup.com使用了一个非模态的浮动层和一个关于Cookie用法的透明语言。我们概述了我们收集人们的数据的确切原因，以及如何具体使用这些数据来使他们受益。
错误10:鼓励用户跳到模态覆盖的平台上，但是他们看不到任何令人鼓舞的好处。
经常可以看到很多鼓励用户从手机网站切换到app的模态弹窗，尤其是在电商或者新闻网站上。这些窗口在许多情况下都是破坏性的和有问题的: *** 用户通常是一次性用户，他们不愿意为偶尔的任务下载应用程序。
可以理解，公司希望鼓励应用程序的下载，但模态叠加不是推广应用程序的正确方式。即使手机上安装了该应用程序的用户也可能不愿意跳到该平台，因为他们害怕重新启动整个过程，模态弹出窗口只会打扰他们。
正确的做法:为应用创造认知，但不要侵犯用户当前的任务。
使用低调的方法(例如，标准的顶部横幅)，并解释使用APP的好处，以方便人们跳到平台上。
Wayfair鼓励下载应用程序的窗口打断了用户。我认为用户将不得不采取许多步骤在另一个平台上重新开始他们的任务，而没有任何明确的好处。
