欢迎来到万全财经杂文网!

万全财经杂文网

你想看的都在这里
万全财经杂文网
当前位置:

hlod住爱弹出窗口:10个代表性问题及其替代方案

来源:万全新闻 时间:08-02 02:32:28浏览5次

通过观察弹出窗口  ,我们会发现大多数弹出窗口具有破坏用户体验和降低用户善意的效果  。因此  ,结合这一现象  ,本文将探讨具体分析背后的原理和避免方法  。

无论是否使用弹出窗口 ,大多数窗口覆盖都发生在错误的时间 ,在执行关键任务时会打断用户 ,使用糟糕的语言  ,并导致用户迷失方向 。

通过几十年的用户研究 ,我们知道人们不喜欢弹出窗口和弹出窗口  。在最近的可用性研究中  ,我记得这个事实  。当试图完成任务时 ,一名参与者在连续遇到多个弹出窗口后将手机扔到了桌子上  。令他沮丧的是 ,他放弃了任务 ,离开了网站 ,给这个组织留下了很坏的印象  。其他几个用户也有类似的观点  ,尽管他们没有扔掉手机  。

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

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

模态框(modal):在用户明确地与叠加层交互之前  ,页面上的内容将被禁用 。非模态框(nonmodal):用户仍然可以与背景内容进行交互(例如  ,通过选择链接或点击按钮)  ,同时覆盖叠加仍然可见  。

(2)背景是否变暗:

如果背景变暗  ,则弹出窗口称为lightbox  。当背景内容没有视觉上的变暗时  ,没有特殊名称 。

虽然lightbox在许多情况下属于modal  ,但情况并非总是如此  。

在弹出窗口的定义中  ,模式框禁用所有背景内容  ,非模式框叠加以保持用户与背景内容交互的能力  ,灯箱使背景内容变暗  。

在过去的几周里  ,我已经捕捉到了我在网站和移动应用程序上遇到的每个弹出窗口的截屏:平均每周25个弹出窗口 ,这是任何人都无法容忍的(但非常代表今天的互联网用户体验) 。

这个实验  ,加上我的可用性研究 ,已经产生了无数的不良实践  ,并且证明叠加已经被过度使用了  。我们离网站滥用这些元素的程度如此之近  ,以至于有问题的实例远远超过了弹出窗口仍然是有用的设计策略的情况  。

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

弹出窗口的时机:在交互之前或关键任务期间不要提示1. 在加载主页内容之前显示弹出窗口

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

此外  ,未能认识到这些事实的网站在[谷歌惩罚网站的搜索引擎结果中排名很低  。谷歌blog.com/2016/08/helping-users-easy-access-content-on.html)通过阻止用户访问内容  ,特别是在移动设备上 。

备选方案:

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

在加载主页内容之前 ,赫芬顿邮报为用户提供了一个灯箱  。这是对其他有问题的做法的一种可接受的使用  ,因为网站在使用个人数据(包括位置)时有法律义务获得同意  。

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

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

备选方案:

登录帐户后  ,用户会有一段时间和空来完成任务  ,并且不会立即显示弹出窗口  。一段时间后  ,如果用户的任务被所显示的内容或新功能增强或进一步支持  ,则提供有用和可接受的账户提示、指南或新功能的最终提供 。在这些情况下  ,总是倾向于使用侵入性较小的方法(如工具提示和小的非模态框架覆盖)来传达这些元素  。

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

3. 在交互之前询问电子邮件地址

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

电子商务、新闻网站和应用程序以及博客是这一类别中最大的违规者  。这种方法是有问题的  ,因为人们不仅会被弹出窗口、弹出时间和网站过早需要电子邮件地址的事实所困扰 ,还会认为网站会向他们发送垃圾邮件 。

例如  ,登录不寻常商品网站的用户在受到一个模式框的欢迎时不满意 ,需要输入她的电子邮件地址才能访问秘密销售  。

她说:

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

一位用户在登录罕见商品网站时看到一个模式框  ,并要求她在到达网站后不久提供一个电子邮件地址  ,这让用户很恼火  。

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

备选方案:

不要在早期显示一个电子邮件弹出窗口  ,考虑用户何时最愿意与您共享他们的电子邮件地址  。他们是否浏览带有适用促销代码的类别  ?也许他们只是阅读(或扫描)了整个博客帖子  。这些动作可能是微创非模态叠加的适当触发  ,并且可能出现在右上角或右下角附近  ,使用合理数量的屏幕空  。向用户提供有价值的有形内容  ,以换取他们的电子邮件地址;不要只是期望他们自愿交上来  。

当人们到达博客帖子的底部后 ,markmanson.net网站显示了最小的非模态框覆盖率  。弹出窗口还提供免费电子书作为奖励 。

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

收到用户的反馈非常重要  ,但是在你的网站上做任何事情之前  ,用户不应该向他们发送反馈提示 。网站和应用程序倾向于立即向用户提供反馈弹出窗口  ,希望他们能给予高度赞扬并继续他们的任务  。但是这种情况很少发生;更常见的情况是  ,用户快速关闭弹出窗口 ,不打算再次寻找它  。

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

例如  ,当一名研究参与者试图在att.com支付电话费时 ,他对出现的反馈模式感到沮丧  。她说 ,“好吧 ,我会在付账后给出反馈 ,但是现在我很沮丧  ,因为我还没有做任何事情  ,让我给出反馈  。”

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

备选方案:

要求用户在完成网站上的顶级任务后立即提供反馈  。这种方法可以最大限度地减少中断  ,并确保反馈是基于实际的互动 。

例如 ,视频会议软件bluejeans要求用户在会后提供反馈 。该请求没有预先显示 ,而是在上下文敏感的适当时间出现 。

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

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

用户不喜欢被打断  ,但是在完成关键任务的过程中  ,大量的网站和应用程序会通过弹出反馈来干扰用户 。在大多数情况下  ,提供反馈不是用户访问网站的主要原因 ,所以不要使用弹出窗口来打扰执行重要任务的人  。

联合航空公司的应用程序在关键任务中间显示模式框覆盖图:检索登机牌  。

备选方案:

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

雀巢公司的应用程序没有使用反馈模式来打断用户  ,而是在网站的页脚添加了反馈链接 。

英国航空公司空公司在其所有页面右侧显示一个标有* *反馈* *的按钮  。

6. 逐个显示多个弹出窗口

将多个弹出窗口一个接一个地显示出来  ,会让你的网站看起来不专业、绝望和混乱  。它还会让用户不知所措  ,迫使他们花费精力关闭每个窗口  。如果您的站点使用许多不同类型的弹出窗口  ,请测试实现以避免一次向用户显示多个弹出窗口  。

备选方案:

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

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

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

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

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

他说:

“它总是带我去其他网站  ,我甚至不知道我在哪里  。如果他们的工作申请过程如此复杂和脱节 ,我真的不认为这是一个工作的好地方 。不管网站看起来有多漂亮 ,它看起来都是一团糟 。”

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

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

备选方案:

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

礼来:为用户提供信息工具提示  ,让他们知道他们将访问不同的网站  。工具提示帮助用户记住他们的位置和下落  。

8. 通过模态框叠加中断对内容的访问

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

cnn移动应用程序中的一名用户在登录到他想阅读的文章后  ,立即遇到了一个电子邮件订阅模式框  ,这让他很沮丧  。他说:

“这导致了我对cnn的最大怀疑  。不要要求我立即填写电子邮件或注册任何东西  。”

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

备选方案:

允许用户不间断地直接使用内容 。将弹出窗口替换为页面顶部易于关闭的横幅  。弹出窗口的另一种选择是允许用户订阅时事通讯 ,而不妨碍他们查看信息的主要任务 。

Conde'nast traveler网站在导航下方以一个微妙且非侵扰性的横幅介绍了其简报订阅  。这种设计允许感兴趣的用户订阅时事通讯  ,但不会分散那些只想阅读网站内容的人的注意力 。

弹出内容:不要假设模态框叠加将传递消息9. 使用模态框叠加来进行gdpr和cookie通知

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

可选:最好在页面底部或侧面叠加非模态框  。这些功能侵入性小得多 ,允许用户继续执行任务  。确保提供了关于如何收集和使用用户个人数据的足够信息  。

Reddit使用一个小而不显眼的无模式盒子覆盖来请求用户是否同意cookie然而  ,描述人们如何使用数据的语言过于模糊  。

Nngroup.com使用非模态框覆盖  ,其中包含关于cookie使用的清晰语言  。我们概述了为什么我们收集人们的数据  ,以及这些数据是如何专门用于他们的利益的 。

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

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

可以理解的是 ,组织希望鼓励应用程序下载  ,但是模式覆盖不是宣传您的移动应用程序的正确方式  。即使手机上有应用程序的用户也可能不想切换频道  ,因为他们害怕重启他们的进程 。模态框架的叠加只会困扰他们 。

备选方案:

为您组织的移动应用程序创建认知  ,但不要以干扰用户当前任务为代价  。首选低调的方法  ,例如标准的顶部横幅  ,并概述了使用该应用程序简化人们向渠道过渡的好处  。

Wayfair以一种鼓励下载其移动应用程序的通用模式中断用户  。用户认为他们必须投入大量的工作才能在另一个渠道重新开始他们的任务  ,而不会带来任何实际的好处  。

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

总结

鉴于这一总体结论  ,您可能想知道何时可以使用弹出窗口 。答案是-小心使用 。

抵制跟随人群的冲动  ,不要因为中断而淹没用户以支持短期指标  。探索尊重用户需求的替代方法  ,并保持组织收集反馈、通知用户数据收集、获取电子邮件地址或鼓励频道切换的意图  。

继续使用模式框覆盖  ,只在适当的时候提供关键信息  。不要通过大量侵入式弹出窗口中断基本任务或阻止相关内容  。进行可用性测试  ,以确保您的弹出窗口不会让您的用户感到不安  ,另外一个好处是  ,您将收到真实的反馈 ,帮助您改善整体体验  。

原作者:安娜·凯利

原地址:https://www.nngroup.com/articles/popups/

地址:https://www.jianshu.com/p/7a0d1157c9c9

由iris0327编译 ,

本文经@iris0327授权  ,由每位产品经理发表  。未经允许禁止复制  。

主题地图来自unsplash ,基于cc0协议  。

    

分享到:

请输入搜索内容

最新标签

NEWSTAGS