G4.08.1distinguish external links visually from internal ones设计研究
外部链接需与站内链接在视觉上可区分,让用户预判跳转后果
别名: 外链可区分 · external link affordance · 站内外链接 · outbound marker
概念解释
站内链接把人留在同一信任边界和同一套导航里;外部链接把人送去另一个域名,返回链、外观、谁在处理数据都会变。视觉上可区分是让人在点击前就能判断「我会离开这里」,而不是点完才从陌生顶栏认出来。它预告的是目的地是否仍在本站,不是会不会开新窗口,也不是这条链危不危险。
机制
链接的默认预测是「还在这个产品里」。站点内大量蓝色下划线训练了这个预测。外链若不加标记,预测错误,第一帧的陌生品牌会被读成「站点改版了」或「被重定向了」。信息气味在跳转前断开:人用当前页的残渣判断下一跳,外链的下一跳不属于这些残渣。可区分的标记(图标、「外部」文字、域名预览)把气味补在激活之前。
只靠颜色不够。色盲、高对比主题、已访问色都会把「外链色」吃掉。新窗口图标和外链图标若用同一个箭头,两种例外焊在一起:站内帮助新开、站外原地打开,人无法预判哪一种后果。读屏用户需要名字里有「外部」,否则视觉图标对他们等于没有。同一段落里偶发的外链才需要逐条标记;整页都是外发目录时,页级声明比逐条图标更清楚。
怎么研究
给同一批链接三种外观:无标记、仅图标、图标加「外部」或域名。点前问「会去哪」,点后看是否惊讶。
- 因变量:点击前判断站内/站外的正确率、跳转后的惊讶、读屏是否在激活前读到外部。
- 自变量:标记形式、是否同时表示新窗口、外链密度。
- 方法论注意点:内部员工认得本站的 URL 模式,会靠 hover 状态栏判断,高估无标记的可预测性。要禁止看状态栏,或在触屏上测。不要和外链的风险确认混在一次任务里,否则「可区分」被「危不危险」带跑。
边界
用户内容里的超链接(评论、聊天)数量巨大且不可预审,逐条图标会把正文打成噪声,可用统一规则(用户内容默认外链样式)而不是人工标记。子域、CDN、登录用的认证域在工程上是外域,在用户模型里仍是「这个产品」,标成外部会过度警告。纯图标且无文字等价物的标记,对读屏和部分低视用户等于未区分。
怎么落地
- 站外链在可见标签旁给出与站内链不同的标记,无障碍名包含「外部」;不要只用颜色。
- 外链标记和新窗口标记分开;两者同时发生就写两件事。
- 悬停或长按可预览目标域名,作为标记的补充,不是替代。
- 验证:把一篇混有站内、站外链的正文交给未参与设计的人,禁止看状态栏,点前分类每一条。外链分进站内,或读屏激活前听不到「外部」,即为不可区分。再混入几条站内新开的帮助链,确认外链图标没有被拿去标它们。