BEST PRACTICES FOR FORM DESIGN

https://static.lukew.com/webforms_lukew.pdf

 

Top Aligned Labels 

• 定案：

• 有限的宽度

• Input 数量不多

• 需要更多的高度空间

• 从上到下的扫描，非常顺

• Label 空间较多，合适语言替换（有些语言比较长对比英文）

• 适合新手或不长使用的用户
  https://uxdesign.cc/everything-you-need-to-know-about-form-design-16ce7b5a227f

• 强制用户一定要读 label

Right Aligned Labels 

• 定案：

• 在复杂同时多 input 的情况下使用

• 在 create 时使用。因为用户需要快速扫描 label

• 用户需要用 z 字形的方式扫描，不方便

• 无需额外高度，对比 top align

Left Aligned Labels

• 定案：

• Edit 时使用。

• 用户需要快速扫描 label

• 找到 label 后要去找 input，会有一段距离

• 某 ERP 项目用了 dash 去连线

• 用户扫描 label 非常快

• 无需额外高度，对比 top align

Required Form Fields

• 小部分是 required 就放 required

• 小部分是 optional 就放 optional

Field Lengths

• 定案：

• 宽度依据内容而定

• 3x, 4x, 5x 个字

• 30% 预算给 number

• 用户通过 input 宽度判断要输入的内容长度

Content Grouping

• 组合可以把不同类型的内容给区分，让用户容易去区分表格内容

• 重要的可以被组合在一起，同时放在第一个位置

• 使用最少的视觉元素来传达有用的关系（尽可能的少用元素在组合排版），参考一下图片

Actions

• 操作分为重要和次要

• 次要包括：取消，回头，重设

• 重要包括：保存，继续，提交

按钮怎么摆放？

• A，B，C 比较好，因为用户移动视线在一个范围

• 注意：场景都是 top align

• 按钮摆放在 input 的下面

Help & Tips

• 用户不清楚表单提问什么，或是要填写什么时，这能帮助

• 提示填写内容格式

• 太多提示会让表单很混乱

Automatic inline exposure

• Focus 后出现提示，这样表单干净

User-activated inline exposure

• 点击或者悬停 icon 显示

Interaction

Path to Completion

• Remove Unnecessary Inputs

• Smart Defaults

• flexible data  entry

• 清晰的完成路径

Tabbing

• Tab 功能可以加快填写表格，尤其是第二次填写时

• 用户可以不用滑鼠操作

• 让用户明确知道 tab 去下一个的地方

• 所有能点击的都能够被 tab

• Shift + tab 也是需要被重视的

Progressive Disclosure

• 空间有限，通过操作去展现内容

• 整洁排版，让影响排版的内容隐藏

• 用户不一定看完你所有的内容，隐藏内容是最好的方法

• 方法

• Advanced option

• Dialog

• 渐进式披露：Step by step 去显示内容

Selection Dependent Inputs

• 没有明白

Feedback

Inline Validation 

• 用户在操作时，马上给出反应，让用户安心

• 当在做 unique 时，每 key up 一个字就马上做出反应，这样用户就能安心

• Autocomplete 和 dropdown 能让用户不用去烦恼要填写什么

• 显示字数，因为用户不会在填写时同时去计算

Errors

• 错误提示需要容易被发现，可以通过

• 明显的颜色

• 粗大的文字

• Scroll to position

• 背景换成警告色

• 清晰解释错误信息

• 放置一些 icon，让色盲的用户可以很好区分
  https://uxdesign.cc/everything-you-need-to-know-about-form-design-16ce7b5a227f

Progress

• 要等待的地方需要让用户知道，比如上载图片，ajax 加载……

• Disabled 提交按钮已阻止用户操作

Success

• 明确的给出完成表单的反馈信息

标签：FORM,扫描,用户,label,PRACTICES,DESIGN,内容,input,表单
来源： https://www.cnblogs.com/stooges/p/15377808.html