form design
表单的组织和完成路径
最然很多视觉和交互设计考虑因素对完成表单填写都发挥着重要作用，但真正起作用的常常是 表单的内容及组织方式 。
选取问题
如果想谨慎优化表单，应当测试每个问题。保持警觉，去除不必要的问题
- 这个问题一定要问吗?
- 能自动获得资料吗?
- 有没有更合适的时间或者场所能得到答案?
可以采用保留、删减、延迟解释的策略来设计表单问题：
- 保留：期望用户给出答案的问题
- 删减：那些不是马上期望得到答案的问题
- 延迟：延迟提问，知道问题不会让用户觉得有侵略性
- 解释：用户的敏感数据，解释清楚问什么提问，对用户有什么好处
构建对话和组织内容
以对话方式来组织表单結构将有助于思考问题。 如果表单内容很长或相对复杂，需要将问题分布到多个页面。 分内容组时，应当考虑采用最少的视觉信息，过多的视觉信息可能会导致注意力分散。
避免分散用户注意力
剔除与表单填写没有直接关系的界面元素，有助于保持人们完成任务。
进程指示和 Tab 跳转
如果完成表单之前要回答的问题分散在多个网页，那么应该通过进程指示来标明用户当前所在的位置。
考略到很多用户喜欢使用 Tab 键定位表单项，应该避免涉及双列表单，因为双列表单在 Tab 索引时可能会发生页面跳跃的问题，让用户找不到方向。
表单的完成路径
起始页
如果表单要求人们提供大量信息，而人们又没有足够的时间或精力来填写表单, 起始页就能提供宝贵的情境信息。
只有需要花费大量时间填写的表单才应当考虑使用起始页来说明填完表单的路径
浏览线
提供清晰的浏览线能够让用户快速填充问题，完成表单。
输入框与主动作构成垂直轴，使人们可以快速回答问题完成表单
表单元素
每个表单至少都有三个基本要素: 标签 、 输入框 和 动作。
- 标签：负责提出问题
- 输入框：供给人们填写信息
- 动作：允许人们提交答案
标签
标签用于提出问题
顶对齐标签
填写整个表单很快很容易，因为人们一般只需要在一个方向移动：向下。
这也为填完表单提供了清晰的完成路径。
优点
- 对于长标签或者跨文化的本地化标签特别有用
- 可用于多种方式组合的混合输入
缺点
- 但顶对齐标签会占用额外的垂直空间
- 表单输入框之间的垂直空间太少或者太多都会阻碍移动
右对齐标签
优点
- 右对齐标签同样具有输入框与标签相邻的优点
缺点
- 但右对齐布局造成左侧不齐,会降低快速浏览表单问题的效率
左对齐标签
如果人们不熟悉表单要收集的数据，或者无法对内容进行有效的分组，采用左对齐标签来浏览表单会更容易。
优点
- 如果希望人们速度放慢,并仔细考虑表单中的每个输入框,左对齐标签是个好办法
缺点
- 有些长标签经常会增加标签和输入框之间的距离，因此会延长输入时间
输入框内标签
如果屏幕空间宝贵，应当将标签和输入框组合成单一的用户界面元素。标签放入对应的输入框是最常见的做法。
如果表单较长、 甚至中等长度,输入框内标签并不是好的解决方案。
最佳实践
- 表单标签应当使用简洁的自然语言，大小写一致，所提问题应当尽一量直观，容易理解
- 如果要减少填写时间，或者出于本地化原因，标签长度需要灵活多变，可采用顶对齐标签
- 如果与上述目标类似，但垂直屏幕空间有限，可采用 右对齐标签
- 如要求人们浏览表单标签，知道必填问题，可采用左对齐标签
- 如果表单非常短，屏幕空间极度有限，可采用输入框内标签，同时应当确保合适的交互和情境
- 确保清晰区分标签和数据，特别是对于输入框内标签
- 单一表格中采用不同标签对齐方式会破坏明确完成路径，人们会觉得迷惑
输入框
类型
长度
如果输入框很长，而回答很短：我是不是误解了问题？最好不要让人们考虑太多，而如果输入框无法受益于暗示，就应当采用一致的长度。
必填项
如果多数问题必填，而少数问题可选项，标明可选项项就非常有用
输入组
输入框组可用来反映输入框不同部分之间的意义关联
动作
主动作和次动作
主动作 完成表单填写的动作为主动作
次动作 较少使用，并且大多数情况下允许人们撤销输入的数据，诸如取消、重置或者返回等选项，这些动作与多数人填完表单的主要目标相悖
动作顺序
主动作和输入框对齐会减少填完表单所花的时间
最佳实践
- 应尽量避免表单中出现次要动作，如果需要应该确保和主动作之间存在视觉差异
- 主动作与输入框对齐，能够提供明确路径完成表单
- 处理表单时，应该明确表达，避免重复提交
- 可以组合服务条款和主动作
帮助文字
帮助文字用于告诉人们该如何回答问题 眼动跟踪研究表明，很多人看到表单是会直接跳到第一个输入框
需要提供帮助说明的场景
- 对要填入的数据不熟悉：什么是 PAC 代码
- 质疑要填入的特定数据：为什么要知道我的出生日期
- 可能会关心数据安全或隐私：填写信用卡号码安全么
- 系统推荐数据填写方式：请用逗号分开标签
自动及时帮助
自动及时帮助在帮助信息最合适的时间和位置显示
自动帮助系统有一个问题，就是只有开始填写表单项时，人们才知道是否有帮助文字，解决这个问题的方法是将帮助文字在输入框中默认显示
由于自动即时帮助系统不会预先显示帮助文字，因此最适合用于人们能回答但不清楚如何回答的问题
用户激活的及时帮助
这种方式通常采用一致的图标、按钮、图片或者超链接，便于让人们知道有帮助可供使用，通过点击或者指向触发帮助文字显示
悬浮触发
采用悬浮方式来暂时显示内容
- 建议扩大悬浮区域，这样比较容易触发帮助文字的显示
- 建议延长 500ms 来出发帮助文字，避免鼠标偶然通过触发区就显示帮助文字
- 如果表单所含问题复杂，或会被相同的人重复使用，这类表单适合使用用户激活的及时帮助
用户激活的区域帮助
最佳实践
- 尽量减少表单中的帮助文字，不要依赖帮助文字来弥补表单缺点
- 帮助文字最适合来解释人们不熟悉的数据，如为什么要问这些问题、安全和隐私，建议回答问题的方式等
- 如果人们知道表单问题的答案，但不确定如何回答或者为什么回答，可以考虑用自动及时帮助系统
- 如果人们不熟悉表单问题，或问题复杂，且可能同样的人会多次使用，可以考虑用户激活的帮助系统
- 如果帮助内容很多，可以使用一致的帮助区域，不用使用及时帮助
- 帮助问题应当尽可能具体，清晰表明输入框和帮助文字之间的关系
- 用于激活帮助文字的图标、链接或按钮应放在标签旁 ，而不是输入框旁。
消息：错误与成功
帮助文字告诉人们如何成功填完表单，但这并不是必须告知人们的最重要的事情：错误消息和成功消息 规划消息系统时，必须弄清楚整个应用需要多少种消息类型，常常都是越少越好，通常有一到两种消息类型
成功消息
成功消息不能阻碍人们的进程，而是鼓励人们采取更多行动
错误消息
错误消息不能被忽视或者置之不理，必须要解决错误
最佳实践
- 顶部错误消息应当用来说明有错误发生，及如何解决错误。如果有多个错误发生，应该全部罗列在顶部错误消息中
- 如果有输入框发生错误，应该采取世俗产图强调清晰标识
- 红色文字和警告图标应该用于错误消息
- 如果表单填写成功，应该用成功消息清晰传达并显示结果
- 成功消息不要阻止进程
- 避免使用页面展示成功消息并形成死胡同
及时验证
及时验证可以保证填完表单时不会发生任何错误，即一次性正确填完表单，但之所以不这样做是因为 即使验证所有输入框不仅会分散注意力，还可能引起部分人的反感
最佳实践
- 及时验证最适合用于错误率高或者对输入格式有特定要求的表单项
- 及时验证适合用于有大量有效答案供选择的表单项
- 如果需要及时验证答案，应该在用户输入完答案之后验证，而不是输入过程中
- 如果需要将答案转换为特定格式，应该在用户输入完答案后转换，而不是输入过程中
- 如果有输入限制，应当采取实时更新的方法传递输入限制
多余的输入
如果某些问题可以去除、或者可以推断出，那么这些问题就绝非必要。提出的问题越少，人们就越快，越容易填完表单
智能默认
在美国，90%的人认同器官捐赠，但器官捐赠者只有25%。在几个欧洲国家，超过 80%的人是捐赠者。区别就在于,在美国默认选项是不同意捐赠，而在其他地方，默认选项是同意捐赠
过度的商业用途
智能默认的能量会诱使人们更多考虑有利于商业的情况，但较少为客户考虑。例如，客户经常会碰到默认同意接收邮件
如果又可能，应该确保表单中的默认选项符合客户利益 ，如果被默认接受不喜欢的服务或者选项，用户会对你的服务产生疑问和怀疑
隐性行为 智能默认还会来源于人们的隐性行为 例如：如果知道有人在美国访问表单，可以考虑将国家输入框默认为美国
个性化默认 智能默认还与个人相关 例如：如果我在 eBay 出售物品总是用联邦快递作为发货方式，对我而言，发货方式选项就可以默认我的个性选择。
最佳实践
- 仔细检查表单所有问题，去除多余的问题
- 智能默认可以帮助人们回答问题，通过恰当设置满足多数人的只能默认需求
- 只要有可能，单选按钮就应当设置默认选项，如果没有明确的默认选项，用户又不明白如何做出选择就会容易发生错误
- 人们会忽略默认选项，所以请全包默认选项符合多数人目标
- 设置个性化默认选择，客户能更快完成表单，因为答案具有“粘性”
额外的输入
并非所有时候所有人都需要填写表单的所有输入框，很多情况下几个简单选项就能满足多数人需要。
这种情况下可以采用额外输入
及时增加
及时增加提供额外输入框给需要的人，同时不会阻碍不需要的人。这类输入框常常被作为 高级选项
如果即时增加会在触发行为下方显示额外输入框，应当避免使用导致页面内容大幅下移的大片输入框。 如果额外选项很多，最好能在一侧或者以叠层的方式显示
最佳实践
- 对于单一表单，应当保持一致的额外输入方式
- 如果需要显示大量额外输入，可以考虑采用 叠层方式代替即时显示方式，避免网页跳动
- 如果额外选项需要单独考虑，应当使用模式叠层
- 确保提供用户明确办法关闭或者取消模式叠层并返回表单
- 返回表单时，应当品示在叠层中所选选项
基于选择的输入
基于选择的输入根据对初始问题的回答要求人们继续回答，出现一系列后续问题
页面级选项
把过程明确分为两步，这可能是解决表单中选择性输入问题最简单的方法
网页级别的选择性输入把跟进问题显示在独立于初始选择的其他网页上
网页级别的选择表现平均，该解决方案达到了平均满意分， 错误数量较少，眼动参数表现较好
水平选项卡
如果只考虑标准可用性指标，水平选项卡在所有测试中整体表现最佳。 没有参加者出错，他们能够迅速完成任务，而且对这种设计了满意度最高分
很多人都是自上面下填表，因此可能会忽略水平选项卡。水平选项卡之间是否互斥也不够清晰
垂直选项卡
就眼晴舒适度而言，垂直选项卡在测试中表现最佳。该解决方案中， 眼晴固定总时长最短，平均固定时长最短，平均固定次数最少。
在我见过的其他可用性测试中， 垂直选项卡的表现优于水平选项卡 。由于垂直选项卡在满意度、眼动指标和完成时长方面得分较高， 我倾向于使用垂直选项卡，而不使用水平选项卡
下拉列表
下拉列表解决方案利用菜单和分组框将所有基于选择的输入放在表单中的特定区域
和垂直选项卡一样，下拉列表解决方案隐藏了无关输入，仅在人们需要才会显示
如果初始选项列表超过水平或垂直选项卡所能支持的范围，下拉列表基于选择的输入可能是安全方案
单选按钮下方显示
这种做法的优点在于能保持所有初始选项——以及这些选项中的个人选择——始终可见
如果人们改变选项、屏幕刷新来更改额外输入内容页面跳转的效果会导致人们迷失方向
如果选择性选项的数量很多，初始选项和额外选项之间的关系就会变得非常不清晰
单选按钮内显示
与单选按钮下方显示的亦法相似，单选按钮內显示的解决方案在初始选项内显示额外输入
因为显示的单选按钮及其选择性输入位置非常靠近，该解决方案的满意度也近乎完美
如果选择性输入数 量很多，该方案会马上崩溃 。页面跳动加上初始选项移动，两者之间的页面元素不断显示隐藏，会造成交互迷失方向
显示非活动选项
初始选项之间的跳转会导致用户迷失方向 ，为了解决这个问题，可以采用显示非活动选项的解决方案
此方法保持所有额外输入可见，但一次只有一组选项可操作
该解决方案在测试中最不受欢迎，表现最差 。参加者对网页长度不满意，而且很厌烦不得不看到他们并不需要填写的表单板块
最佳实践
- 如果每个初始选项的额外输入选项数量很多，那么网页级别的其于选择的输入洗项可能是最件方案
- 在综合可用性、满意度和眼动跟踪指标方面， 垂直选项卡和水平选项卡的表现都不错，但存在选择互斥问题
- 如果初始选项列表较长，而日每个选项都自带一套基于选择的输入，最好能针对额外选项采用下拉列表和视觉分组
- 如果每个初始选项只有几个额外的输入选项，单选按钢下方显示或者单选按钒肉显示是最佳方案
- 隐藏无美的表单控件能减轻表单对限睛的压力
- 任何情况下，应当保持初始选项之间的联系清晰，不要让人们看不到顶级初始选项
- 任何情况下，清晰显示基于选择的输入项和触发控件之间的关系
- 任何情况下，应避免页面过多跳动，页面跳动会中断基于选择的输入项和初始选项之间的关联