E1.14.4button group overflow to another control设计研究

按钮组内选项过多时应改用其他控件而非持续横向扩展

别名: 按钮组过长 · 不要无限分段 · too many segments

概念解释

按钮组靠一排同时可见的键工作。选项一多,这一排要么挤瘦每个键,要么横向滚出视野。两种都不再是按钮组。过多时应换成选择菜单、列表或溢出「更多」,而不是把组无限接长。组的能力是「一眼比较这几个」,不是「当一条可滚动工具带」。

机制

同时可见是组的知觉前提。超出工作记忆和视宽之后,人要滚动才能看见全部,互斥关系不再能一眼成立,漏选和重复选都会出现。每个键变瘦,文字截断,命中区下降,邻项误触上升。希克选择也在变贵:组把 N 个选项都当成同等候选铺出来,N 到 7、8 以上,搜索加决策的时间不如一个可筛选的菜单。横向滚动还与页面纵向滚动抢手势。产品常因为「这些都是对等动作」而舍不得收进菜单,结果对等变成谁都看不清。

怎么研究

同一组动作做成 3、5、8、12 项的按钮组,对照 5 项组 + 菜单收其余。任务是找到中间那个不常见项并执行。

自变量:可见项数、是否允许横向滚、项标签长度。 因变量:找到目标的时间、截断造成的混淆、横向滚动与误触。

实验室宽屏会低估。要在目标手机宽度上测,8 项组往往已经破相。

边界

专业调色或时间线工具可以用可滚动的分段条,那是专家工作区,用户预期在带上巡航。图标极高共识且无文字的视图切换(列表/网格/看板)可以略多几枚。动态数量(每加一个账户多一枚)几乎一定该改用列表,不要让组跟着数据长。

怎么落地

  • 把一组里同时铺开的项限制在一眼能比较的数量(通常四五个以内),其余进菜单或独立页。
  • 不要给按钮组加横向滚动当「还是组」;出现滚动就换控件。
  • 项数随数据增长的,一开始就用列表或选择器。
  • 验证:在目标窄宽上,组内每一项的文字完整可见且可点。出现省略号、左右箭头或必须横滑,就是该换控件了。

延伸

  • 同组E1.14.1 按钮组用于呈现一组互斥或并列的相关动作 · E1.14.2 分裂按钮把默认动作与扩展动作分离到主体与箭头两部分 · E1.14.3 分裂按钮的箭头区域过小会造成误触扩展菜单
  • 相邻B1.04 希克—海曼定律 · E3.05 选择菜单 · E1.15 按钮的宽度与自适应
  • 站内检索button group overflow · Hick's law · too many segments

同组卡片

快捷操作

分享

分享当前页面

ios_share

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