《Web表单设计》读书心得

本书一共14章,讲了三部分内容:表单结构、表单元素、表单交互。表单是横在用户和企业之间的一道障碍, 没有任何人喜欢填写表单,不合时宜的表单往往会让用户反感,从而终止我们给设定的任务,比如说购买。而设计表单就如同设计模式一般,有规律可循。尽量减少用户填写表单时候的反感是每个表单设计人员必须首要考虑的因素。

表单结构部分:

1. 表单的问题,能够不问问题,就不要问,精简问题。

2. 怀着面对面交流的心情来设计表单,就像日常谈话一样,把用户填写表单的过程设计成一次对话,你说出标签,能够让对方反应出需要做什么。

3. 将问题有逻辑的组织起来,比如个人身份信息,安全条款,邮寄地址等,在表单里面用不同区域分开, 每一块专注一个逻辑,就像谈话一样。

4. 可选问题,可以在表单填完后给出,这样减少侵略性,这些问题可能会得到更多照顾。

5. 进程提示,比较大的表单,分页的表单,要有识符,当前填到哪一步,是否完整,要标示出来。 二级进程提示,把表单里面的逻辑表单块也列出来。 如果进程提示没有固定的步骤,那么可以采用笼统的,没有明确期望的进程提示。

6. 表单命名,链接上的名字和表单实际页面上的名字要保持一致

7. 表单起始页,当有大量东西要填的时候,在起始页提示用户要做什么准备,比如ID,驾照,护照,银行卡等,不要等到花不少精力之后,发现缺失必要物品而无法继续。

8 建立视觉线,清晰完成路径,标签,输入框,主要动作按钮形成一个垂直轴

9. 填写表单的界面,应该减少噪音,减少其他任务路径,用以减少用户退出表单填写的几率。

表单元素部分:

标签对齐方式,书中讲了有5种对齐方式:

1、顶对齐表单:是几种类型的表单中用户完成速度和完成效率最高的,因为这种排列方式为用户提供了非常清晰地浏览线(垂直方向),用户的视觉焦点不需要跳跃就可以浏览到所有表单项;同时顶对齐表单灵活性也比较强,标签长短有较大的调整空间,适用于需要多语言显示的网站。其缺点是占用的垂直空间较大,不适用于表单项很多以及包含人们不熟悉的填写项的表单。


2、

左对齐表单:

因长标签会增加标签与输入框之间的距离,从而拖延完成时间,所以左对齐表单是三种表单中用户完成速度最慢的,但是因为这种方式便于用户浏览标签,因此适用于含有用户不熟悉的填写项的表单,让用户能够认真思考标签含义,从而提高填写的有效率。左对齐与顶对齐相比还有一个优点,即占用垂直空间小。

3、右对齐表单:用户完成速度介于顶对齐和左对齐之间,与顶对齐相比占用垂直空间小,与左对齐相比易读性降低(标签在垂直方向上参差不齐),是国内注册表单中较常用的一种(如新浪微博、开心、人人等)。

4、输入框内标签:光标放入输入框,标签迅速消失,以便用户能轻松填写,是一种可靠地交互方式。但是有时候标签会很快消失,有时候标签会留在输入框中成为答案的一部分。填写时,输入框内标签消失,因此答案情境也随之消失,如果突然忘了要回答什么,一时会找不到标签。因此如果表单较长,输入框内标签并不是好的解决方法。输入框内标签更适合用于只有一个问题或是几个输入框问题非常熟悉的表单。


5、混合对齐:不知道作者所说的混合对齐是什么样的表单,但是日常应该是用过的。可能有的时候混合对齐表单也能很好地辅助用户填完表单。


输入框有6种类型

1、文本框:允许人们选择输入任意数量字符,一行或者多行。

2、单选按钮:允许人们从两个或多个可见互斥选项中选择一个,由于单选是互斥选项,应当有默认选项。

3、复选框:允许人们选择列表中的任意选项,一个或者多讴歌,数量不限。使用复选框时应当确保选择输入框或者其标签都能激活选项。

4、下拉菜单:允许人们从两个或多个排他性选项中选择一个答案。不使用时,下拉菜单仅显示当前被选项。如果互斥选项较多时,下拉菜单比复选框要好,下拉菜单占据屏幕空间小。一般情况下尽量避免下拉菜单中有太多选项。

5、列表框:可作为单选按钮使用,也可当复选框使用。列表框可以像下拉菜单一样显示更多选项,而占用空间比单选按钮或者复选框要小,但是列表框的单选或多选的性质容易给人带来困扰。

6、按钮:产生动作


1. 采用合适的长度,不要所有长度都一致,不利于暗示用户输入内容。 如果长度不能起到暗示的作用,那么就尽量一致。  比如postcode 6位

2. 必填项和可选项需要明确标示。 required * 显示图例, 或者写上required,  或者optional.

3. 采用视觉分割对齐的方式,对输入框进行分组:  组合行生日的年月日, 相关型, 包含型(checkbox里面包含细节的输入)

帮助文字:

1. 帮助文字应该非常简单,如果需要大段的说明来进行帮助,那么也许这个问题的问法存在一些不妥的地方

2. 帮助旨在消除用户疑问,比如隐私保密方面,安全方面

3. 帮助文字适时弹出,自动显示帮助文字。需要能够让用户控制打开,或者关闭。 另外弹出的帮助文字的位置也要考究。体现相关性,另外不能遮盖其余的表单元素。

4. 自动即时帮助,在帮助信息最合适的时间和位置显示帮助信息。用户激活的帮助,采用可点击的图标,点击之后才显示帮助。用户激活的帮助区域,显示在表单中的一致位置,利用更大显示面积,提供广泛的帮助文字和内容,人们可以在固定位置显示找到帮助内容。

表单交互部分:

1. 及时验证输入内容,用户名(重复),密码(是否符合安全级别), 电子邮件。注意验证的时机,需要等到输入完成以后再验证。

2. 多页表单,多模块表单输入的时候,需要采用正确以及错误的图标,标示已经完成的模块的正确性。

3. 及时反馈还可以提供一系列的正确答案给用户选择,这种体验会更加舒适。

4. 格式转换, 当用户输入的数据与预期的格式不一致的时候, 等用户输入完,立刻进行格式的转换,然后再验证输入是否正确,给出提示。

5. 限制的交互,比如某些输入框有长度限制,超出长度的输入,则给出红色的提示,并警告会截断多下的字符。 而不是简单设置一个文本长度,让之后的输入都无法进行。

基于选择的输入:

1、页面级选项:把过程明确分为两步,是解决表单中选择输入问题最简单的方法,但是一旦做出选择,两步模式就会失去情境关系,无法查看并访问未选选项。


2、

水平选项卡:

选项卡显示一组初识选项,发挥当前选择强大指示作用。但是这种方法很肯会降低人们的效率。因为很多人都是习惯自上而下填表,所以可能会忽略水平选项卡,而且这种选项之间是否互斥也不够清晰。该种方式会让用户视线从屏幕左侧移到右侧,偏离了填表过程中清晰的线性扫描。


3、垂直选项卡:垂直选项卡选择性输入将后续问题显示在初始选择的右侧,隐藏了无关表单控件,只在人们需要时才出现。确保了选择一个单选按钮后眼镜不需要太多移动。垂直选项卡基于选择的输入方式中,眼球不必在初始选项和额外输入之间来回移动。


4、下拉列表:下拉列表利用菜单和分组框将所有季宇轩额的输入放在表单中的特定区域,虽然这样会隐藏大部分初始选项,但使用单一控件可能会更好地传达初始选项的范围和影响。允许人们从潜在初始选项的长列表中选择后续问题,而不占用大量屏幕区域。


5、单选按钮下方显示:保持你所有初始选项适中可见。选择性输入下方的显示方式将后续问题显示在初始问题下方一致位置,通过强烈视觉指示来表明初始选项和额外输入之间的依赖关系,有助于更清晰地表明两者关系。但是,当额外输入很长时,如果人们改变选项,屏幕刷新来更改额外输入的内容,页面跳转的效果会导致人们迷失方向。


6、单选按钮内显示:选择性输入内显示方式将后续问题直接显示在每个初始选项下方,如果额外输入很少,该方法可以保持初始选项的情境,同时又能在最相关的地方显示所需输入的选择性输入。对眼睛压力小,能迅速完成。但是如果选择性输入数量很多,页面跳动加上初始选项移动,人们会频繁困惑到底选择了哪个选项。


7、显示非活动选项:此方法保持所有额外输入可见,但一次只有一组选项可以操作,多数情况显示灰色。但是大量所有可见输入项会让人们看起来崩溃。如果每个初始选项都有很多额外输入,个人选项和其他初始选项之间就会丧失联系。

8.组的显示:此方法几乎没见过,额外输入太多,书上说降低初始选项可见度,其实很多时候,用户看到这个,就会感觉要做的事情太多,很难做选择。

减少输入框:

1. 注册界面只保留操作关键路径上的必须信息收集框,其他部分全部去除,即使有些部门需要。

2. 当然也不能因为去除了一些问题,从而导致另外一些问题变的很复杂。

注册表单:

1. 为你的网站或者系统考虑,是否真的需要一个注册表单。 因为这个表单很可能让用户放弃你提供的服务。

2. 采取循序渐进的方式,让用户在操作期间完成账号的填写。发送邮件,生成密码等。

3. 自动给用户生成账号的时候,确保用户知道清晰访问账户的方式。

推荐阅读更多精彩内容