提示需靠近其对应的元素
别名: 提示邻近 · 错误信息贴字段 · associated cue
概念解释
校验失败写在表单最顶的一条红字里,人正在第三行改邮箱——那条红字对他等于写在另一间房。工具提示、状态点、字符计数、内联帮助,都属于应对着某个对象说的话。话必须出现在那个对象旁边,放大用户才能在不挪镜头的情况下听见这句。
成对控件长期分居,是布局分散;这里管的是那句「关于它」的反馈落点。
机制
提示是短时的、指向性的:它回答「这个字段怎么了」。镜头停在字段上时,若提示落在页顶、页脚 toast、或浏览器原生气泡偏移到字段外很远,用户看见的仍是那个字段本身,反馈通道是断的。人要么继续填、要么漫无目的地平移去找那句红字,找到了还要再把红字和工作对象对上号。
靠近不是装饰性的齐整。它让「对象 + 关于对象的那句话」共享同一份镜头。距离一旦大到两者不能同框,提示在功能上等于没发。
怎么研究
让人在放大镜下提交一份故意有错的表单,记录:错误文案第一次进入镜头要多久、进入镜头时焦点还在不在对应字段、是否出现「看见红字却改错了另一格」。自变量:错误放在页顶汇总 / 贴着字段 / 同时两处。因变量:发现错误的时间、改对的字段比例、为找提示做的平移。
截图叠合也很直接:把每条提示的包围盒和它所属控件的包围盒画出来,算中心距。中心距大于当前倍率下的镜头短边,这条提示在该倍率上不可用。
边界
故意做成全页摘要的确认页(「请核对以下三项」)不是字段级提示,它本身就是当前任务对象。屏幕阅读器用户还需要把错误和字段在可访问名称或描述里关联上,那是另一条通道;即使视觉上贴着,名称没绑也仍会漏。系统级气泡、浏览器校验气泡的位置不完全由页面控制,页面能做的是自己再提供一处贴着字段的可见说明,而不是指望原生气泡落在镜头里。
怎么落地
- 字段级错误、限制说明、字数、密码强度,写在该字段的紧邻处(下方或右侧),不要只汇总到表单顶或角落 toast。
- 需要全页摘要时,摘要里每一项要点回对应字段,并且焦点移到第一条错误上,让镜头跟着走。
- 悬停才出现的帮助,在键盘焦点时同样出现在控件旁,不要只在指针停稳后才显示。
- 验证:8× 放大,焦点停在目标控件上,触发它的错误或帮助。镜头不动,那句话应已经在画面里。若必须平移才找得到,落点就错了。