E1.16.3open in new tab is for links设计研究

右键菜单中的新标签页打开选项只对链接有意义

别名: 新标签打开 · 右键链接 · context menu href

概念解释

浏览器给链接提供「在新标签页打开」「复制链接地址」,因为链接有一个可取出的地址。按钮没有这份地址,右键菜单里这些项要么不出现,要么出现了也无意义——新标签里无法重放一次「删除」或「付款」。新标签打开只对链接有意义:它是导航契约在指针手势上的出口。把导航做成按钮,用户会去找这项命令而找不到;把动作做成链接,用户会在新标签里误触发一次动作。

机制

新标签、新窗口、复制 URL、拖到书签,都是把资源标识交给另一个容器。标识就是 href。按钮事件绑在当前文档的一次调用上,没有可传递的标识,另一容器打开后只是空白或同一应用的默认页。单页应用用按钮去 history.push 却不给可复制的 href,指针手势这一整族都会哑火,尽管视觉上像能跳。相反,<a href="#">javascript: 会让菜单出现,新标签打开的是无用地址,用户以为自己开了详情,实际是空页。菜单项的有无,是角色比外观更硬的证据。

怎么研究

对同一视觉控件分别实现为带真实 href 的链接、无 href 的按钮跳转、href="#" 的假链接。允许右键、中键、拖拽。

自变量:有无真实 href、任务是导航还是动作。 因变量:是否尝试新标签、新标签里是否得到预期资源、复制的地址能否独立打开。

禁用浏览器菜单的内嵌 WebView 测不到。要用带标准上下文菜单的桌面浏览器。

边界

下载链接的「新标签打开」可能直接开始下载,仍有意义。需要登录的资源在新标签可能掉会话,命令有意义但结果失败,应靠会话而不要拿掉菜单。移动端长按菜单项的文案不同,但「在新标签打开」同样只对有地址的对象成立。按钮打开的模态里再放链接,那条链接才重新获得菜单。

怎么落地

  • 凡是希望被新标签、复制、分享的,给真实 href 的链接,不要用按钮去推路由。
  • 动作不要用 href="#" 骗出链接菜单。
  • 在组件预览里右键每一个「看起来能跳」的控件,确认菜单项与真后果一致。
  • 验证:中键点击。链接应在新标签打开正确资源;按钮不应打开空白标签,也不应在当前页误执行动作。

延伸

  • 同组E1.16.1 链接以回车激活,按钮同时响应回车与空格 · E1.16.2 屏幕阅读器会分别播报链接与按钮的角色而非仅读文案 · E1.16.4 访问过的状态只属于链接,按钮没有已访问的概念
  • 相邻E1.08 链接与按钮 · G4 跨页流转 · O3 安全交互
  • 站内检索open in new tab · context menu · href

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E1.16.3