超链接预览方案小实验

翻译: 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]

发表评论

电子邮件地址不会被公开。