G4.08.1distinguish external links visually from internal ones设计研究

外部链接需与站内链接在视觉上可区分,让用户预判跳转后果

别名: 外链可区分 · external link affordance · 站内外链接 · outbound marker

概念解释

站内链接把人留在同一信任边界和同一套导航里;外部链接把人送去另一个域名,返回链、外观、谁在处理数据都会变。视觉上可区分是让人在点击前就能判断「我会离开这里」,而不是点完才从陌生顶栏认出来。它预告的是目的地是否仍在本站,不是会不会开新窗口,也不是这条链危不危险。

机制

链接的默认预测是「还在这个产品里」。站点内大量蓝色下划线训练了这个预测。外链若不加标记,预测错误,第一帧的陌生品牌会被读成「站点改版了」或「被重定向了」。信息气味在跳转前断开:人用当前页的残渣判断下一跳,外链的下一跳不属于这些残渣。可区分的标记(图标、「外部」文字、域名预览)把气味补在激活之前。

只靠颜色不够。色盲、高对比主题、已访问色都会把「外链色」吃掉。新窗口图标和外链图标若用同一个箭头,两种例外焊在一起:站内帮助新开、站外原地打开,人无法预判哪一种后果。读屏用户需要名字里有「外部」,否则视觉图标对他们等于没有。同一段落里偶发的外链才需要逐条标记;整页都是外发目录时,页级声明比逐条图标更清楚。

怎么研究

给同一批链接三种外观:无标记、仅图标、图标加「外部」或域名。点前问「会去哪」,点后看是否惊讶。

  • 因变量:点击前判断站内/站外的正确率、跳转后的惊讶、读屏是否在激活前读到外部。
  • 自变量:标记形式、是否同时表示新窗口、外链密度。
  • 方法论注意点:内部员工认得本站的 URL 模式,会靠 hover 状态栏判断,高估无标记的可预测性。要禁止看状态栏,或在触屏上测。不要和外链的风险确认混在一次任务里,否则「可区分」被「危不危险」带跑。

边界

用户内容里的超链接(评论、聊天)数量巨大且不可预审,逐条图标会把正文打成噪声,可用统一规则(用户内容默认外链样式)而不是人工标记。子域、CDN、登录用的认证域在工程上是外域,在用户模型里仍是「这个产品」,标成外部会过度警告。纯图标且无文字等价物的标记,对读屏和部分低视用户等于未区分。

怎么落地

  • 站外链在可见标签旁给出与站内链不同的标记,无障碍名包含「外部」;不要只用颜色。
  • 外链标记和新窗口标记分开;两者同时发生就写两件事。
  • 悬停或长按可预览目标域名,作为标记的补充,不是替代。
  • 验证:把一篇混有站内、站外链的正文交给未参与设计的人,禁止看状态栏,点前分类每一条。外链分进站内,或读屏激活前听不到「外部」,即为不可区分。再混入几条站内新开的帮助链,确认外链图标没有被拿去标它们。

延伸

  • 同组G4.08.2 未保存改动时离开当前页面需拦截提示,而非静默丢弃 · G4.08.3 跳转到外部域名涉及信任转移,高风险场景需二次确认 · G4.08.4 离开提示只用于有实际数据丢失风险的场景,滥用会致使用户脱敏 · G4.08.5 外部跳转可能携带来源信息,隐私敏感场景需说明或阻断
  • 相邻G4.04 新窗口与原地跳转 · G2.08 导航项的可预测性 · E1.08 链接与按钮
  • 站内检索external link · outbound affordance · link destination

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/G4.08.1