4.2 A/B测试,网站活跃率提升的法宝

世上总有更好的方案

像LinkedIn的升级迭代一样,在互联网产品开发过程中,我们经常面临多种方案的抉择。有些选择轻而易举,例如面向大众的偏理性产品,主色调定位蓝色最权威稳重而广为接受(比如百度、Facebook);强调安全的服务,绿色是常规之选。

但有些时候,备选方案模棱两可,甚至区别看起来无关紧要,例如某个按钮是用橙色还是红色,摆放的位置偏左还是偏右。面对这种情况,传统解决方式要么是根据设计师的审美来定,要么是一群人共同表决,要么由某个领导拍板决定。无论哪种方式,都不免受到个人主观因素的制约,未必代表的了广大用户在实际使用场景中的认知。“不识庐山真面目,只缘身在此山中。”通常解决此类情况,最合理的办法之一,就是进行A/B测试(A/B Testing)。

所谓A/B测试,简单说来就是针对想调研的问题提供两种不同的备选解决方案(比如两个下单页面),然后让一部分用户使用方案A,另一部分用户使用方案B,最终通过数据观察对比确定最优方案。在现实生活中,达尔文《物种起源》中提到的物竞天择原理,本质上就是在谈同一物种的不同变体经过外部环境测试后存留延续下的最优结果,也算是一种A/B测试。

A/B测试的基本思想包括:

  • 提供两个方案并行测试。
  • 不同方案之间只存在一个变量,排除其他干扰因素。
  • 以某种标准判定结果优劣,筛出最优方案。

其中第二点,即单变量,需要重点关注。因为某种方案的优劣,不光与方案本身有关,也可能与方案所适配的环境密不可分。

同样一段文案,若涂成黑色,在浅色底上会清楚醒目,在深色底上就可能很费眼力,而将文案改成白色,在深浅不同的底色上的视觉效果恰恰相反。这里我们就不能简单地得出结论,黑色和白色哪种是绝对好的,而只能说在深/浅底色的确定条件下,使用白/黑色方案为文案配色能取得更佳的视觉效果和转化率。

被比较的两个变量本身也不能是复杂变量,而应当是单一变量。如果硬要拿红烧茄子跟干拌土豆拼个高下,哪种美味只能靠评判者味蕾的主观偏好,解决方法是要么都改红烧,要么都换土豆,这样就能对单一的烹制方法或食材素质做出客观评价。

在产品设计中,A/B测试常用于减少页面障碍、提升转化率、确定改版方案、新功能的小范围测试等。互联网产品中通过A/B测试改进产品的成功案例不在少数。例如,国外某开发者社区为了刺激游客注册成会员,在游客的默认头像中写上了“我爱IE”这样戏谑的字眼——显然这是对有追求的开发者莫大的“侮辱”,这令他们不得不注册会员并更改头像。测试下来注册转化率十分出色。

Airbnb曾测试过把“保存到心愿单”的收藏图标由星形改为爱心,结果仅凭这一改动就让心愿列表的使用率提升了30%。

00108.jpeg

变为爱心图标后的“保存到心愿单”按钮

37Signals在对旗下CRM产品的注册页面标题进行A/B测试后,发现“30-day Free Trial on All Accounts”(所有账户享受30天免费试用)可以比原来的“Start a Highrise Account”(注册高额回报账户)多带来30%以上的新用户。他们还试着挑战传统网页必须把所有重要信息都放在第一屏的惯例,做了一个长达5000多像素高的展示网页,结果竟成功让注册率增加了37.5%。

00109.jpeg

37Signals旗下产品Highrise的注册引导文案

EA在发布游戏《模拟城市》时,发现删除掉官网顶部的“PRE-ORDER”(预购)广告横幅可使得页面更加干净整洁,并因此使订购量由之前的5.8%上涨到10.2%。

00110.jpeg

《模拟城市》订购页面测试前的广告文案

电子产品电商网站ZAGG对商品详情页面展示的图片进行了调整,以此来分析对消费者将货品加入购物车的影响。他们发现,如果将静态大图替换成演示视频,可以让客单价提高27%,而如果再将演示视频替换成360°的可旋转图片,则又能让客单价提高12%。也就是说,只是简单地将静态大图改为360°图片,就让收入增加了40%。

00111.jpeg

ZAGG用演示视频来介绍商品

00112.jpeg

ZAGG用360°可旋转图片来介绍商品

另外,还有营销公司HubSpot,他们在注册表单上增加了一位女性的照片,以试图丰富页面和增加亲和度。但结果并不如愿,转化率降低了24%,于是他们还是乖乖改回了原本的纯文字版。

00113.jpeg

HubSpot原来的页面,验证表明转化率更高

00114.jpeg

HubSpot在A/B测试中加入女性照片,但实际情况并不理想

除了商业拓展,A/B测试在总统选举上也是功不可没。2008年,负责奥巴马竞选数据分析的主管丹·斯洛克(Dan Siroker)测试后发现,原本在“Change”网站上放置的一段精心拍摄的选举视频虽然被寄予厚望,但实际效果却远不如放奥巴马一家的全家福效果好,后者对选举支持率的提升比前者高出40.6%,价值相当于获得了6000万美元捐款。

00115.jpeg

奥巴马“Change”网站上的全家福

经验主义并不完全可靠,在数据面前任何妄加揣测的评断都可能是不准确的。通过A/B测试,产品团队能够获悉哪些对激发用户活跃度有所帮助,哪些又徒劳无功(有时候后者显得更为重要,因为它能终结一场无意义的争吵,或是缩减许多不必要的消耗)。

一次测试或许能带来良好的改善效果,但也绝非意味着提升空间已然消失。微软公司的测试经验表明,在他们做的所有测试中,有三分之一被验证为成功有效,剩下的三分之二平平无奇或压根就是失败的。谷歌在2009年做了12000多次测试,但其中只有10%带来了业务变化。产品不息,测试不止。永远不要满足于当下的结果,因为世界上总有更好的解决方案。

OkDork的A/B测试实战

诺亚·卡根(Noah Kagan)曾是Facebook的第30号员工,在离开前东家后,他创办了自己的营销服务公司OkDork.com。2014年,他围绕提升网站的邮箱订阅转化率这一目标,针对页面进行了一系列的A/B测试和改进,成功将订阅人数从1.2万人提升到了5万人。他是如何做到的呢?

首先,通过统计工具,他确认了首页是网站流量来源最主要的入口。但原先的首页内容繁杂,既有文章更新,又有历史存档,还有网站介绍、站内搜索、各种页面入口,以及注册登录按钮。让用户留下邮箱地址的输入框藏在很不起眼的角落,很容易被其他元素抢走风头。当时网站的订阅转化率约为3%。

00116.jpeg

OkDork.com改版前的原始页面

为了明确地引导订阅,在参考一些同类网站后,诺亚激进地做出了第一版改进:用户必须先完成注册,才能正式进入网站查看内容。

00117.jpeg

用户必须订阅才能查看OkDork.com内容

这个页面虽然简单粗暴,但也在无形之中拦住了一些不愿订阅的访客,A/B测试的结果表明,订阅转化率的确因此提升到了5%,几乎快翻倍了。

于是,他继续优化这个页面,设计了更加漂亮大气且具有人情味的页面,调大了引导字体和邮箱输入框的面积。同时,他意识到真正打动访客订阅的是网站能带给他们的好处。由于来到该页面的人大多是创业者或者市场营销人员,他们关心的是如何让企业获得用户增长,因此他特别增加文案强调了订阅的好处。

00118.jpeg

增加人物、放大输入框并完善引导文案后的网站

为了赢得用户信任,诺亚又增加了来自其他用户的好评作为权威背书:

00119.jpeg

来自Kissmetrics和CrazyEgg创始人的好评背书

最后,根据Google Analytics的点击行为热点图,诺亚发现网站顶部的导航栏对用户的订阅行为也是一种干扰,许多人会将注意力分散给“博客”(Blog)入口。于是他索性将整个导航栏都去掉了。

00120.jpeg

点击行为热点图显示导航中的“博客”正在分散用户注意力

经过这番折腾,诺亚发现全新设计的首页转化率提升到了8%,经过几个月的积累,他提前达到了预想的订阅数目标。

诺亚成功的A/B测试带给我们的启发是,一个功能明确、转化率较高的网站,必须让用户在第一时间明白它的作用和价值,并且用最醒目的方式呈现出接下来要做的动作,尽可能排除与核心目标无关的其他要素,减少无意义的视觉干扰,即“别让用户思考”。

然而,开发人员也不要过于依赖A/B测试,陷入一点一滴的变更中而忽略了更大的突破性变化。曾在谷歌供职的设计师道格拉斯·伯曼(Douglas Bowman)曾说:谷歌为了找出在两种蓝色方案中哪一种更好,索性测试了41种不同的蓝色来做比较。对与时间赛跑的创业团队而言,这样的精力付出简直太过奢侈。如果你的产品还没达到零点几个百分比的下降都意味着几百万美元损失的地步的话,还是多花些时间在那些真正有跃进式提升的地方吧。