关于Web表单设计,需要注意的8个要点

3 评论 11443 浏览 40 收藏 12 分钟

常见的表单设计背后藏着许多秘密,如何让用户快速准确的填写表单,是本文在思考解决的问题。本文偏理论和实践结果,实例较少,供大家参考和学习。

常见问题:

在设计表单时,你是否会有如下疑问或思考:

  • 谁会填写表单?为什么要填写?
  • 如果表单跨多个网页,需要告诉人们当前处在哪一页么?
  • 输入框标签应当顶对齐、右对齐还是左对齐?
  • 表单中如何使用智能默认选项?
  • 何时在表单中使用帮助文字?
  • 如何表示必填项?
  • 主动作和次动作有什么区别?(提交/保存/继续、取消/重置)

一、表单设计原则

  1. 尽量减少痛苦,填写过程尽量简洁容易;
  2. 说明完整填写路径,清晰地告诉人们如何填写完成
  3. 考虑情景,受众群体、应用、业务
  4. 确保一致沟通,保证客户与公司只用一种声音说话

二、表单的组织

  • 花时间评估表单中的问题,去除不必要的问题;
  • 表单所提问题(标签)应当尽量简洁,如果人们误解简洁标签,应当寻找使用自然语言澄清的机会;
  • 表单所提的问题可能来自不同的人或部门,确保表单统一口径;
  • 可以将表单内容组织成逻辑组,有助于浏览和完成填写;
  • 可以以对话的形式构建表单,主题自然间断;
  • 表单包含大量问题,若干主题,需要多个网页来组织表单;
  • 表单包含大量问题,一个主题,需要较长网页来组织表单;
  • 表单填写完成后提出可选问题,可能会获得更多答案;
  • 应当采用最少的必要视觉信息来区分内容组;
  • 如果表单需要较长时间或查询信息才能填写,可采用起始页说明(暂存)方式满足;
  • 由始至终采用清晰的浏线和有效视觉引导表单填写(清晰唯一路径);
  • 如果表单分为多个已知有序网页,可以采用进程指示来传达范围、状态和位置等信息。

三、标签对齐

每个表单至少都有三个基本要素:标签、输入框和动作。

标签负责提出问题,输入框供给人们填写信息,而动作允许人们提交答案,还有一类——无标签表单。

1. 顶对齐标签

顶对齐标签由于输入框和标签的位置非常近,处理起来毫不费力,所以填写整个表单很快很容易,是最能减少填写时间的方式。

顶对齐标签还提供了大量的横向空间,可以扩大或收缩标签文字,而不会对整个页面的布局产生负面影响。大量横向空间可用于以多种方式组合相关输入框。

但是,顶对齐标签也会占用额外的垂直空间,若可使用的垂直屏幕空间较小,应当谨慎使用顶对齐标签。

顶对齐标签还应当采用合适的垂直间距。表单输入框之间的间距太少或太多都会阻碍移动。一般而言,最好使用输入框50%~75%的高度作为相邻输入框的间距。

2. 右对齐标签

右对齐标签同样有输入框与标签相邻的有点,因此也能快速填完且减少垂直屏幕空间的占用,但是速度没有顶对齐快。

由于右对齐布局造成左侧参差不齐,会降低快速浏览表单问题的效率,还会产生灵活性问题,如果标签需要两行字,浏览表单会更加困难。

3. 左对齐标签

如果人们不熟悉表单要收集的数据,或者问题无法分成易处理的内容组,左对齐标签浏览表单问题会更容易,只需上下浏览标签左栏,不会被输入框打断。

三种方案中,左对齐表单填写速度最慢,人们一般将左对齐布局中的标签与相应输入框联系起来,只是花费时间较长。

但是,完成时间较长也不是坏事,也有适用场景。如果希望人们速度放慢,并仔细思考表单中的每个输入框,特别是表单含有大量可选输入框、类似“使用偏好”或者高级设置陌生数据时。

4. 输入框内的标签

如果屏幕空间宝贵,应当将标签和输入框组合成单一的用户界面元素。光标放入输入框时,标签要迅速消失,以便用户能轻松填写。

填写输入框时,输入框内的标签会消失,因此答案情境也会消失;如果忘记了要回答什么问题或者检查答案时,体验也是不好的。

因此,如果表单较长、甚至中等长度,输入框内标签并不是好的解决方案。输入框内标签更适合用于只有一个问题(例如,搜索框)或者几个输入框的表单或者问题非常熟悉的表单(例如,通讯录)

四、输入框

表单中何时使用文本框、复选框、单选按钮、下拉菜单、列表框呢?

  • 输入框的长度能提供有意义的暗示,帮助人们有效回答问题;
  • 若不需要暗示,输入框的长度应当尽量保持一致,为答案提供足够空间;
  • 尽量避免出现可选输入框;
  • 标明表单中的必填项;
  • 如果答案明显有多种格式,应当考虑使用弹性输入框;确保弹性输入框不会导致填写简单问题变得复杂。

五、动作

标签列出表单要求人们回答的问题,输入框让人们填写答案,完成表单的单一职责属于动作。

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

六、帮助文字

常见帮助文字是在标签或输入框旁增加帮助文字,告诉应该如何回答问题。

帮助文字最合适解释人们不熟悉的数据,例如,为什么要问这些问题、安全和隐私、建议回答问题的方式及说明可填项。

  • 如果人们知道问题的答案,但是不确定如何回答或为什么回答,可以考虑使用自动即时帮助系统;
  • 如果表单问题人们不熟悉或者复杂,而且同样的人会多次使用,可以采用用户激活的帮助系统;
  • 如果帮助内容很多,可以使用一致的帮助区域,不要使用即时帮助;
  • 图标、链接或按钮用于用户激活的帮助文字触发器,应放在标签旁,不要放在输入框旁;
  • 如果要求用户填入敏感资料,考虑使用有操作含义的帮助文字,允许人们确认资料安全。

七、即时验证

直接反馈有助于再次确保人们的回答有效。这种实时的沟通方式即为即时校验(Inline Validation)。

  • 考虑使用即时验证,以确认或者建议有效答案,并帮助人们在限制范围内输入(例如,银行账号);
  • 即时确认适用于错误率高、或者有特定格式要求;
  • 即时建议适用于有大量可供选择有效答案的情况;
  • 即时质量指示条能引导人们回答复杂的问题;
  • 如果需要即时验证答案,应当在人们输入答案之后进行,不要在输入过程中进行;校验数据唯一也是这样,需要等待输入完成时校验;
  • 如果输入有限制,应当采用实时、动态更新的方法传递输入限制。

八、多余输入/额外输入

  • 通过恰当的设施满足多数人需要的默认选择,智能默认可以帮助人们回答问题;
  • 设置个性化默认选择,客户能更快完成表单,因为“答案”具有粘性;
  • 如果有可能,单选按钮都应当设置成默认项;
  • 额外输入可以提供更多的选项或者高级选项,满足有需要的用户,同时不妨碍不需要的用户;
  • 根据客户需求的优先顺序,安排额外输入;
  • 如果需要显示大量额外输入,可以考虑叠层方式代替即时显示方式,避免网页跳动用户迷失方向。

总结

表单的设计方式多种多样,不能完全按照设计规则来进行产品设计,需要具体分析应用场景,填写情境来设计。

感谢各位花费时间来阅读,希望对您有帮助!

 

作者:pabo呀,技术转产品一枚;公众号:一米八的姜pabo

本文由@pabo呀原创发布于人人都是产品经理,未经作者许可,禁止转载

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 如果中途穿插图文来展示,会更清晰。毕竟阅读者并不是像你那么熟悉,也不会所有的你给个术语就立马想到啥意思

    来自山东 回复
    1. 嗯嗯,感谢建议~

      来自广东 回复
    2. +1

      来自北京 回复