F6.02.1icon label设计研究

文字标签显著提升识别与首次可用

别名: 图标标签 · labelled icon · first-use success

概念解释

图标旁边的那几个字不是图的说明,而是第一次能做对这件事的通道。没有标签时,用户要先解出图形再决定点不点;有标签时,动作名直接可读,图形退成定位标记。首次可用(first-use success)跟着字走,不跟着线稿走。老用户后来可以只扫图形,那是学会之后的捷径,不能拿来证明新手不需要字。

机制

阅读词比解谜一幅压缩图快,也稳。词把候选含义收成一个,图形则同时激活好几条联想。标签的作用不是「锦上添花」,而是把开放的猜认改成封闭的再认:人看见「分享」这两个字,不必再决定那枚节点图是网络、连接还是转发。图形仍有用,它提供落点、帮助扫视时把这一项从邻项里摘出来;但它不再承担命名。把标签拿掉,等于把命名任务重新扔回图形——而图形本来就不是为命名设计的。

怎么研究

对照很直接:同一组功能,图标独用 vs 图标加标签,测的是第一次尝试的正确动作率和到达正确控件的时间,不是主观「好不好看」。样本必须是没见过这套界面的人;内部评审会把学习效应提前用掉。学过之后再测一次,可以分开看首次可用和熟练表现——标签的收益集中在前几次,熟练后两组会靠近。这不能解释成「标签多余」,只说明捷径出现了。

自变量:有无标签、标签是功能名还是描述句、标签是否在悬停后才出现。 因变量:首次正确率、首次成功时间、错误点击。悬停才出现的标签测到的是发现成本,不是伴随阅读。

边界

  • 屏幕阅读器和无障碍名称是另一条通道,替代不了视力完好用户在屏上扫到的字。
  • 极窄的工具栏里标签会挤爆布局,这是空间问题,不是「标签无效」;空间不够就该减功能或换容器,而不是默认为图标已经够用。
  • 熟练用户可以关掉标签,不代表默认态可以没有标签。
  • 这条说的是标签作为命名通道的收益,不是哪些功能可以裸奔,也不是标签要占多少格子。

怎么落地

  • 导航、工具栏里的非常规动作、以及会进入新用户路径的入口,默认图标加字,把「可扫到的名字」当作功能的一部分,而不是装饰。
  • 不要用悬停才出现的提示代替常驻标签。悬停在触屏上不存在,在桌面上也把发现变成了二次操作。
  • 验证办法:找没见过产品的人完成一项指定任务,只看他们第一次点中目标控件的比例。图形改了三次而首次正确率不动,就停手改图形,去加字。

延伸

  • 同组F6.02.2 仅图标适合已建立共识的少数功能 · F6.02.3 标签占位需在设计早期计入
  • 相邻F6.01 图标的歧义 · E1.13 图标加文字按钮
  • 站内检索icon label · first-use success · labelled icon

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F6.02.1