你喜欢填写表单吗?我想,大部分人的答案是否定的。

“填写表单太耗时了”、“表单太难懂了,我也不知道要写什么“、”我不想把我的个人信息泄漏出去,不填了。“ 这些都是很多用户放弃填写表单的原因。

但从事外贸生意,我们希望客户能够在网站上完成的转化行动却是填写表单。我们希望通过表单获得客户的邮件、电话以及询盘信息,这样才有进一步沟通合作的可能。

大量的交互研究表明,表单设计的友好度和可用性(例如表单对不同背景的客户是否容易理解、表单填写难度高不高等等)都会极大地影响到表单的填写率以及网站的转化率。

所以,这篇文章我们一起探讨一下,如何把一些基础的用户体验原则融入到表单设计中,以提高表单的友好度和客户的填写意愿,获得更好的转化效果。

每行只展示一栏

大量的用户体验研究表明,每行仅展示一栏比每行展示两栏甚至更多的表单效果更好。因为用户浏览网站的目光走向是纵向的,如果每行仅展示一栏,客户就能自然而然、毫不费力地从上到下地浏览;但如果一行展示多栏信息,用户的目光就会中途被迫改成横向的,这样必然会分散用户注意力,带来不必要的干扰。

(亚马逊的注册表单,很好地遵循了每行只展示一栏这个原则)

不过,凡事都有特例。像以下这种需要填写的内容很短,而且在语义逻辑上连贯的信息,就可以放在同一行展示。

信息分组,设计多步式表单

如果你的表单比较复杂、内容比较多,可以按照语义把信息分成不同的组,并在组与组之间适当留白。因为这可以给客户一步接一步的完成感,而不至于被长长的表单吓到。

例如下面这个表单,把要填写的内容分成接收人信息和物流信息后,客户填写的时候心里就有一个进度条,即填完接收人信息后,只需再填物流信息就能完成了。

信息框标题应该放到什么位置?

关于信息框标题应该放到什么位置,其实没有一个标准答案。目前普遍的做法有三种:放置信息框上方;放置信息框左侧;放置信息框内部。下面我们看看不同做法适用的情况。

放置信息框上方

把栏目标题放置信息框上方是最常见的一种做法。这种设计对手机端更加友好,因为手机屏幕小,放置上方可以有效控制表单宽度。

放置信息框左侧

如果你需要客户输入更长的信息,那么把栏目标题放置左侧会更好。这种做法也更利于把不同栏目的信息区分开来,更好地获取客户的注意力,而且表单会更短,占据更少的纵向空间。

但需要注意的是,这种做法对手机端没有那么友好,因为手机屏幕太窄,不利于同时展示标题和输入框。

放置信息框内部(框内顶部对齐动态标题)

框内顶部对齐动态标题是越来越流行到一种交互做法。它指的是栏目标题一开始是置于信息框内部,当用户光标移动到相对应到信息框,框内标题消失,移动到顶部。

这种做法最大的优势是,省空间。但很多情况下,这种标题放置方式并不是必要的,尤其是对于那种需要填写的信息框不多的表单,因为客户并没有太多的信息需要回顾。对于更复杂的表单,这种做法的效果更突出。

但总的来说,这种置于信息框内部的标题,动态的比静态的体验更好。因为当光标移动至信息框时,静态的标题会直接消失。

我们可以用占位符描述代替信息框标题吗?

我们有很多种方式可以给客户进行填写提示,以降低客户的填写难度,常见的一种方式是在信息框内填写占位符描述提示。

但大量的用户测试表明,这是一种用户体验比较差的做法。它使表单的填写变得更复杂,而不是更简单,尤其在用户需要填写多个信息框的情况下。因为光标移动至信息框时,框内占位符描述就会消失,这就加重了用户的短期记忆负担,用户必须要记住哪个信息框需要填写什么信息。

没有了描述提示,用户在提交表格前也更难检查出自己是否填写错误,因为他需要把填写内容删掉才能看到自己填写的信息是否符合描述提示。

虽然这种做法有很多的缺点,但在某些具体的情况下使用占位符描述还是很合适的。例如我们常见的newsletter注册,因为客户只需要填写邮箱信息,并没有什么记忆负担。

 

如何降低表单填写的认知负荷?

适当留白

不同栏目信息之间适当地等间距留白,可以让用户更清楚地看到哪个信息框是在哪个标题之下的。

避免下拉选择只有两个或三个选项

不要使用下拉菜单,使用单选按钮来快速传递信息,而不是减慢用户的操作速度,不需要额外的点击,表单上一切都必须清晰。

光标自动显示在第一个信息框

光标自动显示在第一个信息框可以引导客户从哪里开始填写表格。同时,给第一个信息框的边框加上强调的颜色可以进一步触发客户填写的欲望。

标题不要大写

表单标题一般避免用全部大写,因为大写的标题增加了阅读的难度和用户的认知负荷,而且会让表单呈现出一种叫卖的感觉。

 

表单按钮也会影响用户体验吗?

按钮代表的就是指令、行动,它对转化有非常大的影响,因此按钮的设计必须突出、文案应该清晰明了。

按钮必须明确地指示将要采取的行动

按钮的命名要尽量地避免用简单的OK或Yes,应该多使用动词。研究表明,用动词命名按钮转化率会提升近30%。

按钮的命名应该反映用户意图,符合当前的语境。例如注册表单的提交按钮名称就用明确的Sign Up指令。

总结

设计一张用户体验比较好的表单并非易事,有很多不容忽略的细节。然而,表单的好坏会对转化率会有很大的影响,糟糕的表单会浪费用户的时间,降低其填写欲望,同时,也意味着我们前面所做的转化努力都白费了。因此,我们要多关注每个小细节,让填写表单变得更容易、更快捷。

Write A Comment