E3.01.2clickable checkbox label设计研究

标签本身应可点击

别名: 复选框标签 · label for · 扩大点击区

概念解释

复选框旁边的文字不是说明,而是可点击标签(clickable label):点方框和点「同意隐私政策」应产生同一次勾选。若只有那几像素的方块能响应,用户会反复点文字却看不到变化,并怀疑控件坏了。标签可点解决的是命中,不是把整行做成另一套开关语义。

机制

方框边长通常只有约十六到二十像素,远小于手指或粗糙指针的有效宽度。人的瞄准以文字为中心:眼睛先读完标签,手再落在刚读过的词上,而不是退回去找那个小方块。标签与控件若只在视觉上相邻、没有在输入模型里绑成同一个目标,点击文字等于点在空白上。

关联失败有两种常见实现:标签没包住控件、或者用了无法聚焦的装饰文字。两者看起来都「有标签」,辅助技术却可能读不到名字,指针用户也点不中。换行之后标签高度变大,可点区域应当跟着变高,而不是仍只有第一行旁边的那一小块。

怎么研究

用 Fitts 式指向任务比较「只点方框」与「点标签也可」。同一句文案、同一勾选结果,改的是目标矩形。

自变量:可点区域是方框、方框加标签、还是整行;标签行数;指针还是触屏。 因变量:首次命中是否成功、点在文字上却无响应的次数、完成一组勾选的时间、错误地点到相邻项。

触屏上要把手指接触中心记下来,而不是只记「点了标签」。接触中心落在文字上、系统却只认方框,就是这条规则被打破的直接证据。

边界

表格单元格里的复选框常常没有旁侧标签,名称在表头或行标题里;此时可点的是单元格或整行,而不是一段贴着方框的句子——仍需有一个大于方框的目标,只是几何不同。标签含链接时,链接与勾选会抢同一段文字:点「隐私政策」应打开文档,点其余词语才切换勾选,两块命中区必须切开。禁用项的标签仍应占据空间,但点击不应悄悄生效。键盘用户用空格切换焦点上的复选框,并不依赖标签可点;标签可点保护的是指针和触摸,不能拿键盘可达当借口缩小点击区。

怎么落地

  • 用标签元素把文案和复选框绑成同一控件,点击任一端都切换同一状态。
  • 可点矩形至少包住方框加整段文字;多行标签要整段可点,不要只激活首行。
  • 标签内若有链接,把链接做成单独的命中目标,并在视觉上与勾选文案分开。
  • 验证:关掉方框的可见描边,只留文字,让人完成勾选。点文字无反应或点到邻项,就是标签没被做成目标。

延伸

  • 同组E3.01.1 复选框表示各项独立开关 · E3.01.3 复选框的选中态需高对比
  • 相邻E1.07 按钮的点击区域 · E2.03 标签位置 · E3.08 标签选择
  • 站内检索clickable checkbox label · hit target · label association

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E3.01.2