最新公告
  • 欢迎您光临欧资源网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 本文是否使用弹出窗口,大多数窗口叠加都出现在错误的时间

    通过对弹窗的观察,我们会发现,大部分弹窗都有破坏用户体验、降低用户好感度的效果。因此,本文结合这一现象,具体分析其背后的原理以及如何避免。

    无论有没有弹出窗口,大多数窗口覆盖出现在错误的时间,在关键任务任务期间打断用户,使用糟糕的语言,并导致用户迷失方向。

    我们从几十年的用户研究中知道,人们不喜欢弹出窗口和弹出窗口。在最近的可用性研究中,我想起了这个事实。在尝试完成任务时,一名参与者在连续遇到多个弹出窗口后将手机扔到桌子上。无奈之下,他放弃了任务,离开了现场,给组织留下了非常不好的印象。其他几位用户也有类似的看法,尽管他们没有扔掉手机。

    弹出窗口(也称为覆盖或弹出窗口)是显示在页面内容顶部的覆盖(层)的窗口或对话框。弹出窗口可以根据两个维度进行分类:

    (1)用户是否可以与页面的其余部分进行交互:

    模态:页面上的内容被禁用,直到用户明确与叠加层交互。非模态:用户仍然可以与背景内容进行交互(例如,通过选择链接或单击按钮),而叠加层仍然可见。(2)背景是否变暗:

    如果背景变暗,则弹出窗口称为灯箱。当背景内容在视觉上没有变暗时,没有特殊的名称。虽然在许多情况下灯箱是模态的,但情况并非总是如此。

    在弹窗的定义中模态对话框是什么时候实例的对话框,模态框(Modal)禁用所有背景内容,非模态框(nonmodal)叠加保留用户与背景内容交互的能力,灯箱使背景内容变暗。

    几周以来,我截取了我在网站和移动应用程序上遇到的每个弹出窗口的屏幕截图:平均每周 25 个弹出窗口,这比任何人都可以忍受的多(但非常代表当今的互联网用户体验)。

    这个实验,连同我的可用性研究,发现了无数的不良做法,并证明了叠加层被过度使用了。我们已经接近网站滥用这些元素的程度,以至于有问题的实例远远超过弹出窗口仍然是一种有用的设计策略的情况。

    在本文中,我将概述我观察到的问题并讨论要考虑的关键因素,以及弹出窗口的实际替代方案,以遵循组织意图和用户体验。

    弹出窗口的时间:不要在交互之前或在关键任务期间提示

    1. 在加载主页内容之前显示弹出窗口

    无论使用哪种变体,在用户可以从您的网站或应用程序中收集有价值的内容之前,永远不要显示弹出窗口。这种趋势非常具有侵入性,因为用户的任务在他们登陆页面之前就被中断了。人们习惯于在网站上看到过早的弹出窗口,通常会忽略它们或立即寻找关闭弹出窗口并返回任务的最快方法。在页面加载之前出现的弹出窗口使网站看起来不舒服,并且用户体验令人抓狂。

    此外,未能识别这些事实的网站在搜索引擎结果中排名较低 [Google 惩罚网站]() 会导致用户无法访问内容,尤其是在移动设备上。

    替代方案:

    等待弹出窗口中的内容,直到它与用户的上下文相关。使用互惠原则:在向访问者提出任何要求之前,先给他们一些有价值的东西,无论是要求电子邮件地址,还是抑制弹出窗口的操作。运行用户测试以确定您计划在弹出窗口中显示的任何内容的适当上下文,并找出显示该内容的最佳方式;在许多情况下,它不会出现在弹出窗口中。在页面内容加载之前显示任何类型的弹出窗口的唯一用例是您的网站在法律上有义务要求用户同意接受使用 cookie 或验证他们的年龄。

    在加载主页内容之前,HuffPost 会向用户展示一个灯箱。这是一种可接受的使用,否则会受到质疑,因为网站在使用个人数据(包括位置)时有法律义务获得同意。

    2. 用户登录后立即显示弹出窗口

    用户登录后出现的弹出窗口与页面内容加载之前出现的弹出窗口一样烦人。当用户登录一个帐户时,他们会考虑下一步或后续任务,否则他们为什么要登录?!立即出现的任何类型的弹出窗口都会分散注意力并阻止他们完成下一步。因为他们专注于下一步,用户可能不会专注于弹出窗口或突然关闭它。不仅如此,他们可能会因中断以及关闭弹出窗口或移动它所需的额外时间和交互成本而感到沮丧。

    替代方案:

    登录账号后,给用户一定的时间和空间来完成任务,弹窗不会立即出现。在一段时间内提供有用的、可接受的帐户提示、指南或新功能,但前提是显示的内容或新功能增强或进一步支持用户的任务。在这些情况下,总是倾向于使用侵入性较小的方法,例如工具提示和小型无模式框覆盖来传达这些元素。

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

    3. 交互前询问邮箱地址

    许多网站和应用程序使用弹出窗口在用户有机会与内容交互之前询问他们的电子邮件地址。

    电子商务、新闻网站和应用程序以及博客是这一类别中最大的罪犯。这种方法是有问题的,因为人们不仅会因为弹出窗口、弹出窗口的时间以及网站过早地要求电子邮件地址这一事实而感到恼火,而且他们还会认为该网站正在向他们发送垃圾邮件。

    示例:登录 Uncommon Goods 网站的用户在收到一个询问她的电子邮件地址以访问秘密销售的模式时感到不满意。

    她说:

    “在我在网站上做任何其他事情之前突然出现这样的东西真的让我很恼火。如果我是第一次在网站上,我怎么知道我是否想成为电子邮件订阅者?我希望以后会出现。”

    一位用户在登录 Uncommon Goods 网站并在她到达该网站后不久看到一个询问她的电子邮件地址的模式时感到恼火。

    在向用户询问他们的电子邮件地址时,需要考虑许多权衡。网站和应用程序经常使用不成熟的模态,因为它们产生的指标会在短期内上升。然而,短期指标往往以挫败许多不受任意激励(例如秘密销售)激励的用户为代价。

    替代方案:

    与其尽早显示电子邮件弹出窗口,不如考虑用户何时最有可能与您分享他们的电子邮件地址。他们是否使用适用的促销代码浏览类别?也许他们只是阅读(或扫描)了整篇博文。这些动作可能是最小侵入性无模式覆盖的适当触发器,并且可能出现在右上角或右下角附近模态对话框是什么时候实例的对话框,使用合理数量的屏幕空间。为用户提供有价值和有形的内容,以换取他们的电子邮件地址;不要只指望他们主动交出。

    MarkManson.net 网站在人们到达博客文章的底部后显示了一个侵入性最小的无模式框覆盖。弹出窗口还提供免费电子书作为奖励。

    4. 在人们做任何有意义的事情之前寻求反馈

    接收用户的反馈很重要,但您不应在用户在您的网站上执行任何操作之前向他们发送反馈提示。网站和应用程序倾向于向用户提供即时反馈弹出窗口,希望他们会给予高度评价并继续他们的任务。但这很少发生;更常见的是,用户会快速关闭弹出窗口而不打算再次查找它。

    在体验中的正确位置从用户那里获得有意义的反馈可以深入了解他们面临的挑战和障碍。但是,如果你过早地要求反馈,你可能在最重要的时候得不到反馈。

    例如,一位研究参与者对尝试在 ATT.com 上支付电话费时出现的反馈模式感到沮丧。她说:“好吧,我会在支付账单时提供反馈,但现在我很沮丧,因为在我做任何事情之前就被要求提供反馈。”

    一位研究参与者在尝试支付电话费时不情愿地关闭了反馈模式。她说,在她在网站上做任何事情之前,她被要求提供反馈。

    替代方案:

    要求用户在完成您网站上的首要任务后立即提供反馈。这种方法可以最大限度地减少干扰并确保反馈基于实际交互。

    例如,视频会议软件 BlueJeans 会在会后要求用户提供反馈。这个请求没有提前显示,而是在上下文和适当的时间提出的。

    与其在用户到达您的网站后立即要求反馈,不如在用户完成关键任务后立即要求他们提供反馈。这样,您就可以增加收到相关评论或评分的机会。在这种情况下使用模态叠加对用户来说不那么烦人和干扰

    5. 在关键任务期间中断用户反馈请求

    用户讨厌被打断,但在完成关键任务的过程中,许多网站和应用程序会通过反馈弹出窗口分散用户的注意力。大多数时候,提供反馈并不是用户访问网站的首要原因,所以不要在关键任务中使用弹出窗口来分散人们的注意力。

    美联航应用程序在关键任务的中间显示一个模式叠加层:取回登机牌。

    替代方案:

    除了要求用户仅在完成关键任务后才提供反馈,提供一种静态的、非侵入性的方式随时提供反馈。屏幕侧面的选项卡、页脚中的链接或导航中的链接都是破坏性模式的可接受替代方案,并允许用户在准备好时分享他们的视图。

    雀巢应用程序不会以反馈模式打断用户,但会在网站的页脚中包含一个反馈链接。

    点击按钮关闭模态框_模态对话框是什么时候实例的对话框_bootstrap模态框传值

    British Airways 在其所有页面的右侧显示一个标有 **Feedback** 的按钮。

    6. 一个接一个地显示多个弹出窗口

    在彼此之上显示多个弹出窗口会使您的网站看起来不专业、绝望和混乱。它还使用户不知所措,并迫使他们努力关闭每个窗口。如果您的网站使用许多不同类型的弹出窗口,请测试您的实现以避免一次向用户显示多个弹出窗口。

    替代方案:

    如果您必须在弹出窗口中显示关键信息(例如防止或纠正错误的重要警告),请确保一次只显示一个。更好的是,不要在弹出窗口中显示关键信息,因为人们倾向于在不阅读的情况下关闭它们。相反,使用视觉上不同的元素并将它们直接放置在页面上,其中消息提示最适合上下文。确保副本清楚准确地传达用户需要做什么来纠正问题并继续前进。

    在结账过程结束时,Lulus 同时提供多种反馈模式。更好的方法是一次只显示一个或将反馈表嵌入到确认页面中。

    Canva 在直接在页面上显示关键信息方面做得很好。它在顶部使用视觉上不同的内容模块而不是弹出窗口。消息提示帮助用户了解他们需要做什么来纠正问题。

    弹出上下文:不妨碍内容的过渡或访问

    7. 在用户移动到新的子域或外部站点之前显示模式覆盖

    一些公司网站链接到位于子域和外部站点上的内容或应用程序。在用户离开主站点之前,会出现一个模式叠加层以提醒用户即将发生的转换。这种类型的弹出窗口是有问题的,因为它过分强调过渡,使用户感到困惑和困惑,尤其是在新的浏览器选项卡中打开子站点时。

    在我们的一次可用性测试会议中,一位在汇丰网站上寻找工作的参与者在尝试一项基本上分为 3 个不同网站的任务时遇到了两种不同的转换模式。

    他说:

    “它一直把我带到其他网站,我什至不知道自己在哪里。如果他们的工作申请过程如此复杂和脱节,我真的不认为这是一个工作的好地方。无论网站多么美丽看起来,这一切似乎都是一团糟。”

    单击“职业”菜单后,模式会警告用户他们即将离开初始站点。

    在同一个网站上,用户还看到了另一种模式,表明他们要去第三个网站申请工作。

    替代方案:

    将用户链接到外部属性时,删除模式框,最大限度地减少站点之间的转换,并始终保留返回主站点的导航。如果您的用户在离开您的网站时确实需要被警告,请使用较少干扰的选项(例如链接上的工具提示)来淡化过渡过渡。

    Eli Lilly:为用户提供信息提示,让他们知道他们将访问不同的网站。工具提示帮助用户记住他们在哪里以及他们要去哪里。

    8. 通过模态覆盖中断对内容的访问

    在用户加载文章或其他长篇内容(例如通常在网站的“关于我们”或“新闻”部分中找到的内容)后立即出现的模式对话框,使其看起来好像网站正在限制对该内容的访问。这种环境是一个特别糟糕的表现,因为它降低了网站的可信度。

    CNN 移动应用程序中的用户在登陆他想阅读的文章后立即遇到电子邮件订阅模式时感到沮丧。他说:

    “这导致我对 CNN 的怀疑达到顶峰。不要让我现在填写电子邮件或注册任何东西。”

    当用户登陆页面阅读文章时,CNN 的移动应用程序会显示一个带有权限提示的模式框。这是有问题的,因为注册 CNN 的时事通讯并不是用户在那里的原因。阅读内容是。

    替代方案:

    允许用户直接处理内容而不会中断。将弹出窗口替换为页面顶部易于关闭的横幅。弹出窗口的替代方法是允许用户在想要订阅时事通讯时自行订阅,而不会阻止他们查看信息的主要任务。

    Conde’Nast Traveler 的网站在导航下方以微妙且非侵入性的横幅显示其新闻通讯订阅。这种设计允许感兴趣的用户订阅时事通讯,而不会分散那些只想阅读网站内容的人的注意力。

    弹出内容:不要假设模态叠加层会传递消息

    9. 使用模式覆盖 GDPR 和 cookie 通知

    用户匆忙放弃了模态覆盖,因为他们认为没有任何好处。为了传达与 GDPR 和 cookie 使用相关的重要信息,请不要使用模态覆盖。

    备选方案:最好放置在页面底部或侧面的无模式框覆盖。这些功能的侵入性要小得多,并允许用户继续执行任务。确保提供有关如何收集和使用用户个人数据的足够信息。

    Reddit 使用一个小的、不显眼的、非模态的覆盖来征求用户对 cookie 的同意;但是,描述人们如何使用数据的语言过于模糊。

    NNgroup.com 使用无模式框覆盖,并带有关于 cookie 使用的清晰语言。我们概述了为什么我们收集人们的数据以及如何专门为他们的利益而使用这些数据。

    10. 鼓励模态叠加中的通道转换,但不传达特定的好处

    鼓励用户从移动网站过渡到相关移动应用程序的模式经常出现,尤其是在电子商务或新闻网站上。在许多情况下,这些覆盖是破坏性的和有问题的:通常,网络用户是一次性用户,他们对下载用于临时任务的应用程序没有兴趣。

    可以理解,组织希望鼓励应用程序下载,但模态叠加并不是宣传您的移动应用程序的正确方式。即使是手机上有应用程序的用户也可能不愿意切换频道,因为他们害怕重新开始他们的流程。模态叠加只是打扰他们。

    替代方案:

    为您组织的移动应用程序创建意识,但不能以侵入用户当前任务为代价。更喜欢低调的方法,例如标准的顶部横幅,并概述使用该应用程序来简化人们过渡到频道的好处。

    Wayfair 以鼓励下载其移动应用程序的一般模式打断了用户。用户觉得他们必须投入大量工作才能在另一个频道上重新开始他们的任务,而这并没有真正的好处。

    梅西百货在鼓励移动应用下载方面做得很好。页面底部的无模式框覆盖包含频道切换奖励并显示应用程序的用户评分。

    总结

    鉴于这个一般性结论,您可能想知道何时可以使用弹出窗口;答案是——谨慎使用。

    抵制随波逐流的冲动,不要因为有利于短期指标的干扰而压倒用户。探索尊重用户需求的替代方案,并保持组织收集反馈、通知用户数据收集、获取电子邮件地址或鼓励频道切换的意图。

    继续使用模态叠加,仅在正确的时间提供关键信息。不要用大量侵入性弹出窗口打断重要任务或阻止相关内容。进行可用性测试以确保您的弹出窗口不会让您的用户感到沮丧,并且作为额外的奖励,您将获得真实的反馈以帮助您改善整体体验。

    原作者:安娜·凯莉

    原地址:

    翻译地址:

    这篇文章是经@iris0327 的许可发布的,每个人都是产品经理。未经许可禁止复制

    题图来自Unsplash,基于CC0协议

    报告/反馈

    站内大部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
    欧资源网 » 本文是否使用弹出窗口,大多数窗口叠加都出现在错误的时间

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    欧资源网
    一个高级程序员模板开发平台

    发表评论