网页设计如何影响转化率?这个热力图研究你一定要看看
网页设计在非专业人士的眼中,似乎只是让网页更美观,更吸引用户。然而这只是网页设计起到的作用之一,更美观的页面当然可以让用户有更多的兴趣去探索,然而当雇佣一个专业的设计师或团队来设计的网站,其最终目标必定是为了将流量高效的转化为最终目标,比如变现或者注册成为会员。
一个专业的网页设计师就像是一名战略家,他们懂得灵活的布局并运用各种视觉元素,如颜色、位置、对比度、形状、大小等等,战略性地组织页面,增强页面的层次感,在页面美观的前提下让重点部位真正的凸显出来,让每一个来访的用户都可以注意到我们想让他们注意到的。
先来看一下下面的这个实例:
页面风格非常简约,没有什么特别花哨的地方。当用户来到这个页面时,他们的目光往往被中央的两行英文与下面的“免费注册”蓝色按钮吸引。其中,“免费注册”这一类的按钮我们称为CTA按钮,CTA即“call to action”,“用户行为召唤”,这种按钮是所有用户转化的起点。而网页设计师的基本要求之一就是,在整体设计中,让这个按钮永远能被用户的目光捕捉到。
国外的一家网站techwyse针对用户在着陆页上的目光聚焦部位做了一份调查,该调查的结果以网站热力图的方式呈现。在这份调查中,每个用户在页面上的停留时间都限制在五秒内,通常这个时间也是让用户决定是继续浏览还是离开页面的时间范围。
第一次测验,原始页面:
第一次测验时的页面热力图:
可以看到,最受关注的就是背景色为红色的“No fees”图标,第二个红点区域在左下方的图形,其他部位受到的关注较小,左上角有小规模的区域热力较高,这也符合人们浏览时习惯从左上角开始的习惯。
该网页上的No fees借用高对比的红色,获得了最高的关注,然而这个图标并没有任何点击效果,不是一个CTA按钮。而该页面真正的CTA按钮位置是蓝色的,尽管按钮的图形不小,然而并没有获得任何的关注,这样的页面设计白白耗费了流量。
之后,该网站对测试页面进行了改版,减小了页面信息量与杂乱程度,进行了第二次测试。
二次测试的页面图
二次测试的热力图
显而易见的,这次改版如果放在商业角度,可以说是失败的。同样是由于颜色的原因,用户的视线会直接被右方的红色卡车图片吸引。之后还会被左侧的红色图标吸引。而CTA按钮的位置其实非常合理,但是由于颜色以及对比度的原因,在初次来访的用户视线中,就像不存在一样。
在这之后,该网站又对测试页面进行了一次改版,终于获得了理想的成果。
三次测试的页面图
三次测试的热力图
在这次改版中,他们将网站结构保持不动,删除了中央的图形,将卡车的颜色从红色改为蓝色,并将CTA按钮的颜色从蓝色换成了对比度更高,色彩更鲜活的黄色。在这次的实验中,来访的用户从进入页面到离开的五秒内,视线多次聚焦到主要的CTA按钮上,当视线离开CTA按钮后,浏览其他要素后还会再次聚焦到该按钮。
从这次的测试中,我们看到了颜色以及布局在设计上对用户最终转化的影响力。在本站以前发布的文章《数据告诉你颜色对于网页设计有多么重要》中,通过调查得到的结论是:红色,橙色与绿色是作为CTA按钮的最常用颜色,其中,大的橙色按钮是cta按钮的未来趋势。