做产品 PMaker
空格的键盘
八个字段
姓名
手机
邮箱
公司
职位
行业
规模
来源
后面六个是给销售看的,不是用户要填的
两个字段
手机
验证码
开始使用
其余的等他用起来之后
在需要的那一步再问

同一个注册流程。左边一次问完,右边先让人进来,剩下的信息在真正需要的时候再要。

Form Restraint

Forms are the worst leak point in a product. Every field you add, ask: is this information really needed right now?

What you will run into
  • 注册转化很低,但说不清卡在哪一个字段
  • 用户填到一半退出,回来全没了要重填
  • 提交后一次性弹出五条错误,还不告诉你哪个框错了

A good form has only three demands: collect only what's necessary, let people know what to do next, and make mistakes easy to undo.

Cut Fields First

Where Labels Go

Label position and alignment directly affect fill-in speed — each of the four has its own place.

形式优点代价与适用
左标签表意明确,省纵向空间在移动端这类狭长空间里不好用。多用于 web
顶标签对齐舒适,省横向空间纵向空间利用率不高。多用于移动端
行内标签最省空间一开始输入标签就消失了,用户容易忘了这个框是填什么的。只适合注册登录这类字段极少的场景
左对齐 / 右对齐左对齐读得快,右对齐填得快视线从右对齐标签移到输入框更短。表单填写用右对齐,信息陈列用左对齐
A left-aligned label takes the eye about 500ms longer to scan than a right-aligned one. So detail views use left alignment (easier to read), and forms you want filled out fast use right alignment (easier to fill).

What to Do on Error

Error tolerance has to be handled at three moments — miss any one and the user gets stuck.

操作前 输入框里给示例 比如「1 开头的 11 位」 操作中 实时校验,就地报错 错在哪个框就标哪个框 操作后 保存、撤销、清空 改错了能退回去 最糟的做法:提交后弹一个「请检查输入」,不说哪一项错了 用户只能一个个试

Watch the timing of live validation: showing a red error while the user is still typing is annoying — usually validate after they leave the input.

Five Shortcuts

After building, three metrics tell you how good it is: completion rate, error rate, fill-in time. Read them together — high completion but long fill-in time means people are grinding through it.