E1.14.3split button chevron miss设计研究

分裂按钮的箭头区域过小会造成误触扩展菜单

别名: 分裂按钮误触 · 箭头太小 · chevron hit target

概念解释

分裂按钮的箭头常常被画成主体边上一条窄缝,视觉只有 8–12 像素。命中区若跟着视觉走,瞄向「保存」的触点会经常落到箭头上,于是弹出扩展菜单而不是保存。箭头区域过小造成的不是「打不开菜单」,而是打不开默认——本意执行高频动作,却被迫多看一层菜单。

机制

菲茨定律里,窄而贴着大目标的第二目标会吃掉第一目标的终点散布。主体越大、箭头越瘦,散布落入箭头的比例越高——这与直觉相反:把主体做得很宽以强调默认,反而提高了擦到箭头的机会,除非箭头的命中区被刻意加宽并与主体留缝。触摸的接触圆更大,问题更重。菜单一旦误开,用户要关掉再点主体,时间比直接点一枚独立「更多」更糟,还可能在慌乱中点到菜单里的破坏项。箭头过小还有另一面:真想打开菜单的人点不中,于是以为没有扩展。同一块瘦箭头同时制造误开和打不开。

怎么研究

固定主体宽度,改变箭头的视觉宽与命中宽(可分离)。任务是反复点默认,穿插几次点扩展。记录落点落在哪一块。

自变量:箭头视觉宽、箭头命中宽、输入通道、主体宽度。 因变量:本意默认却打开菜单的比例、本意扩展却打到主体、两次尝试的时间。

只测「打开菜单是否成功」会把箭头做大当成唯一目标,忽略误开默认。两种错误都要记。

边界

指针精细的桌面可以把箭头做窄一些,但仍建议命中宽于视觉。键盘可以把主体和箭头做成两个 Tab 停,避开命中几何,但要两套名称(保存 / 更多保存选项)。菜单按钮(整枚打开菜单、没有默认一击)没有这块误触,若触屏做不好分裂,应退回菜单按钮或两枚独立键。

怎么落地

  • 给箭头一块至少达到最小触达的命中区,视觉可以略窄,但不要把命中做成一条缝。
  • 主体与箭头的命中区之间留出不重叠的缝,避免擦边仲裁。
  • 误开菜单时 Esc 或点外部应立刻关掉且不执行菜单项。
  • 验证:在触屏上对主体做五十次瞄准「保存」。打开菜单的次数应接近零;再专门点箭头,应稳定打开。一边很高一边很低,箭头几何就失败了。

延伸

  • 同组E1.14.1 按钮组用于呈现一组互斥或并列的相关动作 · E1.14.2 分裂按钮把默认动作与扩展动作分离到主体与箭头两部分 · E1.14.4 按钮组内选项过多时应改用其他控件而非持续横向扩展
  • 相邻E1.07 按钮的点击区域 · B1.01 菲茨定律 · C2.03 触摸目标的最小间距
  • 站内检索split button · chevron hit target · Fitts's law

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E1.14.3