登陆页面:转换设计背后的科学
是你的登录页转换好吗?它是否会转换得厉害?你知道为什么吗?我的意思是,你真的知道吗?
这篇文章将告诉你为什么你的登录页是否吸引了访客,或者,为什么您可能会获得流量-但没有转换,以引导您通过登录页优化.
我来看看着陆页面设计原则这可能意味着一个成功的页面和一个只是占用空间(或在黑暗中摸索)的页面之间的区别。
让我们开始吧。
1.定向线索
方向性线索是登陆页面设计的关键,因为它们告诉人们应该关注什么。
在设计时最重要的是要记住登录页那是人们不像他们做书一样看待它。它不是右边的,上到底。您必须告诉人们如何阅读您的页面,以及方向性提示(以及下面的封装和对比)是您的方式。
我的建议是在你的登录页面上决定两件你特别想引起注意的事情(比如,你的CTA和你的产品形象,或者独特销售主张).然后将以下策略整合到你的设计中,并进行a /B测试。(什么好登录页生成器这会让A/B测试变得简单)。也许你的观众对明显的箭头反应很好,也许是更微妙的眼神。自己测试一下。
我们在登陆页面中发出焦点三种主要方式:
箭头和线条:
把注意力引向一个物体或标题的最直接的方法是画一个箭头或一条线。艺术专业的学生将知道线的重要性,因为人类有一种自然的(潜意识的)意识跟随他们到达他们的出发地或目的地的冲动。这非常有助于将人们的目光集中在你的CTA、USP、价值主张或产品形象上。
视觉方向觉察:
人类非常善于识别周围人的眼睛焦点。我建议在你的登录页面上使用眼球追踪软件,以确定人们关注的地方,以及这种关注是否会增加点击率。
我想说的是(感谢Neil Patel提供的眼球追踪例子):
面部是你能使用的最吸引眼球的图像(见下面的第5页),眼睛是面部最吸引眼球的部分。
你会注意到左边的女人正直视着镜头(或者是你页面的访客)。右边的女士正在看Sunsilk想要销售的产品。你可以具体地看到,最初的目光是如何转移到女性的眼睛,然后转向左边的产品,而左边的脸得到了所有的注意力,而产品没有。
指向/打手势:
我强烈建议您在登录页面中使用一个人的图片,因为它被证明是最吸引人的图片(不过,稍后将对此进行详细介绍)。然而,需要测试的是,让模型做手势或指向你想集中注意力的东西。
不过,这是一个危险的问题,因为(在我看来)如果做错了,它可能会给人留下俗气的印象。测试你的听众的反应。在许多案例研究中,我发现这既提高了转化率,也降低了转化率。
对比
颜色对比:
对比是必不可少的登陆页面的设计人的眼睛自然被吸引到对比色。我建议你考虑USP和CTA的颜色对比——也许是深蓝色背景下的橙色CTA按钮。
空格:
空白的概念在平面设计界是众所周知的,它也是登陆页面设计的重要组成部分。这个想法是,空白空间在将注意力集中到非空白空间方面具有极大的影响。例如:
另一种利用空白的方法是封装,而不是在你的CTA、USP或优点列表周围加上边框(参见我的文章)降落页面基础和转换原则对于基本着陆页变量),尝试使其周围的区域缺乏任何有趣的东西。清洗颜色,取出图像。这将有效地引起对象的关注,因为它将远远超过它在繁忙区域。
这会比定向提示更好吗?为自己测试它并找出答案!
格式对比:
格式化大小(例如字体)也吸引眼球。在2010年为期4周的多元测试中,Paras Chopra.测试了行动号召和描述性链接的12种不同组合的性能:
选项10,最大的颜色,色调和大小对比(以及自由这个词)产生60%的转化率提高。
3.颜色
颜色非常(虽然无意识地)有效地在观众中引出情感。我在我的系列中深入了解颜色心理学成功的Facebook广告背后的科学,所以检查一下综合分析(科学!)。
现在,这里有一个关于人类如何受颜色影响的分类,以及这些知识如何提高转化率:
蓝色的不论男女老少,蓝色都是大多数人最喜欢的颜色35%的女性和57%的男性.据说它能产生信任感和安全感。浅蓝色让人平静,而深蓝色则表示专业和真诚。
橙色:引人注目,明亮而阳光明媚,橙色是最受欢迎的颜色之一登录页行动号召。虽然一个好的色调和数量的橙色被认为是温暖和诱人的,但太多的橙色与天真和缺乏专业精神有关。
红色的红色让人联想到激情、兴奋和紧迫感。红色在广告中是一种危险的颜色,因为许多人将红色与消极和错误联系在一起。然而,它比其他颜色更能吸引眼球,给人一种时间过得更快的印象(因为它让我们的心跳加快),促使我们采取行动。
绿:与财富以及环境科目有关,绿色是最简单的眼睛处理的颜色。绿色也意味着积极的行动(思考,'绿色意味着走')和肯定。
绿色和蓝绿色也常与精打细算的购物者联系在一起廉价购物者在男性和女性中,它分别是第二和第三流行的颜色。
紫色的:紫色是女性中第二流行的颜色,与平静、女性气质和财富相关,占23%。有趣的是,随着女性年龄的增长,他们越来越喜欢紫色.另一方面,紫色是男性人口的0%最喜欢的颜色。
黑色有力、圆滑、知性,黑色象征永恒、真诚和老练。虽然黑色和红色、橙色一样,如果用得太多会很危险,但如果与强烈、透明的白色搭配使用,可以传达出专业和老练的信息(避免灰色或古铜色,因为它们会淡化你的信息)。
4.图像
我可以在你的登录页面上讨论一个微笑的人的照片的有效性几个小时(我有…),但请相信我,拥有一张照片(尤其是一个人)可能会提高你的转化率。
事实上,我最近看到的是,在主登录页中加入了一份客户推荐信](https://www.wishpond.com/landing-pages)形象。选择一个上镜的客户,将其贴在一个听起来很棒的肯定词旁边,肯定你的产品或服务是如何让他们的生活更轻松的。
但是让我们留下这一刻,假设你认识到其重要性,并谈论它为什么工作:
- 我们对人(或宠物,尽管人们通常会引起更强烈的反应)的反应远比我们对文字或随机图像的反应更情绪化
- 一个人的图片为你的文件提供了文件登录页-人们对此作出反应的故事。
- 我们完全下意识地关注我们看到的人的脸(尤其是眼睛)。在我见过的每一张眼球追踪图像中,最热门的点都是脸和眼睛。当然,除非图片是女性,而我们谈论的是男性。然后眼球追踪软件就会显示出我们的注意力在……别处……
在我为这篇文章所做的研究中,我看到了V.S.Ramachandran(牛津大学的神经学家)的一篇文章,他写道,通常情况下,线条画比照片更有力。他写道,这是因为一个人的“想法”比它的真实性更有吸引力(为什么这么多的艺术都是对人类形体的夸张,或者为什么漫画在美学上如此令人愉悦)。忽略细节,你所剩下的就是事物的本质。
虽然我还没有在a中见过这样的例子登录页我相信,无论是谁,点击率都会大幅增加。发挥创意,让我知道它是如何发展的!
5.排版和风格
你会认为我在这里过于详细说明,那个不同的印刷,文本格式或风格无法实际增加或减少足够的转换率。
这是我的问题A / B测试:细节很重要。
比如说你的电子商务网站登录页目前正在转换为23%。您可以看到每周约有2,000位游客的交通,平均购买值50美元。你每周制作23,000美元。
比如说,我们改变了你页面的标题长度,将图片从一个女人看摄像机的画面改为一个女人看CTA的画面(你会同意吗?)。你会看到转化率增加了10%。突然间,你的转化率达到了25.3%,你的周收入增加到了25300美元。年收入增加了27600美元。
A/B测试的排版和样式更改:
- 标题和正文的字体大小(以及它们之间的区别)
- 标题长度(短而简洁vs长而详细)
- 不同字体大小的数量(太多会使您的登录页令人困惑-我推荐两个或三个)
- 字体:记住,不管出于什么原因,不同的字体会被认为比其他字体更业余。我们在Wishpond喜欢San Sarif的标题和Sarif的正文。避免草书(除了标题),在专业场合中漫画字体是绝对不能使用的
- 更多文本vs少于(我喜欢一个简单的着陆页 - 到目前为止,并留出稍后的电子邮件或不同选项卡的任何无关信息。但是为自己测试这个!)
结论
希望你现在了解更多的科学和心理登录页设计最佳实践为宜登录页优化. 记住要提供视觉上的线索,让你的访问者集中注意力。不要忘记细节,比如排版或视线方向。
并保持测试!你总是可以提高登陆页面的转化率。相信我。
进一步阅读:
- 转换率优化的最终指南
- 如何创建可转换的登录页
- 着陆页:基本原理和转换原则
- 如何A/B测试您的登录页以最大化转换
- 7个登录页错误会导致转换成本降低
- 创建Facebook广告和登录页组合的4种方法,以最大限度地提高转化率
您是否成功(或受挫)实现了这些设计基础?请在下面的评论中告诉我!