更好的联系表单设计的7个技巧(含案例)

更好的联系表单设计的7个技巧(含案例)插图

更好的联系表单设计始于可用性。表单设计的目的显而易见:需要用户提供个人信息。表单必须足够直观,以便用户明确地知道该怎么做,而不会在完成该操作的过程中被影响。

最好的联系表单易于查看,并包含用户无需考虑即可使用的高度可用的元素。(这听起来容易。)但值得庆幸的是,我们找到了一些技巧来帮助你设计更好的联系表单。

一栏式

更好的联系表单设计的7个技巧(含案例)插图

垂直表单效果很好,因为用户习惯了滚动,这使得查看表单的开头和结尾都变得容易。

有什么简单的方法,垂直浏览表单,或在屏幕上填充完表单后向下继续?对于多数用户而言,使用垂直列形势创建表单是最简单的解决方案,因为用户只需要考虑一个操作就可以——在屏幕上向下移动。

这也可适用于类似的情况,例如姓名、邮件地址和电话号码填写。同样,垂直表单也可以很好地适用于结帐等场景。

此形状还可以与响应格式一起更好地使用,以便该表单在不同设备上具有相同的形状,从而提供更一致的用户体验。对于电子商务或结帐表单,这尤其重要,因为你肯定不希望体验有所变化,从而会产生表单有效性和可信性的问题。

逻辑内容分组

更好的联系表单设计的7个技巧(含案例)插图(1)

将问题或表单按视觉分组,可以使表单更易于理解。将相似的项目放在一起(例如地址信息或付款信息),并使用标签和其他说明文字将其进行分组。用户不需要质疑标签或去理解与表单对应的领域。

表单内容的逻辑分组,为表单创建了一个流程,用户可以在其中预见下一个信息。这使体验变得轻松愉快。

将标签放在内容之上

更好的联系表单设计的7个技巧(含案例)插图(2)

大多数表单构建工具提供了很多放置标签或工具提示的选项。抵制过度创新的诱惑,并在信息填写位置的上方用标签引导用户。这是最常见且最有用的标签设置方式。

另外,此展示位置可轻松地转换为其他设备。例如,手机而不是台式机上的表单。如果表单在标签之前,可以计划在滚动到该表单之前要在字段中放入哪些信息,而这些信息将一直保留到表单完成。但是,如果表单在字段下方,则可能会陷入先后滚动然后再向上滚动的方式,以查看说明并填写表单。

尽管现在看来这很重要,但可能会使用户感到沮丧。如果表单较长,可能会导致出错。这是联系表单设计中的主要可用性问题。

4.不要索取太多信息

更好的联系表单设计的7个技巧(含案例)插图(3)

参与度和忠诚度越低的用户,完成操作所接受的表单就应该越少。

与存在填写不必要信息的长表单相比,简短的表单更有可能被填写。(例如:你是否真的要在付款页面上输入信用卡的类型?答案是否定的,数字表示信用卡的类型,因此请不要让用户输入这些不必要的信息。)

参与度和忠诚度越低的用户,完成操作所接受的表单就应该越少。对于新用户,可以要求他填写一个电子邮件。等待确认电子邮件(一旦他们投入了更多资金)或进行后续跟踪,再扩大收集的信息,包括姓名、邮编或生日。

简短而简单的表单比冗长而详尽的表单具有更高的参与率。所以,要适当设计。

5.使按钮清晰可见

更好的联系表单设计的7个技巧(含案例)插图(4)

确保按钮能准确告诉用户发生了什么。

一旦用户填写了表单,最后的动作就显而易见了吗?通常,按钮部分是表单设计中被遗忘的步骤。该按钮应该清晰可见。使用特定于最终按钮的颜色,并确保按钮能准确告诉用户发生了什么(提交,完成付款等)。

温馨提示:如果使用验证码或其他类型的方式,请将其放到最后一个表单和提交按钮之间。(没有什么比点击提交更令人讨厌了,只是单击获取验证码迫使用户重复操作…或更糟糕的是,让用户重新开始。)

哦,还有一个不言而喻的提示…让用户知道表单成功完成的时间!一个简单的“谢谢”、“已经完成了某个环节”等的提示对话框通常就足够了。

6.使用适当的表单类型

更好的联系表单设计的7个技巧(含案例)插图(5)

一个好的表单设计者知道一个字段类型不能满足所有信息的要求。将字段类型与所要收集的数据进行匹配,让用户更容易正确地填写表单。你不会在填写电话号码的表单中使用下拉菜单,对吗?

虽然这看起来是很明显的技巧之一,但在很多时候这都是错误的。

在联系表单上考虑:与我们取得联系的最佳方式是通过电子邮件或电话。使用按钮选择可以使用户清楚地选择信息。对选择“和/或”选项而言,使用下拉菜单会显得过于复杂。而且你绝对不需要将此作为简短的答案字段。

使用正确的表单类型不仅可以使用户轻松使用表单,还可以简化数据收集和分析。

7.尽可能验证数据

更好的联系表单设计的7个技巧(含案例)插图(6)

当表单告诉用户出现错误,而不是完成时,用户会有怎样的反应?

用户不仅可以看到并纠正错误,而且还可以节省时间和麻烦。

必须验证表单填写的数据。从确认电子邮件地址是否合法,到验证邮编或电话号码的位数,这些小事情都可以发挥很大作用。

如果不这样做,那么你就是少数派。Baymard Institute 的一项研究表明,60% 的表单使用了合法性验证。因此,它不仅是一种可用性工具,而且正在迅速成为一种普遍接受的用户模式(和期望)。

结论

网站(移动应用)设计项目中两种最受欢迎​​的表单类型可能是电子邮件注册和联系表单(在国内可能是手机号、QQ号以及微信账号)。首先,请确保正确设置这些表单,然后对设计进行调整以使它们更具可用性。(如果发现参与度大大提高,则可能有效。)

可以将相同的概念应用于整个设计以及调研、结算界面以及其他数据收集表单。这些概念可以扩展以满足用户需要输入信息以完成流程的任何类型的元素。

发表评论