表单设计浅析

近日读了《Web表单设计_点石成金的艺术》这本书,更多的从用户心理进行切入,分析表单的设计各个注意事项,体会很多,写下这篇笔记记录一些重点内容,同时希望能在真实使用中注意这些细节。

背景

我们必须知道,现实生活中大多数人讨厌表单,在流程中最容易丢失用户的环节。因此,基于这个背景,表单设计的目标貌似变得简单,就是让用户“填完”。

注意事项

至于如何能够让用户实现填完的目标,可能需要注意以下几点:

  • 尽量减少痛苦,填写过程应尽量简洁,容易。
  • 说明填写完成路径,表单应清晰告诉用户,如何才是正确完成路径。
  • 考虑具体使用场景,需要根据特定场景,设计特定表单。
  • 保持沟通一致,表单内容应和所有信息场景一致。

组织表单

选取问题

由于表单项都相当于是一个问题,所谓问题就是要通过思考才能回答的。因此,问题(表单项)的多少以及复杂度,都需要进行评筛选和优化,考虑没有该问题是否可以,如果必须要问,考虑是否有更合理的提问方式。

构建对话

表达是直接与用户对话的,现实生活中很少人愿意回答一个陌生人提出的一些列问题,因此对于表单问题的描述,需要平易近人。如:“生源地” 可以换成 “你可能来自”、 “发卡行” 可以换成 “哪家银行发行” 等。是的表单与用户的对话更贴近于交流。

内容组织

将表单的内容划分成多个有意义的组,这样给人更直观更整体的感觉。例如“必填” 与 “选填” 分开,“用户信息” 与 “组织信息” 分开等。

完成之路

表单命名

表单命名的重要性不仅仅在于能说明当前表单的用途,更重要的是能告诉用户完成后能干什么,这是很多设计者都忽略的。

清晰的浏览线

如果用户不知道当前填到哪个步骤,也不清楚接下来有多少需要继续填,放弃的几率很高。因此,流程复杂的表单,需要有清晰的浏览线,让用户知道当前的填写进度。

分散注意力最少

剔除所有可以剔除的分散注意力元素,让用户能集中与表单项,这样能使表单更加清晰,更加简洁。(当然,如果能让表单隐藏在用户不知不觉的操作中,这样就不需要突出表单,反而越多分散的点越好)

表单元素布局

每个表单基本都是有3个核心元素组成,标签,输入框,动作。标签提出问题,输入框让用户填写答案,动作让用户提交答案。
而这3者之间的不同布局却有不同的效果,

标签

标签的对齐方式分为:“顶对齐”,“左对齐”,“右对齐”。

顶对齐

用户名:
<输入框>
密码:
<输入框>
确认密码:
<输入框>

优点:由于问题与填答案区域异常接近,用户只需要向下操作,也提供了清晰的完成路线,这种对齐方式能使用户以最快速度完成表单填写。同是横向空间较大,较为灵活。
缺点:占用较大的垂直空间,当表单向很多的时候会显得臃肿,输入框间距需要控制在输入框高度的 50% 到 70%,标签间会被输入框阻断,不利于快速快速了解表单的整体状况。

左对齐

用户名:<输入框>
密码:<输入框>
确认密码:<输入框>

优点:标签都顶在左边,用户能迅速了解表单的整体状况,需要填写哪些内容。
缺点:由于填写过程需要从左到右,从上到下的操作,填写速度会受到很大影响。

右对齐

…用户名:<输入框>
…….密码:<输入框>
确认密码:<输入框>

优点:介乎上对齐与左对齐之间。
缺点:介乎上对齐与左对齐之间。

因此,如果需要用户库快速完成表单填写,可以选用顶对齐方式,如果需要用户缓慢填写,并清晰知道表单内容,可选择左对齐方式。

输入框

输入框有暗示答案的功能,正如:门上有把手,暗示着大家门能开,门上有“推”字样,告诉大家如何开。输入框的长度就能暗示答案长度,而 placeholder 属性将告诉大家如何填写答案。

动作

动作分为2种
主动作,如提交,保存
次动作,如重置,取消
应尽量减少次动作。