E4.07.1collapsed content existence hiding设计研究

折叠隐藏内容,同时隐藏其存在感

别名: 折叠即消失 · 手风琴隐藏 · 区块不可见 · accordion disclosure

概念解释

折叠面板把一块内容收进标题后面,标题还在,内容从布局里拿走。问题不只是「要多点一次才看得到」,而是收起来之后,这块内容的存在感一起被藏掉(existence hiding):用户不再把它算进页面上有什么。标题若写得抽象(「更多」「高级」),连类别都不再提醒人这里曾有过选项。折叠是在用可见性换空间,付出的是发现性,不是单纯的多一次点击。

机制

人用「眼前有什么」来建页面模型。展开态下,标题和内容共同占据一块面积,面积本身在说「这里有货」;折叠后面积塌成一行标题,模型里只剩下标签。标签要承担全部的存在声明,而标签的信息量通常远小于内容——费用、例外条款、可选字段,这些不会从「高级设置」四个字里被推断出来。结果是:没打开过的人当它不存在,打开过又合上的人也会在后续决策里漏掉它,因为工作记忆已经按折叠后的页面在算。空间省下来了,是因为存在被从模型里删掉了。这和把内容放到另一页不同:另一页至少还有入口在导航里占一个名字;折叠入口和内容抢同一条标题,标题一含糊,两边都弱。

怎么研究

把同一组字段做成常显、默认折叠、默认展开三种,让未接触过产品的人完成必须用到折叠内字段的任务。记录是否打开、打开前的犹豫、以及事后能否回忆「页面上还有过这一块」。自变量:标题具体程度、折叠块在页内的位置、是否有未完成标记。因变量:发现率、漏用率、回忆。标题具体时发现率应上升,说明存在感主要压在标题上,而不是压在控件外形上。

边界

用户已经形成「这类面板都要打开」的习惯(反复使用的专业工具)时,存在感由技能补上,折叠主要在省空间。法律或安全上必须看见的内容不能靠折叠来「省」,因为看不见等于未告知。移动端长页把次要块折叠,是在用存在感换滚动成本,需要按命中率决定,而不是一律折叠。屏幕阅读器若仍把折叠内节点留在阅读顺序里,视觉上「不存在」的内容会被读出来,两边的页面模型会分叉。

怎么落地

  • 只有真正次要、且标题能把类别说清的块才允许折叠;标题写成内容的摘要,而不是「更多」。
  • 块内若有未填必填项或错误,折叠标题上要留下存在证据,不能让错误跟着内容一起消失。
  • 不要把关键决策依据(价格明细、权限范围、不可逆后果)放进默认折叠。
  • 验证:给没见过这页的人看折叠态截图,请列出页上有哪些功能区。说不出的那一块,存在感已经被藏掉。

延伸

  • 同组E4.07.2 默认展开与折叠取决于内容命中率 · E4.07.3 折叠内的内容不应参与页面内搜索的假象
  • 相邻E4.06 树形控件 · E4.09 抽屉
  • 站内检索disclosure widget · accordion · information scent

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E4.07.1