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

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

        电商网站需要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 来自<电商可用性研究>)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容