Web表单设计

So classic! 几乎没有人喜欢填写表单。 任何人碰到表单的主要目标都是填完表单，然后得到填完之后的东西:购物，使用服务，管理信息等。 由内而外的设计是以数据库的角度设计表单，由外二内设计是以用户的角度设计表单。大多数表单都是由内而外设计的。 测试表单中的每一个问题。这个问题一定要问吗？能自动获得资料吗？有没有更合适时间或者场所能得到答案？ 保留，删减，延迟，解释。保留核心问题，砍掉现时非核心问题，延迟问题到合适情境，解释隐私敏感问题。 先考虑人，再考虑像素。 标签使用清楚明确的语言，模拟人类之间自然的交流，提出得体的问题。让表单更像对话，而不是盘问。 表单如果较长或复杂，可以将内容分组到多个部分。就像对话，主题之间会自然出现间断。分组后每组问题，需要有有意义可理解的主题。 内容组之间的差别不需要过量视觉差异，否则会造成视觉污染，阻碍人们浏览表单。使用最少的视觉信息有助于保持焦点在表单内容，而不是表现形式。 有时候为了回答每个问题，人们要看到所有问题，这时一个较长的网页可能是最佳方案。 某些情况下有的问题出现在表单填完之后效果最好。类似“您如何知道我们”或者“您想进一步了解服务吗”的可选性营销问题。实际回答率可能会更高。 有人使用类似斑马线的效果显示左对齐表单中标签和对应的输入框，但标签定位演动跟踪研究表明，在标签组对其布局中，人们一般都能顺利将输入框和标签联系在一起，只是稍微多占用点时间。因此这种办法并不能解决问题。看起来具有诱惑力，但实际上带来了很大的视觉噪音。  提供清晰的表单填写路径：告诉人们在填什么表单，填完之后能干什么。 让表达的命名与用户进来的位置（比如所点击的按钮）保持一致。 在对需要花费大量时间填写的表单设置其事业，告诉用户你需要先准备什么东西，比如多少时间？ 提供单一简单的眼动路径让用户能够更快的处理表单。比如让标签、输入框、按钮对齐于一条简单的竖线。  采用输入框高度的50%~75%作为两行之间的间隔。 剔除与表单填写没有直接关系的界面元素，并适当消除放弃路径，有助于帮助人们完成任务。 表单较长时提供保存功能或者系统自动保存。 不要把色彩作为传递信息的唯一方式。比如表示出错，不能只用红色标识，还应该提供一栏来显示“错误”提示文字。 避免使用每秒审闪烁超过三次的对象，如果用户有癫痫症可能会因此发作。 尽量让用户只用键盘就能操作所有的对象。 两栏表单设计，我们应该思考使用Tab键进行输入框跳转时的大量用户体验问题。比如跳转顺序，不能纵向跳转，这样会从左栏的最底部跳到右栏的最顶部，体验很糟糕。  对于关键任务，比如结算表单或者注册表单，应去除分散注意力的部分，和任何导致人们放弃填写的链接或内容。 如果表单没有清晰固定的有序网页，就不要采用精确的进度指示，而采用更笼统的进度指示，避免给用户设置错误期望。 采用“tabindex”html属性来控制表单的跳转顺序。 顶对齐表单  右对齐表单造成左侧不齐，会降低快速浏览表单问题的效率，在标签长度差距大、每个问题的输入部分高度差异大时尤甚。（下面这张图在大屏阅读时很难让用户对表单问题做一个快速浏览）  人们需要快速浏览一遍表单中的所有问题时，左对齐表单能较好地做到这一点。 必填、帮助等icon和标签联系在一起，有助于人们更容易的浏览到所需信息。 左对齐表单填写速度最慢，可能因为左对齐表单解析问题时眼球定位次数较多，人们一般都能将左对齐布局中的标签与相应的输入框联系起来，只是花费的时间更长。但完成时间长并不总是坏事，如果希望人们速度放慢，并仔细考虑表单中的每个输入框（特别是含有大量可选输入框时），左对齐表单是个好办法。 输入框内标签表单能极大节省屏幕空间，但填写完后标签都不见了，非常不便于检查。因此输入框内标签，更适用于只有极一个或极少几个问题，或者问题非常熟悉的表单（比如通讯录）。当表单较长时，最好不要使用输入框内标签。 对于人们回答时需要参考标签的表单，不应该采用输入框内标签。 Material design当中的输入框内标签，具有很大的参考价值。 应当确保标签和数据有明显区别，比如添加左右破折号。  作者经验表明，情境常常比一致性更重要。因此在同一应用程序中，可根据具体情境考虑不同的表单对齐方式。但一定要克制！因为人们即使并不真的记得应用程序内不同表单之间的对齐差异，也会下意识的认为多种表单会很难使用。除非有合适的理由，否则就采用单一布局来减轻一致性问题。 避免同一表单中不同的标签对其方式。 必填标识与输入框而不是标签对齐时，可能会由于某些表单中输入框长度不一致，导致无法轻松弄清楚哪些问题是必填的。或者由于标识位置靠后，容易被忽略。 “强大的设计源于重复运用一些简单的模式。” 如果可能，应当确保输入框长度能提供有意义的暗示，帮助人们有效回答问题。否则，输入框的长度应当保持一致，为答案提供足够空间。 按钮与输入框对齐，让眼动路径尽量简单。 如果表达中的答案明确，用户非常容易正确地完成表单，那么可以在正确回答完所有问题之前禁用主动作。相反，如果表单中含有非必填问题，应避免使用这种方法，因为用户在填写完必填选项后立刻激激活主动作会诱导用户立即提交，而停止填下剩下的非必填项目。另外，问题复杂、用户容易犯错且自己不易发现的表单，应保持主动作激活，这时用户可通过点击主动作获得错误反馈。 表单中主动作即使不可用，也应该总是可见。这为用户填写表单提供了明确与完整的路径。 界面设计中需要暗示元素或功能完整性，或者提示关键操作路径的元素，禁用后也要保持可见。比如网页上的右键菜单，如果禁用但显示，用户会知道这个功能存在但此时不可用，；如果直接隐藏，用户可能会认为没有这个功能，感到疑惑。“禁用”和“没有”是存在差别的。 建议采取主动作控制服务条款的交互来取代用复选框单独勾选同意服务条款，比如，主动作为“点击下方注册，表示同意”。这样户会少回答一个模棱两可的关于条款的问题，并且避免了复杂化的交互操作。 尽量避免表单中出现次动作，应当为人们提供完成表单的单一路径，用简便的撤销来替代次动作。 次动作不可避免时，应确保主动作和次动作视觉差异清晰。 明确表达表单的“提交中”状态（比如主动作暗示loading并临时禁用），避免重复提交。 如果需要过多帮助文字来解释如何完成表单，则这说明所提问题要么措辞不当，要么过于复杂，应该被重新审视。 自动即时帮助系统在人们激活输入框时，帮助文字自动出现。自动帮助系统有一个潜在缺点，只有在人们开始填表时，才知道是否有帮助文字，需要帮助的人会觉得失望，甚至不愿尝试。 输入框内置帮助文字系统在人们激活输入框并开始填写时，帮助文字消失并不再出现，除非输入框再次为空。概括回答方式的帮助（比如简单的输入格式）可以出现在输入框中。而提示问题是什么、为什么问这些问题、是否必填的帮助文字不应该出现在输入框中，因为输入后这些提示将消失，不便于检查。 用户激活的及时帮助系统适用于表单所含问题复杂，且会被相同的人重复使用的情况，这类系统允许第一次使用的用户访问所有需要的帮助，而高级用户只触发一些帮助来唤醒记忆或者快速回答问题。 用户激活的区域帮助系统，适用于内容很多、问题复杂的表单。比如右侧帮助面板，软件激活的帮助手册窗口等。面板中可以显示图形、图表和广泛的帮助文字。 表示帮助最好的符号是问号图标。 尽量减少表单中的帮助文字已促成更好的设计方案。 错误提示让人们知道，无法继续填写表单，并且告诉人们任何补救。成功提示告诉人们从填写开始就想听到的话——填完了。 错误提示会阻碍人们完成表单这一首要目标，因此错误提示的视觉表现形式应和其重要性相匹配，不要过大或过小。 错误与成功的消息图标应该以多种互不相同的方式呈体现区别，比如符号，颜色，形状。这样能加快人们的认知过程，并且满足色盲人士的需求。 如果有输入框发生错误，应当采用双重视觉强调清晰标识，确保人们能看到。 当表单较长，发生错误的输入框可能出现在显示器首屏之外时，解决方法可以是跳到当前需要解决的错误中的第一个，人们会依次看到需要改正的输入框。或者使用顶部错误信息，将所有错误信息在顶部列出来。  错误提示不能被忽视或置之不理，必须要解决错误。而成功信息不能阻止人们的进程，应该鼓励人们采取更多行动。 成功消息还可以包括与刚才完成任务有关联的后续操作，进一步提示用户下一步该做的事情，而不是成为一个死胡同。 即时验证能提供许多反馈：确认回答合适，建议有效回答，通过实时更新状态将用户控制在有效范围内范围内。 如果对表单所有问题都使用即时验证，虽然能确保一次性正确填完所有问题，但也会分散注意力，还可能引起部分人的反感。 提供及时验证的时机是关键。即时的错误提示最好是在明确填写结束后（比如用户填好并移动到下一个输入框时），再提供反馈。 即使质量只是条，能引导人们更好的完成复杂问题，比如设置一个安全的密码。 即时建议通过提供一些有效答案让用户选择，帮助用户快速完成。比如根据已输入内容在下拉菜单中提供推荐选项。 对用户输入格式有要求时（比如在电话号码中按格式加入破折号），可以在用户输入完成后，提供正确格式的即时建议，让用户直接选择。 提出的问题越少，人们就可能越快越容易地完成表单。 如果提供默认选项，请保证默认选项符合用户的利益，否则用户会对产品产生疑惑，并提前终止。 默认选项可基于单个用户信息个性化提供，也可以基于占绝对大多数用户共同偏好提供。 默认选项极容易让用户忽视，所以必须确保其符合绝大多数人的利益。 并不需要人们集中注意力的额外输入可以采用叠层的形式，还需要人们特别关注的输入，可以采用模态窗口的形式。 关于额外输入，用户手动点击激活会自动浮现更受欢迎。 如果基于初始选项的额外输入选项很多，那么网页级可能是最佳方案。 网页级的基于选择的输入中，垂直选项卡综合表现最好，并且可以在垂直选项卡上增加Radio，来表示互斥。  如果初始选项列表较长，可以采用下拉列表。 整体而言，隐藏无关的表单控件，能减轻用户的压力。 将初始选下，及其基于选项的出入靠近能达到最高的满意度。 任何情况下，避免页面过多跳动。 用户使用网站服务时，不到万不得已不要过早出现注册表单。 可以考虑采用循序渐进的方式，让用户在使用服务的过程中，自然的、渐渐的、每次少量的填写一些信息，完成注册。

• 第 7 章帮助文字
  • 提供帮助的时机
  • 自动即时帮助
  • 用户激活的即时帮助
  • 用户激活的区域帮助
  • 安全交易
  • 最佳实践
• 第 8 章错误与成功
  • 错误消息
  • 成功
  • 消灭死胡同
  • 最佳实践
• 第Ⅲ部分 表单的交互
• 第 9 章即时验证
  • 确认
  • 建议
  • 限制
  • 最佳实践
• 第 10 章多余输入
  • 去除问题
  • 智能默认
    • 个性化默认
  • 最佳实践
• 第 11 章 额外输入
  • 即时增加
  • 叠层
  • 循序渐进
  • 最佳实践
• 第 12 章基于选择的输入
  • 页面级选项
  • 水平选项卡
  • 垂直选项卡
  • 下拉列表
  • 单选按钮下方显示
  • 单选按钮内显示
  • 显示非活动选项
  • 组的显示
  • 最佳实践
• 第 13 章循序渐进
  • 注册
  • 参与
  • 最佳实践
• 第 14 章表单的未来
  • 消失中的表单
  • 变化中的表单
  • 构建表单

第 7 章帮助文字

提供帮助的时机

自动即时帮助

在 Wufoo，人们填写输入框时，帮助文字会自动出现

Linkedin 采用了内置帮助文字的输入框

用户激活的即时帮助

用户激活的区域帮助

安全交易

最佳实践

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

第 8 章错误与成功

错误消息

成功

消灭死胡同

最佳实践

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

第Ⅲ部分 表单的交互

第 9 章即时验证

确认

Ebay Express 表单采用进度条实时说明密码的安全程度

Lastfm. Com 的注册表单上几乎每个输入框都采用即时验证

Mint 网站的注册表单，填写时立即出现错误消息，打断了人们回答问题

建议

Kayak. Com 使用即时建议来帮助人们提供旅行目的地的有效答案

限制

即时验证可用来传达限制信息，比如 Yahoo! Local 表单的消息中包含最多可填写的字符数

最佳实践

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

第 10 章多余输入

去除问题

重新设计后，Paypal 表单突出了所使用的信用卡类型，去除了个不必要的问题

智能默认

在《选择的悖论》（Paradox of Choice）一书中，作者巴里・施瓦茨（Barry Schwartz）讨论了生活中选择过多的影响，并提出策略应付无处不在的过多选择。他特别叙述了智能默认的能量一即在满足多数人需要的地方放置选择一一来帮助人们作出明智选择

EBay 出售物品表单采用的智能默认包括了发货方式、保险和销售税答案

个性化默认

智能默认还与个人相关。例如，如果我在 eBay 出售物品总是用联邦快递作为发货方式，对我而言，之前谈到的发货方式选项就可以默认我的个性选择。为回访客户激活选项常常指保持选项有“粘性”，也就是说保持客户之前的选择。

最佳实践

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

第 11 章 额外输入

并非所有时候所有人都需要填写表单的所有输入框很多情况下，几个简单选项就能满足多数人需要。

即时增加

表单中增加多位经理不会影响只有一位经理的人。

叠层

叠层是显示额外选项的另一种方式：额外输入框出现在表单上方，就像电脑桌面上出现的对话框。日历控件可能是最常见的例子，人们能够选择特定日期回答表单问题。

循序渐进

例如，如果需要客户从十二个或者更多潜在选项选择一个类别，常见解决办法是用下拉菜单或者几栏单选按钮方式显示选项。事实上，人们选择视频类別时，视频网站 Youtube 采用的正是这两种方式（图 11.9)。

最佳实践

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

第 12 章基于选择的输入

Found Bin 采用了简单的基于选择的输入，根据人们的初始选择来显示后续问题

页面级选项

水平选项卡

垂直选项卡

下拉列表

单选按钮下方显示

单选按钮内显示

显示非活动选项

组的显示

最佳实践

1.如果每个初始选项的额外输入选项数量很多，那么网页级别的基于选择的输入选项可能是最佳方案。虽然需要两个网页来拆分表单，但动态隐藏和显示额外输入选项不会让人们产生困惑，人们也无需怀疑选项之间是否互斥。

2.在综合可用性、满意度和眼动跟踪指标方面，垂直选项卡和水平选项卡的表现都不错，但存在选择互斥问题。

3.如果初始选项列表较长（4 或者 5 个以上），而且每个选项都自带一套基于选择的输入，最好能针对额外选项采用下拉列表和视觉分组。

4.如果每个初始选项只有几个额外的输入选项，单选按钮下方显示或者单选按钮内显示是最佳方案....如果可能，应当确定使用清晰的视觉联系和过渡。

5.所有非活动选项显示或者全部选项都显示基本不能接受，因为选项太多，人们马上会被打昏，而且其中太多选项与人们的目标无关。

6.整体而言，隐藏无关的表单控件能减轻表单对眼睛的压力，人们能迅速完成表单，除非人们需要。

7.整体而言，将初始选项及其基于选项的输入靠近显示，能达到最高的满意度。

8.任何情况下，应当保持初始选项之间的联系清晰。不要让人们看不到顶级初始选项。

9.任何情况下，清晰显示基于选择的输入项和触发控件之间的关系。本章中所有例子使用黄色或者灰色背景来显示这种关系。

10.任何情况下，应避免页面过多跳动，页面跳动会中断基于选择的输入项和初始选项之间的关联。

【？】

第 13 章循序渐进

注册

参与

Jumpcut 首页号召人们采取行动：Make a Movie 和 Try a Demo，如图 13.2 所示。Jumpcut 跳出了固定模式，它关心的是告诉你它所提供的服务如何工作，优点在哪里。我们继续往下看。

选择 Make a Movie，出现影片名称输入框和上传媒体文件的若干选项。选择 Upload，可以从桌面计算机添加图片、音频及视频。上传后，进入 Jumpcut 网络视频编辑器，可编辑影片，增加风格，整合音频、视频及图片，等等。

【参考帮助建站的网站。】

目前为止都没有出现注册表单。只有想要发布或者共享影片时，Jumpcuts 才要求你填写姓名和电子邮件，便于你和其他人能访问刚刚制作的影片。在此过程中，你明白了 Jumpcut 网站是做什么的，并不需要填写注册表单。这就是循序渐进。

最佳实践

规划客户对 Web 服务的最初体验时，可以考虑采用循序渐进的方式以避免出现注册表单。

如果要采用循序渐进方案，应当确保潜在客户能明白如何使用以及为什么要使用你提供的服务。

如果要为潜在客户自动生成账户，应当确保客户有清晰访问账户的方式。人们可能会忽视或者不看账户生成的提醒邮件，还可能不确定他们是否已经拥有账户。

如果只是将注册表单的输入框分布到多个页面，则不要使用循序渐进方案。因为这可能会降低效率，也使人们感到不快

第 14 章表单的未来

消失中的表单

动态交互或者类似游戏的交互是隐化表单的另一种方式。举个例子，Uzanto 的 Mind Canvas 软件（图 14.1) 利用游戏启发方法（game- -like elicitation method, GEM），让数据收集过程变得妙趣横生。使用 Mind Canvas 参加市场研究的人非常亭受“填写调查”的过程。

除了这些交互方法外，技术解决方案也能推动表单从台前走向幕后。Microsoft 的 Live ID"（以前称为 Microsoft Passport）系统和 Openid开源项目均采用“单点登录”，人们只用个账号就能登录多个网站。虽然这些方法能消除很多重复注册和网上支付表单，但两者尚未成为明确标准。

变化中的表单

短期无法消失，但也在变化当中。

个性化表单。

例如输入文字长短有变化，文本框大小不一样。

构建表单

Web 联盟（World Wide Web Consortun, W3C）的表单工作组是一个有助于了解下一代 Web 表单技术的理想场所。特别是其 Xforms 标准明确区分了表单的作用和不同标记（markup）下的表单样式。

http: //www.w3.org/markup/forms/

• 第1部分 表单结构
• 第 1 章表单的设计
  • 1.1 表单设计很重要
    • 电子商务
    • 社交互动
    • 生产力网站
  • 1.2 表单设计的影响
  • 1.3 设计时的考虑因素
    • 设计原则
    • 设计模式
• 第 2 章表单的组织
  • 2.1 选取问题
  • 2.2 构建对话
  • 2.3 内容的组织
  • 2.4 归纳区别
  • 2.5 最佳实践
• 第 3 章完成之路
  • 3.1 表单的命名
  • 3.2 起始页
  • 3.3 清晰的测览线
  • 3.4 注意力分散最少
  • 3.5 进程指示，
  • 3.6 Tab 键跳转
  • 3.7 最佳实践
• 第II部分 表单元素
• 第 4 章标签
  • 标签对齐
  • 顶对齐标签
  • 右对齐标签
  • 左对齐标签
  • 输入框内的标签
  • 混合对齐
  • 最佳实践
• 第 5 章输入框
  • 输入框的类型
  • 输入框的长度
  • 必填项
  • 输入组
  • 弹性输入框
  • 最佳实践
• 第 6 章动作
  • 主动作和次动作
  • 动作顺序
  • 进程中的动作
  • 同意与提交
  • 最佳实践

第1部分 表单结构

第 1 章表单的设计

1.1 表单设计很重要

电子商务

购物过程，结算表单阻碍快速购物

社交互动

注册和联系表单阻碍交流分享

生产力网站

创作或者协同工作收到阻碍。【？】

选民投票...

1.2 表单设计的影响

衡量表单设计带来的影响的工具： 数据来源：

可用性测试。 在可用性实验室中观察人们与表单如何交互，可得到宝贵的定性和定量信息。

1. 错误或问题的数量和位置
2. 错误或问题的严重程度
3. 完成率
4. 完成整个表单或部分表单的时间
5. 满意度评分
6. 任务主观评论。

实地测试 从人种学角度观察人们在家中或办公室中与表单的互动情况。【context inquiry 】

1. 访问表单要求填写信息的来源：文档、软件和人等
2. 表单填写环境：吵闹的办公室和小监视器等
3. 任何说明表单完成或错误率的额外情境。

客户支持. 了解用户填写表单时碰到的问题，有利于分离和解决问题。【客户反馈】

1. 报告最多的问题
2. 解决报告问题的常见办法
3. 问题报告人的统计信息
4. 问题报告人所使用的操作系统及其浏览器设置。

网站追踪 表单可用于追踪任意数量的有用量化指标。

1. 完成率；
2. 如果表单未完成，人们是在哪个位置放弃填写表单的
3. 人们访问表单的方式
4. 已使用哪些表单元素
5. 已输入哪些数据
6. 浏览器和操作系统信息

眼动跟踪 记录人们如何理解表单的表现形式，可用于解释复杂的地方（图 1.9)。

1. 人们在表单上看到了什么
2. 眼球固定次数：解析表单所花的努力
3. 眼球固定时间长度：看每个元素所花费的时间。

web 惯例 调査表单设计问题的共同解决方案可提供宝贵见解（图 1.10)。

1. 设计问题的独特解决方案
2. 网上通用的模式。

1.3 设计时的考虑因素

设计原则

尽量减少痛苦 人们要的是填完表之后的东西，所以填写过程应尽量简洁、容易【简洁】

说明填写完成路径 几乎每个表的目标就是填完，表单应清晰告诉人们如何完成这一目标。【顺序】

考虑情境 表单并非凭空存在。它们儿乎都是更广泛情境（受众群体、应用、业务）的组成部分，这些情境决定了如何使用表单。【情境】

确保一致沟通 表单是顾客和公司之间对话的中间【沟通一致性】

设计模式

第 2 章表单的组织

2.1 选取问题

用户

“保留，删减，延迟，解释”形成更好问题的四大策略

2.2 构建对话

对话而不是盘问。

术语变得简明容易理解。简洁准确，让问题容易理解。

2.3 内容的组织

将问题分成有意义的组或者页面，主题。

2.4 归纳区别

2.5 最佳实践

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

第 3 章完成之路

3.1 表单的命名

3.2 起始页

3.3 清晰的测览线

3.4 注意力分散最少

3.5 进程指示，

3.6 Tab 键跳转

3.7 最佳实践

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

第II部分 表单元素

第 4 章标签

标签对齐

顶对齐标签

右对齐标签

左对齐标签

输入框内的标签

混合对齐

最佳实践

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

第 5 章输入框

输入框的类型

输入框的长度

必填项

输入组

弹性输入框

最佳实践

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

第 6 章动作

主动作和次动作

....次动作（Secondary Action）较少使用，并且大多数情况下允许人们撤销输入的数据。诸如取消、重置或者返回等选项代表次动作，这些动作与多数人填完表单的主要目标相悖。

区别主动作和次动作的多种方式包括不同按钮风格、按钮和链接的组合以及不同链接风格

动作顺序

进程中的动作

避免出现过多提示告诉人们不要多次点击提交按钮

Basecamp 通过动画提供表单提交和文件上传的进程指示

Basecamp 的注册表单中，直到所有输入框都已填入有效答案，提交按钮才能使用

同意与提交

服务条款

最佳实践

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