E3.08.3chip delete hit target设计研究

已选标签的删除入口需足够大

别名: 标签删除 · chip dismiss · × 点击区

概念解释

已选标签上的关闭符号必须是一块真正够大的命中区,而不能是嵌在块角上的几像素装饰。删除入口够大(adequate dismiss target)让人能拿走某一块,而不碰到旁边那一块、也不误触发整块的「再选一次」。入口太小,删除会变成对邻块的误删,或变成点了标签本体却不知道发生了什么。增删对称在这里落到手指上:加入往往点整块,去掉必须点得更准,所以去掉的目标不能更小。

机制

关闭符号视觉上常被画成 8–12 像素的叉,远小于手指接触椭圆。接触中心若落在叉与文字之间,系统要在「删除这项」和「切换这项」之间仲裁。仲裁不稳时,用户会经历随机结果:有时块没了,有时块还在却像被点亮。相邻两块的叉若靠得太近,接触椭圆会同时盖住两个目标,Fitts 的过冲会删错对象。

把整块都做成删除能放大目标,但与「点块来编辑 / 再选」冲突。于是删除必须在块内占据一块独占区域,并且这块区域的外沿要离开文字和邻块足够远,让接触椭圆只能属于一个动作。

怎么研究

在触屏上做指向任务:给定一块标签,要求只删除它,邻块与本体切换都算错。

自变量:叉的可见尺寸、不可见命中扩展、块间距、是否允许点整块删除。 因变量:删对率、误删邻块、误触本体、完成一组删除的时间。

记录接触椭圆而不是点击坐标。椭圆同时盖住叉与文字时,仲裁规则本身就是自变量。

边界

鼠标用户可以用较小的叉,因为指针热点比手指小;同一套组件在触屏上仍要扩展。键盘用户用退格或每块上的删除键,不依赖叉的像素,但叉仍要存在给指针。只读标签没有删除入口,不要画一个点不动的叉。破坏性删除(去掉最后一个管理员)不能只靠一个够大的叉立刻完成,入口大解决的是命中,不是确认。块本身已小于最小触达时,先加大块,再谈叉;否则再大的内部叉也挤在非法小目标里。

怎么落地

  • 让删除命中区至少达到触屏最小边长,可见的叉可以更小,但热区要扩出。
  • 热区不要跨到邻块或文字上;两块之间留出接触椭圆无法同时盖住两个叉的缝。
  • 删除与「点块编辑」分区:叉独占一端,文字独占其余。
  • 验证:用手指(不是鼠标)连续删五块。出现邻块消失或块被点亮却没删,就是入口不够大或分区不清。

延伸

  • 同组E3.08.1 标签适合多选且可动态增删 · E3.08.2 标签换行会造成布局跳动
  • 相邻E1.07 按钮的点击区域 · E3.01 复选框
  • 站内检索chip dismiss target · hit slop · Fitts delete

同组卡片

快捷操作

分享

分享当前页面

ios_share

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