超链接预览方案小实验
翻译： alina Wong 审校：zhaoyb | UXRen翻译组 #296 译文
《纽约时报》官网每天有大约160篇报道，其中许多正文中嵌有超链接。这些链接能帮读者了解当前报道的背景信息，按特定路径阅读内容，以及查看信息来源，但是链接往往会使读者转移注意力而不能读完原来的故事。
我们来看个例子。
《与Kanye West一起进入野外》（Into the Wild with Kanye West）的第二段，内容中有一些吸引读者的诱惑性超链接：“他的妻子被持枪抢劫”，“意外的出庭”和“九天的停留”。但是，段落结尾却是留一个悬念：“他处于一种很混乱的状态，这点很明显。”
摘自纽约时报的一篇文章
虽然链接会诱惑读者去点击，但悬念的作用是吸引读者继续往下阅读。两者的合力不仅没有促进读者对文章的理解，反而是互相冲突，分散了读者的注意力。
8月份，我们做了一项实验，研究《纽约时报》文章链接的悬停预览的效果。希望通过这种新的交互方式，读者能把链接作为工具来更好地理解文章及相关背景。
超链接内嵌预览测试的示例
用户如何使用超链接
目前的链接交互方式可归为以下几种：
- 打开一个新标签页，供稍后阅读
- 点击并跳转到另一篇文章，并可以返回到原始文章
- 无反应，因为不能立即访问或者不感兴趣
一种场景是，读者可能会因链接的内容生动有趣，从而放弃阅读原始文章，开启了从一篇文章切换到另一篇文章的跑题模式。跟随链接跳转，可能让读者陷入漫长而发散的阅读路径中，他们再也回不到最开始想看的文章了。
另一种场景是，读者会点击链接打开新标签页，可以稍后再阅读。一旦要从一堆顶部标签页中跳转，要是离原文章太远的话，读者可能会忘记这些文章从哪里跳转来的。
构想一种较好的体验：超链接内嵌预览
易触达的预览形式，可帮助读者了解更多背景信息，而不必中断当前文章的阅读。同时，它还能帮助读者挖掘文章更深层次的信息。
以下是我们在预览工具中纳入的最必要功能：
- 展示文章的关键信息，如标题，图像，发布日期。
- 巧妙的延时，读者随意在页面上滑动鼠标，适时展示。
- 动态调整展示，预览在链接上方或下方显现，以保持在阅读窗口内。
我们希望提供的链接交互方式流畅有序，有足够灵活适应性，用户最终能享受《纽约时报》的沉浸式阅读体验。
设计决策
我们参考了《纽约时报》文章现有的视觉指引，在设计链接内嵌预览。对于一个新的站点行为，熟悉的设计元素便于读者识别正在看的位置，也便于在以前的交互习惯上建立新交互方式。
由于链接会导向其他文章，我们借鉴了《纽约时报》主页的文章展示方式。我们创建了印刷风格的缩略版，它包含标题、发布时间、分栏标签，以及缩略图。
为了减少预览对正文阅读体验的干扰，把它们缩放到带有阴影的白色小卡片。这种处理方式使得预览与正文内容处在不同层级上，而与网页风格保持一致。
为了确保读者直观地理解悬停动作和超链接预览的关系，模块呈现的位置需要与读者的悬停位置相对应。这样会更加直观易辨，但却可能会导致预览跑到视窗之外。为此，我们做了优化，当预览模块在视窗底部时，在光标上方显示预览，而当预览模块在视窗顶部时，在光标下方显示。
代码
在程序设计阶段，通常要想办法避免重写现成的代码。由于我们的网站是使用React搭建的，很容易想到的是利用现有的组件库，例如react的模块或工具提示控件。这样做可以得到预览模块的基础代码。然而，这个方法会使得组件代码混在整个代码库中，可能会增加所有页面的加载时间。所以，我们选择更费力的方式，创建了全新的自定义组件，以使得设计能最直接和轻量化。
预览工具是有限定条件的，只有符合特定标准的链接才显示预览。当页面加载时，程序先检验超链接的有效日期，这是根据链接URL中的日期参数来检验的。
《纽约时报》URL的结构是这样的：
https//www.nytimes.com/2018/06/25/arts/music/kanye-west-ye-interview.html
用正则表达式定义字符串的搜索模式，只需简单的一行，就可以提取出日期。通过这种轻便方式，可以在发送请求之前，先确认该链接预览是否有效。
通过了日期检验的链接，还必须按预览模式来查询有效性和确认已生成。预览模式结构包含《纽约时报》给定文章的标题、摘要、图片、日期和对应内容片断。如果这些数据有缺失的，则直接忽略不展示。
研发中的难点之一是确保预览在整个网站上的正常运行。由于《纽约时报》的文章多种多样，最初的设计原型遇到太多缺失数据。为了解决这个难点，我们使用了一种多元化请求。例如，常规文章和交互式文章的预览图片，通常存储在不同的数据表中。多元化查询使得原先的请求能更大范围地进行检测，以判断链接是否失效。
下一步工作
目前主要关注于推行预览模式，完善读者对《纽约时报》内容的阅读体验，并增强他们对内容的理解。为此，我们正在进行一系列的A/B测试和定性研究，来检验这个模块的效果。我们的目标是，确定能提升阅读体验，而不干扰读者畅快享受内容。这些测试可以帮助我们检验读者是否喜欢这个功能，探寻读者阅读《纽约时报》扩展信息的最佳方案。
编者注：此项目正在开发中，目前尚未上线。
原文链接：https://open.nytimes.com/experiments-with-link-previews-to-help-guide-readers-79dbe843ad29 [The Times Open Team, 2018.11.20]
