按钮设计影响网站转化率

优选, 设计

按钮设计(Button User Interface Design简称UI)是影响网站转化优化(Conversion Rate Optimization简称 CRO)的一个非常重要的因素。在日常生活中,以下谈到的按钮设计原理随处可见。

按钮是交互设计的常见元素,它传达了即将发生的动作。虽然看起来按钮是一个非常简单的UI元素,如果设计得当,它们可以大大提高您的转化率。在本文中,我们将分享按钮最佳实践(基于个人经验和一些不靠谱的数据)。

就这么一丢丢东西,他的术语和组成原属还真不少。

 

看起来像按钮

视觉提示可帮助用户确定哪些是可点击的内容。所以请务必在可点击元素上使用适当的视觉提示,以使其看起来像按钮。其他视觉提示还有比如下划线,不同颜色和鼠标光标等。

形状

具有圆角的按钮(rounded)比具有尖锐边缘的矩形在眼睛上更容易,因为它们在视觉处理上需要较少的认知。

the Barrow Neurological Institute 对拐角的科学研究发现,“锐角比圆角产生更强的幻觉”。意思是,拐角越尖,看起来越亮,越刺眼。

带有尖角和不带有尖角的极端例子

 

为什么圆形(是说rounded,不是round)按钮效果更好?另一种解释可以追溯到儿童时期的发展心理学,我们知道尖角伤害,而圆角更安全。这就是为什么当孩子玩球时,大多数父母并不担心,孩子玩叉子则担心。

最后,圆形按钮是更有效的内容容器,因为它们向内指向矩形的中心。带有尖角的矩形按钮指向外部,视觉焦点放在矩形内部的内容较少。所以,一般来说品牌用尖角可以造成一定的视觉压力和冲击性;而转化较高的是圆角(一般为4px或者0.3rem的圆角)

根据康定斯基的点线面理论,带有尖锐边缘的矩形按钮指向外部,而圆形按钮指向内部,从而将更多焦点放在按钮内部。

 

尺寸

当“轻按”是移动设备和平板电脑设备上的主要输入方法时,您要确保用户可以轻松点击到按钮。MIT Touch Lab触摸实验室研究的结果发现,指垫(finger pads)的平均值在10-14mm(38-52px)之间,指尖(fingertips )的平均值在8-10mm(30-38px)之间,使10mm x 10mm(38px x 38px)成为最小的触摸目标尺寸。

图片来源:uxmag

苹果公司的《 iPhone人机界面指南》(iPhone Human Interface Guidelines)一直建议按钮的最小宽度为44px,高度至少为44px。但是,如果您使用的空间较小,建议您将按钮的高度设置在32像素至40像素之间。同时,Android的Material Design原则建议触摸目标的宽度至少应为36px x 36px,按钮之间的间距至少应为6px。

按钮之间的间距

与传统鼠标光标相比,紧凑包装的按钮使用户更难准确地敲打手机或平板电脑。为了防止用户因意外按下错误的按钮,按钮应与其他敲击目标保持一定距离,以使8-10毫米(30-38像素)的指垫(finger pads)不会意外地同时按下两个按钮。

确保按钮之间有足够的填充。(一般至少为6px)

图片来源:材料设计

颜色

多年来,按钮已经发生了天翻地覆的变化,但只有一点没有发生任何变化即:使用颜色和对比度来指导用户采取重要的行动(CTA)。

颜色在按钮中非常重要,它可以帮助用户更清晰地理解操作。对于患有色盲的用户,您永远不要同时使用红色和绿色,请选择绿色或红色任意一种作为号召性用语,但绝对不能同时使用。

图片来源:http://uxmovement.com

在数字接口上广为流行的一种颜色是橙色-橙色,仅次于红色。但是它并不能消除所有红色的负面情绪,例如“停止”,“危险”,“错误”,“错误”和“危险”。我们已经看到一些最大的零售品牌,例如耐克,J-Crew和亚马逊,使用不同的橙色调作为号召性用语以吸引用户并获得点击。

耐克使用橙色的号召性用语按钮引导用户。图片来源:Nike.com

对比

除颜色外,还应使用对比度来帮助用户在不同按钮之间进行选择。对比的UI按钮设计规则很简单:

  • 高对比度-积极行动。
  • 对比中等-消极行动。
  • 对比度低-中立行动。

例如结帐页面,你想通过赋予此按钮最高的颜色对比度,使用户参与积极的操作。旁边放置的任何中性或负面动作都应具有较低的颜色对比度,以免再强调它们。

字体大小

用户扫描文本,而不是逐字阅读,以快速吸收页面的要点。使字体变小会妨碍用户更快地浏览内容。Payame Noor大学IBM / Google进行的研究表明,随着字体大小的增加,读者的阅读速度会略有加快。

我这里有一篇写给大家看的建站字体方案,探讨了适合您的字体大小的比例。无论您选择在按钮中放置什么字体大小,只要确保它足够大以供用户扫描即可。最佳Web字体大小为16像素,通常应为现代Web设计中正文复制的最小大小。

布局位置

一般来说,一个页面的左侧是目录或者信息的一侧,用于快速查找内容。一般是左对齐的list等。比如下图的导航,缩略图等。右侧是号召行动的一侧,比如购物车和按钮都是在最右侧。右侧的转化率更高。

一屏一个主要按钮

一个屏幕中应该只有一个主要按钮,这样我们的潜意识不会纠结应该点击哪一个。如果需要有多个功能不同的按钮,则非重点按钮尽量改为次要按钮样式。

如果不考虑内容,上面米课表格可以改为转置为右侧按钮;右侧是行动侧。为了避免同时出现多个按钮造成混淆,可以在pc端鼠标滑移hover后出现。另一种布局方式是每个课程一个屏幕。

常见应用

按钮配合文字,可以组成CTA元素。

配合表单,Contact Form中也必不可少按钮。

结论

上面所谈到的也是个人当前的认知,按钮的原理也时刻变化;不同的行业和网页不同需求,按钮的原理也不尽相同;为了找到适合不同行业的按钮样式,最好的方式是实践和测试(Split test等)。总之按钮是创造流畅的用户体验的重要元素,值得关注。

从一个网站开始

电话 *
Fill out this field
Select an option

关注微信公众号

上一篇文章
邻居这几年发展业务的秘密
下一篇文章
合同模板
菜单