你坐在电脑前兴冲冲地打开一个杂志网站,网站刚加载完一条弹窗就邀请你“加入我们的会员吧”;你在阅读一篇文章,第一段读完就有弹窗跳出问你要不要购买月刊,你毫不犹豫地点了“X”,没想到第二段、第三段读完还是有这个弹窗跳出,同样的配方,同样的味道,让人不胜其烦;你就要离开这个网站了,没想到临走前还有一个自动弹窗挽留道:“你确定吗要离开吗”,你狠狠按下确定,然后再也没有上过这个网站。

以上的场景我们在网上浏览的时候或多或少都会遇到过。作为网站用户,我们讨厌弹窗,因为弹窗打断了我们的浏览体验,让我们没办法连续找到自己想找的内容;但是作为网站设计师,我们又非常喜欢弹窗,以至于恨不得用一个接着一个的弹窗把用户“锁死”在自己的网站。为什么用户不喜欢的弹窗,而设计师一定要用?有没有用户可以欣赏的弹窗?如何创造一个让用户不舍得关闭的弹窗?

接下来我们就来一起探讨关于弹窗的那些秘密。

弹窗的分类

在了解怎么使用弹窗之前,我们要了解一下弹窗的分类。弹窗在英文里统称为popups,但是可以根据“背景有没有变暗”和“背景能不能按”分为四个元素:modal(背景不能按),nonmodal(背景可以按),lightbox(背景变暗)和nonlightbox(背景亮)。我们来看看下面NNGroup在弹窗用户体验文章中提供的这张图:

从图上可以看出弹窗是两个元素的结合,例如背景变暗、背景不能按的就是modal+lightbox,而背景变暗、背景又可以按的就是nonmodal+lightbox。了解弹窗的分类可以帮助我们考虑如何设计弹窗才能实现我们的目的。例如,我想提高转化率、让用户只注意到我的弹窗内容,那我就设计一个modal+lightbox,这样用户一定要对弹窗做出反应(关闭弹窗,或者填写我所设置的内容)才能进行下一步动作。

弹窗的好处:设计师的心头爱

了解完弹窗的分类,我们来进一步看看弹窗到底有多大的魅力让设计师们欲罢不能。其实说到底,设计师真正热爱的是modal型弹窗,而这种弹窗的优点无非两个:提高转化率 (conversion rate),不影响跳出率 (bounce rate)。

Modal型弹窗之所以可以提高转化率完全是因为让用户“无路可走”。我们再设想一下本文开头的那个场景:一个弹窗跳出来了,我们不能按背景网页的其他链接,也没法看剩余的内容,无奈之下,我们要么乖乖按弹窗的提示行动,要么把弹窗给关掉,无论什么反应,都产生了设计师喜闻乐见的交互行为(interaction)。而一旦我们按照弹窗的提示行动,例如填写了表单、留下了联系方式,那我们就促进了这个网站的转化率,转化率对于电商网站来说就是金钱。这种“打断营销”(interruption marketing)屡试不爽,终于形成了如今弹窗遍地的景象。

除了能够促进转化率,modal型弹窗对网站的跳出率毫无影响。跳出率就是浏览了单个页面的访问量对所有访问量的占比,所以就算网页采用了modal型弹窗,也不会促使(当然也不会阻止)人们关闭当前页面。

既然能促进转化,又不会让人们关闭网页,设计师们当然理所地想“为什么不用弹窗”?

弹窗的坏处:用户看了就脑壳疼

既然弹窗这么好,为什么用户还不喜欢看见它?因为弹窗带来的坏处有可能比它的好处还要多。

首先,弹窗虽然能带来转化率,但是却带不来参与率 (engagement)。人们就算迫于弹窗的威严留下了邮箱,也不会经常打开,更别提回复这个网站发来的邮件;相反,要是人们自愿留下联系方式,参与互动的机率就会大大提高。

其次,弹窗会伤害一个品牌的名誉。与其用哀求的语气在用户关闭网页之际问“你确定要离开吗”,使得用户怀疑品牌的专业程度,不如大方、自信地展示自己的内容,以优秀的内在和设计留住用户。

除了以上两点,人们对弹窗的体验也非常差,不仅仅是因为它的“打断”行为,还是因为弹窗对于不同设备的兼容程度太低。比如在电脑端,弹窗的关闭按钮一般在右上方,但一旦移动端的设计师调整了页面尺寸却没有调整弹窗尺寸,那么弹窗的按钮就会被“切掉”,这样一来移动端用户就找不到关闭的按钮了。因此,设计师如果使用弹窗的话,还要根据不同的设备调整弹窗的界面和尺寸,一份工资,三种体验,半夜两点流的泪,仿佛都是当初用弹窗时脑袋进的水。

四个原则,用好弹窗

虽然弹窗的缺点很多,但是我们也不能否认弹窗确实有其可取之处。因此我们不但不能“禁用弹窗”,还应该多想想怎么才能用弹窗来辅助我们实现网站目标,化弹窗“夺目”的缺点为优点。为了做到这一步,我们可以遵循以下四个原则。

  • 不打断

弹窗跳出时不要打断用户进行任务。

例如,弹窗尽量不要在打开网站时、登陆账户后弹出;不要在关键时刻请求用户给反馈,例如在用户玩游戏的时候弹窗请求用户给网页评分;不要接二连三地跳出弹窗,徒增用户的反感。弹窗应当让位于连续的体验,在适时的时候出现。

  • 可指导

可以给用户指导的弹窗才是受欢迎的好弹窗。

问题太复杂需要解释或者关键步骤需要确认,这个时候跳出弹窗可以帮助用户理解、确认正在进行的任务;而在某个步骤结束以后跳出弹窗,可以给用户反馈。例如,在用户确认提交资料前,来一个弹窗提示“您正在提交资料”或者“您的资料将会保密处理”,用户会对网站有更好的印象;在资料提交后跳出弹窗“您的资料已上传”则会让用户感到安心,进一步改善体验。

  • 说重点

弹窗要和当前页面、内容紧密相连。

例如,在用户读完文章之后可以跳出弹窗询问文章满意程度,或者询问用户是否有兴趣注册会员,因为这个时候用户肯定是对文章有兴趣才会看完的,这样的弹窗可以促使用户行动,提高转化率。但是如果在用户读文章读到一半的时候跳出弹窗询问是否可以留下联系方式,这样的弹窗就不能达到良好的效果,因为看文章和留下联系方式毫无关系。

  • 莫强求

每次设计弹窗的时候多问问自己:“用户需要这个弹窗吗?”不要为了提高转化率强行设置弹窗,勉强没幸福,有时候换个表现方式更能达到自己的目标。

具体设计,具体分析

在四个原则的指导之下,我们在具体设计弹窗的时候要注意以下几点:

  • 功能

在界面功能的设计上,弹窗最重要的是要有明显的关闭按键“X”。

  • 尺寸

弹窗没有固定尺寸,不是越大越好,也不是越小越精致。

例如简报(newsletter)订阅的弹窗就可以采用尺寸较小的nonmodal,在用户浏览的时候小巧、精致的界面好像在说:嗨,你看完了吗,订阅我更有趣哦~而且在不同的设备上弹窗大小可能不同,例如手机端的弹窗按键要和拇指一般大,而且按键不能太接近边缘,否则就会给手机端的用户带来操作上的不便。

Beyondyoga:看见我的“Subsbribe”和“X”有多大了吗?
  • 时间

时间上要注意三点,分别是优化加载时间,设置显示频率,设好弹出时间。

  • 加载优化时间是为了让弹窗显示速度更快,可以采用压缩图片等方法。
  • 设置显示频率是为了减少弹窗对用户的打扰,同一个弹窗不能显示太频繁,而且可以设置显示上限,例如同一个弹窗跳出5次后如果用户都选择了关闭,就再也不会显示了——毕竟看了5次都没兴趣,那就是真的没兴趣了。
  • 设好弹出时间,不要每次在网站一打开的时候就设置弹窗,离开时跳出的弹窗转化率比打开页面的时候要高5%呢。
  • 内容

短小精悍,优化阅读体验,拒绝fomo。

在编辑弹窗内容的时候,要组织好结构,尽量用精简的语言,因为用户留给弹窗的时间并不多。

Fomo就是fear of missing out,这是在提醒人们“过了这村就没这店啦”,可是运用在弹窗上就不适合了。因为按键位置有限,“过了这村就没这店”这八个字挤得密密麻麻,用户不仅要花时间看,而且还有可能根本看不清,导致心情烦躁,当然不如“不要,谢谢”。以下是The New Yorker带来的反面教材:

(相比于“sign me up”,你能看得清“I don’t want the latest from The New Yorker”吗?)
  • 测试

长期设立一个对照组,分两个流量入口,测视有弹窗和没有弹窗的网站在表现上有何差别,这样可以进一步帮助自己判断“我需要这个弹窗吗”,在日后进一步优化网站。

弹窗的一些参考案例

上文我们说了这么多弹窗设置的原则和设计要点,现在让我们一起来看一下有哪些具体的场景使用了弹窗值得我们参考。

在进入页面时使用弹窗(entry popup)提示“免运费”。这一弹窗在许多购物网站很常见,可以在提示“免运费”的同时展示免运费的产品和邀请用户进行会员注册。试问一下,当“购物”和“省钱”挂钩的时候,留下邮箱又有何妨呢?以下就是很多网站在加载首页时会跳出的弹窗:

nyx: 留下邮箱,8折券双手奉上

在滑动到网页一半的时候显示“折扣”弹窗。这种弹窗设计特别适合博客等阅读内容多的网页,在用户浏览文章一半的时候跳出弹窗提供购买网站会员的优惠券、免费的电子书下载链接或者其他有帮助的内容,用户并不会介意这种打扰,相反有可能会很乐意看到这类消息。因为他们肯定对文章有一定兴趣才看完一半,那么趁着用户兴致高昂,提供点“着数”双方都能收益。

Neil Patel: 文章都看完一半了,还不跟我学线上营销吗?

用小巧、精妙的侧边弹窗提示用户订阅消息。这类弹窗比较适合简报(newsletter)订阅,因为尺寸较小,弹出时不会打断用户的任务,又能促进用户行动。

buffer小声说:咱这有13,000个创业者,就差你了

总结

弹窗虽然不难用,但是用好很难。很多设计师还是停留在“为了转化率,疯狂用弹窗”的阶段,而用户更是看到弹窗有想关网页的冲动,“互相伤害”之下弹窗越来越难发挥其应有的优势。其实通过本文大家也可以发现,我们并不应该拒绝使用弹窗,而是要遵循四个原则设计出在界面、尺寸、时间、内容上都符合用户需求的弹窗,并且通过测视不断优化弹窗的用户体验和网站表现。只有这样,我们才能用好弹窗,并且通过弹窗实现我们的网站目标。

本文到此结束了,令大家失望的是——并没有弹窗跳出。要是跳出的话,您都看到这儿了,难道不想多看看几篇我的其他文章吗?感谢你抽空阅读!

Write A Comment