编者按:每月,资深电子商务开发者、撰稿人路易斯·卡马萨都会从现有电商网站中挑选一个执行出色且适用于其他商家的功能。卡马萨此前的文章包括“欣赏苹果的‘问答’功能”和“自动发货计划促进重复销售;两个案例。”在本文 installment 中,他分析了能够加速顾客购买的“快速查看”窗口。
电子商务网站的主要目标之一是缩短消费者将商品加入购物车所需的时间。通过利用“快速查看”功能,网站可以消除许多障碍——包括点击次数——并帮助顾客以相对轻松和高效的方式开始下单。
“Quick view”也被称为“quick look”,还有其他名称。它允许访客在不刷新页面的情况下查看产品详情——无论是在分类页面、购物车还是其他任何页面。产品详情会以模态(即弹出)窗口形式展示,该窗口在当前页面上打开,通常显示截断的产品信息。
请参阅PetCareRx.com的示例,展示了在分类页面及其弹出式快速查看模态窗口中的“Van Ness Sifting Framed Cat Pan”。
"Van Ness Sifting Framed Cat Pan",如分类页面所示。
"Van Ness Sifting Framed Cat Pan"的快速查看模态窗口。
快速查看功能正变得越来越受欢迎。它具有以下一些关键优势。
- 降低服务器负载。由于产品信息已经存储在页面上——隐藏在幕后——当访客启用此功能时,页面不会重新加载。它只是从隐藏状态变为可见状态。
- 加快购物速度。访客可以快速将商品加入购物车,而无需等待实际产品页面加载。能够在浏览分类页面的同时阅读快速查看中的扩展产品详情,而无需加载产品页面,将为购物体验节省宝贵的几秒钟。
- 折扣至最低广告价格(MAP)。制造商有时会要求实行“最低广告价格”政策,限制商家在其网站上以低于 MAP 的价格列出产品价格。但 MAP 政策通常不适用于快速查看模态框。因此,商家可以在快速查看中显示折扣后的——低于制造商最低广告价格的——产品价格。
展示折扣价格及其他详情。您可以利用快速查看功能在购物车页面之前展示折扣后的产品价格。您还可以在其中包含其他详细信息。例如,Staples.com 上的快速查看就包含了以下详细信息:
Staples.com 选择在快速查看(quick view)中安装“Customer Reviews”标签页。这很有帮助,因为许多访问者会使用此功能。然而,由于其尺寸较小,快速查看模态框没有提供足够的空间来阅读评论。访问者必须使用快速查看内的滚动条才能浏览这些评论。
来自 Staples.com 的 Nestle Pure Life 水的快速查看模态框。
来自 Staples.com 的 Nestle Pure Life 水快速查看模态框中的“Customer Reviews”标签页。注意最右侧有两个滚动条。
另一种选择是,当打开“Customer Reviews”标签页时扩展快速查看模态框,并使用主页面的滚动条——见下方 AmazingGrass.com 的示例。这会扩展原始模态框,并允许访问者使用单个滚动条来浏览模态框和整个网页。避免在单个页面上出现多个滚动条可以简化访问者的体验。
AmazingGrass.com 上的“Customer Reviews”链接会扩展窗口,并利用与主站点相同的滚动条。
下面显示的 PetCareRx.com 快速查看设计良好。它功能有限,但比 Staples.com 具有更简化的布局。具体来说,没有标签页布局和产品展示评论,呈现方式不那么繁琐。然而,如果访问者想了解有关产品的更多信息或阅读评论,则需要点击并加载页面才能进入完整的产品详情页面。
这个来自 PetCareRX.com 的快速查看模态框设计精良,布局简洁。
快速查看的缺点
快速查看设置的一个主要缺点是,许多访问者不知道什么是快速查看。由于使用频率不够高,访问者并未对此形成预期。许多利用此功能的网站要求访问者将鼠标悬停在产品图像上以激活快速查看按钮。
在观察客户网站数小时的访客互动情况——即观看访客与网站的交互过程——中发现,许多访客点击的是产品图像,而不是快速查看按钮。此外,确实点击该按钮的访客似乎是不小心点到的。
为了解决这个问题,网站可以在产品图像下方安装一个始终可见的快速查看按钮——如下面的 Petco.com 示例所示。点击该按钮将启动模态框,但点击产品图像则会跳转到产品详情页面。这是一种简单而有效的方法,有助于提高快速查看功能的曝光率,并减少访问者的困惑。
Petco.com 将“快速查看”链接直接放置在产品图片下方,这有助于消除混淆。
主要快速查看元素
在实现快速查看功能时,务必包含以下主要元素。
- 消除混淆。提供一个清晰的激活快速查看模态框的操作提示——例如按钮。
- 保持简洁。不要试图在快速查看中展示所有产品详情。由于空间有限,包含所有属性会使界面显得杂乱。
- 链接到完整产品页面。包含一个链接,以便查看完整的产品页面。
- 添加到购物车。包含一个位置显眼的“加入购物车”按钮。
- 突出产品图片。展示比基础分类页面上更大的产品图片。
其他元素——例如(a)打印页面、(b)Facebook 点赞、(c)标签页、(d)评论和(e)缩放——则取决于具体产品以及自定义快速查看窗口的能力。
总体而言,快速查看功能带来了诸多好处。我相信,未来它将成为网站可用性方面的标准配置。

