表单设计与转化率的提升

标签: 设计 转化率 提升 | 发表时间:2012-12-17 18:09 | 作者:c7210
出处:http://ucdchina.com/rss/all
无论是用于注册、支付还是联络,我们总是需要通过表单来获取用户的信息。不幸的是,在现实当中,总会有很多访问者一见到表单就会立刻点击浏览器上的后退按钮。这里面原因有很多,例如表单篇幅太长、不大友好、不那么值得信任,或是用户还没真正准备好进行交易等等。

这种情况每发生一次,我们就失掉了一个潜在用户。怎样将表单设计的让尽量多的访问者更愿意完成填写,这是设计师们必须面对的挑战。站在用户的角度,我们可以将问题分为四个方面。

我能得到什么?

一提到“转化”,设计师们首先想到的往往是一些相关操作的细节问题,包括按钮的颜色、标题的字号、对比度、对其方式等等。当然,这些是必须考虑的,但最最首要的问题是:作为网站的访问者,我为什么要填写表单?我能得到什么?

访问者不会简单的因为你提出了相关要求而把自己的个人信息透露给你;你要让他们看到这样做的好处在哪里。不妨把这件事看作一种交易,你的访问者提供他们的名字与邮箱地址,从而换取到一些他们需要的东西,例如享受服务、免费试用软件、下载PDF文档等等。

01-value-form-design-user-convert-experience.jpg

除了让浏览者知道他们能得到什么东西以外,你最好还能告诉他们这东西为什么是他们所需要的。要聚焦在产品的价值上,如果你能用最简单的介绍文字描述出你的产品能帮用户解决怎样的问题,唤起他们的共鸣,那么即使表单本身稍微复杂些,他们也会愿意完成填写;否则,字段最少的表单也不会引起他们的兴趣。

我凭什么相信你?

当人们第一次访问你的网站或接触到你的产品时,他们确实没什么理由一下子产生信任。不妨试着展示一些具有公共效应的“证据”,例如相关媒体报道、来自现有用户的赞许,以及任何可以鼓舞访问者对产品产生积极态度的元素。

02-w-pocket-changed-value-form-design-user-convert-experience.jpg

Pocket Changed的订阅表单是个不错的例子,他们向访问者展示了当前已有多少人进行了订阅下载;此外,他们也非常简单直接的让访问者了解到在填写邮箱后可以得到什么。如果可以再加入一些来自真实订阅用户的赞许反馈,这个表单的转化效果会更好。

另外一种很有效的“证据”就是将所有报道过你家产品的知名媒体的logo陈列在页面中,当然前提是必须有相关的报道真实存在。这些具有很高识别效应的元素可以有效增强用户的信赖感。

03-media-logo-form-design-user-convert-experience.jpg

推荐阅读:

你会用我的信息做些什么?

在为访问者提供积极引导的同时,我们还要想办法避免掉那些负面因素。人们在填写表单时的最大顾虑就是信息被网站方收集之后的用途。用户不会希望收到垃圾邮件,更不愿意自己的个人信息被传播出去。如果你确实运营着一个值得信赖的产品,那么不妨直接让用户知道你不会把他们的信息贩卖出去或是向他们发送垃圾邮件,就像FogBugz做的那样,在注册表单旁边以非常直白的口语化的方式告诉用户“我们不会出售或分享你的邮箱地址,就是这样。”

04-s-information-secure-form-design-user-convert-experience.jpg

相关阅读: 怎样通过更好的用户体验促进网站转化率的提升

这会占用我多少时间?

正像我们在前文中说到的,如果可以让访问者明确的了解到产品价值,唤起他们的需求共鸣,得到他们的信任,那么表单的长度将不会成为影响转化率的最主要因素,但这并不意味着我们不需要对表单进行简化。即使访问者决定执行转化行为,他们的时间和耐心也都是非常有限的。

我敢打赌,在很多时候,那些标注着“必填”的表单字段其实并非是真正需要的。

Gumroad在未登录状态的支付表单中剔除了很多常见的“必填”字段,最终只保留了用于输入邮箱地址、信用卡号、有效期和CV码的文本框。如果连未登录时的支付环节都可以被如此简化,我相信对于其他方面业务的那些复杂表单来说,不会没有优化空间的。

05-gumroad-signup-payment-information-secure-form-design-user-convert-experience.jpg

在对表单进行了充分的简化之后,我们还可以试着通过一些设计技巧让填写表单的环节看上去更轻量。在这方面,我个人最喜欢的一个案例来自原型制作工具InVision的注册表单。他们使用浮层的形式呈现表单,作为访问者,我可以感知到,当我填写完成之后就可以立刻回到之前的界面继续应用流程。

06-invision-signup-overlay-form-design-user-convert-experience.jpg

相关阅读: 一个文本框搞定信用卡相关信息的输入

总结

现在就打开你的网站,看看哪些表单可以在以上四个方面有所改进。当然,你不必将目光局限在我们之前讨论的这些要点上;最重要的是在思考和设计的过程中时刻记得站在访问者的角度进行观察和体验,去发现那些对转化率的提升具有正面或负面影响作用的要素。

源地址: http://beforweb.com/node/143

相关 [设计 转化率 提升] 推荐:

表单设计与转化率的提升

- - 所有文章 - UCD大社区
无论是用于注册、支付还是联络,我们总是需要通过表单来获取用户的信息. 不幸的是,在现实当中,总会有很多访问者一见到表单就会立刻点击浏览器上的后退按钮. 这里面原因有很多,例如表单篇幅太长、不大友好、不那么值得信任,或是用户还没真正准备好进行交易等等. 这种情况每发生一次,我们就失掉了一个潜在用户. 怎样将表单设计的让尽量多的访问者更愿意完成填写,这是设计师们必须面对的挑战.

数据分析提升电子商务转化率

- - 互联网的那点事
消费者网上购物的平均时间,拿去年的6月跟今年的6月比较,从20分钟减少到了17分钟. 另一方面,客户停留在网站上的时间减少的同时,多数电商的转化率只有0.5%左右. 在注意力越来越分散的今天,99.5%的客户是流失掉的,电商要如何去了解这群客户的购物行为特征,并且使之转化为订单量. 对于电商来讲,人均浏览网页的时间,就是正在变得稀缺的竞争资源.

通过 PWA 我们让新用户转化率提升了 104%

- - 知乎每日精选
文章关键词:PWA、Google、Android、Mobile Site;. 过去的2016年里,你一定不下数次听到 PWA 这个词,但它究竟是什么呢. PWA 其实是一种渐进式的的无需用户安装、可被随时唤起的 Web App , 融合了 Native App 的结构、交互、降级方案等的更优体验技术,使得用户通过浏览器打开网站时,获得有如原生 App 般的顺滑体验.

[译]多变量测试:5个简单步骤提升转化率

- 奥斯汀Outman - 腾讯ISUX - 互联网用户体验设计
原文地址:Smashing Magazine. 译文地址:http://isd.tencent.com/?p=2488. 自Google出现并改变了游戏规则之后,用户对于网页的关注时间一直在下降. 对于任何一个时下话题,有千万条结果可以关注,可以抓住访问者注意力的机会非常明显地下降了(2002年,BBC报告指出大约在9秒内).

【最实战】100%提升产品转化率的销售文案写法

- - 乐无线-微信公众平台精品内容聚合
管理智慧QQ总群:254459048. 同学会微信私号:vipguanlizhihui. 管理智慧自媒体(ID:shzb2010),2013最佳管理类自媒体,由著名管理学者包政先生团队运营. 我们是最早一批获准资格加入腾讯广点通广告联盟的成员. 木春(知名自媒体人,网络营销策划专家. 【导读】转化率是个让人惊喜又头痛的指标,转化率高了怕不稳定;转化率低了,又是在浪费流量.

提升订单转化率,做好这五大数据分析就够了!

- - IT瘾-tuicool
电商平台的数据分析,应该关注五大关键数据指标和三个关键思路. 五大关键数据指标是活跃用户量、转化、留存、复购、GMV;. 三个关键思路是商品运营、用户运营和产品运营. 下面我会详细展开来讲具体分析方法. 现在很多电商运营团队缺少精细化运营和数据驱动的经验和意识,但是电商运营正在成为电商自身增长越来越重要的因素.

怎样通过更好的用户体验促进网站转化率的提升

- - 互联网分析
原文出处: Optimizing Conversion Rates:It’s All About Usability,编译: Beforweb. 对电子商务网站来说,可用性和用户体验的改善,对转化率的提高是有显著效果的. 所谓的改善,不仅包括更好的视觉效果与内容架构,更重要的是,怎样以更专业化的、让人信赖的方式在正确的时间传达正确的信息,与潜在客户进行有效的沟通.

电商网站提高转化率和销售额五个设计要点

- - IT经理网
电子商务网站的设计与客户体验与转化率和销售额有着直接关系,在社交 、移动化、扁平化和碎片化的今天,以下我们结合国外电子商务网站设计案例给出五点建议,设计者和运营者们如果能加以注意,将能给客户体验和销售业绩带来立竿见影的效果. 因为它皮实、简单易操作,同样的,电子商务网站的导航也要大道致简,标题分类明确、位置显著,虽然这对于品类繁多的电商网站来说有一定难度.

【设计图集】提升PhotoShop能力的免费形状

- Allen - 译言-电脑/网络/数码科技
来源Increase the Capabilities of Your Photoshop with Free Shapes | Cruzine. 对设计师而言,Photoshop本身就是一项十分强大而高效的工具. 不过,如果你在默认设置里添加更多Photoshop开发者提供的免费形状,甚至能获取更多工具与资源用于自己的设计项目.