E6.03.1field-adjacent validation设计研究

提示需紧邻出错字段

别名: 就近校验 · inline validation · 字段错误

概念解释

内联校验(inline validation)把错误说明写在出问题的那个输入控件旁边,而不是汇总到表单顶上或提交后的对话框里。紧邻指的是空间与对象双重绑定:提示在视觉上贴着该字段,在语义上也声明自己属于该字段。邮箱格式不对,话应该出现在邮箱框下,而不是页面顶部一句「请检查表单」。它处理的是字段级规则——必填、格式、冲突——不是整页失败,也不是操作成功后的结果回显。

机制

改错是一次「定位 + 理解 + 修改」的循环。提示离字段越远,定位就要靠记忆把顶栏那句话映射回中间某个框;字段一多,映射就塌。紧邻把三步收成一步:眼睛还在框上,原因已经在旁边。人还依赖空间接近来判断归属:夹在两个框之间的红字会被算到距离更近或刚刚失焦的那个上。若提示出现在视口外——长表单底部提交、错误写在顶部——用户甚至不知道有错误,只会觉得按钮没反应。紧邻不是审美上的整齐,而是把错误对象从「需要推断」变成「已经指着」。

怎么研究

用同一套规则比较三种错误呈现:表单顶部摘要、提交后对话框、字段旁内联。任务是修好所有错误并成功提交。

自变量:提示与字段的距离、同时出错的字段数、错误出现时该字段是否仍在视口内。 因变量:首次修复是否点对字段、修完所有错误的时间、误改相邻字段的次数、提交前是否声明「不知道错在哪」。

注意顶部摘要在实验室里看起来有效,因为被试被要求「把表单填对」,会主动找红字。真实提交里更常见的是点了按钮、页面微微一跳、用户以为没提交成功。记录滚动是否发生、焦点是否被带到首个错误,比只记完成时间更能解释失败。

边界

跨字段规则(两次密码不一致、日期起止颠倒)无法只贴在一个框上而不误导。需要在两个字段都留痕迹,或把它们当成一组来提示,并写明比较的是哪两个值。服务端要到提交才能知道的错误(用户名已被占用)仍应回到对应字段,而不是因为来晚了就改走顶部横幅。表格里的单元格校验,紧邻可能变成遮挡下一列;此时用行内图标加单元格展开,仍要保持「点开即是该格」,不能退回整表一条消息。

怎么落地

  • 每条校验消息在结构上挂到对应控件,视觉上放在标签与输入组成的那一块里,不放到表单公共页眉。
  • 提交时若错误在视口外,把焦点和滚动带到第一条错误,提示已经在该字段旁等着,而不是另写一条顶部总述来代替。
  • 跨字段错误在相关的每一字段旁重复,并用同一句话点出两个对象,避免只红一个框。
  • 验证:遮住字段标签,只留红字,找人指出「这句是在说哪个框」。指错或指两个,紧邻就失败了。

延伸

  • 同组E6.03.2 提示出现不应造成布局跳动 · E6.03.3 提示需同时被辅助技术播报
  • 相邻E6.13 操作结果的内联呈现 · E2.06 格式提示与示例 · E6.10 错误页与降级页
  • 站内检索inline validation · field-adjacent error · error proximity

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E6.03.1