BEST PRACTICES FOR FORM DESIGN

BEST PRACTICES FOR FORM DESIGN

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

 

Top Aligned Labels 


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




Progress

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

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


Success

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











posted @ 2021-10-08 01:04  泉油  阅读(33)  评论(0)  编辑  收藏  举报
Web Design Johor Bahru Malaysia - Stooges