表单-设计

发表于   |   分类于

别人评论《Web表单设计：点石成金的艺术》这本书非常好，ANT DESING 官网的资源中也提到了这本书，于是买了一本看看。这本书已经绝版了，我买的是影印版的，图片大多数都看不清，我个人对这本书并没有什么特别好的感觉，没感觉到对自己有什么帮助。现在把每章的最佳实践记录下来，希望能够加深些理解，后期需要时能够想到这本书。

设计原则

  • 尽量减少痛苦 人们要的是填完表单之后的东西，所以填写过程应尽量简洁、容易。
  • 说明填写完成路径 几乎每个表单的目标就是填完，表单应清晰告诉人们如何完成这一目标。
  • 考虑情景 表单并非凭空存在。它们几乎都是更广泛情境（受众群众、应用、业务）的组成部分，这些情境决定了如何使用表单。
  • 确保一致沟通 表单是顾客和公司之间对话的中间人。多个团队参与对话（市场营销、隐私部门、工程部、设计部、商业部等），但表单只能用一种声音说话。

表单的组织

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

完成之路

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

标签

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

输入框

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

动作

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

帮助文字

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

错误与成功

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

即时验证

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

多余输入

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

额外输入

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

基于选择的输入

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

循序渐进

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