完美的着陆页 Landing Page的终极攻略

判断一个网站的方方面面最重要的指标是转化(Conversion),而着陆页是你首先要重视的页面,在优化着陆页的过程中你会学到很多网站转化率优化的基本方法和最优方法(Best Practice)。

奥巴马的营销团队非常注重着陆页的设计

奥巴马的营销团队非常注重着陆页的设计

你可以找到的着陆页教程很多,国内的,国外的。找这些资源并不难,可是去找的人却寥寥无几。因为没多少人在乎这些,多数人在乎的是自己的网站好看不好看,也不会去分析数据,完全跟着感觉走。能够开始重视着陆页,那么你的成功就已经走了一半了。 在本文中,极诣会教你如何设计属于自己的完美的着陆页,无论你是初学者还是资深专家(你需要有勇气这样说)都可以有一些收获。 在设计你那完美的着陆页之前,你必须至少知道什么是着陆页,这里有两句话:

  • 着陆页(Landing Page)是访客访问你的网站/应用所接触到的第一个页面,它承载着传递第一印象的使命。
  • 着陆页是用于引导用户完成单一行为的页面

即使你不是太理解以上这两句话也不要紧,我们会贯彻这两句话进行以下讲解。

载入速度和SEO友好性

人可以忍受的最大页面载入时间的极限临界值是9秒。9秒之后如果你的着陆页还没有很好地显示在用户的屏幕上,那绝大多数人会选择离开。是的,天朝的网速是很可怕的,多少年来天朝的网民也练就了超人的忍耐能力,仍然会有很多人等待20秒以上来浏览某个页面。然而,你永远不希望因为页面载入速度而丢失哪怕5%的访客。所以你必须保证你的着陆页能在5秒以内被你的访客打开。如果你面向内地而把服务器放在美国,那很多情况下这是无法保证的。而且某度仅会收录Host在国内的网站,国外的网站仅会收录一个首页。 在此之外你需要优化你的代码和内容,把js文件放到HTML最后,并优化你的图片保证载入数据大小不会太大。在Google Analytics中你可以在Audience中查看访客Location的信息,也可以在Page Timing报表中查看页面载入速度。如果发现载入时间过长,那请一定要花精力解决。某度的站长工具中也有测速的功能,提供电信和网通双线路,非常实用。 SEO友好性中其实涵盖了载入速度,还包括其他很多方面

内容的延续性

你应该知道你的访客为什么会在你的着陆页面上着陆,因为大多时候在用户着陆之前点击了你在其他媒体上的广告创意。譬如你是做像WorldFriends这样的国际交友网站,访客访问到你的着陆页是因为点击了一个含有美女图片的广告图片,但是如果你的着陆页面上的图片和文案讲的是英语交流或文化交流就会与访客的期望产生很大偏差,往往造成流失(Fallout)。在SEM/PPC中更应该为每一个细微分类的广告创意特别设计一个专门的着陆页。如果你卖两种不同路线旅游产品,去西藏广告的就请链接到西藏旅游报名的着陆页,去海南的就链接到去海南旅游报名的着陆页,提高转化效率。

分辨率和关键的第一屏

网页热力分布图 Heat Map

网页热力分布图 Heat Map

在这里你需要知道两个概念,其一是热力图(Heatmap),其二是屏(Fold)。 就如下图显示的那样热力图显示了多个访问者对于页面上各个纵向部位的关注度。这是通过访客鼠标滚动,光标移动等记录统计出来的。 从上部的红色部分到白色部分在访客屏幕的第一屏(First Fold)中,显然不用滚动访客就可以直接查阅这一屏的全部内容,而蓝色和黑色部分的曝光率仅为1%。那你是否要把最重要的信息放在第一屏呢?当然!哪些是最重要的信息呢?是以下这些元素:品牌,标题,主题图像/视频,互动控件。 你的网页设计师或者前台开发可能为你做好了各浏览器的兼容性,甚至为你做了自适应(Responsive)的页面已应对不同设备,但是他很有可能为你把最重要的信息藏在了第一屏外。 如果你对这一点产生疑惑,只要你打开Google Analytics,查看下Audience中访客的Screen Resolution就可以一清二楚,如果你的目标用户还在使用1024×768的古董显示分辨率,请不要惊讶。把你的着陆页调整到他们的视野吧。别忘了,他们中的很多还可能安装了形形色色的工具栏,真正能看到的页面大小可能只有500像素高度。

除去无关元素

着陆页有非常高的引导性。所谓引导性,就是指当页面受众浏览这个页面上都会倾向于做某件同样的事。当饭馆菜单上只有阳春面的时候,客人只会有两种反应:离开饭店(Bounce),或者点一碗阳春面(Conversion)。在规划着陆页元素的时候你必须考虑哪些链接会让访客做出偏离你的目标的行为。 一个常见的错误是在着陆页上放入网站导航栏。这样本来要阅读着陆页信息并注册的用户点击下就走了。有人会说,访客没有离开我的网站啊,有什么不好呢?这不是更说明用户感兴趣么? 那好,请你想一下,着陆页是你专门用来转化的页面不是吗?(如果不是,为什么你没有做好呢?)几率最高的页面白白损失了转化机会,你偏要期望其他的页面来进行转化么?说不定那些页面连转化控件都没有。如果你认为用户是因为感兴趣才做出这些不转化的行为,那么为什么你不把他们关心的信息放到着陆页之内呢? 访客每一个在你每一个页面的行为都会有概率产生流失(Exit),就好像一个表格的问卷调查很多人能填完,而一叠厚厚的问卷调查愿意配合的人就很少。 极诣数字营销的忠告是:

  • 除了转化控件(注册表单,注册按钮)请不要放其他任何跳出着陆页的链接。
  • 如果你要放“登录”按钮,请低调地放在右上角。
  • 如果你必须放一些链接(如,相关商品,给顾客更多选择),请放在页面底部。

标题是着陆页的灵魂

你需要一个好的标题,并且使用能够接受的最大的字体,并使用最能引人注目的颜色。使用手写体是一种很好的方法。别忘了使用<H1>标签。 一个好的标题文案会带动用户继续阅读的兴趣。你可以发起一个访客关心的问题,也可以用祈使句引导访客的行为。请保证标题的文案与之前访客进入时所见到的广告文案保持高度相关性。

主题照片

选图对访客视线的引导

选图对访客视线的引导

一图胜千言(A Picture Is Worth A Thousand Words)。你需要好的照片让访客第一时间达到高潮。在选择主题照片的时候,你需要知道的第一条定律是:人物的照片总会比其他照片产生更高的转化率。你要卖宠物,那去选择一张人抱着宠物的照片;你要卖上海一日游,那去选择一张旅行游客的笑脸。如果浏览你的着陆页的不是一只坐在电脑前的猴子的话,人总是会有更多的吸引力。 选择人物照片的时候,傻子都会选择长得好看的人物照片。是的没错,但是你还要挑选更自然的动作表情,尽量避免一些摆拍(Stock Photo)。人物的视线也会影响访客在页面上的视线移动,所以你要保证人物看的方向在你认为重要的内容上。 右面的热力图比较就可以看到第二张图片对访客的转化效果更好。 可是,也有例外的时候。当你提供交友服务的时候时,你需要更多的眼神交流(eye contact)。在此时你要选人物正视访客的图片,这对转化更有说服力。呵呵,一般情况下,女神都不正眼看你。

行动控件(Call To Action)

如果说着陆页的目的是为了引导访客去完成一些行为,行动控件就是实现该行为的网页控件。它可以是一个按钮,一份表单,一段视频或者其他你认为是作为目的标志的内容。我们前面说了,重要的页面元素必须要放在第一屏。而行动控件就是这样的元素。就以按钮为例,除了保证页面“只有一个”按钮以外,你还要确保用户能在第一屏就能看的它并能够最终被它“召唤”(当你不是很确定用户是否会注意到你的行为控件时,请务必加上“箭头”来帮助引导用户)。 因此,你还需要琢磨好该按钮的位置、大小、按钮上的文字和按钮颜色。

  • 位置:按钮周围离其他控件要有一定距离。这好比在一张白纸上留下一滴墨水会更显眼,一个道理。最佳位置是右下角。符合人眼从左上角到右下角的移动自然规律。
  • 大小:自然是越大越好。但是要比其他控件略窄。有许多设计师喜欢把按钮和文本输入框设为同样宽度,这是经常犯的错误。这会使按钮变得不像按钮,造成访客的困扰。
  • 文字:以祈使句短语为主,带有轻微催促为佳。如果你的服务是免费的别忘了加上“免费”两字。
  • 颜色:一百个设计师有一百种偏爱,但是科学证明橙色是能够带来最高点击率的颜色。还有要注意的是要凸显按钮的颜色,不要使用页面主色调的颜色。
  • 以上只是一个小小按钮的使用“窍门”。在面对表单的时候你还要注意到:
  • 尽量精简表单:如果是注册,没有必要让用户再输一遍密码。
  • 表单区域加强:可以用一些浮雕或3D的样式把表单凸显到背景样式之外来。注意颜色处理上的差异化(对比度)。
  • 文字标签:右对齐会更容易帮助使用者填写。如果文字长度差异较大建议标签右对齐。
  • 控件选择:保证弹出提示可以辅助用户正确填完表单,能用Radio控件的时候不用下拉菜单。

奖项和证词(Testimonials)

相比你独自吹嘘,你所获得的奖项和来自用户/行业的证词会更好地对你的产品服务进行评价。如果你获得了一些如VeriSign或者E-trust的安全认证你也应该表现在你的页面上。特别是靠近你按钮的位置,你应该相应放置一些使用户安心放心购买/登记的内容。 来自用户的推荐和褒奖会使访客产生共鸣并增加对你的服务产品的信任。

视频,截屏和图表

图文并茂相当重要

图文并茂相当重要

我们从这里开始讲一些较次要的元素。人们总是倾向于更少地阅读,所以在着陆页上放置过多大段文字是很没有必要的。如果你有良好的内容,并且载体是视频或者截图的话就应该展现在访客面前。让他们花费最短的时间了解你的产品。如果你的图形设计师擅长画图表的话那就更好了。因为访客总会对图表数据有自然的亲和力。 如右图所示,超过45%的人会因为链接附带了一个图表而去点击,更有30%的人会把此转发给别人(即便自己都没看懂)。

BONUS:我们的邻居日本不但喜欢画漫画而且也喜欢用图形来构建着陆页。当然这也和他们全球最高带宽有关,他们可以毫无顾虑放置超多图片。在这里你可以得到很多参考

互惠交换

你或许作为访客有过这样的经历,你去找一份SEO教程,通过搜索引擎找到之后点击“下载”,然后在弹出框中输入了自己的名字和电邮地址。之后你每周都会收到该网站的信息了。 这是一个典型的交换(Trade-off)。为了提高网站的转化率,许多公司都会提供一些免费的资料“钓你上钩”。如果我们不能在30秒内决定胜败的话,我们也可以把转化周期拉长。在未来的几个星期甚至几个月内通过后续的电邮将访客转化。

联系人信息

如果你对SEO或者SEM有少许了解的话,你应该懂得在页面上提供地址电话都会是“加分”的行为。在转化的角度上说,这也提供了O2O的一种转化。因此如果你的页面受众更期望致电来询问你的产品服务,何不把你的电话和地址信息提供在你的页面上呢?

社会化媒体

我一直不赞成把“关注我们”放在着陆页上,因为这样会对访客进行干扰降低转化率。特别是实际上只有几个关注时,这反而成为了负面的内容。如果你没有使用这些社会化媒体作为SSO(Single Sign On),登录或者注册的话,还是不要考虑这些吧。

“真正完美的着陆页”

Google Analytics Experiment:原Google Website Optimizor

Google Analytics Experiment:原Google Website Optimizor

好了,还没写完时就有被指出不存在完美的着陆页了。但完美的着陆页离你其实并不远。打开你的Google Analytics,找到Behavior(或者是Content,如果你还在旧版本上),然后点击Experiments。你可以建立一个实验。是的,这就是一个很好的A|B测试工具。我们通常采用95%以上的置信率。你把分流代码和跟踪代码安装好以后就可以开始测试了。如果你觉得以上所说的有任何地方说的不确定,欢迎进行测试。你可以考验是不是真的橙色的按钮转化率最高,也可以测试表单放在左下角和右下角哪个转化率更高。不管你对自己目前的着陆页是否满意,你都会毫不放弃地进行下一个测试。你得到的会是很精准的数据,可操作的能让你进行决策并逐步让你的着陆页臻于完美。

标签为: ,