E3.05.1closed select hides alternatives设计研究

下拉隐藏所有选项,需先点击才可比较

别名: 下拉选择 · select menu · 折叠选项

概念解释

下拉选择器(select / dropdown)在收起时只露出当前值,其余候选项被藏进一次点击之后。比较「还有什么可选」必须先打开。它节省垂直空间,代价是选项之间的对照从并行变成串行:没点开之前,用户不知道集合有多大、有没有自己要的那一项、相邻项的差别是什么。国家列表、时区、几十种发票类型适合这笔交易;三四种配送方式用下拉,就是在向比较收费。

隐藏不是搜索。没有打开动作,选项对视觉和辅助技术都相当于不在这一屏上。

机制

人做选择时要在候选项之间做并行比较(side-by-side comparison):把几个标签同时留在视野里,估差异。下拉把并行拆成两步——先召回「这里有一个集合」,再展开后临时获得并行。展开前的那一步是纯记忆和猜测:当前值「标准配送」看不出还有没有「次日达」,也看不出贵多少。

点击成本还会过滤掉犹豫的人。不确定要不要换的用户往往不打开,于是默认值的优势被结构放大,不是被偏好放大。打开之后若列表很长,并行再次被滚动打断,比较窗口只剩屏幕里那几行。

怎么研究

用同一组选项比较「始终展开」和「默认收起」。任务是选出符合若干约束的项(最便宜且两日内到)。

自变量:收起还是展开、选项数量、默认值是否碰巧满足约束。 因变量:是否打开列表、打开前的停顿、选到满足约束的项的比例、事后能否列出未被选中的关键候选项。

注意:打开率低并不等于满意。很多人在没看过集合时就接受默认,问卷上会说「没遇到问题」。要另问「你知道还有哪几种吗」。

边界

用户已经知道目标项的名字(从身份证上抄省份)时,比较需求低,隐藏的伤害小,问题变成能不能键入或跳转。频繁改同一字段的专家会记住集合,第一次之后打开成本下降。移动端的原生选择器常变成全屏列表,隐藏发生在进入这一屏之前,比较在进入后恢复——与桌面的页面内下拉不是同一笔交易。只读详情里把值画成下拉箭头,会诱人去点一个打不开的比较。

怎么落地

  • 在选项需要对照价格、时限、权限时,不要用收起的下拉当第一形态。
  • 收起态用文案提示集合性质(「选择国家」而不是光秃的当前值),避免看起来像普通文本。
  • 打开后保持列表可扫,不要用过度装饰把并行比较再打散。
  • 验证:遮住下拉,问「这里还能选什么」。答不出关键候选项,就是比较被隐藏吃掉了。

延伸

  • 同组E3.05.2 选项少于阈值时展开陈列更优 · E3.05.3 下拉的当前值必须始终可见
  • 相邻E3.06 多选下拉 · E3.10 选项数量与控件匹配 · E3.17 选项内搜索与过滤
  • 站内检索closed select · dropdown comparison cost · recognition versus recall

同组卡片

快捷操作

分享

分享当前页面

ios_share

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