被误用的10种弹窗及替代方案
翻译：代代子 审校：Tracy & 宝珠 | UXRen翻译组 #341译文
作者： Anna Kaley
摘要：无论是模态弹窗还是非模态弹窗，它们大多出现在错误的时机，打断了用户的关键任务，使用了不恰当的语言，最终让用户迷失方向。
几十年的用户研究成果告诉我们，人们讨厌弹窗，尤其是模态弹窗（模态弹窗会打断用户的操作行为，强制用户必须进行操作，否则不可以进行其他操作）。我在最近的一项可用性研究中再次被这个事实警醒。有1个用户在尝试完成任务时，连续遇到了多个弹窗，结果怒摔手机，扬长而去。他感到非常沮丧，放弃了正在进行的任务，留下了对该企业极差的印象。而其他几位参与测试的用户也有着差不多的感受，只是没有怒摔手机而已。
弹窗，是出现在页面内容层之上的窗口或对话框，可按照以下两种维度来进行分类：
- 用户是否能与页面上的其他内容进行交互：
1）模态弹窗：用户在没有处理完弹窗内容之前，不能与页面上的其他内容进行交互；
2）非模态弹窗：用户在处理弹窗内容的同时，也可以与页面上的其他内容进行交互。 - 弹窗后的背景是否变暗：
1）如果背景变暗，那么这种弹窗被称为”亮弹窗（lightbox）”；
2）如果背景没有变暗，这种弹窗没有特定的叫法。
尽管在许多情况下亮弹窗都是模态的，但这也不一定。
总结一下，模态弹窗的出现使得页面上的其他内容不可用，非模态弹窗保留了用户与页面上其它内容交互的可能，而亮弹窗则使页面上其他它内容变暗。
几周以来，我截屏记录了我在网页上和移动端看到的所有弹窗，我平均每周会看到25个弹窗，这远远超过了一个人类应该遭受的数量（但这在今天的互联网用户体验中是非常常见的）。结合此次实验和之前做的可用性研究，我发现了许多错误的弹窗用法，而且，弹窗的过度使用随处可见。我们可能已经到了过度滥用网页元素的时代，以至于错误使用弹窗的例子远多于那些正确使用的。本文将概述我观察到的问题，讨论那些要考虑的关键因素，并提出现实的替代方案，同时保障界面想传达的意图和用户体验。
弹窗时机：不要在用户与界面交互之前出现，也不要在关键任务过程中出现
1. 不要在主页面还没加载完成时就出现弹窗
尽管有很多软件都在这样做，但一定不要在用户在对你的网站或应用的有初步价值认知前出现弹窗。这非常打扰用户，因为他们甚至还没触达页面前任务就被打断了。人们已经对这些过早出现的弹窗免疫了，他们通常会忽略这些弹窗，或者用最快的方式关掉它，然后继续完成他们的任务。在页面加载之前出现的弹窗让网页显得很糟糕，也非常有损用户体验。此外，这样做的网站，可能会面临在搜索引擎中排名靠后（SEO）的风险，因为“被谷歌惩罚的网站（Google penalizes sites）”认为其内容难以触达用户，特别是在移动端。
替代方案：当你在弹窗中想表达的内容真正和用户所处的场景有关时，再呈现这个弹窗。使用“互惠原则（reciprocity principle）”：当你在对用户提出要求之前，请先给予。这个“要求”可能是索要他们的邮箱地址、甚至是集中注意处理弹窗上的内容。你可以通过用户测试来确认放在弹窗里的内容，以及它们的呈现方式。许多时候，这些内容也许根本不用弹窗来展示。唯一一种可以在网页加载完成之前出现弹窗的情况是：询问用户是否接受网站使用cookie记录访问信息，或者确认用户的年龄是否被允许使用这个网站。（但我们还是希望欧盟和其他监管机构能让通用隐私保护条例（GDPR）更精简一些）
图1：赫芬顿邮报（The Huffington Post）网页加载完成之前呈现了一个弹窗。这种情况是允许的，因为网站需要用户同意使用他们的个人数据，包括位置信息，否则网站将会承担法律责任。
2. 不要在用户刚刚登录完之后就呈现弹窗
在用户刚刚登录完之后就呈现弹窗，其恼人程度和「网页内容还没加载完就呈现弹窗」不相上下。当用户登录后，他们脑海中已经有了接下来要做的事情，不然他们为什么要登录？这时候不论出现什么类型的弹窗，都会打断和阻碍他们去做接下来的事。因为他们本来正在聚焦于进行下一步，很大概率不会把注意力分配在突然出现的弹窗内容上了。不仅如此，用户可能还会感到非常沮丧，因为他们的任务被打断了，而且还需要花费额外时间来处理弹窗内容或者关掉它。
替代方案：当用户登录之后，给他们一些时间来完成自己的事情，不要猴急着跳出弹窗。帮助性的小tips、引导或新功能介绍，都可以过一段时间后再循序渐进地呈现，不过这也有个条件，那就是弹窗里的内容对用户正在进行的这个任务是有帮助的。在这些情况下，最好以打扰程度更小的方式去呈现信息，比如鼠标提示（tooltips），或者小的、非模态的浮层。
图2：在介绍对用户当前任务有帮助的功能时，Gmail采用了相对不那么引人注目的非模态弹窗。当用户与界面发生交互之后再呈现非模态弹窗，而不是用户登录之后就里面呈现。
3. 不要在用户与页面发生交互之前就索要邮箱地址
许多网站和手机APP，在用户都还没跟页面内容有任何交互之前，就跳出弹窗来索要用户的邮箱地址。电商网站、新闻网站、APP和博客，都常会发生这种情况。这样做很有问题，因为这不仅会让用户感到厌烦，而且，这个弹窗出现的时机暴露了网站过于猴急索要邮箱的功利心，而用户甚至都还不知道这个网站会不会给他们发垃圾邮件。
例如，一位用户刚登录进入零售网站Uncommon Goods，“迎接”她的竟然是一个弹窗，这个弹窗告诉她，填写邮箱地址可以获得“惊喜折扣”，这让她非常不满。她说：“我还没在这个网站上做啥呢，就弹出了一个弹窗，真的太烦人了。我都还没进去网站，我咋知道我想不想订阅这些邮件呢？晚点再来问我呀。”
图3：零售网站Uncommon Goods在用户刚刚登录后就弹出了一个模态弹窗，这种做法惹恼了用户。
如果你想获取用户的邮箱，其实有很多更温和的方法。网站和APP常常猴急地使用弹窗，因为这会使他们的数据指标在短期内上升。然而，短期数据提升产生的代价是，你将会惹恼那些对“惊喜折扣”这类激励不感兴趣的用户。
替代方案：不要过早跳出索要邮箱的弹窗，想一想用户在什么时候会想要与你分享他们的邮箱。或许是他们在浏览的商品中有促销提示？或者是他们已经读完了一整篇博文。在这些情况下可以呈现一个非模态弹窗，在网页的右上角或右下角，弹窗的大小也要适当。为用户提供有价值的帮助，以此来交换他们的邮箱，不要什么都不做就让他们交出自己的信息。
图4：博客网站markmanson.net是这样做的：当用户浏览到一篇博文的最底部时，呈现了一个很小的非模态弹窗，邀请用户填写自己的邮箱地址。与此同时，他们送给用户一本免费的电子书作为礼物。
4. 不要在用户还没完成有意义的事情之前就要求他们给出反馈
获取用户反馈的确非常重要，但是也不能在他们还没做什么事情之前就急着索要反馈。网站和APP总是希望用户能给自己打一个高分，急着让用户评分，甚至不惜打断他们正在做的事情。而这么做的后果通常是，用户会立即关掉这个弹窗，并且再也不会想要主动去打分。
图5：当一个用户正在支付她的手机订单时，出现了一个索要反馈的弹窗，然后她立即关掉了弹窗。她表示她还没在这个网站上做什么，所以也无从反馈。
替代方案：当用户在你的网站上完成一件重要的事情之后再让他们反馈。这会将对用户的打扰降到最低限度，并且确保用户给出的反馈是基于某一项真实的行为的。例如，视频会议软件BlueJeans会在一次会议结束后请用户进行评价。这个评分就没有过早地暴露给用户，而是出现在一个基于具体场景的、恰当的时间。
图6：在用户完成关键任务之后再要求他们进行反馈，而不是他们刚刚到达你的网站时。这样的话，将会收到更多有价值的评论或评分。模态弹窗用在恰当的时候，也能减少对用户的打扰。
5. 不要在用户进行关键任务的中途向他们索要反馈
是个人都讨厌被打断。所以在用户完成一个很关键的事情的时候打断人家，这是非常不可取的。在绝大部分情况下，“来给网站送反馈”一定不是用户访问网站的主要意图，所以，不要在用户进行关键任务的时候打断他们。
图7：联合航空的APP在用户进行关键任务——领取登机牌的中途，弹出了要求用户评分的弹窗。
替代方案：首先是必须在用户完成了他的关键任务之后再出现弹窗，另外，尽量用一种安静的、不会造成干扰的方式，让用户能在任何时间可以反馈。比如在页面侧边栏的一个选项、在底部的一个链接，或者在导航上的一个链接……这些都是粗暴弹窗的良好替代品，这也能给用户掌控感——他们可以在有想法的时候随时反馈。
图8：雀巢的网站就没有用模态弹窗来打扰用户，他们将反馈的入口放在了页面的底部。
图9：英国航空将反馈的入口放在网站右侧。
6. 不要在一个弹窗之后接连出现另一个弹窗
在一个弹窗出现后，紧接着又跳出另一个弹窗，这会让你的网站看起来很不专业、很糟糕、很混乱。这也会让用户倍感压力，并需要花费精力去处理两个弹窗上的内容。如果你的网站上使用了多种类型的弹窗，一定要确保这些弹窗不会在同一时间出现。
替代方案：如果你必须使用弹窗来展示关键信息（比如重要的警告，或者错误提示），你需要确保一次只出现一个弹窗。当然，最好连一个弹窗都不要出现，因为人们会倾向于忽略弹窗上的内容而直接关掉它。相反，你可以使用一个视觉上很容易识别的元素，并将它放在页面上的合适位置，能与页面上的其他内容更好的结合。确保你的提示能够清晰地指导用户去修正他们的错误并继续完成任务。
图10：在线购物网站Lulus在用户完成确认的最后一个步骤之后，接连出现了两个弹窗。这里最好只出现一个弹窗，或者将用户反馈的那个弹窗嵌入到确认网页的内容中。
图11：在线设计网站Canva在呈现关键信息时就做得很好。他们没有使用弹窗，而是用了一种很容易识别的视觉表达形式，将重要信息放在了顶部。这个信息帮助用户理解他们该如何操作，
弹窗场景：不要妨碍用户跳转到别的网页或了解重要内容
7. 不要在用户正准备跳转到另一个页面的时候呈现模态弹窗
某些公司的网站会有链接能跳转到子站点或是外部网站。在用户离开当前页面前，通常会跳出一个弹窗，警告用户他即将离开当前页面。这种类型的弹窗是有问题的，因为它太过于强调转场了，这会让用户感到迷失和困惑——尤其是这些链接通过新标签页的方式打开的时候。
在我们做过的一个可用性测试中，一位用户正在汇丰银行的网站上找工作，他完成这个任务需要经过2次跳转进入3个不同的网页，而每次跳转都出现了一个模态弹窗。他说：“我晕，怎么一直让我去其他网站，我都不知道现在自己在哪里了。如果这个公司的申请工作流程都这么复杂和混乱，说实话我觉得在这里工作应该也不怎么样。不管这个网站表面上看起来有多好，但这个流程真的是一团糟。”
图12：点击“招聘”后，跳出一个模态弹窗，警告用户他们将会离开当前网站。
图13：还是同一个网站，跳出一个弹窗提示用户他们需要进入第三方网站进行申请应聘。
替代方案：拿掉这些弹窗吧，尽量弱化不同站点之间的跳转，而且一定要保留“返回主站点”的链接。如果你一定要警告用户即将离开你的网站，可以使用不那么强烈的方式，比如在链接上放气泡提示。
图14：礼来制药厂的网站上，当用户需要跳转到另一个其他网站时，他们会在链接上方呈现一个气泡提示。这个提示能帮助用户知道他们现在在哪里，以及将会去到哪里。
8. 不要在用户刚要看到内容时就出现模态弹窗
当人们刚刚看到加载完的文章，或者其他长篇内容时（比如网站上的「关于我们」和「最新动态」），立马跳出一个模态弹窗，这会让人误以为处理这个弹窗是阅读这篇文章的条件。在这时候呈现弹窗恨不好，因为这会降低用户对网站的信任度。有一位用户就被CNN的APP惹火了，当他想看的一篇新闻刚刚加载好正准备开始阅读时，一个可恶的弹窗不合时宜地出现了。他说：“这让我对CNN嫌弃到了极点。请不要在这个时候马上来问我的邮箱或者要我登录。”
图15：CNN的手机APP会在刚刚加载完一篇新闻的时候马上出现模态弹窗。这很有问题，因为登录并不是用户目的，阅读新闻内容才是。
替代方案：让用户专心读完当前的内容，不要打扰他们。可以将弹窗换成页面顶部的横幅。这会让用户更加自如，如果他们想订阅这个新闻可以随时进行操作，而他们的主要任务——阅读信息并不会被打扰到。
图16：康泰纳仕旅游（CN Traveller）网站将它的新闻推送用“非打扰式的轻量横幅”放在了导航的下面。这种设计让那些感兴趣的用户能订阅新闻，同时也不会打扰到那些只想在网站上看新闻而不想订阅的人。
弹窗内容：不要指望模态弹窗能传递重要信息
9. 不要用模态弹窗来展示隐私保护条例（GDPR）和cookie提示
用户常常会匆忙地关掉模态弹窗，因为他们觉得弹窗上从没什么好信息。如果要给用户传递隐私保护条例（GDPR）和cookie相关的内容，请不要使用模态弹窗。
替代方案：可以使用非模态的弹窗，放在网页的顶部或者边栏。这对用户的打扰程度会非常低，并且能让用户继续进行他们的主要任务。但要注意确保提供足够的信息，让用户知道他们的个人数据将会如何被收集和使用。
图17：社交新闻站点Reddit使用了一个很小的、不会对用户造成打扰的非模态浮层，来向用户请求cookie许可；不过，描述用户数据如何被使用的文案有点含糊不清。
图18：尼尔森-诺曼集团的网站（NNgroup.com）将cookie的相关内容，以清晰的语言描述呈现在非模态的浮层上。他们明确地解释了为什么需要收集用户的数据，以及这会给他们带来什么好处。
10. 没有说明任何理由就让正在浏览网页的用户下载网站APP
这种情况很常见，一些模态弹窗会引导用户从移动端网页跳转到APP——尤其是那些电商网站和新闻网站。这些弹窗在很多情况下都是有问题的：往往浏览移动端网页的用户都不是常客，他们不愿意为偶尔的任务下载APP。
公司想要获得更多的APP下载量，这是可以理解的，但是模态弹窗并不是好的推广方式。而那些已经下载过APP的用户也不愿意切换到APP，因为他们担心会在APP里从头加载一遍。模态弹窗只会给他们带来烦恼。
替代方案：请不要以打扰用户当前任务为代价，来推广APP的品牌认知。可以使用顶部的横幅来描述使用APP简化转场的好处。
图19：家居销售网站Wayfair使用了一个模态弹窗来鼓励用户下载他们的APP。用户会担心如果下载APP，其在网站上做的一系列操作就需要重做一遍，而且他们看不到使用APP比使用网页好在哪里。
图20：梅西百货（Macys）在鼓励用户下载他们的APP时就做得很好。他们使用了一个非模态的横幅放在页面底部，并且说明了使用APP的好处，还展示了用户对APP的评分。
总结
虽然说“弹窗，弹窗，它永远不会消失”。但是弹窗的确不能带来好的用户体验，所以还是让它消失吧。
最后的最后，你可能会想问，到底什么情况下才能用弹窗呢？答案是：尽量别用。忍住随大流的欲望，不要为了达到短期利益而让弹窗淹没你的用户。努力探索替代弹窗的其它方式，既能尊重用户的需求，又能达到公司的目的，例如收集用户反馈、征得用户的数据授权、获取用户的邮箱地址，或者鼓励用户下载APP。
在时机恰当、需要传达关键信息的时候再考虑使用弹窗。不要在用户进行关键任务出现弹窗，也不要让弹窗挡住相关的信息。可以做一次可用性测试来确保你的弹窗不会让用户厌烦，测试完成后你还会对整个产品的用户体验有更深入的洞察。
原文来源：https://www.nngroup.com/articles/popups/ (2019.06.30)
版权声明：该文章在UXRen公众号（cnUXRen）首发后方可转载，转载时请注明出处及译者、审校者信息，如有违背，UXRen社区保留侵权追责的权力。
细致，知识库+1