电商产品设计电商设计资料

电商网站设计系列 3:首页&产品列表的可用性

2015-12-23  本文已影响122人  小明明有梦想

译文:来自<电商可用性研究>

        电商网站需要2种类型的面包屑(68%做错了)

运用我们最近的主页和产品列表可用性的报告和基准调查,我们发现在一系列关于产品的8篇文章中,这篇排名第三。

也许面包屑看上去像是一个十分无趣的网站元素,但是我们最近的主页和产品列表的研究报告证明了它们是至关重要的导航途径。更有趣的是这个研究报告揭示了电商网站应该提供两种类型的面包屑:既要有基于层级结构的面包屑也要基于历史(记录)的面包屑。

但是,当我们对50个电商网站做基准调查的时候我们发现了一个难以置信的事,68%的电商网站因低于平均水平的面包屑执行而遭受痛苦:45%的电商网站只有一种类型的面包屑(典型地基于层级结构的,而缺少基于历史记录的),而且23%的电商网站完全没有面包屑。

一些68%的顶级电商网站中执行的是低于平均水平之下的面包屑。

在这篇文章中,我们将复习那些来自我们研究报告的调查结果,同时描绘出基于历史记录和基于层级的面包屑的特点,并且讨论为什么对于一个电商网站来说同时拥有两种类型是如此重要。

面包屑的使用行为

没有了产品页面上的面包屑,对于用户来说高效的浏览产品集合是困难的,因为没有了一步到层级(产品目录),或是到产品列表或是到搜索结果页面的路径。这经常促使用户进行猛烈的范围跳跃(选择一个最高阶层的产品目录,完成一个搜索等),或是仍然停留在产品页面。

不管怎样,有了面包屑,任何找不到完美匹配产品的用户,或是仅仅想要看看其它的产品用户(为了做比较,尽职的搜索,额外的购买),可以用面包屑横穿网站层级结构,通过这样来继续他们的产品浏览而不是凭借猛烈的范围跳跃。

基于层级结构的面包屑使用户可以轻易的导航到产品目录页面来寻找相关产品。这里有一个测试对象对这件夹克不是100%的确定,所以她用基于层级结构的链接到H&M产品目录页面的面包屑轻易地导航到了她来时候的‘夹克&棉衣产品目录’。

在测试时面包屑最经常使用的方法是,作为一条返回到测试对象来时的产品目录的路径——非常像使用浏览器的返回按钮,这个按钮是网页页面的一部分。在这个场景下,对于用户来说面包屑本质上是一个简易的路径来返回到产品目录页面并且继续他们的产品浏览,在产品列表和产品页面前后来回跳跃。

但是,面包屑链接通常不像浏览器返回按钮那样工作因为他们通常是基于层次结构,但是网页的返回按钮是基于历史记录的(就是说,它是基于用户的导航路径的)。所以,当用户使用基于层次结构的面包屑往回导航时,任何事先应用过的过滤条件和排序好的选项都是让人迷惑的。这就是基于历史记录的面包屑进入视野的时候。当面包屑是基于历史记录的时候,它把用户送回了他们之前的页面,这个通常不是简单的目录列表—比如用户可能会通过产品的属性来过滤,或是使用一个不同的排序方向,更或者是使用了一个非线性的方式进入的产品页面,比如搜索(站内或站外的)或是广告。

在Nordstrom,一个‘返回到结果’选项允许用户在所有之前的过滤和排序都原封不动的情况下返回到之前的产品列表页面。

很少有网站执行的面包屑是仅仅基于用户的导航路径的(基于历史记录的面包屑),实际上起着和返回链接一样的功能。无论如何,这个限制了用户探索他们当时以非线性方式进入的那个区域的能力,因为他们不能以一种线性的浏览策略穿越放置产品的目录页面。

为神马你同时需要两种类型的面包屑

任何用非线性方式(通过内部或外部的搜索,通过一个主打的推销)登录到产品页面的用户会经常使用面包屑来查看同一子目录下的其他产品。本质上,这是一个让用户找到相关产品的方法,尽管他们是从网站的一个完全不同的区域取得到这个产品的方法,甚至完全地是从另一个网站而来。对于搜索,推销和其他非线性路径来说,层次结构性面包屑是非常重要的,因为它能够让用户切换到一个线性的产品浏览策略,如果这个范围是和他们相关的。

在 Best Buy网站,有一个测试对象从‘卖的最好’的配件列表里打开了一个Targus笔记本电脑适配器。但是,因为不是百分之百确信(是不是要买这个),测试对象想查看一下别的笔记本电脑适配器 — 幸运的是,这个被证实很容易,只要点击产品目录页面上基于层次结构的面包屑,就可以直接带他去‘笔记本电脑充电器&适配器’类别页面。

虽然基于层次结构的面包屑能很好的为那些以非线性方式进入产品页面的用户服务,他们确不能总是适应那些以线性方式进入产品目录页面的用户的需求。如果一个用户在产品目录页面使用过大量的过滤器,然后打开了一个产品,点击这个产品页面上基于层次结构面包屑的目录通常不会保留过滤结果,而只会把用户送回没有过滤结果的产品目录页面,因为这只是一个去产品目录的链接,而不是基于用户的历史记录的。其实用户真正需要的是一个基于历史记录的面包屑,可以把他们送回他们之前在的页面 — 不管它是一个搜索结果列表,一个有以前过滤结果的产品目录,还是应用的排序分类结果。

毫无疑问,对两种类型面包屑的需求都是合情合理的 — 所以你会执行哪一种? 答案是两种都要。一种简洁的,相对来说比较简单的方法是有一套固定的基于层次结构的面包屑,然后在结尾或开头附加一个基于历史记录的‘返回到结果’的选项。这让用户两全其美:取得了去产品目录的方法,尽管他们是用一种非线性的方式进入到的产品页面,然而同样给用户提供了一个返回到之前有许多过滤结果/排序分类/搜索结果都原封不动的页面。

Sears 和 Macy’s通过同时包含两种类型解决了面包屑的历史记录vs层次结构的问题。一个基于历史记录的‘返回到结果’的选项,把用户带回到了保留所有过滤结果的产品列表页面,它是附加在基于层次结构的面包屑上的。

这是一个关于表面上看起来很普通的网站元素实际上确能在用户浏览你们网站产品目录的能力上有很大影响的一个很好的例子。通过融合基于层次结构和基于历史记录的面包屑,用户可以改变产品浏览策略并且无缝过渡到产品列表页面。

让这种融合方式特别有趣的是,它将网站分类系统和用户行为混合进了一个简单的功能性元素里。有一些细节可以因此让网站之间产生差异,比如支持快速的产品浏览和转换到产品结构策略,这就是网站(常常会)制约的一点。

(原文链接:http://baymard.com/blog/ecommerce-breadcrumbs 来自<电商可用性研究>)

上一篇下一篇

猜你喜欢

热点阅读