CTA怎么设计才能提高转化率?小按钮,大学问
Call-To-Action(CTA)是我们常见的用户交互元素,也是数字营销中的一个转化率优化课题。好的CTA设计可以提升转化率,而糟糕的CTA设计会平白浪费宝贵的流量。极诣将以此文为读者总结CTA设计的要点。

什么是Call To Action?
一般译作行动召唤。是指页面、视图、电邮、广告中号召指引用户产生特地行为的交互元素。比如常见的“了解更多”按钮,“立即注册”按钮。如果没有CTA,用户会有这样的疑问——“我来到这个界面,你到底期望我做什么?”这样你的内容就单单成为informational的内容,而不是transactional的内容了。
设计CTA的时候需要考虑哪些方面?
首先,请在心中默念三遍:“好看不一定好用”。在设计CTA的时候我们通常从下面几个方面来考虑:
- 数量
- 位置
- 形状
- 颜色
- 大小
- 文字
- 移动版
可以说一个优秀的CTA沁透了优秀的已转化为中心的设计师和营销者的良苦用心和满满的爱!
CTA设计在数量上有哪些考虑?
我们常用的CTA有单个使用的,也有两个一组使用的。一般不建议超过两个。单独使用时CTA更给用户“强势”的感觉,也就是暗示在此界面中,执行该操作是唯一选择。单独使用CTA是许多落地页的普遍用法。然而,有时我们也可以留给用户一些后退的余地,加入第二个CTA。在这两个CTA之间我们可以留有差别,也可以使用同种设计不注入我们的倾向让用户自己决定。
如果你运营着一个在线社区,你可以在落地页放上一个醒目的“立即加入”按钮。但是如果你觉得让用户先以匿名游客看看更能够帮助转化则可以在此按钮旁边加上第二个“匿名预览”的按钮。下面这个Spotify的落地页是另一个优秀的范例

CTA应该放在什么位置?
CTA应该放在界面的醒目位置,如果是网页中则应该放在第一屏。CTA应该放在你的营销信息之后,在访客视线的必经之路上。许多时候我们还会用箭头来帮助用户更加容易地找到CTA。

为了使CTA更为醒目,你需要在其周围留足空白。我们之前在讨论交互设计师素养的时候也提到过这点。当然你也可以通过人物视线来引导访客视线,如下图:

我们之后还会讨论手机版的情况。
CTA的形状有什么讲究?
你可以用几个文字或者一个图标来构成CTA,但是作为CTA的按钮的点击率大多数情况下会远超前者。毕竟“被点”这件事上来讲,按钮就是为此而生的。
为了让按钮更像按钮,我们可以调整材质、纹理或利用阴影来凸显按钮。你可以使用圆形或圆角矩形来与输入框的长方体区别开来。不过请务必保证平台按钮不会形状各异五花八门。
下面的案例中百度用了一个无法点击的按钮形状文本“您还在等什么呢?”让人十分无语。

作为CTA的按钮推荐什么颜色呢?
许多时候我们选择按钮颜色都是因为我们品牌的VI,或者说老板色,身不由己。但如果让你放开大胆选择你会选择什么颜色呢?

CTA按钮用什么颜色似乎早有定论。比如红、绿、橙(黄)依次是转化率最高的按钮颜色,而黑、白、棕依次是转化率最低的按钮颜色。看着这个结论我们其实可以说许多故事,比如红色代表激情,绿色代表通行,橙色代表温暖安心等等。但极诣还是希望读者结合按钮所在的页面颜色选出优秀对比度且更吸睛的按钮颜色,除非……
除非你想用鬼按钮!
鬼按钮(Ghost Button)就是那些空心的只有框没有填充色的按钮。这种设计苹果爱用,已经流行了几年。鬼按钮看上去很干净,与环境自然地融为一体,以至于让人忘了要去点击。因此鬼按钮不是任何人都能驾驭的。

虽然有许多“国际品牌”都曾经或者正在使用鬼按钮,但是极诣还是想劝退营销者们尽量避免使用这种设计。如果要使用请增加按钮的尺寸来填补存在感低的问题,也可以仅在次要CTA使用鬼按钮(如上面Spotify的例子),以此来衬托作为主CTA的实心按钮。
尺寸并不是越大越好?!
按钮的尺寸并不是越大越好,按钮太大会变丑只是次要原因,主要原因是因为太大的尺寸会吞食周围的留白。作为CTA的按钮在尺寸方面还有一个常见的问题是将按钮和上方的输入框设计得一样宽,这里就不举例了。这样的设计会让按钮变得不像按钮。正确的做法是将按钮设计得略短于上方的文案或者输入框。这在平面设计上叫作倒金字塔设计,会增加行动的紧迫感。

CTA上的文案有哪些注意点?
相比“查看详情”,“了解更多”这样的“大街货”,你可以更加个性化地设计按钮上的文字,如“免费领取课程大纲”,“开始七天无限试用”。最重要的是要体现价值让用户有收益的预期。

在按钮周围,你或许需要一些其他文字来扫除用户点击的顾虑,如“30天价格保障”,“7天无条件退款”等。你也可以通过这些文案来增加转化紧迫感,如“仅剩32份”,“剩余36小时”。不过要注意的是不可以欺骗用户哦!
你需要明确用户行为的预期,如果点击了以后就冷不防自动下载一个100M的APP,你可能一开始就失去用户的信任。
最后,CTA按钮内的文案不易过长,毕竟越短越有力。你还要避免在按钮文字最后以感叹号或问号这样的标点符号结尾,这让你的CTA看上去不像CTA。
移动设备上的CTA一样设计吗?
当然不一样!你有没有遇到过手机上输入法打开后把表单下面的按钮挡住的情况?在小屏上设计CTA需要有场景方面的考虑。
一个移动设备UI设计师熟知的概念叫作拇指区域(Thumb Zone)。这是当人们单手握手机时拇指能覆盖的操控区域。

上图很好地解释了拇指区域,你需要把CTA安放在绿色区域才不会给正在交互的用户造成困扰。
除此之外,按钮在移动设备上要达到足够让胖手指的用户轻松点击的安全大小(你的手指会遮住按钮)。你更需要对CTA周围进行留白排除干扰。

CTA的优化方法是?
至此,我们讲了许多CTA的雷坑也讲了一些最佳实践。那么CTA究竟如何优化呢?唔呣,当然是A/B测试了。A/B测试不同的CTA可能是最容易测试的元素了,很容易在Google Optimize这样的工具中进行。不过你还可以使用鼠标跟踪和眼球跟踪等手段,此时你或许需要专业的团队来协助。