表单设计

Posted on Jul 9, 2016

表单的元素

  • 标签:告诉用户表单问题是什么;
  • 输入框:供给用户填写答案信息;
  • 动作:用户提交表单,即用户点击一个按钮或链接,执行一个操作;
  • 帮助文字:为如何填写表单提供帮助;
  • 输入反馈:针对用户输入给出反馈,输入正确还是错误;

提高表单可用性

信息内容的合理组织

  • 考虑用户填写表单的目的,哪些表单需要填写,去掉没必要的表单项,确定完表单内容。
  • 表单项并不是一个个从上到下无序罗列,而是根据表单内容,按照一定的逻辑,经过组织,分成不同的内容组,不同的主题。同时各个逻辑组和同一个主题的表单项,也是按照逻辑顺序或者用户熟悉的模式顺序,使用户浏览和填写自如。
  • 如果表单过长时,也可拆解成不同网页,类似于任务拆解,让用户一步步填写。

简化表单 突出重点

根据用户使用数据,适当将使用频次不高、或者提供给专业用户的高级表单项隐藏起来,保持表单的简洁,让绝大多数用户快速完成,避免大量的表单给用户的焦虑,而又满足了小众用户的需求。

清晰的浏览线

由始至终提供清晰的浏览线。当提供了垂直单一路径,使用户减少注意力分散,可以迅速对问题作出回答,完成任务所花时间最少。

考虑用户场景 保证主流程顺畅

考虑用户场景,保证主流程不要中断,将导致人们放弃填写的元素解决。

选择合适的标签对齐方式

  • 顶部标签方式,填表时间最短。
  • 但如果尽量减少垂直面积,可以考虑右对齐方式。
  • 如果希望用户填表时认真浏览标签,了解仔细考虑表单的每个输入框时,可以采用左对齐方式。

提供帮助

常见的帮助,一般在标签或者输入框旁提供帮助文字,交互方式也有一直展现(即一直出现在输入框右侧、下方或输入框内)、即时帮助(即激活输入框时,帮助文字自动出现)、用户激活的即时帮助(即帮助信息默认不显示、用户鼠标悬浮触发帮助图标来显示帮助)、用户激活的区域帮助(将表单所有的帮助信息统一放在一个位置)等多种方式。

智能默认

一般通过恰当设置满足大多数人需要的默认选择和数值,推送默认每个人都相同。还有个性化默认方式,它与表单对象相关。如京东购买的订单信息,智能默认与个人相关,不需要表单输入,默认之前的收货地址信息、支付配送方式、发票信息等,符合用户的需求习惯,同时避免了重复输入的成本。

即时反馈验证

即时验证分为多类反馈:确认输入合适、建议有效回答、核对输入信息,通过实时更新设计以帮助用户控制在必要的限制范围内。

额外输入

额外输入可以提供更多选项或者高级选项,满足有需要的用户,同时不妨碍许需要的用户。

其它方法