J2.07.3cue proximity under magnification设计研究

提示需靠近其对应的元素

别名: 提示邻近 · 错误信息贴字段 · associated cue

概念解释

校验失败写在表单最顶的一条红字里,人正在第三行改邮箱——那条红字对他等于写在另一间房。工具提示、状态点、字符计数、内联帮助,都属于应对着某个对象说的话。话必须出现在那个对象旁边,放大用户才能在不挪镜头的情况下听见这句。

成对控件长期分居,是布局分散;这里管的是那句「关于它」的反馈落点。

机制

提示是短时的、指向性的:它回答「这个字段怎么了」。镜头停在字段上时,若提示落在页顶、页脚 toast、或浏览器原生气泡偏移到字段外很远,用户看见的仍是那个字段本身,反馈通道是断的。人要么继续填、要么漫无目的地平移去找那句红字,找到了还要再把红字和工作对象对上号。

靠近不是装饰性的齐整。它让「对象 + 关于对象的那句话」共享同一份镜头。距离一旦大到两者不能同框,提示在功能上等于没发。

怎么研究

让人在放大镜下提交一份故意有错的表单,记录:错误文案第一次进入镜头要多久、进入镜头时焦点还在不在对应字段、是否出现「看见红字却改错了另一格」。自变量:错误放在页顶汇总 / 贴着字段 / 同时两处。因变量:发现错误的时间、改对的字段比例、为找提示做的平移。

截图叠合也很直接:把每条提示的包围盒和它所属控件的包围盒画出来,算中心距。中心距大于当前倍率下的镜头短边,这条提示在该倍率上不可用。

边界

故意做成全页摘要的确认页(「请核对以下三项」)不是字段级提示,它本身就是当前任务对象。屏幕阅读器用户还需要把错误和字段在可访问名称或描述里关联上,那是另一条通道;即使视觉上贴着,名称没绑也仍会漏。系统级气泡、浏览器校验气泡的位置不完全由页面控制,页面能做的是自己再提供一处贴着字段的可见说明,而不是指望原生气泡落在镜头里。

怎么落地

  • 字段级错误、限制说明、字数、密码强度,写在该字段的紧邻处(下方或右侧),不要只汇总到表单顶或角落 toast。
  • 需要全页摘要时,摘要里每一项要点回对应字段,并且焦点移到第一条错误上,让镜头跟着走。
  • 悬停才出现的帮助,在键盘焦点时同样出现在控件旁,不要只在指针停稳后才显示。
  • 验证:8× 放大,焦点停在目标控件上,触发它的错误或帮助。镜头不动,那句话应已经在画面里。若必须平移才找得到,落点就错了。

延伸

  • 同组J2.07.1 屏幕放大后可视范围极小 · J2.07.2 相关元素分散会导致来回寻找 · J2.07.4 屏幕放大软件下鼠标指针容易在界面中丢失定位 · J2.07.5 悬浮显示的提示或菜单在放大状态下可能超出可视窗口 · J2.07.6 部分低视力用户依赖特定配色而非放大,需要兼顾两种适配路径 · J2.07.7 动态加载的内容若不触发焦点提示,放大用户难以察觉其出现
  • 相邻F1.02 反馈位置与操作点的一致 · J2.06 焦点可见性
  • 站内检索cue proximity · inline error · associated description

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/J2.07.3