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:
- 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:
- 没有特殊情况下当bac的名称kground content is not visually dimmed.
一种lthough in many cases lightboxes are modal, that is not always true.
几周超过几周，我捕获了在网站上遇到的每个弹出窗口的屏幕截图：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.
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.
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.”
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.
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.”
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.
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.
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.
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.
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.”
What to do instead:Remove the modals, minimize the transitions between sites, and alwaysretain navigation back to the main site将用户链接到外部属性时。如果您的用户在离开您的网站时需要警告，使用较少侵入性的选项，例如链接上的工具提示，以使转换子集团。
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.”
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.
Popup Content: Don’t Assume a Modal Overlay Will Deliver the Message
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.
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.
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。