CTA按钮设计

冰岩作坊 October 4, 2022

CTA,即“Call to Action”的缩写,意思是行为召唤。CTA即网站中用于提示用户点击并进入下一个转化流程(比如下单、订阅、关注等)的横幅广告、按钮、或某些类型的图形和文字。目标就是不断得引导用户们用手指去点击,以提升业务转化。因此CTA按钮在一个页面中的优先级通常是最高的。##

CTA按钮的合理性,即用户是否可以轻松触达的能力要求。可以分为两种能力——视觉触达能力和交互触达能力这两种能力分别对应着两种典型的方法论——古腾堡原则和菲茨定律* 古腾堡法则
起点和终点更容易引起用户的注意,而由起点至终点的这条对角线路径则称作阅读引力路径。

因此,根据古腾堡的原理,那些相对重要的元素则适合放置在阅读引力路径上:左上角、中间和右下角。

这个定律指出,用户从起点移动到终点目标所需要的时间,由至目标的距离和目标大小决定。

按钮的尺寸越大、或者按钮所在的位置距离指针/手指越短,点击效率就越高。

底部按钮距离用户的手指最短,因此将按钮放在底部位置可以有效降低交互成本。

用户进入界面后会首先进行信息的扫视,最终的视觉落点将会停留在结尾。因此将行动点放置在底部位置可以有效抓取用户的注意力。但如果我们将按钮放置到顶部或者内容中,将会导致视觉回流,延长阅读时间。

airbnb的预订和boss直聘的立即沟通,都属于典型的CTA,所以它们全部被放置在了底部。并且由于一屏内无法展示所有内容,所以按钮始终保持了吸底状态,不论浏览到哪里,用户始终容易将更多注意力分配在CTA按钮上。

反面的应用

  1. 敏感操作
    比如发布动态场景的发布按钮,故意放置在顶部是为了让用户通过视觉回流来重新检查自己将要发布的内容。取消同样至于顶部,和发布不同的是,取消是一种消极的、包含损失成本的回退行为,所以往往和“返回”功能一样,会被放置在更不便于点击的左上角。并用颜色来弱化。(但是,返回可以通过侧滑手势)它们的共性,都是去告知用户谨慎操作。1. 违背业务目标的操作

最常见的开屏广告的“跳过”按钮,不仅仅放在右上角,按钮尺寸还异常得小。有些甚至用了极低的遮罩透明度。另外,一些不想用户跳过的流程,也会故意通过位置对「跳过」按钮进行弱化,比如新用户引导中的一键关注,一键订阅等等场景。「跳过」违背业务目标,所以往往会被想法设法得进行弱化,通过提升能力要求来降低你点击的可能性。### 水平多个按钮

水平方向存在多个按钮的情况同样可以用古腾堡法则来判断位置。由于阅读引力路径的终点在右下角这个位置,所以我们最想让用户点击哪个按钮,那就将它放置在底部的最右侧,让用户以最短的时间注意到它。最典型的例子就是各类弹窗,那些正向的、鼓励性质的、高优先级的CTA按钮往往被放置在右下角。当然也有很多的页面场景也是这样,产品最关乎转化的行动点总是被安排在了右下角。

反面的应用

比如iOS的共享相簿请求的接受按钮放置在了左侧,拒绝放在右侧,这是为了避免用户误点垃圾邀请。

而高德地图在退出导航的二次确认场景中,高亮的「退出导航」放在了左侧,「取消」放在了右侧,这是考虑到导航属于高风险型场景,在此场景下司机是高度专注的。而退出导航所发生的时机往往是到达目的地或者导航出错的情况下,所以需要尽可能避免司机专注驾驶时,误点退出导航导致的一系列危险后果。

垂直多个按钮

同样的,根据古腾堡法则,底部位置处于阅读引力路径的终点,所以我们最想让用户点击哪个按钮,那就放置在最底部。但是,目前绝大部分的设计并没有按照这个来。那些正向的、鼓励性质的、高优先级的CTA按钮往往被放置在了上方。可能是由于眼动路径所引起的。垂直布局下,用户浏览时的眼动路径单纯向下,这种由上自下的浏览效率是最高的。

提起CTA按钮的形状,我们印象中基本能想到三类:矩形、圆角矩形和全圆角矩形。这三类按钮形状本质的区别就在于圆角的不同。那么问题来了,CTA按钮为何会有圆角的差异?圆角背后有哪些特性和适用情况?### 圆角具有亲和感

圆角代表了安全,直角代表了危险。### 视觉聚焦

形状本身也自带了“视觉引导”的属性。拿圆形直角矩形、圆角矩形和圆形举例:

圆形以及圆角矩形不存在任何的尖角,没有任何突出的焦点,圆周以及圆角矩形的四个圆角会产生一个向中心过渡的趋势,引导视线聚焦到形状内部。其中以圆形聚焦性最强;

但是,矩形的四个顶角则形成了四个视觉焦点,人眼看矩形时,他们的视线其实倾向于发散而非聚焦。当然,易于发散的缺点也同样导致了矩形在视觉上辨识速率更慢。

因此,直角矩形本身倾向的发散感和疏远感,使得大多数的产品更乐于采用圆角矩形甚至全圆角矩形来作为CTA按钮的形状。

由于圆形本身最强的聚焦性和辨识性,很多CTA按钮会倾向于使用全圆角的形状。

线上营销互动和各类付费业务的行动按钮,大多会采用全圆角按钮的形状来迅速抓取并聚焦用户的注意力,提升用户采取点击行为的可能性,继而提升转化的可能。

### 圆角与产品调性

受圆角亲和感特性的影响,拥有活泼、童趣、热情、接地气这类调性的产品往往比那些偏向冷静、成熟、严肃、高端类的产品更适合全圆角风格。比如淘宝、微博的登录按钮全部使用了全圆角按钮,而QQ更加极端得省略掉矩形的边缘特征,直接以圆形作为登录按钮来凸显年轻的定位。而知乎、微信和支付宝这类偏严肃、冷静、成熟调性的产品统一采用了圆角矩形。## 使用清晰有价值的提示文案

页面中的CTA 按钮通常带有明确的目的,比如注册、订阅等等,因此在CTA 按钮上尽量不要使用“提交”或“发送”这类含义太宽泛的提示文案。

相反,最好使用与当前的操作精准匹配的明确提示,例如引导用户订阅某个话题时,在CTA按钮上使用“立即订阅”会比使用“提交”更清晰。

但清晰的提示文案能够第一时间告诉用户,他们点击按钮能实现的目标,所以这个设计点值得被大家重视。## 合理利用FOMO心理

FOMO即Fear of missing out,通俗点讲就是怕错过,错失恐惧症。比如,”今日限定买二赠一活动”,”厂家促销,最后一天”诸如此类。在设计CTA按钮时也可以利用用户的这种心理## 巧用色彩情感,优化CTA按钮

相比于文字,采用不同色彩突出想要表达的主题更为直观与高效。下方列出来常规情况下色彩与感情的对照表供大家学习参考。

通常来说,饱和度更高,更醒目的颜色更能引导用户进行操作。例如下图中的立即购买的红色就比加入购物车的黄色更加显眼。Tips: 尽量不要将最主要的CTA按钮与页面中的其他元素或者背景混合在一块,以免降低用户的注意力。## 添加描述性说明

有时候光靠一个CTA按钮可能告诉用户更多产品的亮点或者点击后的好处。在这样的情况下,可以为CTA按钮额外添加描述性的说明,加大用户点击的预期。这类描述性说明要根据产品的特点而定,重点突出能够吸引用户的地方,例如能为用户带来方便,或者能让用户看到优点,或者能降低用户的焦虑,进而触发用户点击。

左图是在告知用户更新不需要耗费流量,目的是消除用户的顾虑。右图是在提醒用户当前可以领券购买更加优惠,目的是让用户看到下单的好处。总而言之都是在促使用户去点击CTA按钮,从而提升转化。