From conducting decades of user research, we know that peopledislike popupsandmodals。在最近的可用性研究中,我提醒了这一事实。在尝试完成任务时,一位参与者在连续地遇到多个弹出窗口后,一名参与者在桌面上扔了他的手机。沮丧,他抛弃了他的任务,并将网站留下了一个非常糟糕的组织的印象。其他几个用户共同共享类似的情绪,尽管他们没有抛出手机。

一种popup(also known as anoverlayor弹出窗口)是一个窗户或dialogthat appears on top of the page content. A popup can be classified according to two dimensions:

1.用户是否可以与页面的其余部分交互:

  • Modal:禁用页面上的内容,直到用户明确地与叠加相互作用。
  • Nonmodal:users can still interact with the background content (for example, by selecting links or tapping buttons) while the overlay remains visible.

2. Whether the background is dimmed:

  • 如果背景为暗淡,弹出窗口称为alightbox.
  • 没有特殊情况下当bac的名称kground content is not visually dimmed.

一种lthough in many cases lightboxes are modal, that is not always true.

Anna Kaley弹出弹出的解剖学
In terms of popup anatomy, modal overlays disable all background content, nonmodal overlays preserve users’ ability to interact with background content, and lightboxes dim the background content.

几周超过几周,我捕获了在网站上遇到的每个弹出窗口的屏幕截图:on average, 25 popupsper week,这比任何人都不应该忍受(但是今天是当今互联网用户体验的代表)。这个实验与我的可用性研究一起,浮出了一个不数的糟糕的实施实践,并证明了这一点overuse of overlaysis far from over。我们临近网站已经滥用这些元素的地步,即问题实例远远超过了弹出窗口仍然是有用的设计策略的情况。在本文中,我将概述我所观察到的问题,并讨论要考虑的关键因素,以及现实的替代方案弹出窗口that preserve the organization’s intent and the users’ experience.

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

1.在主页面内容加载之前显示弹出窗口:无论使用的变体如何,在用户可以从您的网站或应用程序收集价值之前,从不显示弹出窗口。这种趋势非常侵扰,因为这users’ task is interrupted before they even land on the page.People have grown accustomed to seeing premature popups on websites and usually ignore them or immediately look for the fastest means by which to close the popup to return to their task. Popups that appear before the page loads make the site look desperate and the user experience feel frantic. Additionally, sites who fail to recognize these factsrisk low rankings in search-engine results作为Google penalizes sitesthat use practices which make content less accessible to users, especially on mobile.

What to do instead:等待在弹出窗口中呈现内容,直到它是与用户相关的内容。使用reciprocity principle:give value to your visitors before asking them anything — whether it’s requesting an email address, or even the action of dismissing the popup. Run user testing to identify the context appropriate for whatever content you were planning to display in the popup and figure out the best way to display that content; in many cases it will not be in a popup. The only use case when it is acceptable to display any kind of popup before the page content loads is when your site islegally obligated to request consent from users to accept the use of cookies or verify their age.(Though we wish that the EU and other regulatory authorities would embrace a less annoying interpretation of GDPR and similar rules.)

HuffPost Popover UK
HuffPost在主页型内容加载之前用灯箱呈现用户。这是一个可接受的使用否则有问题的实践,因为在使用个人数据时,网站在法律上有义务在包括地点的情况下询问同意。

2. Displaying a popup right after the user logs in:一种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那这y have a next step or subsequent task in mind — or else why would they have logged in?! Immediately presenting a popup of any kind will distract and impede them from completing their next step. Because they’re focused on the next step, it’s likely that users will pay no attention to the popup or abruptly close it. Not only that, but they may get frustrated by the interruption and by the extra time and互动成本required to close the popup or move it out of the way.

What to do instead: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 astooltipsand small, nonmodal overlays to communicate about these elements.

Gmail不引人注目的非透明度
Gmail used a relatively unobtrusive nonmodal overlay to introduce a new feature that supported the user’s current task of cleaning up the inbox. The nonmodal overlay appeared after the user interacted with the inbox, rather than immediately after login.

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.

For example, one user who landed on Uncommon Goods’ website became disgruntled when she was greeted by a modal overlay asking for her email address to get access to secret sales. She said, “It really annoys me when stuff like that pops up before I’ve done anything else on the website. How do I know if I want to be an email subscriber if I just got here? I would prefer to get that a little later on.”

罕见的货物模态覆盖
One user became annoyed by Uncommon Goods’ website when it displayed a modal overlay asking for her email address shortly after she arrived on the site.

There are many tradeoffs to consider when asking users for their email address. Sites and applications often use premature modals because of the short-term uptick in metrics they yield. However, short-term metrics often come at the price of frustrating many users who are not motivated by arbitrary incentives, such as secret sales.

What to do instead:Rather than showing email popups early on, think of when users might be most comfortable sharing their email addresses with you. Are they browsing a category which has an applicable promotional code? Or maybe they’ve just read (or扫描) an entire blog post. These actions could be appropriate triggers for a minimally intrusive nonmodal overlay, which could appear close to the upper or lower right corner, anduse a sensible amount of screen space。Offer users somethingvaluable andtangiblein exchange for their email address; don’t just expect them to hand it over.

Mark Manson Overlay
MarkManson.net displayed a minimally intrusive nonmodal overlay after people had reached the bottom of a blog post. The popup also offered a free ebook as an incentive.

4. Asking for feedback before people have done anything meaningful:从用户接收反馈很重要,但你不应该泛滥feedback promptsbefore they have done anything on your site. Sites and applications tend to present users with feedback popups right away in hopes that they’ll give a high rating and move on with their tasks. Rarely does this happen; more often, users swiftly close the popup, with no intent to seek it out again.

在经验中以适当的积分从用户获得有意义的反馈,提供了深入了解他们的洞察力挑战和障碍但是,如果你太快要求反馈,那么当它最重要的时候,你就没有得到任何东西。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.”

一种TT Feedback Prompt
一种study participant begrudgingly closed a feedback modal while trying to pay her phone bill. She stated that she hadn’t done anything on the site yet to warrant giving feedback.

What to do instead:一种sk users toprovide feedback immediately after they have completed a top task on your site.This approach minimizes interruptions and ensures that the feedback will be based on an actual interaction. For example, the video-conferencing software BlueJeans asked users for feedback after a meeting concluded. This request did not display prematurely, but at a contextually relevant and appropriate time.

Bluejeans反馈提示
他们要求从用户反馈后立即’ve completed key tasks, not immediately when they arrive on your site. This way, you increase the chance to receive relevant comments or ratings. Using a modal overlay in this case is less annoying and intrusive to the user.

5. Interrupting users to ask for feedback during critical tasks:Users hate being interrupted, yet examples of websites and applications that disturb users with feedback popups in the middle of completing critical tasks are abundant. Most of the time, giving feedback won’t be the top reason for your users’ visit, so don’t disrupt people with popups in the middle of critical tasks either.

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.

What to do instead:In addition to asking users to provide feedback只有在关键任务完成后才能完成那offer a static, nonintrusive means by which to give feedback, anytime they want. A tab on the side of the screen, a link in the footer, or a link in the navigation are all acceptable alternatives to disruptive modals and put the user in control of sharing their opinion when they’re ready.

Nestle feedback link in footer.
雀巢没有中断使用反馈模态的用户,但包括网站页脚中的反馈链接。
British Airways feedback link on the right side of the page
British Airways displayed a button labeledFeedbackon the right side of all its pages.

6. Showing multiple popups one after another: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,测试实现to avoid presenting users with multiple popups at a time.

What to do instead:如果您必须呈现关键信息(例如,important warningsto prevent or correct errors) in a popup, be sure to show only one at a time. Even better, don’t show critical information in a popup, since people tend to close them without reading. Instead, use a visually distinct element and place it directly on the page, where the message best fits contextually. Ensure the copy clearly communicates exactly what the user needs to do to correct the issue and move forward.

Lulus彼此顶部显示多个弹出件。
一种t the end of the checkout flow, Lulus presented multiple feedback modals at the same time. A better approach would have been to show only one at a time or embed the feedback form on the confirmation page.
Canva displayed critical information right on the page.
Canva在页面上直接显示关键信息的良好工作。它而不是弹出窗口,它使用了位于顶部的视觉上不同的内容模块。消息传递帮助用户了解他们需要做些什么来纠正问题。

弹出上下文:不要阻止转换或访问内容

7. Displaying a modal overlay before the user moves to a new subdomain or external site: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.

During one of our usability-testing sessions, a participant who was looking for a job on HSBC’s website encountered two different transitional modals when attempting a task that was essentially segmented across 3 separate websites. He said, “Wow, it keeps taking me to other websites, I don’t even know where I am anymore. If their job application process is this complex and disjointed, I honestly don’t think it would be a good place to work. It seems like a mess, no matter how nice this site looks.”

HSBC popup alerting users of going to another site.
一种fter clicking on Careers, a modal warned users that they were about to leave the initial site.
HSBC显示另一个有关进入新站点的弹出窗口警告用户。
On the same website, users were shown yet another modal stating that they were going to a third website to apply for the job.

What to do instead:Remove the modals, minimize the transitions between sites, and alwaysretain navigation back to the main site将用户链接到外部属性时。如果您的用户在离开您的网站时需要警告,使用较少侵入性的选项,例如链接上的工具提示,以使转换子集团。

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

8. Interrupting access to content through modal overlays:一种modal dialog that appears immediately after people have loaded an article or other piece of long-form content (such as that usually found in the关于我们orNewssections of websites) makes it look as if the site is conditioning access to that content. This context is an especially bad place to be annoying because it diminishes credibility and trust. One user on CNN’s mobile application grew frustrated when he encountered a newsletter modal right after landing on an article he wanted to read. He said, “This causes my suspicions of CNN to peak. Don’t ask me for my email or to sign up for anything right away.”

CNN mobile app interrupts users with a popup.
CNN的手机应用程序显示一个模态的我们er 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.

What to do instead:一种llow users to consume the content right away, without interruption. Replace the popup with a thin, easy-to-dismiss banner at the top of the page. This alternative to a popup will let the user self-serve if they want to subscribe to a newsletter, without blocking their main task of absorbing information.

Conde Nast uses a nonintrusive email signup.
Conde’ Nast Traveller’s website introduced its newsletter in a subtle and nonintrusive dismissible banner underneath the navigation. This design allowed interested users to subscribe to the newsletter, but did not distract those who just wanted to read the site’s content.

Popup Content: Don’t Assume a Modal Overlay Will Deliver the Message

9. Using modal overlays for GDPR and cookie notifications:Users already dismiss modal overlays hastily as they assume nothing good will come of them. For communicating important information related to GDPR and the use of cookies, don’t use modal overlays.

What to do instead:Favor nonmodal overlays placed at the bottom or on the side of the page. These are far less intrusive and allow users to continue with their tasks. Make sure to provide enough information about how users’ personal data is collected and used.

Reddit uses vague cookie consent copy.
Reddit used a small, unobtrusive nonmodal overlay to ask users for cookie consent; however, language describing how people’s data was used is overly vague.
nn / g使用更清晰和透明的cookie同意副本。
NNgroup.com used a nonmodal overlay with transparent language about cookie usage. We outlined exactly why we collect people’s data and how it’s specifically used to their benefit.

10. Encouraging channel transitions in modal overlays without communicating a specific benefit:It’s common to see modals that encourage a channel transition from移动网站到关联的移动应用程序— especially onecommerceor 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.

可以理解,组织想要鼓励应用程序下载,但模态覆盖不是广告您的移动应用程序的正确方法。甚至在手机上拥有您的应用程序的用户也可能不愿意切换频道,因为害怕再次启动他们的过程。模态覆盖只会打扰它们。

What to do instead:Create awareness for your organization’s mobile application, but not at the cost of intruding on the user’s current task. Favor understated approaches such as a standard top banner and outline the benefits of using the app to ease people’s transition to that channel.

Wayfair为他们的应用程序中断了使用弹出窗口的用户。
Wayfair interrupted users with a generic modal which encouraged downloads of its mobile app. Users assumed that they would have to put in a lot of work to begin their task all over again on another channel, without a tangible benefit.
Macy's popup for its app was much less intrusive.
梅西百货的鼓励移动应用做了wnloads from its mobile website. The nonmodal overlay at the bottom of the page contained an incentive for the channel transition and displayed user ratings for the app.

Conclusion

Pop, pop, it never stops.Not an acceptable user experience, so do stop the pops.

Given this overall conclusion, you may be wondering when it is acceptable to use popups; the answer is: sparingly.抵制遵循人群的冲动,并不要将您的用户淹没对Bolster短期度量的中断。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.

Reserve the use of modal overlays for只在适当的时间提供关键信息。Don’t interrupt essential tasks or block relevant content with a big, intrusive popup. Conduct可用性测试to make sure your popups don’t frustrate your users and, as an added benefit, you’ll get real insights to help you improve your overall experience. For more on the effective use of modals and popups, take our full-day course onWeb Page UX Design