表单设计

一、概述

1、用户行为模式

  • 入口设计:引导用户进入表单。
  • 给出填写表单的理由(why):有什么用,并给出快捷逃离入口。
  • 填什么、怎么填(what、how):包括填写前的帮助、填写后的验证。

2、应用场景

  • 场景类型:注册与登录、填写(个人信息、提交订单)、发布(商品、内容)等。
  • 场景设计:如注册时不强制要求填写资料,先进行引导;支付时提前验证:先提示余额是否足够。

二、表单组成部分

1、标题和附加图文

2、标签

  • 标签后面是否加冒号对UX影响不大,视情况而定。

3、表单域

  • 控件类型包括:输入框-单行文本框/多行文本框/密码框、单选按钮/复选框、单选/多选下拉选择框(或称下拉列表)、文件上传框、滑块等。
  • 同一表单项,涉及控件的选择。如在PC端,与其在输入框中限制格式,不如使用下拉列表。但在移动端,应减少使用下拉列表,以分段控件、开关、滑块等代替。

4、操作:包括按钮和链接

  • 按钮包括提交按钮、复位按钮、一般按钮(如“更多”)。
  • 提交按钮属于主要操作、复位按钮等属于次要操作——误操作往往带来不愉快。尽量只用主要操作,非得使用次要操作时,淡化处理。

三、表单设计:框架层

1、多步骤表单(导航)

2、逻辑分组与排序

  • 可见表单项分组
  • 隐藏内容关联的表单项
  • 隐藏部分表单项并以其他条件触发:隐藏内容为高级/额外输入,可满足部分用户需求。隐藏则又不干扰其他用户。

3、必填/必选项

  • 用户基本熟悉“*”,具体则看目标用户群
  • 登录等全部必填的表单不需要“*”
  • 若只有少部分表单项为非必填,也标注必填——标注非必填若太弱则无法区分、太强则本末倒置

3.1 icon为*

*的位置一般为标签左侧、标签右侧、标签和表单域中间、表单域右侧。

标签和表单域同行且相隔太远时,*放在标签和表单域中间——视觉保持可水平直线'


必填icon在标签左侧:与表单域太远
必填icon在标签和表单域中间

3.2 icon非*

  • 如设计为书签、木牌

3.3 无必填icon

  • 全是必填,如登录注册等表单

3.4 文字标注

  • 分框内注释、框外注释

4、填写前的帮助

4.1 系统直接输入:默认值

  • 默认值即缺省值,分为整体默认和个性默认。一般用户有修改权限。如输入框默认值、下拉列表默认选项、单选按钮/复选框默认勾选、进步器默认数字等。

4.2 系统辅助输入:分框内、框外

  • 框内分注释和操作——如输入框的数字微调、文件上传框的上传和取消。
  • 框外分图文和操作,包括直接展示、点击触发、hover触发,其显示位置包括表单域右侧、下方或当前页弹出框等。

5、填写后的验证

表单验证四要素:时间、位置、颜色、反馈信息。

5.1 时间——何时验证

  • 提交后验证:(填写所有信息)提交表单后,正确/错误信息同时验证显示。
  • 即时验证:每完成一项即显示验证的反馈信息。
    即时验证的目标:提高成功率/减少错误率、缩短时间/减少视觉停留、提高满意度、提升转化率。

5.2 位置——显示信息/提示条的位置

  • 表单项右侧或下方、表单顶部、气球状提示、弹层、对话框。
  • 若采用提交后验证,web表单用锚定位到首个错误项并获取焦点。

5.3 颜色

  • 表单域高亮、字体颜色、提示条边框和底色

5.4 反馈信息

  • 可分为两大类:当前状态和下一步操作。
  • 每大类可分三小类:成功提示、报错、无对错的友情建议。
    * 成功后给出鼓励,包括提交成功后跳转页面时的成功反馈
    * 反馈方式包括可视化效果,如以进度条展示密码安全程度。
    * 报错以积极的引导方式,考虑给出解决方案。
    * 自动纠错,记住得告知用户。

6、表单对齐方式

目的:清晰的视觉浏览线、减少停留时间

6.1 顶端对齐(又称垂直对齐)

  • 优点:标签和表单域接近,视觉垂直下移即可。
  • 缺点:增加垂直空间,表单项较多时增加页面滚动。


    垂直对齐

    建议:标签字体加粗,以区分表单域内的文字

6.2 右对齐

  • 优点:减少标签和表单域距离,减少垂直空间。
  • 缺点:左边标签参差不齐,给通览标签造成障碍。


    右对齐

6.3 左对齐

  • 优点:便于浏览标签,减少垂直占用空间;帮用户快速通览标签而不被表单域干扰;适用于标签长度接近的表单。
  • 缺点:标签和表单域相隔太远时,用户目标须来回在标签和表单域跳转。


    2.png

对齐方式小结

  • 根据眼动仪定量研究(即热点图),垂直对齐用户视线集中,停留点少;右对齐视觉移动距离较少,且视线停留点较少;左对齐用户视线移动较快,视觉停留点较多。
  • 如果主目标是减少填表时间,可采用垂直对齐;若想尽量减少垂直空间,可采用右对齐;若须用户仔细浏览标签、了解每个表单域,可采用左对齐——pc端更适合右对齐,手机端更适合左对齐。

四、参考

1、《见微知著•web用户体验解构》

2、表单验证设计的用户体验基本原则

3、移动应用表单设计秘籍

4、表单交互设计之必选项思考

5、让用户更高效地完成表单填写

6、表单交互设计之二——校验思考

7、以用户视角出发的表单之旅

8、泛议网络表单可用性规范

推荐阅读更多精彩内容