From conducting decades of user research, we know that peopledislike popups情态动词。I was reminded of this fact during a recent usability study. While attempting to complete a task, a participant tossed his phone across the table after encountering multiple popups, consecutively. Frustrated, he abandoned his task and left the website with a very bad impression of the organization. Several other users shared a similar sentiment, albeit they did not throw their phones.

Apopup(也称为一个overlay或者popover) is a window or对话出现在页面内容之上。弹出窗口可以根据两个维度分类:

1. Whether the user can interact with the rest of the page:

  • 情态动词:the content on the page is disabled until the user explicitly interacts with the overlay.
  • Nonmodal:用户仍然可以与背景内容交互(例如,通过选择链接或点击按钮),而覆盖仍然可见。

2. Whether the background is dimmed:

  • If the background is dimmed, the popup is called a灯箱。
  • 当后台内容未视觉调整时,没有特殊名称。

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

The Anatomy of Popups by Anna Kaley
在弹出解剖结构方面,模态叠加禁止所有背景内容,非透镜覆盖值保护用户与背景内容交互的能力,并且灯泡暗淡背景内容。

Over several weeks, I captured screenshots of every popup I encountered on websites and in mobile applications:平均而言,25个弹出窗口per week, which is more than any human being should have to endure (but is pretty representative of today’s internet user experience). This experiment, together with my usability study, surfaced a myriad of bad implementation practices and was proof thatthe过度使用覆盖远非结束。We’re nearing the point where websites have abused these elements so much that the problematic instances far outweigh the cases where popups remain a useful design tactic. In this article, I’ll outline the issues I observed and discuss key factors to consider, along with realistic alternatives topopups保持本组织的意图和用户的经验。

Popup Timing: Don’t Prompt Before Interaction or During Critical Tasks

1. Showing a popup before the main page content loads:Regardless of the variation used, never show a popup before users can glean value from your website or application. This trend is highly intrusive because在他们甚至在页面上登陆之前,用户的任务会中断。人们已经习惯于在网站上看到过早的弹出窗口,通常会忽略它们或立即寻找最快的方法关闭弹出窗口以返回到他们的任务。在页面加载之前出现的弹出窗口让网站看起来绝望,用户体验感到疯狂。此外,网站谁没有认识到这些事实搜索引擎结果排名低的风险as谷歌处罚网站这种做法会降低用户对内容的访问能力,尤其是在移动设备上。

做什么:Wait to present the content in the popup until it’s contextually relevant to the user. Use the互惠原则:在向您提出任何内容之前给您的访问者提供价值 - 无论是请求电子邮件地址,否则甚至解雇弹出窗口的操作。运行用户测试以标识适合您计划在弹出窗口中显示的内容的内容,并找出显示该内容的最佳方式;在许多情况下,它不会在弹出窗口中。在页面内容加载之前才能显示任何类型弹出窗口的唯一用例是您的网站legally obligated to request consent from users to accept the use of cookies or verify their age.(虽然我们希望欧盟和其他监管机构将拥抱对GDPR和类似规则不那么令人讨厌的解释。)

英国哈夫波特府绸店
HuffPost presented users with a lightbox before the main page content loaded. This is an acceptable use of an otherwise problematic practice, as the website is legally obliged to ask for consent when using personal data, including location.

2.在用户登录后立即显示弹出窗口:A popup displayed right after the user logs in is just as bothersome as one shown before the page content loads. When userslog in to an account,他们有一个下一步或后续任务 - 或者他们为什么已登录?!立即呈现任何类型的弹出窗口会分散注意力,并阻止它们完成下一步。因为他们专注于下一步,所以用户可能会不会关注弹出窗口或突然关闭它。不仅如此,他们可能会因中断和额外的时间而感到沮丧interaction cost需要关闭弹出弹出或将其移出。

做什么:Give users some time and space to complete their tasks after logging into their account and don’t show popups right away. It’s acceptable to eventually present helpful account tips, guidance, or new features after some time has gone by, but only if the user’s task is enhanced or further supported by the content presented or by the new functionality. In these cases, always favor less intrusive methods such as工具提示并且小的非透镜覆盖这些元素。

Gmail Unobtrusive Nonmodal
Gmail使用了一个相对不显眼的非模态覆盖来引入一个新功能,支持用户当前清理收件箱的任务。非模态覆盖出现在用户与收件箱交互之后,而不是登录之后。

3. Asking for an email address before interaction:Many sites and applications use popups to ask for the users’ email address before they have even had a chance to interact with the content. Ecommerce, news websites and applications, as well as blogs were the biggest offenders in this category. This approach is problematic because not only will people be annoyed by the popup, its timing, and the fact that the site is asking for email addresses too soon, but they will also assume that the site will spam them with unwanted junk mail.

例如,当她被蒙面覆盖的迎接询问她的电子邮件地址以获得秘密销售时,将罕见的商品网站降落在罕见货物的网站上的一个用户变得不安。她说:“当我在网站上做任何其他事情之前,它真的让我烦恼了我。如果我到达这里,我如何知道我是否想成为电子邮件订阅者?我更愿意稍后再来。“

Uncommon Goods modal overlay
一位用户对“不寻常商品”网站感到恼火,因为在她到达该网站后不久,该网站显示了一个模式覆盖图,询问她的电子邮件地址。

在询问用户的电子邮件地址时,需要考虑许多权衡。站点和应用程序经常使用过早的modal,因为它们产生的度量值短期内会上升。然而,短期指标的代价往往是挫败许多用户,而这些用户并不是出于任意的动机,比如秘密销售。

做什么:尽早显示电子邮件弹出窗口,而是想到用户最舒适地与您分享他们的电子邮件地址。他们是否浏览具有适用促销代码的类别?或许他们只是读(或scanned)整个博客文章。这些动作可能是适当的触发器,用于最小侵入性的非透镜覆盖物,这可能看起来靠近右上角或右下角use a sensible amount of screen space。为用户提供一些东西valuable andtangible交换他们的电子邮件地址;不要指望他们把它交出来。

马克·曼森叠加
MarkManson.net在人们到达博客文章的底部后显示了一个微小的侵入性非叠加层。弹出窗口还提供免费电子书作为激励。

4在人们做任何有意义的事情之前征求反馈:Receiving feedback from your users is important, but you shouldn’t flood people with反馈提示在他们在网站上做任何事情之前。网站和应用程序倾向于立即向用户呈现反馈弹出窗口,希望他们能够提供高评级并及其任务继续前进。很少发生这种情况;更常见的是,用户迅速关闭弹出窗口,没有意图再次寻求。

Getting meaningful feedback from your users at appropriate points in the experience provides insight into theirchallenges and roadblocksBut if you ask for feedback too soon, you risk not getting any when it matters most.For example, while trying to pay a phone bill on ATT.com, a study participant became frustrated by a feedback modal that had appeared right as she landed on her bill. She said, “Well, I would have given feedback after I paid my bill, but now I’m frustrated that this is here and I haven’t even done anything yet to give feedback on.”

ATT Feedback Prompt
一名研究参与者在支付电话费时,勉强关闭了一个反馈模式。她说她还没有在网站上做任何事情来保证给予反馈。

做什么:要求用户在他们完成你网站的首要任务后立即提供反馈。该方法最小化中断,并确保反馈将基于实际交互。例如,视频会议软件Bluejeans在会议结束后向用户询问了反馈。此请求未过早显示,但在上下文相关和适当的时间内。

BlueJeans Feedback Prompt
在用户完成关键任务后立即征求他们的反馈,而不是在他们到达您的网站后立即征求他们的反馈。这样,您就增加了获得相关评论或评级的机会。在这种情况下,使用模式覆盖对用户来说不那么烦人和干扰。

5在关键任务期间打断用户要求反馈:用户讨厌被打断,然而在完成关键任务的过程中,网站和应用程序会弹出反馈窗口来打扰用户,这样的例子非常多。大多数情况下,提供反馈并不是用户访问的首要原因,所以在关键任务中也不要用弹出窗口打扰用户。

United Feedback Prompt During Boarding Pass Download
The United app displayed a modal overlay right in the middle of a critical task: retrieving a boarding pass.

做什么:In addition to asking users to provide feedback在ly after critical tasks are completed,提供静态,非功能性的手段,通过它们提供反馈,随时他们想要。屏幕侧面的选项卡,页脚中的链接或导航中的链接是所有可接受的替代颠覆模块的替代方案,并将用户控制在准备就绪时分享他们的意见。

嵌入页脚的反馈链接。
Nestle didn’t interrupt users with a feedback modal, but included a feedback link in the site’s footer.
页面右侧的英国航空公司反馈链接
英国航空公司展示了一个标有按钮回馈在所有页面的右侧。

6依次显示多个弹出窗口:Displaying multiple popups on top of each other makes your site look unprofessional, desperate, and disorganized. It also overwhelms users and forces them to spend effort to close each one. If your site uses many different types of popups,test the implementationto avoid presenting users with multiple popups at a time.

做什么:If you must present critical information (e.g.,important warnings要防止或纠正错误)在弹出窗口中,请务必一次仅显示一个。甚至更好,不要在弹出窗口中显示关键信息,因为人们倾向于在没有阅读的情况下关闭它们。相反,使用视觉上不同的元素并将其直接放在页面上,其中消息最佳上下文。确保副本清楚地通信用户需要做些什么来纠正问题并前进。

地方性显示多个弹出窗口的顶部。
在结帐流程的最后,Lulus同时给出了多个反馈模态。一个更好的方法是一次只显示一个,或者将反馈表单嵌入确认页面。
Canva displayed critical information right on the page.
Canva did a nice job of displaying critical information directly on the page. Instead of a popup, it used a visually distinct content module placed at the top. The messaging helped users understand what they needed to do to correct the issue.

Popup Context: Don’t Impede Transitions or Access to Content

7.在用户移动到新子域或外部站点之前,显示模态叠加:Some corporate websites link to content or applications that live on subdomains and external sites. Before users navigate away from the main site, a modal overlay appears to alert users of the impending transition. This type of popup is problematic because it overemphasizes the transition, making users feel lost and confused — especially if the subsites open in a new browser tab.

在我们的可用性测试会议之一期间,在尝试跨三个单独的网站上基本分段的任务时,在汇丰网站上寻找工作的参与者遇到了两个不同的过渡模块。他说,“哇,它让我带到其他网站,我甚至不知道我在哪里。如果他们的工作申请流程是这种复杂的并且脱节,我诚实不认为这将是一个很好的工作地点。无论这个网站多么好看,它似乎是一团糟。“

HSBC弹出警报将用户通知到另一个站点。
在点击职业后,莫代尔警告用户即将离开初始网站。
HSBC shows yet another popup warning users about going to a new site.
On the same website, users were shown yet another modal stating that they were going to a third website to apply for the job.

做什么:移除情态动词,最小化站点之间的转换,并且始终保留返回主站点的导航when linking users to external properties. If your users do need to be warned when leaving your site,use a less-intrusive option such as a tooltip on the link, to make the transition subtler.

Eli Lilly Tooltip.
Eli Lilly:用户介绍了一个信息性的工具提示,让他们知道他们要去一个不同的网站。该工具提示帮助用户记住他们在哪里以及他们要去的地方。

8. Interrupting access to content through modal overlays:在人们加载文章或其他长形内容之后立即出现的模态对话框(例如通常在About Us或者News网站的部分)使网站看起来像是在限制对该内容的访问。这种情况下是一个特别不好的地方令人讨厌,因为它削弱了信誉和信任。CNN移动应用程序上的一个用户在看到一篇他想看的文章后,遇到了一个时事通讯模式,他感到很沮丧。他说,“这使我对CNN的怀疑达到顶峰。不要马上向我索要电子邮件或注册任何东西。”

CNN Mobile App中断使用弹出窗口的用户。
CNN’s mobile app displayed a modal right as the user landed on a page to read an article. This was problematic because signing up for CNN’s newsletter was not why the user was there; reading the content was.

做什么:允许用户立即、不间断地使用内容。将弹出窗口替换为页面顶部的一个很薄的、容易忽略的横幅。如果用户想订阅时事通讯,这个弹出窗口的替代方案将允许用户自助服务,而不会阻止他们吸收信息的主要任务。

Conde Nast uses a nonintrusive email signup.
Conde'DaSt旅行者的网站在导航下面的一个微妙和非侵扰横幅中介绍了它的时事通讯。这种设计允许感兴趣的用户订阅时事通讯,但没有分散那些只想阅读该网站内容的人。

弹出内容:不要假设模式覆盖将传递消息

9.使用模态叠加为GDPR和Cookie通知:用户已经暂时拆除了模态覆盖,因为他们没有任何东西会出现任何好处。为了传达与GDPR相关的重要信息和使用cookie,不要使用模态覆盖。

做什么:有利于放置在页面底部或侧面的非透镜。这些远不太侵扰,并允许用户继续完成任务。确保提供有关用户个人数据如何收集和使用的信息。

Reddit使用模糊的cookie同意副本。
Reddit使用了一个小型,不显眼的非透镜覆盖,向用户询问Cookie同意;但是,描述人们如何使用的语言是过于含糊的。
NN/g uses much clearer and transparent cookie consent copy.
nngroup.com使用了具有关于cookie使用的透明语言的非透镜覆盖。我们概述了为什么我们收集人们的数据以及它如何专门用于他们的利益。

10.鼓励频道转换在模态覆盖中而不传达特定的益处:很常见的是,可以看到鼓励频道过渡的模块mobile websites to an associated mobile application-尤其是在电子商务或者news websites. These overlays are disruptive and problematic in many situations: often, web users are one-time users that have no interest in downloading an application for an occasional task.

Understandably, organizations want to encourage application downloads, but a modal overlay is not the right approach for advertising your mobile app. Even users who have your app on their phone may be reluctant to switch channels out of fear of starting their process all over again. A modal overlay will only bother them.

做什么:为您的组织的移动应用程序创造意识,但不是在用户当前任务上侵入的成本。有利于低调的方法,如标准的顶级横幅,概述了使用应用程序的好处,以便于人们向该渠道过渡。

Wayfair interrupted users with a popup for their app.
Wayfair以一种鼓励用户下载其移动应用程序的通用模式打断了用户。用户认为他们必须投入大量的工作才能在另一个频道上重新开始他们的任务,而没有实际的好处。
Macy's popup for its app was much less intrusive.
梅西在移动网站上鼓励移动应用程序下载做得很好。页面底部的非透镜覆盖包含对信道转换的激励,并显示应用程序的用户额定值。

结论

Pop, pop, it never stops.不是一个可接受的用户体验,所以一定要停止弹出窗口。

鉴于这一总体上的结论,您可能会想知道使用弹出窗口是否可以何时可以使用;答案是:谨慎地。Resist the urge to follow the crowd and don’t inundate your users with interruptions to bolster short-term metrics.Explore alternative approaches that respect your users’ needs and preserve your organization’s intent of gathering feedback, notifying users of data collection, acquiring email addresses, or encouraging channel transitions.

保留使用模态叠加delivering crucial information, only at appropriate times.不要中断基本任务或通过大型侵入式弹出窗口阻止相关内容。执行usability testing为了确保您的弹出窗口不会让您的用户挫败,作为额外的好处,您将获得真正的见解,以帮助您提高整体体验。有关有效使用模块和弹出窗口,请参阅我们的全日制课程网页UX设计