有效提高表单转化率的八种方法

在CRO(Conversion Rate Optimization)的整个“学术范畴”中,表单转化率的提升可谓是核心中的核心。表单只是HTML众多元素之一,但其商务意义却格外重要。表单中包含一些子元素也十分值得我们探究,如表单标题、输入框、单选框、复选框、下拉菜单等,当然还有提交按钮。表单最主要的应用在于注册、订阅和提交信息。本期,我们将介绍表单设计的一些要点,希望对你提升转化率有所帮助。

将表单放入首屏

我们经常看到着陆页面说了一个精彩的故事,提供了各个具有说服力的元素来促使访客填写表单。然而设计师却把表单放在页面的最下方。这看来是一个非常具有“叙事风格”的安排,实质上对提高转化率毫无帮助。正确的做法是将表单放入首屏也就是我们常说的“fold”。唯有这样我们的转化才有所保障。如果你还是不放心,可以放一个悬浮在固定位置随页面滚动的表单,亦或是在故事的最后放置一个回到表单锚点的按钮。

Unbounce着陆页面首屏区域

Unbounce着陆页面首屏区域

测试最佳的CTA

就如我们开篇所言,表单包含的元素很多,其中可能最关键的元素就是提交按钮了。这个按钮有另一个名字,叫做“Call-To-Action”也就是行动号召。这个按钮的大小颜色和文字都非常有讲究。比如我们通常认为CTA要大要显眼,周围要留白。颜色方面一般选择橙色,但是笔者认为任何其他能抓住眼球的颜色也会是不错的选择,这里强调一个强对比。文字方面你可以测试很多不同选择,比如“立即购买”,“免费加入”,“马上试用”等。同时在表单旁你可以用小字注释一些关键信息,如“三十天无理由退款”,“限时免费配送”。总之要为访客的转化扫清障碍。

减少并优化表单选项

相信很多人看到5个以上文本输入框就会产生厌恶的感觉。的确,我们非常担心网页向我们索取大量个人信息。在我们设计表单时要注意优化各个输入项。要做到能不需要填就不要索取。举个例子,要了手机就别再要座机;再有既然要了身份证号码就别再让访客填生日了。设计上要用对控件,让人填性别就用单选框,避免下拉菜单和多选框。让人填省份的时候不要按照拼音顺序,每次找“上海”都在好下面有木有?还有那永远输不对的验证码,图片缓存能不在这里开启吗?

在全民手机上网的时代,你的表单是否方便用户在移动小屏幕使用是另一个优化点。糟糕的表单设计让人抓狂最终流失大量转化。近期我们探讨了移动营销的一些要点,其中也包含了如何通过HTML5增强表单填写的经验,请移步扩展阅读。

将表单拆分步骤

在我们不得不收集大量的信息时,比如婚恋网站和求职网站,我们需要将我们要收集的数据分成几个步骤。这是两方面的考虑。首先如上述所言,我们需要让表单内的需要填写的输入框越少越好,这样访客才不会被“吓走”。另一方面,我们需要先收集一些信息,让访客中途放弃后有机会再回来完成填写。剩下的步骤我们可以用电邮等方式进行。在设计表单各步骤时,我们需要提供让访客跳过中间某几步的功能,同时要告诉访客一共有几步以便产生合理的预期。如果收集信息较多,不管你是否拆分表单,体贴地告诉访客他们大约需要多少时间完成这个流程将会非常有效。

一个典型的多步骤表单

一个典型的多步骤表单

拆分表单另一个好处是一旦访客提交失败丢失所有填写的数据时不会损失全部数据。顺便提一句,考虑到访客的网络状况,当我们在设计表单时应该利用AJAX技术使数据提交后再跳转页面。

应用自动填表

你有没有见过这个黑科技?谷歌的Chrome浏览器的市场份额占到了58%,善于利用谷歌的自动填表功能将会极大地改善用户体验。

Chrome浏览器的自动填表功能

Chrome浏览器的自动填表功能

至于如何实现?请参考谷歌开发者文档,传送门在这里(需翻墙)。

利用SSO提高注册率

SSO是Single-Sign-On的缩写,也就是我们俗称的第三方登录。常见的有QQ登录、微博登录、微信登录、淘宝登录、百度账号登录。下图是腾讯系的京东商城的登录页面。

京东商城允许QQ和微信的第三方登录

京东商城允许QQ和微信的第三方登录

SSO的优点是简化注册流程,免去用户设定复杂密码又忘记的麻烦。缺点是你也许要再问用户要手机号码,邮箱地址这些信息。(不过你要下单买东西不是必填这些的吗?)

在适当的时候展示表单

笔者本人非常讨厌Pop-up,不管是什么时候。但是就连SmartInsights和MarketingProfs都对它乐此不疲。前者还没开始读就弹出让你订阅,后者过几秒钟就会自动弹出影响用户体验。当用户不厌其烦地关闭时,你应该立即停止弹出表单。取而代之的是你可以在用户滚动到文章末尾时弹出,或者采用其他方式。要么,你就干脆像FinancialTimes那样直接给一个Pay Wall。

让人反胃Pop-up表单

让人反胃Pop-up表单

保存填了一半的表单

在浏览器启用Cookie的环境下,我们可以自动保存访客已经填写的内容。这样当访客再次进入页面时,我们可以自动调取Cookie而不必让用户再次从头填写。这样做的好处在于当访客处在不良信号和网络连接的环境中时可以为客户实时保留阶段性成果。具体的做法请参考Tony Davis的方案。至于调用时机,你可以选择访客离开页面之前,或者是每过一定时间,还可以是每填写几个选项。

最后的福利

如果你想学习如何设计表单,我推荐你Lynda的课程Web Form Design Best Practices。主讲的Luke Wroblewski在2008年的经典教程依然是你学习的好资料。PDF版地址在这里