Written by Cassandra Naji

由卡珊德拉·纳吉 ( Cassandra Naji)撰写

They go by many names — modal windows, dialog boxes, modal pop-ups — but whatever you call them, pop-ups have a reputation for being divisive when it comes to usability. Judging by the frequency of pop-up use on the average web page, UI designers and developers love these little guys.

它们有很多名称，包括模式窗口，对话框，模式弹出窗口，但是无论您如何称呼它们， 弹出窗口在可用性方面都有分歧。 从普通网页上弹出窗口的使用频率来看，UI设计师和开发人员喜欢这些小家伙。

However, users seem less enamored. Indeed, pop-ups certainly have a bad rap among the majority of users and a fair proportion of UX practitioners. So why are they still so prevalent? Over here at Justinmind we decided to do some investigation, canvas some user opinions and get the skinny from our in-house designers. Here is what we found out about the modal pop-up window and, more importantly, the best alternatives out there.

但是，用户似乎不太着迷。 的确，在大多数用户和相当一部分的UX从业人员中，弹出窗口当然是一个不好的说唱。 那么为什么它们仍然如此流行？ 在Justinmind，我们决定进行一些调查，调查一些用户的意见，并从我们的内部设计师那儿瘦下来 。 这是我们发现的关于模式弹出窗口的信息，更重要的是，那里是最佳的替代选择。

模态弹出窗口的兴起 (The Rise of the Modal Pop-up)

Stripping things right back to basics, the attraction of the pop-up window in terms of raw functionality is not hard to grasp. As a graphical control element, the pop-up conveys to the user information that is related, yet subordinate to the main page content, blocking access to the main window until users interact with it. Aimed at temporarily interrupting user workflows, pop-ups are simple and effective at first glance; you want to communicate something to the user, you do it, ask them to respond and then everyone goes on their way, right?

简而言之，弹出窗口在原始功能方面的吸引力并不难掌握。 作为图形控制元素，弹出窗口将与用户相关但仍属于主页内容的信息传达给用户，从而阻止访问主窗口，直到用户与其交互。 弹出窗口旨在暂时中断用户的工作流程，乍看之下既简单又有效。 您想与用户交流某些东西，您做到了，请他们回应，然后每个人都按自己的方式进行，对吗？

The pop-up has a variety of uses, from delivering irrelevant pop-up spam to relevant content suggestions and confirmation calls. For UI designers the pop-up window quickly came to represent the “gift of newfound space“, according to UX Mag — a way to cater for last-minute additions or prune existing page content.

弹出窗口具有多种用途，从传递无关的弹出式垃圾邮件到相关的内容建议和确认呼叫。 根据UX Mag的说法，对于UI设计师来说，弹出窗口很快就代表了“ 新发现的空间的礼物 ”，这是一种满足最新需求或修剪现有页面内容的方法。

Looks like the modal pop-up is the answer to all your UI design real estate prayers, right? Problem is, according to usability and UX-perts, this is far from universally true.

模态弹出窗口似乎是您所有UI设计房地产祈祷的答案，对吗？ 问题是，根据可用性和UX-perts，这远非普遍。

弹出式正词 (The Popup Positives)

Before addressing all the reasons why pop-ups so often find themselves in ‘most-hated UI element’ lists, the positives cannot and should not be dismissed. After all, when Justinmind carried out an online survey into ‘Are pop-ups here to stay?’ 21% of respondents replied in the affirmative, defending the power of the pop-up against the 23% who thought they were the devil’s design pattern and the 56% of fence-sitters. So let us look at some of the upsides to this UI element.

在解决弹出式窗口经常出现在“最讨厌的UI元素”列表中的所有原因之前，不能也不应该忽略肯定的结果。 毕竟，当贾斯汀敏德(Justinmind)对“弹出式窗口还会留下来吗？”进行在线调查时， 21％的受访者回答是肯定的，为弹出式窗口的力量辩护，反对23％的人认为自己是魔鬼的设计模式，而56％的围栏保姆。 因此，让我们看一下该UI元素的一些优点。

1. C是转换率 (1. C is for Conversion Rates)

First up, The Big C. Conversions. Most online content producers are looking for one thing above all — conversions. Whether that is in the form of email sign ups, downloads or purchases.

首先是The Big C. Conversions 。 大多数在线内容生产商都在寻找一件事-转化。 无论是以电子邮件注册，下载还是购买的形式。

As far as raw statistics go, the conversion-focused pop-up takes some beating. Take for example the expansive claims made by Appsumo, who say their ListBuilder pop-up plug-in helped sites using the widget collect 110,313 emails in 30 days. Or Steven McDonald’s claims in User Testing.com, where he identifies his pop-ups as “the third biggest lead generator on the site.”

就原始统计数据而言，以转换为中心的弹出式窗口需要花费一些时间。 以Appsumo的广泛说法为例，他说他们的ListBuilder弹出式插件使用小部件帮助网站在30天内收集了110,313封电子邮件 。 或史蒂文·麦克唐纳(Steven McDonald)在User Testing.com上的声明，他在其中将弹出式窗口标识为“该网站上的第三大潜在客户生成器 ”。

Why does this matter so much for e-commerce? In an online world where, according to Ott Niggulis in ConversionXL, 99% of site visitors don’t ‘buy’ on their first visit to your site but 75% intend to return to do so in the future, the modal pop-up seems like an irreplaceable tool for collecting follow-up email contacts. Why? It is all thanks to the power of ‘persuasion’, or interruption marketing.

为什么这对电子商务如此重要？ 根据ConversionXL的Ott Niggulis的说法，在一个在线世界中，有99％的网站访问者在首次访问您的网站时不会“购买”，但有75％的人打算在将来再次访问该网站，因此弹出式窗口似乎就像收集后续电子邮件联系人的不可替代的工具一样。 为什么？ 这全都归功于“说服力”或打断 营销的力量。

Interruption marketing works, as anyone who has ever experienced tele-marketing or TV ad campaigns knows. It works in the sense that users have to stop what they are doing and deal with the marketing message presented to them. This is particularly true of modals because, to continue browsing a webpage, you have to interact with them and their message, even if it is just by clicking ‘close’.

曾经有电话营销或电视广告活动经验的人都知道中断营销的原理。 从某种意义上说，它的工作原理是用户必须停止正在做的事情并处理呈现给他们的营销信息。 对于模态来说尤其如此，因为要继续浏览网页，您必须与它们及其消息进行交互，即使只是单击“关闭”也是如此。

The results of using conversion-focused pop-ups can be compelling. The University of Alberta had witnessed an increase in newsletter sign-ups when they introduced the sign-up form via a pop-up: from 1–2 sign ups a day they rose to 12–15 — still tiny numbers, but nonetheless a potent percentage increase.

使用以转换为中心的弹出式窗口的结果可能令人信服。 阿尔伯塔大学通过弹出窗口介绍注册表单时，见证了新闻订阅的增加：从每天1-2次注册增加到12-15次 ，虽然仍然很小，但仍然很有效百分比增加。

2. B是跳出率 (2. B is for Bounce Rates)

But surely if you are interrupting your users all the time and diverting their navigation flows with pop-ups, they are going to bounce from your site, right? According ConversionXL, wrong. In the two examples cited by Niggulis, WPBeginner and Backlinko, the introduction of modal pop-up windows had zero effect on site bounce rates. Zero.

但是可以肯定的是，如果您一直在打扰用户，并通过弹出窗口改变他们的导航流程，那么他们将从您的站点反弹，对吗？ 根据ConversionXL，错了。 在Niggulis引用的两个示例WPBeginner和Backlinko中，引入模式弹出窗口对站点跳出率的影响为零。 零。

From a purely conversion perspective, pop-ups seem to work.

从纯粹的转换角度来看，弹出窗口似乎有效。

负面因素 (The Negatives)

1.大数字，零参与 (1. Big Numbers, Zero Engagement)

So far, so awesome when speaking only about raw conversion stats. But sometimes numbers can be deceptive. Let us take a closer look at those ‘incredible’ newsletter sign-up rates. Mauro d’ Andrea found that engagement from subscribers garnered through pop-ups is significantly lower than that of autonomous sign-ups. So yes, you might boost your subscriber list, but be aware that those very same subscribers might never open your marketing mails, much less click through and convert.

到目前为止，仅谈论原始转化统计信息时真是太棒了。 但有时数字可能具有欺骗性。 让我们仔细看看那些“令人难以置信的”新闻通讯注册率。 毛罗·德·安德里亚(Mauro d'Andrea)发现，通过弹出窗口获得订户的参与度明显低于自主注册的参与度。 所以是的，您可以增加您的订户列表，但要注意，那些完全相同的订户可能永远不会打开您的营销邮件，更不用说点击并转换了。

2.品牌信誉 (2. Brand Credibility)

In fact, pop-ups may be doing your brand harm even as they simultaneously boost conversions. Nielsen Norman Group, in their piece on ‘needy design patterns’, and more specifically exit-intent pop-ups (pop-ups that try to make you carry out an action before leaving the web page), identify that “needy patterns like the please-don’t-go popover … chip away at the presentation of a professional, confident website. They also damage users’ perceptions of credibility.”

实际上，弹出式窗口可能会损害您的品牌，即使它们同时促进转化。 尼尔森·诺曼(Nielsen Norman Group)在有关“复杂设计模式”的文章中，尤其是在退出意图弹出式窗口(试图让您在离开网页之前执行操作的弹出式窗口)中，指出“类似于请不要去弹出窗口… 在一个专业，充满信心的网站上发表演讲时，请chip之以鼻。 它们还会损害用户对信誉的看法。”

Do not rely on users letting you know they are TO-ed with your pop-up: as Jon Reed points out, complaining is time-consuming, and “If you had a box on your site saying “do you hate our pop-ups,” I would have clicked “yes”.

不要依赖用户让您知道他们是弹出式窗口的使用者：正如乔恩·里德(Jon Reed)所指出的那样，抱怨很耗时，并且“如果您的网站上有一个方框说：“您讨厌我们的弹出式窗口吗？ ，” 我应该点击“是” 。

It could be that the era of interruption marketing in general, and pop-ups in particular, is drawing to a close. Inbound marketing shows no signs of releasing its grip in the digital era, and in an increasingly crowded online marketplace, users are freer than ever to choose to which brands they pledge loyalty to. As Jon Reed says in his round rebuke to pop-ups, B2B audiences in particular are “looking for long-term relationships with experts they can trust.” If your product or content is good, chances are users will find their way to it without a pop-up.

可能是一般的中断营销时代，特别是弹出窗口时代已经接近尾声。 入站营销没有迹象表明在数字时代有什么影响力，而且在日益拥挤的在线市场中，用户比以往任何时候都更加自由地选择忠诚的品牌。 正如乔恩·里德(Jon Reed)在对弹出式窗口的全面谴责中所说，特别是B2B受众“正在寻找与他们可以信赖的专家建立长期合作关系”。 如果您的产品或内容不错，则用户很可能会发现自己没有弹出窗口的方式。

3.用户体验和可用性 (3. User Experience and Usability)

Let us get down to the nuts and bolts — how users feel about pop-ups. What is it like to experience a pop-up in the wild? Are users left frothing at the mouth at having useful content held hostage behind an intransigent pop-up?

让我们开始讲究细节—用户对弹出窗口的感觉。 在野外体验弹出窗口是什么感觉？ 在有用的内容被顽固的弹出窗口背后扣为人质时，用户是否会fr之以鼻？

Justinmind’s in-house UXer Sergi Arevalo points out that the answer is more complex than it you might first assume: “Despite pop-up windows having a variety of different functions and some applicable contexts, they can still be aggressive.” That is backed up by our online survey, in which numerous variations on “it depends on the context” to “devil’s design pattern” captured some of the ambivalence felt by users when faced with pop-ups they found unhelpful.

Justinmind内部的UXer Sergi Arevalo指出，答案比您最初可能想的要复杂得多：“尽管弹出窗口具有多种不同的功能和某些适用的上下文，但它们仍然具有攻击性。” 我们的在线调查证实了这一点，在该调查中，从“取决于上下文”到“魔鬼的设计模式”的多种变体捕获了用户在遇到无用的弹出窗口时感到的矛盾情绪。

It seems context is king when it comes to pop-ups. In terms of advertising, the stats are enlightening: 70% of US users are annoyed by pop-up ads, and according to SearchEngineLand, the primary reason for blocking a site is annoying ads. Of course, not all pop-ups are ad pop-ups, and some pop-ups add value. As Sergi points out, “they’re ideal if you want to show related content while keeping the user on the same page, and for a designer they’re a great way to add focused value within a reduced area.” Pop-ups — it is complicated.

在弹出式窗口中，上下文似乎是最重要的。 在广告方面， 统计数据令人鼓舞 ：弹出式广告让美国70％的用户感到烦恼，而根据SearchEngineLand所说， 阻止网站的主要原因是令人讨厌的广告 。 当然，并非所有的弹出窗口都是广告弹出窗口，某些弹出窗口会增加价值。 正如Sergi指出的那样，“如果您希望在使用户保持相同页面的同时显示相关内容，这是理想的选择，对于设计人员来说，这是在缩小区域内增加重点价值的好方法。” 弹出窗口-这很复杂。

4.行动装置 (4. Mobile Modals)

There might be one clear case however when pop-ups are persona non-grata. Way back when the pop-up first appeared on interfaces, most of us were interacting with desktop devices by pointing and clicking. It is fairly easy to close an annoying pop-up with a mouse gesture. But we are now living in the mobile era, and pop-ups have failed to morph with the times.

但是，当弹出窗口不受欢迎时，可能会有一个明确的情况。 当弹出窗口首次出现在界面上时，我们大多数人都通过指向和单击来与桌面设备进行交互。 用鼠标手势关闭烦人的弹出窗口非常容易。 但是我们现在生活在移动时代，弹出窗口无法与时俱进。

Pop-ups are a tough call for designers of mobile UIs. Different operating systems require different designs. The usual top-right close button is way out of the thumb zone and tricky to hit accurately, and all too often mobile pop-ups fail to resize adequately, leaving users scrolling around desperately looking for the ‘close’. Basically, as UX Mag points out, modal pop-ups “just don’t work well on tablets and mobile devices“.

弹出窗口对于移动UI的设计者来说是一个艰难的要求。 不同的操作系统需要不同的设计。 通常，右上角的关闭按钮位于拇指区域之外，很难准确击中，而且经常出现移动弹出窗口无法充分调整大小的情况，从而使用户拼命地滚动寻找“关闭”位置。 基本上，正如UX Mag指出的那样，模式弹出式窗口“ 在平板电脑和移动设备上不能很好地工作 ”。

那么弹出式窗口能否成为出色的用户体验？ (So Can a Pop-up Ever Make for Good UX?)

If you listen to Jon Reed then the answer is definitely no: “pop-ups, by definition, ruin user experience.” But despite its aforementioned negative aspects, in certain web apps or desktop interfaces the pop-up can be a welcome addition.

如果您听乔恩·里德(Jon Reed)的话，答案肯定是 ：“弹出窗口，从定义上讲，破坏了用户体验。” 但是，尽管存在上述负面影响，但在某些Web应用程序或桌面界面中，弹出式窗口还是值得欢迎的。

On our Justinmind survey, respondents pointed out that modal pop-ups could be vital when used to guide users through a potentially confusing process, or provide necessary information. UXmag points out that in programs or apps that require user confirmation or certain actions, modal pop-ups are an unbeatable way of focusing user attention before irreversible actions are carried out.

在我们的Justinmind调查中，受访者指出，模式弹出窗口在用于引导用户进行可能引起混淆的过程或提供必要信息时可能至关重要。 UXmag指出，在需要用户确认或某些操作的程序或应用中，模态弹出窗口是在执行不可逆操作之前吸引用户注意力的一种无与伦比的方法。

If you are designing this kind of software our UXer Sergi recommends running A/B tests on how best to communicate with users. It might be that your interactively prototyped pop-ups actually go down better with users if they see the true value of the interruption.

如果您正在设计这种软件，我们的UXer Sergi建议您运行A / B测试，以了解如何与用户进行最佳交流。 如果用户看到中断的真正价值，那么交互式原型弹出窗口实际上可能会更好地与用户一起使用。

However, be aware that A/B tests between two pop-ups will only give you the best of two worlds. Run an option without pop-ups to see what kind of experience users truly value.

但是，请注意，两个弹出窗口之间的A / B测试只会给您带来两个世界中最好的东西。 运行没有弹出窗口的选项，以查看用户真正重视的体验。

如何正确执行弹出式窗口 (How to do Pop-ups Right)

If you do eventually incorporate a modal pop-up into your UI, it is probably wise to establish some best practice guidelines. Our survey revealed that users were willing to accept a pop-up if it:

如果您最终确实将模态弹出窗口合并到UI中，则建立一些最佳实践准则可能是明智的。 我们的调查显示，如果出现以下情况，用户愿意接受弹出窗口：

1. Forced them to confirm an action or decision at a crucial moment in the workflow迫使他们在工作流程的关键时刻确认一个动作或决定
2. Gave them useful feedback or advice给他们有用的反馈或建议
3. Focused them on a single, relevant piece of content (‘relevant’ is important here)将他们集中在一个单一的相关内容上(“相关”在这里很重要)

Users probably are not going to fall in love with your pop-ups even if done impeccably, but they might not abandon your site and curse your brand name.

即使做得无懈可击，用户可能也不会爱上您的弹出式窗口，但是他们可能不会放弃您的网站并诅咒您的品牌名称。

Here is some advice fresh from the Justinmind design team:

这是来自Justinmind设计团队的一些新建议：

• Despite what ConversionXL claims, resist the temptation to be a smart-ass when it comes to copy, because no one likes belittling microcopy, really. Instead, positive calls to action and microcopy that genuinely add value to the user, not just to your brand, are important.

  尽管ConversionXL声称有什么要求 ，但在进行复制时还是要抵制住它成为智能资产的诱惑，因为没有人真正喜欢微缩显微镜。 取而代之的是，积极呼吁采取行动并采取微观行动，真正为用户增加价值，而不仅仅是为您的品牌增加价值。

• Track your pop-ups with cookies so you do not show the same users the same cookie repeatedly. Of course, you are assuming the same user will access your site with the same browser from the same device all the time. On a side-note, HubSpot should really do this: every time I go to their blog they ask me if I want to sign up for updates, something that I did months ago.使用Cookie跟踪弹出式窗口，这样您就不会重复向同一用户显示相同的Cookie。 当然，您假设同一用户将始终使用同一浏览器从同一设备访问您的网站。 附带说明一下，HubSpot应该真正做到这一点：每次我访问他们的博客时，他们都会问我是否要注册更新，这是我几个月前所做的事情。
• Offer users valuable content and incentives, not junk. And do not just ask them for their contact details — that makes for creepy UX. How about user-friendly pop-ups which do not ask for jack, and instead send readers to a free resources page? A welcome interruption for many.向用户提供有价值的内容和奖励，而不是垃圾。 而且，不仅要询问他们的联系方式，还需要提供令人毛骨悚然的UX。 不要求杰克而是将读者发送到免费资源页面的用户友好弹出窗口怎么样？ 许多人的欢迎中断。

• Think carefully about timing and position. SumoMe found that the best (ie most conversion friendly) time to introduce a pop-up was after a user had been on a site 5 seconds, but in terms of UX this is probably way mistaken. Why would a user want to engage with your brand or content if they have not even had time to evaluate it? Do not hold your users hostage to your conversion rates.

  仔细考虑时间和位置。 SumoMe发现，引入弹出窗口的最佳时间(即最适合转换的时间)是在用户访问网站5秒钟之后出现的 ，但是就UX而言，这可能是错误的。 如果用户甚至没有时间评估您的品牌或内容，为什么还要与他们互动？ 不要让您的用户成为转化率的人质。

• If you are designing for mobile, follow UX Mag’s advice and place the ‘touch = targets’ where users can reach them based on usage scenarios (and thumb zone). Place the close tab in the lower right corner and do not ask users to scroll around the pop-up.

  如果您是为移动设备设计的，请遵循UX Mag的建议并将“ touch = target”放置在位置，以便用户可以根据使用情况 (和拇指区域)到达它们。 将关闭选项卡放在右下角，不要要求用户在弹出窗口中滚动。

• Most importantly, every time you design a pop-up, ask yourself the question “Do my users really need this interruption?” Most often they will not. Like one of our survey respondents said, “only use a hammer when you need a hammer.”

  最重要的是，每次您设计弹出窗口时，都要问自己一个问题：“我的用户真的需要这种打扰吗？” 大多数时候他们 不会 。 就像我们的一位受访者所说：“仅在需要锤子时才使用锤子。”

外卖 (The Take-Away)

Evaluating the user experience impact of modal pop-ups is, as seen, a complex business. While it may seem intuitive to assume that pop-ups automatically ruin the usability of a web or mobile app, the statistics shed light on a more a complex landscape in which users implicitly understand the importance of context.

如所看到的那样，评估模式弹出窗口对用户体验的影响是一项复杂的业务。 假设弹出窗口会自动破坏Web或移动应用程序的可用性似乎很直观，但统计数据却揭示了一个更为复杂的格局，在这种格局下，用户隐式理解了上下文的重要性 。

They are not going to throw their arms around you in gratitude for designing an interface with full-screen SIGN UP HERE pop-ups and patronizing microcopy, but then again they probably (probably!) will not abandon your site.

他们不会为设计具有全屏SIGN UP HERE弹出窗口和光顾显微镜的界面而大发雷霆，但是他们再次(可能！)可能不会放弃您的网站。

They will thank you, however, if you work in a pop-up that elucidates rather than obfuscates, that prioritizes their needs rather than your conversion desires. You may need to play the long-game, but judicious use of pop-ups and, as always, a focus on usability, will win users’ respect and ultimately, their loyalty.

但是，如果您在弹出式窗口中进行阐明而不是混淆处理，它们会优先考虑他们的需求，而不是您的转换愿望，那么他们会感谢您。 您可能需要玩很长的游戏，但是明智地使用弹出窗口以及一如既往地注重可用性，将赢得用户的尊重，并最终赢得他们的忠诚度。

想了解更多？ (Want to learn more?)

If you’d like to…

如果您想...

• learn all the details of Usability Testing了解可用性测试的所有详细信息
• get easy-to-use templates获得易于使用的模板
• learn how to properly quantify the usability of a system/service/product/app/etc了解如何正确量化系统/服务/产品/应用/等的可用性
• learn how to communicate the result to your management了解如何将结果传达给您的管理层

… then consider to take the online course Conducting Usability Testing.

…然后考虑参加在线课程“ 进行可用性测试” 。

If, on the other hand, you want to brush up on the basics of UX and Usability, then consider to take the online course on User Experience. Good luck on your learning journey!

另一方面，如果您想了解UX和可用性的基础知识，请考虑参加“ 用户体验 ” 在线课程 。 祝您学习愉快！

(Lead image: Depositphotos)

(领导形象： Depositphotos )

Originally published at UsabilityGeek by Cassandra Naji, who is Marketing Content Editor at Justinmind, a prototyping tool that allows you to prototype web and mobile apps so you can visualize and test your software solution before writing a single line of code.

最初由Justinmind的市场营销内容编辑器Cassandra Naji在UsabilityGeek上发布， Justinmind是一种原型设计工具，使您可以原型化Web和移动应用程序，以便在编写一行代码之前就可以可视化和测试您的软件解决方案。