H1.02.2visual grouping of form fields设计研究

相关字段需在视觉上成组

别名: 字段分组 · 邻近分组 · common region · fieldset

概念解释

视觉成组指把回答同一件事的输入项围成可被一眼认出来的一块:账单地址的几行、一对起止日期、卡片号与有效期。手段是间距、分隔、共同背景或明确的组标题,而不是把它们在提问次序上相邻就完事。人靠组来决定「这一块结束了,可以换口气」;组若看不出来,相关项会散成一串同等重量的框。这条管的是空间上的组块,不是这些块在纵向上该先问哪一块,也不是敏感块该不该等到信任建立。

机制

知觉系统用接近性、共同区域和连接性把元素收成客体。工作记忆按组块而不是按单个框来计价:三个地址行若共享边距和标题,负荷接近「一项地址」;同样三行若与前后字段等距排列,负荷就是三次独立提问。第二层在于组边界的停扫:扫视在间距变大或出现标题处停下,人用这个停点核对该块是否填完。组间距若与行间距相同,停点消失,漏填发生在块的最后一项(邮编、分机号)而不是第一项。分组与语义冲突时更糟:把「发票抬头」嵌进配送块,人会按配送图式填,抬头被当成街道的别名。成组解决的是「哪些框属于同一答案」,不解决「先问哪一组」。

怎么研究

用眼动或遮挡标题的再认任务看人是否把字段当成一块。比较「等距直列」「加大组间空白」「加框或底」「只有标题没有间距差」四种。

自变量:组线索种类(间距 / 边框 / 背景 / 标题)、组内项数、组线索与语义是否一致。 因变量:组边界上的注视停顿、漏填最后一项的比率、把答案填进相邻组的次数、口头报告的组数是否与设计一致。

实验室截图分类会高估标题的作用,因为被试在做分类而不是在填。真实填表时标题常被跳过,间距差才是被用到的线索。不要用「改了顺序之后完成更快」来证明成组有效——那测的是提问次序。

边界

只有两三个字段的短表,强行加框会把一张收据变成档案室隔间,组线索本身变成噪声。屏幕阅读器用户主要靠程序化的组标题(以及组在朗读流里的起止),纯视觉的底色和细线对他们等于没分组。极窄的移动视口里,横向成组(卡号与有效期并排)会把同一组拆到两次滚动里,组在空间上已经不存在。专家用户在熟悉的内部表上会忽略装饰性分组,只沿输入焦点往下走。

怎么落地

  • 把同一答案的字段收进同一视觉容器:组内间距小于组间间距,并且给一个说人话的组标题(「配送地址」而不是「模块 A」)。
  • 组标题与内容必须同指一件事;不要把发票、备注、营销勾选塞进地址容器来省滚动。
  • 移动端优先纵向成组,避免并排把一组拆进两次滚动;桌面并排时仍要用共同底或框把它们锁在同一客体上。
  • 验证:遮住组标题,只留字段,请未参与设计的人圈出「哪些是一起的」。圈错或漏掉最后一项,说明间距和容器不够,先改间距再考虑加线。漏填若集中在每组最后一项,把该组与下一项的空白再拉开一档,复测漏填位置是否下移。

延伸

  • 同组H1.02.1 顺序应符合用户的信息组织方式 · H1.02.3 敏感字段应放在建立信任之后
  • 相邻F2.06 邻近性分组 · A2.01 接近性 · A6.03 组块化
  • 站内检索visual grouping · common region · fieldset

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/H1.02.2