网页设计 » 视觉设计 » 提高转化率的界面,终极触发设计指南

提高转化率的界面,终极触发设计指南

发表于: 视觉设计. 评论
Sponsor

不论是网页设计师还是电商设计师,转化率是非常重要的KPI。如下图“PUSH HERE”的控件,它不仅仅是UI界面设计的一个元素,更是引导用户点击网页或商品的终极“触发”。如果没有这个按钮,网页就不会形成二次点击,商品详情页之后不会形成购买。

提高转化率的界面,终极触发设计指南

“PUSH HERE”的触发按钮

在这里我们先解释一个名词:CTA,CTA即是“Call-to Action”的缩略语。任何形式的UI界面设计,营销人员都希望用户能够进行下一步的动作,最终形成购买,提高转化。然而越来越多的电子产品让现代人的注意力难以集中和专注,任何一个小东西都能分散我们的注意力,因此设计一个出色的Call-to Action Button变得极为重要。

在UI设计中 ,CTA是一类具有特殊功能的控件,能够引导用户立刻进行下一步操作的控件(通常位于比较明显的位置,优先级高于其他按钮)

提高转化率的界面,终极触发设计指南

本文将告诉您如何通过文字引导、按钮颜色、按钮大小和位置,去抓住用户的注意力,为营销带来高转化率。

文字引导

艾伦要打印一些东西,但是排队的人很长,她想插队,所以她用了三种提问方式:

1、不好意思,我有五页纸要复印,能让我先用吗?——60%的人点头

2、不好意思,因为我有急事,能先借我用下打印机吗?就五页。——94%的人点头

3、不好意思,因为我想复印,能先借我用下打印机吗?就五页。——93%的人点头

你看,“原因”一词的位置和后面的内容导致了结果如此不同。人们通常更关心“原因”而不是“结果”。

因此,不要忽视了中文里不同词语的强大力量,它们具有非常大的说服力。有专家表示,在简历中加入一些涉及情感的特定词汇,可以让您的简历更能打动HR。

提高转化率的界面,终极触发设计指南

例如上图的网页设计中,搜索框旁边的触发控件是“TRY FOR FREE”,设计师Stack利用了“FREE”一词的双重含义:免费点击、自由选择。这样的按钮是不是看起来很棒?

许多网站在CTA控件设计时采用的另一个策略是“利用词语自身传递的信息”。比如动词就能很直接地传递信息,它能触发用户采取特定的操作,用户点击控件是因为他们很明白按钮的意思。

使用较多的动词如:

英文:Try It Free, Learn More, Get Early Access, Get Started。

中文:免费尝试、了解更多、进一步了解、从这里开始等。

提高转化率的界面,终极触发设计指南

控件颜色

CTA是冯·瑞瑟夫效应最好的案例,也被称为隔离效应。这个效应是对视觉产生记忆的预测,它简单解释为:当有多个相似物体共同存在时,与其他物体不同的那个最容易被记忆。

这也是为什么必须将CTA控件设计得与众不同的原因。

提高转化率的界面,终极触发设计指南

首先,确定CTA控件的设计要素:颜色、视觉效果、排版等,同时还要让它们具备可读性、易读性和高对比度,正式发布前,要进行不断改动和测试。

Starkplugin是一款非常好用的、协助您进行对比度检查的软件。像花哨的渐变或太过鲜艳的颜色,Starkplugin都会显示是低对比度。如下图所示。

提高转化率的界面,终极触发设计指南

对比度不仅仅是设计一个CTA控件要考虑的问题,整体也要考虑对比度。强大的CTA控件不仅能做到对比度的自我协调,还能实现整体协调。

Sketch的着陆页就是一个非常完美的案例。它显示了CTA控件的重要性,还有协调性;不仅塑造了良好的品牌形象,更极大地抓取了用户的眼球。

下图是它的着陆页,作为设计师的您千万别错过!

提高转化率的界面,终极触发设计指南

控件尺寸

尺寸也是设计CTA控件时需要重视的要素。控件尺寸不仅取决于自身的内容,还受到页面周围元素的影响。

设计界有一个通用的标准,基本能够适用大部分页面,包括针对老年人开发的页面。如下图所示。

提高转化率的界面,终极触发设计指南

研究表明,42-72像素之间的按钮视效比最高。这意味着42像素是最小值,72像素是最适合用户的按钮大小。

大的按钮会吸引用户的绝大多数注意力,让用户看不到网页提供了什么服务,这对页面的其他内容会产生重要影响。然而使按钮太小会严重影响其操作性,没有什么比按钮太小而无法按下更令人沮丧的了。

移动端则面临另一个常见问题。Scott Hurff曾提出一个理论:“为手指设计”,您要留意一下它的意思。这个理论告诉我们,要在手指的自然弧度范围内创建最舒适的界面。

提高转化率的界面,终极触发设计指南

IPHONE的手指区域热图

显而易见,移动端的CTA控件必须做到高度舒适。仔细对照参考上图所示的手指区域热图,就能很容易知道按钮在哪个位置最舒适,而在该舒适区内,会极大地提高点击率。

控件位置

用户在使用界面时,线性路径的设计至关重要。通过文字引导和合适的按钮位置,让用户自然地访问界面,那么就能够使用户更快地注意到您的CTA控件。

这就是菲特定律。

菲特定律:获取目标的时间是到目标的距离和大小的函数

因此,缩短到CTA控件的时间和距离,对提高转化非常有帮助。

提高转化率的界面,终极触发设计指南

仔细观察注意力热度图,你会发现最常见的阅读模式是F型。近几年的人眼追踪研究表明,F型模式仍然存在,而且同时适用于PC和移动端。

这种迷人的阅读模式是由于人类本身的行为学,而不是一种技术,这意味着“搜索”控件可以放在左下角。

Airbnb的设计师们采用了一种不同的方法。他们利用z型布局和古登堡图。CTA控件被放置在终端区域,用来与其他内容区别开,并触发用户点击。

提高转化率的界面,终极触发设计指南

当用户到达表单的右下角时,浏览过程停止,需要让用户知道该进行什么操作,因此这是插入Call to Action元素的最佳位置。

总结

CTA控件会对转化率产生巨大的影响,并且是页面设计中最重要的元素。通过牢记一些基本的设计原则,你可以让你的按钮脱颖而出,并抓住用户所有的注意力。

最后,通常情况下,创新并不是那么必要,有时真正做好某事的最佳方法是向行业领袖学习。仔细研究一下最成功的互联网公司,看看他们是如何围绕着CTA控件来组织内容的,这将帮助您找到适合您的、最大程度提高转化率的界面。

原文作者:Jim Raptis
原文地址:https://medium.muz.li/call-to-action-an-extensive-guide-140fef523b08
翻译作者:秀芳 | 运营设计师
编辑整理:铅笔头 | 设计达人编辑组

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }