这是一本什么书？

介绍表单设计理念和优秀实践的工具书，适用于设计师扩充表单设计深度。

我有什么收获？

表单的核心是构建对话。
表单的情境可以有无限种，针对特定场景归纳出设计模式，将模式组合使用可转化为指数级的解决方案。
竞品分析的目的是为了提取设计模式。

第1章：表单结构

表单的设计

表单注册中的机会与问题

通过客户支持、可用性发现和网站追踪数据来阐述主要问题，逐页画出整个流程，同时附上说明用户离开和最佳实践分析的网站点击数据。（包含可用性测试、实地测试、客户支持、网站追踪、眼动追踪、Web惯例）

表单的组织

• 选取问题：保留，删减，延迟，解释
• 构建对话：标签+表单输入 分别代表问题与答案，优化标签内容，构建自然的有意义的对话
• 内容的组织：为了保证对话流畅，将问题分成有意义的组。根据问题的数量和情境，采取多个或者单个网页
• 归纳区别：使用最少的视觉信息有助于保持焦点在表单内容，而非形式

最佳实践

• 应当花时间评估表单中的问题。应当提高警觉，去除一切不必要的问题。
• 表单所提问题(标签)应当尽量简洁。
• 如果人们会误解简洁标签,应当寻找使用自然语言的机会，澄清表单要求人们回答的问题。
• 表单所提问题来自多个不同人或部门，应当确保表单统一口径。
• 可以将表单内容组织成逻辑组, 有助于浏览和完成填写。
• 如果可能,应当以对话形式构建表单。主题间的自然间断有助于组织表单。
• 如果表单可自然分成若干主题， 一个网页可能就足够组织表单。
• 如果表单包含大量问题，同时有若干主题，可能需要多个网页来组织表单。
• 如果表单包含大量问题，而只和一个主题相关，一般需要一个较长网页来组织表单。
• 可以考虑在表单填完之后提出可初问题。可能会比在初始表单中提出这些问题能获得更多答案。
• 可以考虑采用Web惯例调查发现特定类型网站如何组织表单。
• 应当采用最少的必要视觉信息来区分内容组。
• 首字母应当大写,使内容组更容易浏览。

使用户集中表单完成的实践

• 命名：表单名称与人们采取的行动保持一致
• 起始页面：提供情境信息
• 清晰地浏览线：间距一般为输入框高度的50%-75%，保证有节奏地流动
• 注意力分散最少：剔除与表单填写没有任何关系的界面元素
• 进程指示：进程中若存在插入注册、设置界面等情况，详细步骤不能恰当表述，建议采用笼统的步骤指示
• Tab键跳转：明确输入框的访问顺序

最佳实践

• 确保表单名称符合人们的期望,并简洁解释每个表单的用途。
• 如果表单需要时间或者查询信息才能填写,可以采用起始页来设定人们的期望。
• 由始至终采用清晰浏览线和有效视觉步伐来引导人们,确保说明清晰的填写完成路径。
• 对于关键任务表单,比如结算表单或者注册表单，应当去除会分散注意力的部分、任何导致人们放弃填写的链接和内容。
• 如果表单分为多个已知的有序网页,可以采用进程进示来传达范围、状态和位置等信息。
• 如果表单没有清晰的有序网页,不要采用进程指示，应当采用更笼统的进程指示,而不要设置错误期望。
• 设计表单布局时,应考虑使用Tab键的“跳转”体验。 采用“tabindex”HTML属性来控制表单的跳转顺序。

第2章：表单元素

标签

• 标签对齐：顶对齐填写表单速度最快，适合本地化多语言，左对齐填写速度最慢
• 输入框内的标签：用户输入时，标签会消失，适用于仅有一个问题或用户非常熟悉的问题；标签要与内容项有所区分，例如：-请选择-
• 混合对齐：模糊用户填写路径，避免使用

  最佳实践

  • 表单标签应当使用简洁的自然语言,大小写一致,所提问题应当尽量直观,容易理解。
  • 如果要减少填写时间,或者出于本地化原因,标签长灵活多变,可采用顶对齐标签。
  • 如果与上述目标类似,但垂直屏幕空间有限,可采用右对齐标签。
  • 如要求人们浏览表单标签,知道必填问题或者回答多个问题的若干特定问题,可采用左对齐标签。
  • 如果表单非常短,屏幕空间极度有限,可采用输入框内标签,同时应当确保合适的交互和情境。
  • 清晰区分标签和数据,特别是对于输入框内标签。
  • 如果考虑在同一应用工具的不同表单采用不同标签对齐方式，应当平衡情境和一致性。
  • 单一表格中采用不同标签对齐方式会破坏明确完成路径，人们会觉得迷惑。

输入框

• 类型：文本框、单选框、复选框、下拉菜单、列表框
• 长度：输入框的长度可为用户提供所填内容的自然暗示
• 必填项：必填项和可选项选择较少内容的标示，尽量在标签旁注明，而非输入框旁
• 弹性输入框：保持输入框有足够的弹性，以接受多种有效答案形式

最佳实践

• 应当为所提问题提供合适的输入框:属于是否问题? 还是需要从多个互斥选项中选择一项?等等。
• 如有可能,应当确保输入框长度能提供有意义的暗示, 以帮助人们有效回答问题。
• 如果不是上述情况,输入框长度应当保持一致,为答案提供足够空间。
• 尽量避免出现可选输入框。
• 如果表单大部分输入是必填项,标明可选项即可。
• 如果表单中大部分是可选项,标明必填项即可。
• 标明表单必填或可选项,文字是最清晰的办法。但“*”代表必填项相对容易理解。
• 如果使用“*”标明必填项,但务必采用图例解释其含义。
• 将必填项或者可选项标识器与输入标签相关联，便于人们知道需要回答哪些问题。
• 如果输入框存在自然结构,能为人们回答提供有价值线索,应当通过视觉方式将输入框进行分组，并清晰传达自然结构。
• 如果答案明显有多种格式,应当考虑使用弹性输入框。
• 确保弹性输入框不会导致填写简单问题变得复杂。

动作

• 主动作和次动作：提供撤消操作，可以保证次动作不会造成数据灾难性丢失,这需要表单能自动存储数据
• 动作顺序：主动作和输入框对齐会减少填写时间
• 进程中的动作：提醒人们不要点击两次主动作（加重负担），动画+文本说明；如果表单中答案明确，填写完成后才唤起主动作（如果表单含有可选问题，避免使用）
• 同意与提交：把确认服务条款和完成表单整合成单一动作

最佳实践

• 尽量避免表单中出现次动作。应当向人们提供完成表单的单一路径。
• 如果需要使用次动作，应当确保主动作和次动作视觉差异清晰。
• 如果表单所提问题分布在多个网页，主动作应当让人们更接近完成表单，而次动作应当允许人们返回。
• 主动作与输入框对齐，能提供明确路径完成表单。
• 如果的确需要采用具有潜在破坏性的次动作,比如重置或者清除，应当提供简便的撤销方法。
• 处理表单时，应当明确表达，避免重复提交。
• 不要依赖帮助文字来提醒人们不要两次点击主动作，而应当通过禁用主动作按钮来阻止人们这样做。
• 思考组合服务条款和主动作的机会，以确保法律要求合理化。

帮助文字

• 提供的时机：人们不熟悉表单要求输入的数据；人们质疑为何要输入特定数据；人们关心数据安全或隐私；数据特定的填写方式
• 自动即时帮助：填写表单时，确保帮助文字会消失，而不会成为答案的一部分
• 用户激活的即时帮助：帮助文字在表单顶部，而非内部，避免页面跳动
• 用户激活的区域帮助
• 安全交易

最佳实践

• 不要依赖帮助文字来弥补表单缺点。尽量减少表单中的帮助文字,以促成更好的设计方案。
• 帮助文字最合适解释人们不熟悉的数据,例如,为什要问这些问题、安全和隐私、建议回答问题的方式及说明可填项。
• 简洁的帮助文字毗邻问题是最清晰的方式。
• 输入框内的帮助文字只能用于提供回答问题的方式。
• 如果人们知道表单问题答案,但不确定如何回答或者为什么回答,可以考虑使用自动即时帮助系统。
• 如果表单问题人们不熟悉或者复杂,而且可能同样的人会多次使用,可以考虑采用用户激活的帮助系统。
• 除非每个问题都需要很多帮助文字或者内容(图形、图表),使用即时系统可以避免网页跳动拉伸。
• 如果帮助内容很多,可以使用一致的帮助区域,不要使用即时帮助。
• 帮助文字应当尽可能具体。如果帮助文字适用于一组相关输入框,而不是一个输入框,考虑采用网页一部分显示帮助内容,清晰表明输入框组和帮助文字之间的关系。
• 图标、链接或按钮用于用户激活的帮助文字触发器，应放在标签旁,不要放在输入框旁。
• 如果要求用户填入敏感资料,考虑使用有操作含义的帮助文字,允许人们确认资料安全。

错误与成功

最佳实践

• 如果有错误阻碍人们完成填写表单,应该明确告诉人们。错误消息可以说是表单中最重要元素。确保以最重要的形式表现错误!
• 应当在情境中显示错误消息,以便快速解决。
• 应当提供可操作的补救措施,帮助人们能够轻松解决错误。
• 顶部错误消息应当用来说明有错误发生以及相应的解决方案。如果发生多个错误,应当都罗列在顶部消息中。
• 如果有输入框发生错误,应当采用双重视觉强调清晰标示,确保人们能看到。
• 从视觉上将表单出错元素与顶部错误消息联系起来, 清晰传达需要解决错误才能继续。
• 红色文字和警告图标应当用于错误消息。
• 短表单可不采用顶部错误消息或者指示标明发生错误的输入框。如果要采用这种方式,一定要谨慎。
• 如果表单填写成功,应当用成功消息清晰传达并通过成功消息显示结果。
• 根据情境提供成功消息,不要阻止进程。
• 考虑采用动态成功消息突出表单提交成功的结果。
• 避免成功消息页面成为死胡同。

第3章：表单的交互

即时验证

• 确认：常见事例：用户名、密码校验；注意校验的时机，不要频繁打断用户的操作
• 建议：为用户建议有效选项
• 限制：可用来限制输入字符，注意考虑网络延时

最佳实践

• 考虑使用即时验证,以确认或者建议有效答案，并帮助人们在限制范围内输入。
• 即时确认最适合用于错误率高、或者有特定格式要求的问题。
• 即时建议最适合用于有大量可供选择有效答案的情况。
• 即时质量指示条能引导人们更好的回答复杂问题。
• 如果需要即时验证答案，应当在人们输完答案之后进行，不要在输入过程中进行。
• 如果需要将答复转成特定格式，应当确保在人们提供答案后转换,不要在填写过程中转换。
• 如果有输入限制,应当采用实时、动态更新的方法传递输入限制。

多余输入

• 去除问题：减少多余的输入框
• 智能默认：减少选择次数，加快表单填写；考虑初始默认选项
• 个性化默认：注意判定规则，某个选项被选择多少次会被设置为默认选项，即“有粘性”

  最佳实践

  • 仔细检査表单所有问题,千方百计去除多余的问题。
  • 寻找人们回答问题的模式,准确推断答案。
  • 不要为了去除问题而使问题复杂化。
  • 通过恰当设置满足多数人需要的默认选择,智能默认可以帮助人们回答问题。
  • 人们会忽视默认选项,所以要确保默认选项符合多数人目标。
  • 只要有可能,单选按钮都应当设置默认选项。
  • 如果没有明确的默认选项,人们仍可能会明白需要做出选择。但如果他们不明白,就会发生错误。
  • 设置个姓化默认选择，客户能更快完成表单，因为答案更有“粘性”
  • 考虑个性化默认选项发挥作用的地方。并不是表单每项输入都能设为个性化默认选项。

额外输入

• 即时添加：页面跳动( Page Jumping)会导致表单已有内容下移，有时会扰乱人们对所处页面位置的感知。因此，应当尽量减少表单页面的跳动次数。
• 叠层：日期选择器的日历图标是为了展示数据类型
• 循序渐进

爆炸军械处理的案例研究

改善数据输入的有效性。利用小键盘。使用手指输入数据，输入时同时验证数据。利用对话框，简化阅读，节省空间，提供多种输入缓存，保持了灵活性。

最佳实践

• 额外输入可以提供更多选项或者高级选项，满足有需要的用户,同时不妨碍不需要的用户。
• 应当根据客户需求的优先顺序，安排额外输入。主要用例应当总是直接而且可见；次要用例应当点击一次鼠标即可见。
• 如果允许人们激活额外输入，额外输入会比自动浮现更受欢迎。
• 确保触发额外选项的操作措辞明确。如果额外选项自动触发，应当提供线索（图标和文字）来预设期望。
• 对于单一表单,应当保持一致的额外输入方式。
• 如果需要显示大量额外输入，可以考虑采用叠层方式代替即时显示方式，避免网页跳动以及用户迷失方向。
• 确保叠层不会遮住帮助人们填写的输入框，确保人们仍然可以自行填写。
• 如果额外选项需要单独考虑，应当使用模式叠层。
• 确保提供用户明确办法关闭或者取消模式叠层并返回表单。
• 返回表单时,应当显示在叠层中所选选项。
• 如果吸引客户是主要目标，额外输入可以采用通过选择来引导人们的迷人方式。

基于选择的输入

通过眼动和可用性指标对23人测试了此类变量，随机抽取八种设计方案，请“测试者”准确填写表单的全部问题。

• 页面级选项

优点：把过程分为简单的两步，关系明确
缺点：用户会失去宝贵的情境关系，无法查看并访问未选选项
如果要寻找表现平均，且不需要关注快速完成时间的保险解决方案，网页级别的选择性输入更理想。
**

• 水平选项卡

优点：不易出错
缺点：水平分布偏离了填表过程中的线性扫描
人们对每个选项卡下的输入互斥与否感到困惑。活动选项卡的强烈视觉指示可能有助于缓解人们的焦想,而且能 更清楚表明只有活动选项卡下的内容才被提交。

• 垂直选项卡

优点：眼睛舒适度最佳
缺点：存在参与者对选项是否互斥产生疑惑
在满意度、眼动指标和完成时长方面得分较高。

• 下拉列表

优点：眼睛压力小，不占用大量屏幕空间
缺点：只能显示当前选项
如果初始选项列表超过水平或垂直选项卡所能支持的范围,下拉列表可能是安全方案。
**

• 单选按钮下方显示

优点：保持所有初始选项可见
缺点：改变选项后，屏幕刷新、页面跳转会使用户迷失
选择性选项的数量较多时，初始选项和额外选项之间的关系变得更不清晰。
**

• 单选按钮内显示

优点：保持初始选项的情境
缺点：选项数量较多时，页面元素不断显示隐藏，产生交互迷失
注重初始选项和额外输入之间的清晰视觉联系，少量选择性输入和动画过渡有助于此方法的应用。

• 显示非活动选项

优点：非活动元素和活动元素之间存在差别
缺点：网页长度过长，视觉干扰过多
表现较差

• 组的显示

表现最差，避免使用

最佳实践

• 如果每个初始选项的额外输入选项数量很多，那么网页级别的基于选择的输入选项可能是最佳方案。虽然需要两个网页来拆分表单，但动态隐藏和显示额外输入选项不会让人们产生困惑，人们也无需怀疑选项之间是否互斥。
• 在综合可用性、满意度和眼动跟踪指标方面，垂直选项卡和水平选项卡的表现都不错，但存在选择互斥问题，我手上的数据截然相反, 因此两种方案似乎都有问题。如果能通过巧妙的交互设计或者视觉设计避开互斥问题，这两个方案就会表现良好。
• 如果初始选项列表较长（4或者5个以上），而且每个选项都自带一套基于选择的输入，最好能针对额外选项采用下拉列表和视觉分组。
• 如果每个初始选项只有几个额外的输入选项，单选按钮下方显示或者单选按钮内显示是最佳方案。我见过两种方法由于过多页面跳动造成混乱，额外输入项与初始选择之间的关联丧失，因此要谨慎使用。但如果每个选项只有1到3个额外输入项，我会使用单选按钮即时显示。如果可能，应当确定使用清晰的视觉联系和过渡。
• 所有非活动选项显示或者全部选项都显示基本不能接受,因为选项太多,人们马上会被打昏, 而且其中大多选项与人们的目标无关。
• 整体而言,隐藏无关的表单控件能减轻表单对眼睛的压力,人们能迅速完成表单,除非人们需要。
• 整体而言,将初始选项及其基于选项的输入靠近显示，能达到最高的满意度。
• 任何情况下,应当保持初始选项之间的联系清晰。不要让人们看不到顶级初始选项。
• 任何情况下,清晰显示基于选择的输入项和触发控件之间的关系。本章中所有例子使用黄色或灰色背景来显示这种关系。
• 任何情况下,应避免页面过多跳动,页面跳动会中断基于选择的输入项和初始选项之间的关联。

循序渐进

最佳实践

• 规划客户对web服务的最初体验时,可以考虑采用循序渐进的方式以避免出现注册表单。
• 如果要采用循序渐进方案,应当确保潜在客户能明白如何使用以及为什么要使用你提供的服务。
• 如果要为潜在客户自动生成账户,应当确保客户有清晰访问的方式。人们可能会忽视或者不看账户生成的提醒邮件,还可能不确定他们是否已经拥有账户。
• 如果只是将注册表单的输入框分布到多个页面,则不要使用循序渐进方案。因为这可能会降低效率,也使人们感到不快。

表单的未来

• 消失中的表单：循序渐进；动态交互或者类似游戏的交互；单点登录
• 可用性与视觉的平衡