J2.14.3landmarks设计研究

地标区域(导航、主内容、页脚)补充标题之外的结构线索

别名: 页面地标 · banner navigation main contentinfo · ARIA landmarks

概念解释

标题管的是章节怎么层层嵌套。页面还有另一套零件:地标区域(landmarks)——哪一块是导航、哪一块是主内容、哪一块是页脚、哪一块是站点横幅。地标不代替标题,它回答的是「我现在在页面的哪个零件里」,标题回答的是「我在哪个章节里」。两套叠在一起,才有按零件跳和按章节跳两条入口。

没有地标的页面,章节树可以很完整,用户仍要从页头链接一项一项走,才能知道正文从哪开始。

机制

页面布局是空间分区:顶栏、侧栏、正文、底栏。看得见的人用位置读分区;读不出位置的人需要分区被标成命名区域。地标就是这些区域的名字。主内容地标把「正文开始」标成一个可直接到达的点,导航地标把重复的链接集合从正文里划出去,页脚地标把法律与次要链接另外存放。

地标与标题正交。一篇文章可以在主内容地标里有完整的标题树;导航地标里通常不应再长出一套与正文抢戏的标题树。重复使用同一种地标而不给可区分的名字(三个都叫「导航」),名单里就会出现无法点选的重名。地标过多等于没有地标:名单被次要区域填满,主内容那一条被淹没。

怎么研究

打开阅读器的地标列表,记录种类、个数、名字是否可区分,再让用户完成「跳到正文」「跳到主导航」「跳到页脚」三件任务,不使用标题列表。

自变量:是否有主内容地标、导航地标是否命名、同名地标个数、地标总数。 因变量:三件跳转任务的成功率与按键次数、误入错误区域的次数。

对比「只有标题树、没有地标」与「地标加标题」两种页面。标题树解决的是章,地标解决的是零件,任务必须按零件来出,否则测回标题去了。抽样包含多侧栏后台和营销页,前者地标容易碎,后者容易缺主内容。

边界

只有一栏、几乎没有重复导航的短文,地标的收益变小,但主内容地标仍然值得保留,因为它是「跳过页头」的稳定目标。原生 <header> <nav> <main> <footer> 已经是地标,再叠一层同名的角色属性会造成重复项。内嵌的地图、播放器若各自声明主内容,会和页面的主内容冲突,嵌入物应用更具体的区域,而不是再声明一个主内容。纸质版式、纯图 PDF 没有这套区域模型。

怎么落地

  • 给页面标出横幅、主导航、主内容、页脚;侧栏、搜索若存在,也标成对应区域,并给第二个导航一个能区分的名字(「页脚导航」而不是又一个「导航」)。
  • 一页只有一个主内容区域;组件内部不要再声明主内容。
  • 地标名单保持短。装饰性容器不要标成区域。
  • 验证:只用地标列表,不看标题,完成「到正文」「到主导航」「到页脚」。到不了、或名单里出现多个无法区分的同名项,记失败。

延伸

  • 同组J2.14.1 标题层级需要逐级嵌套,不应为视觉效果跳过层级 · J2.14.2 一个页面通常只有一个最高级标题对应页面主题 · J2.14.4 过度使用标题标记非标题性质的强调文本会稀释导航价值
  • 相邻J3.03 跳转到主内容 · J5.01 屏幕阅读器 · J2.08 阅读顺序
  • 站内检索landmarks · main content region · navigation landmark

同组卡片

快捷操作

分享

分享当前页面

ios_share

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