全球视野下的A/B测试驱动增长—中国台湾篇(六)

无声的控制:如何用CTA的14大关键—悄悄影响消费者,提升电商平台转化率

Call to action,简称CTA按钮,在各网站以各种不同方式呈现的样貌,对转化率有什么样的影响。

1-cta

CTA按钮设计设计的好就如同你进入实体卖场,有显眼且铃声响亮的服务铃,只要消费者轻轻按下,他们就可以马上享受到你最亲切专业的服务。而实体卖场的标价卡、POP、活动DM等,就等同于电商平台各式各样的CTA按钮,它会因为颜色、大小、字型、位置、动画等,间接影响消费者的行为模式,像是在提醒他们:「你是不是该买点什么呢?」

以下将介绍 种,介绍CTA各种样貌型态:

1. CTA按钮 要出现在任何载具的第一个网页画面中
(电脑、手机、行动装置等)

2-cta

无任何CTA按钮-幻想示意图

你可以先想像消费者在点击进入某电商平台产品介绍页面时,该页面显示的第一个画面中(不论PC或行动装置)没有任何CTA按钮的情况下,会多么让消费者无所适从,当他想购买这项产品却不知道该怎么结帐,很容易让消费者失去耐心,更别说使用滑鼠滚轮往下慢慢找其他CTA按钮的位置。

3-cta

充满各式CTA按钮-示意图

接下来我们来看看拥有各式CTA按钮的情况,透过上图我们可以看到除了「我要购买」最基本的CTA按钮之外、右上方有「社群软件订阅分享」按钮、以及「加入收藏清单」按钮、左下方有「促销活动」按钮等。

只要尽量排版将网页呈现的第一个画面中置入适当CTA按钮,尽可能让消费者以最迅速直觉的方式,帮助他们进入你的电商平台了解你的产品及服务,并快速完成购物流程、表单填写等,这组CTA按钮就完成它的目的。

2. CTA按钮周围要有选择产品规格选项

承续上一点,一在电子商务平台中,通常在「我要购买」、「加入购物车」等CTA按钮附近,都会有尺寸、颜色等产品规格的选项,并且让这些规格能够顺利加入购物车中,而不是选了规格之后,进入购买结帐页面后,还要再重新选择规格。

3. 标淮简洁的CTA按钮

4-cta

CTA按钮字体设计太小,难以辨识

由上图就可以很明显的比较出两组CTA按钮,光是字体大小,呈现出的效果就有相当大的不同,很明显右边的的CTA按钮很难一眼就看出它所想表达的内容,这是设计CTA按钮时,必须注意的细节。

5-cta

CTA按钮内文太多字

6-cta

简洁标淮的CTA按钮

通常电商平台常使用的标淮CTA按钮有「加入购物车」、「马上购买」、「立刻购买」、「我想订阅」等,只要内文辨识度高,若再巧妙配合版面、颜色,那这组CTA按钮的效果通常会很好。

4. 尽量以单一颜色背景呈现CTA按钮

如同上图所提到 简洁标淮的CTA按钮,素色单一的背景色,有时候更能衬托CTA按钮的重要性与即时性,提高该CTA按钮的点击机率。

7-cta

花色过多的网页背景

网页背景花色过多就会如同上方网页的样式,很难让消费者一眼就看出图中的黄色CTA按钮所要表达的意思。

虽然全球还是有公司使用此种CTA按钮设计,当中也有少数成功案例,但此种网页设计方式大多适合设计产业,以及积极表达活泼性质的公司,此种大胆的设计在电商购物平台中须审慎思考使用时机。

8-cta

花色背景设计CTA成功案例

花色过多的成功案例也不是没有,Airbnb透过主页背景影片切换的方式,展现你在全球任何一个角落居住时,美好的想像,加上「欢迎回家」这句slogan,即使你是第一次来到Airbnb首页,也会因为这种感动点下「如何使用Airbnb」这样的CTA按钮。

5. 避免边框太花俏的CTA按钮

有些CTA按钮设计的太过浮夸,在边框加上浮雕、阴影样式,对于消费者而言同样是种扰人的设计,重点还是让消费者能一目了然知道CTA按钮的内文,以及他们接下来点击后可以进入到网站的哪一个行动阶段。

6. CTA按钮颜色要和网站设计调性相同

这点就会牵扯到设计概念与色彩学延伸,对比颜色必须符合网站色彩整体调性,但又不可以过度喧宾夺主,抢了背景、内文、CTA按钮间彼此的风采,主要还是着重在「整体网页设计协调性」。

9-cta

CTA按钮需搭配「整体网页设计协调性」

像上图右方的CTA按钮设计就是过于融入背景,已经失去CTA按钮该有的意义了,有些消费者甚至可能不知道这是一组CTA按钮,左方的设计才是配合整体网页设计,又不会过度抢眼的CTA按钮设计。

10-cta

CTA按钮过大、太抢眼,也会影响整体「网页设计协调性」

7. 不要将CTA按钮置于网页内文、产品介绍之前

许多电子商务网站透过数据研究,只要是将CTA按钮放在网页内文、产品介绍前方,通常销量不会太好,这其实可以透过直觉思考去理解,一般消费者通常在还未了解你的产品和服务之前,很难想也不想、二话不说就把他们荷包的钱掏出来送到你面前。

11-cta

不要将CTA按钮置于网页内文、产品介绍之前

因此你的CTA按钮通常会放在显眼处,或是放在让消费者感动的位置之后,会是相对比较适当的做法,也有搭配以上方式,在网页多处都放置CTA按钮。

但是以上方式是在不扰乱消费者购物体验为前提,例如: 一个产品网页放置超过10个以上CTA按钮,几乎产品内文每段都放CTA按钮,那消费者不堪其扰之下,就跳出你的网页,转到其他网页购买类似的商品,而这样的CTA按钮则毫无意义。

8. 行动装置的CTA按钮必须与PC相同

网页设计者在设计应用程式介面API (Application Programming Interface)时,必须注意手机或行动装置的切版,还有CTA按钮是否可以使用且沿用PC版本的功能及画面等。

在行动装置购物掘起的时代,网页设计者必须测试多种版本、载具的API设计是否顺畅,唯独如此才能创造消费者美好的购物体验,而资策会MIC针对台湾消费者网购行为进行调查,显示有64.9%的人曾经以智慧型手机或平板电脑进行网购。但是调查也指出,不论是浏览商品资讯或是完成交易,有近7成的台湾消费者还是以PC为主要的线上购物载具。

9. 主次要CTA按钮

教你只用五招让消费者吸睛,快速提升转化率! 这篇文章中同样有提及主要、次要CTA搭配应用,有时CTA按钮不一定只有一个选项,也会有多个CTA按钮供消费者选择,等于多次曝光你的产品/服务/文章等,形式可以透过了解消费者行为,设计网页适合的位置。

12-cta

多种CTA按钮于同一页面设计

次要CTA按钮就是辅助主要CTA按钮在消费者尚未决定购物时,促使消费者导向其他产品页面、社群连结、文章介绍、电子报订阅、问与答、表单填写等页面。
如果一个网站没有次要CTA按钮,等同于消费者在还未决定是否购买的同时,没有其他选择,也就等同消费者离开你电子商务的平台,因此把握时机、位置,适当露出有关你品牌的CTA相当重要。

以下列出次要CTA按钮的型式给读者参考,除了以下当然还可以创造更多样次样CTA按钮型式,给消费者全新的体验。

次要CTA型式:

■ 导流相关产品页面
■ 倒流相关产品配件页面
■ 加入购物车的之后再买清单
■ 透过社群媒体、email分享给朋友
■ 前往其他服务页面
■ 前往问与答页面
■ 下载产品/服务相关表单
■ 试用产品/工具/网页功能

10. 产品/服务/文章等,相互连结相当重要

如果很常网购、爬文的读者,就会发现其实很多电子商务平台、部落格、网络购物商城、

自建官网购物页面等,都会有相关产品相互连结的特性,这样作一方面加强SEO关键字搜寻的优化,也让消费者在萌起想要找相关产品配件/服务内容/相关文章/软件工具的那刹那,诱使他们点击更多网页内容/行动方向,除了让消费者更了解你的产品,也消减消费者的疑问,提升转化率。

13-cta

增加网页内文相互连结,等同强化电商平台曝光机会

国际知名分析转化率效益网站HubSpot曾表示: 「透过内文相互连结的方式,提高120%的转化率。」

11. 帐户/结帐页面的CTA按钮可使用自称方式增加亲密感

14-cta

帐户/结帐页面的CTA按钮,可使用自称方式增加亲密感

无论从消费者在你的电商平台、自建官网中建立帐户,成为你的会员,到消费者查询自己的会员状态,还是查询购物车内容,其CTA按钮常使用「创立我的帐号」、「我的会员状态」、「我的购物车」,这简单的改变都可以让消费者对于你的网站有更深层的记忆印象与情感连结。

12. 关键字搜寻栏分类CTA按钮

15-cta

Zillow将站内关键字搜寻栏分为购买、租赁、销售、面谈

Zillow将网站内关键字搜寻栏做分类,简化消费者搜寻文章的时间,让消费者增加机率找到需要的网页内容,减少消费者的顾虑,提升转化率只是时间上的问题。

13. 颜色/形状CTA按钮分类

CTA按钮样式百百种,但很少有人注意到CTA按钮的色彩/形状所代表的意义,以下列出几点供读者们参考,相信未来大家也可以适时放在你的电商平台中,巧妙增加转化率。

CTA按钮的颜色分类:

■ 红色: 自信、热情、力量、青春
■ 橙色: 精力充沛、友善
■ 黄色: 快乐、乐观、温暖、忠诚、警告
■ 绿色: 和平、自然、成长、健康
■ 蓝色: 信任、合作、安全、稳定
■ 紫色: 高雅、创意、神秘、智慧
■ 黑色: 专业、可靠、高贵、複杂
■ 白色: 简约、冷静、纯粹、纯洁

CTA按钮的形状分类:

■ 方形/矩形: 力量、纪律、安全、可靠、勇气
■ 三角形: 平衡、稳定、兴奋、风险
■ 圆形/椭圆: 女性化、宇宙、永恒、魔法、神秘
■ 抽象图形: 唯一性、精心製作、魔法、神秘

14. 互动式板块CTA

16-cta

创意互动式CTA按钮

如上图,该网站是属于小额贷款的网站,透过创意式landing page(登入页面),消费者可以透过调整CTA的金额,进行首次小额贷款,会比「我想贷款」、「加入会员,即可贷款」来的更有趣生动,让消费者印象深刻。

介绍完大致现有的CTA按钮后,相信你也可以从设计标淮简洁的CTA按钮开始,在倾听客户需求的过程中,适时适地的置入CTA按钮,同时常常注意「整体网页设计协调性」,透过A/B testing分析每一次CTA按钮更改对你的网站转化率的改变,甚至是创造全新的CTA模式,为进入你网站的消费者带来全新体验。未来我也将分享如何透过A/B testing进行各项分析。

AB测试 黑客增长 二维码

3436 Views
即刻实践文章理论 A/B测试 灰度发布 产品优化 免费申请
Please wait...

订阅我们

对于每位订阅读者,每两周,吆喝科技会为您发送4篇精选文章,可能是最新的A/B测试实践,也会是你所期待的增长干货。