G2.09.2utility visual weight below primary设计研究

工具性入口的视觉权重需低于主导航,避免争夺注意力

别名: 工具区弱化 · quiet utility · 不要抢主导航

概念解释

工具入口要能被找到,但不能和内容主导航抢同一套视觉资格。权重低于主导航:更小的字号、更轻的对比、更少的填充,让扫视先落在类目上,工具项作为第二遍才被捡起。购物车角标、登录按钮做成与主类目同级的实心块,内容寻路会被状态入口截走。低权重不是藏起来——藏起来的工具项会逼人去内容树里找登录。

这一条管注意分配,不管工具项该不该存在、该不该从内容树拆出。拆出之后,还要在视觉上承认谁是主路。

机制

视觉搜索先抓显著目标。主导航用尺寸和对比把自己标成「这里是内容的路」;工具项若同等显著,搜索有两个终点,内容任务会被工具截走,工具任务也不一定更快——因为显著物变多,目标项的相对显著下降。角标和红点是额外的瞬变,专门抢注意,只应挂在真正有状态变化的工具项上,并保持控件本体仍弱于主类目。

扫视路径也有习惯:顶栏从左到右先读类目、右上角再读工具,是一种被广泛学习的分区。把工具做成左上大按钮,等于改写这条路径,内容气味还没开始工作就被打断。

怎么研究

用眼动或首次点击看内容任务是否被工具项截走,以及工具任务在低权重下是否仍能被找到。

  • 范式:同一布局,工具项与主类目同权重 vs 明显更弱;一半被试做内容已知项,一半做打开设置或购物车。
  • 自变量:字号/对比/填充、角标有无、工具区位置(右上 vs 混入主列)。
  • 因变量:内容任务的首次点击是否落在工具项、工具任务的成功与时间、事后「系统想让我先看哪一排」。
  • 方法论注意点:空购物车和满购物车的显著需求不同,要分层。不要用「工具项被看见了」当成功——内容任务里看见并点了它,是争夺,不是成功。

边界

结账、支付、安全告警可以短暂抬到主权重,因为当前任务已经不是内容浏览。电商首屏把购物车做得很大是商业选择,内容寻路成本仍在,应在内页恢复低权重。通知红点若常亮,权重会被习惯化为噪声,既抢注意又不再传递状态。无障碍放大后,弱对比可能掉到不可读,低权重仍须满足最小对比,弱的是相对主类目,不是弱到消失。

怎么落地

  • 主类目用主导航样式,工具项用文字或小图标样式,禁止同一排出现两套主按钮资格。
  • 角标只表示真实未读或车内件数,空状态不显示角标,以免假瞬变。
  • 验证:灰度并遮住文案,请人指出「内容的路」和「账号的路」。指成同一视觉级别,权重失败。再做一次内容查找,首次点击若落在登录或购物车上,工具项在抢路。

延伸

  • 同组G2.09.1 工具性导航承载与内容结构无关的功能入口,如登录、设置、购物车 · G2.09.3 站点地图是主导航失败时的穷尽性后备入口 · G2.09.4 页脚导航承担次要与穷尽性链接,不替代主导航 · G2.09.5 帮助与客服入口需在任意页面保持可达,不必进入主结构
  • 相邻F3.07 层级与信息优先级的对齐 · G2.06 全局与局部导航 · E1.01 按钮的层级
  • 站内检索utility navigation weight · visual hierarchy · attention competition

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/G2.09.2