E4.07.3find-in-page vs collapsed content设计研究

折叠内的内容不应参与页面内搜索的假象

别名: 折叠与查找 · 页内搜索失效 · 隐藏文本匹配 · collapsed find

概念解释

浏览器或应用的「页内查找」会在 DOM 里匹配字符串。折叠块常常把内容留在文档里只是不画出来,于是查找报「找到了」,视口却停在一块仍合着的标题上,用户看不见命中。这是折叠与查找的假象(find-in-page versus collapsed content):系统在说内容在场,页面模型在说内容不在场。它不讨论要不要默认折叠,只讨论查找这条通道能不能被折叠骗到。

机制

查找假设匹配到的节点在视觉上可到达:滚到它、高亮它、读到它。折叠把节点从布局里拿掉,却不一定从文档树里拿掉。匹配成功后,滚动容器把一条合着的标题送到视口中部,高亮落在看不见的子树上,计数器却已经加一。用户按「下一个」会跳过一块自己从未看见的命中,以为页面上没有这个词,或以为查找坏了。反向的假象是:实现为了省事把折叠内容从 DOM 卸掉,查找报告「无结果」,而展开之后词明明在。两条路都让查找的计数与可见命中不一致。一致的做法只有两种:匹配时自动展开并滚到可见高亮,或查找域明确排除折叠内容并在界面上声明「未展开的块不参与」。

怎么研究

在含折叠块的长页上埋入只出现在折叠内的独特词,分别测试:内容留在 DOM 且不自动展开、匹配即展开、内容不在 DOM。让被试用系统查找去定位这个词。因变量:是否报告找到、是否看见高亮、展开动作是否由查找触发。自变量:折叠实现(隐藏 / 卸载)、查找是否有权展开。若「找到」次数大于「看见」次数,假象就成立。

边界

应用内自定义查找若只扫可见文本,与折叠一致,不构成假象,但要在无结果时提示「也许在未展开的部分」。PDF、打印预览没有折叠,查找按可见页走。屏幕阅读器的查找若能进入折叠节点,应同时把该节点标为已展开,否则朗读命中和视觉命中再次分叉。虚拟滚动把未绘制行卸掉,会造成另一类「查找找不到」,机制相似但对象是列表而不是折叠块。

怎么落地

  • 页内查找命中折叠内文本时,展开该块,把高亮滚进视口,并计入可见命中。
  • 若技术上不能展开,查找应跳过这些节点,并给出「还有 N 处在未展开的块中」而不是假装找到。
  • 不要用「从 DOM 删掉折叠内容」来省事,除非查找与阅读顺序一起删除,并在展开后重新纳入。
  • 验证:把一个只存在于折叠块里的词拿去查。结果必须是「看见高亮」或「明确告知在未展开块中」。出现计数增加而视口里没有高亮,就是假象。

延伸

  • 同组E4.07.1 折叠隐藏内容,同时隐藏其存在感 · E4.07.2 默认展开与折叠取决于内容命中率
  • 相邻E4.18 虚拟滚动与长列表 · E2.10 搜索输入框
  • 站内检索find in page · hidden text · disclosure and search

同组卡片

快捷操作

分享

分享当前页面

ios_share

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