電商網(wǎng)站設(shè)計(jì)系列 3:首頁(yè)&產(chǎn)品列表的可用性

譯文:來(lái)自<電商可用性研究>

? ? ? ? 電商網(wǎng)站需要2種類型的面包屑(68%做錯(cuò)了)


運(yùn)用我們最近的主頁(yè)和產(chǎn)品列表可用性的報(bào)告和基準(zhǔn)調(diào)查菲驴,我們發(fā)現(xiàn)在一系列關(guān)于產(chǎn)品的8篇文章中儒搭,這篇排名第三彪腔。

也許面包屑看上去像是一個(gè)十分無(wú)趣的網(wǎng)站元素妇汗,但是我們最近的主頁(yè)和產(chǎn)品列表的研究報(bào)告證明了它們是至關(guān)重要的導(dǎo)航途徑跟继。更有趣的是這個(gè)研究報(bào)告揭示了電商網(wǎng)站應(yīng)該提供兩種類型的面包屑:既要有基于層級(jí)結(jié)構(gòu)的面包屑也要基于歷史(記錄)的面包屑莫杈。

但是,當(dāng)我們對(duì)50個(gè)電商網(wǎng)站做基準(zhǔn)調(diào)查的時(shí)候我們發(fā)現(xiàn)了一個(gè)難以置信的事欺劳,68%的電商網(wǎng)站因低于平均水平的面包屑執(zhí)行而遭受痛苦:45%的電商網(wǎng)站只有一種類型的面包屑(典型地基于層級(jí)結(jié)構(gòu)的,而缺少基于歷史記錄的)铅鲤,而且23%的電商網(wǎng)站完全沒(méi)有面包屑划提。

一些68%的頂級(jí)電商網(wǎng)站中執(zhí)行的是低于平均水平之下的面包屑。

在這篇文章中邢享,我們將復(fù)習(xí)那些來(lái)自我們研究報(bào)告的調(diào)查結(jié)果鹏往,同時(shí)描繪出基于歷史記錄和基于層級(jí)的面包屑的特點(diǎn),并且討論為什么對(duì)于一個(gè)電商網(wǎng)站來(lái)說(shuō)同時(shí)擁有兩種類型是如此重要骇塘。

面包屑的使用行為

沒(méi)有了產(chǎn)品頁(yè)面上的面包屑伊履,對(duì)于用戶來(lái)說(shuō)高效的瀏覽產(chǎn)品集合是困難的韩容,因?yàn)闆](méi)有了一步到層級(jí)(產(chǎn)品目錄),或是到產(chǎn)品列表或是到搜索結(jié)果頁(yè)面的路徑唐瀑。這經(jīng)常促使用戶進(jìn)行猛烈的范圍跳躍(選擇一個(gè)最高階層的產(chǎn)品目錄群凶,完成一個(gè)搜索等),或是仍然停留在產(chǎn)品頁(yè)面哄辣。

不管怎樣请梢,有了面包屑,任何找不到完美匹配產(chǎn)品的用戶力穗,或是僅僅想要看看其它的產(chǎn)品用戶(為了做比較毅弧,盡職的搜索,額外的購(gòu)買)睛廊,可以用面包屑橫穿網(wǎng)站層級(jí)結(jié)構(gòu)形真,通過(guò)這樣來(lái)繼續(xù)他們的產(chǎn)品瀏覽而不是憑借猛烈的范圍跳躍。

基于層級(jí)結(jié)構(gòu)的面包屑使用戶可以輕易的導(dǎo)航到產(chǎn)品目錄頁(yè)面來(lái)尋找相關(guān)產(chǎn)品超全。這里有一個(gè)測(cè)試對(duì)象對(duì)這件夾克不是100%的確定咆霜,所以她用基于層級(jí)結(jié)構(gòu)的鏈接到H&M產(chǎn)品目錄頁(yè)面的面包屑輕易地導(dǎo)航到了她來(lái)時(shí)候的‘夾克&棉衣產(chǎn)品目錄’。

在測(cè)試時(shí)面包屑最經(jīng)常使用的方法是嘶朱,作為一條返回到測(cè)試對(duì)象來(lái)時(shí)的產(chǎn)品目錄的路徑——非常像使用瀏覽器的返回按鈕蛾坯,這個(gè)按鈕是網(wǎng)頁(yè)頁(yè)面的一部分。在這個(gè)場(chǎng)景下疏遏,對(duì)于用戶來(lái)說(shuō)面包屑本質(zhì)上是一個(gè)簡(jiǎn)易的路徑來(lái)返回到產(chǎn)品目錄頁(yè)面并且繼續(xù)他們的產(chǎn)品瀏覽脉课,在產(chǎn)品列表和產(chǎn)品頁(yè)面前后來(lái)回跳躍。

但是财异,面包屑鏈接通常不像瀏覽器返回按鈕那樣工作因?yàn)樗麄兺ǔJ腔趯哟谓Y(jié)構(gòu)倘零,但是網(wǎng)頁(yè)的返回按鈕是基于歷史記錄的(就是說(shuō),它是基于用戶的導(dǎo)航路徑的)戳寸。所以呈驶,當(dāng)用戶使用基于層次結(jié)構(gòu)的面包屑往回導(dǎo)航時(shí),任何事先應(yīng)用過(guò)的過(guò)濾條件和排序好的選項(xiàng)都是讓人迷惑的疫鹊。這就是基于歷史記錄的面包屑進(jìn)入視野的時(shí)候袖瞻。當(dāng)面包屑是基于歷史記錄的時(shí)候,它把用戶送回了他們之前的頁(yè)面拆吆,這個(gè)通常不是簡(jiǎn)單的目錄列表—比如用戶可能會(huì)通過(guò)產(chǎn)品的屬性來(lái)過(guò)濾聋迎,或是使用一個(gè)不同的排序方向,更或者是使用了一個(gè)非線性的方式進(jìn)入的產(chǎn)品頁(yè)面枣耀,比如搜索(站內(nèi)或站外的)或是廣告霉晕。

在Nordstrom,一個(gè)‘返回到結(jié)果’選項(xiàng)允許用戶在所有之前的過(guò)濾和排序都原封不動(dòng)的情況下返回到之前的產(chǎn)品列表頁(yè)面。

很少有網(wǎng)站執(zhí)行的面包屑是僅僅基于用戶的導(dǎo)航路徑的(基于歷史記錄的面包屑)娄昆,實(shí)際上起著和返回鏈接一樣的功能佩微。無(wú)論如何,這個(gè)限制了用戶探索他們當(dāng)時(shí)以非線性方式進(jìn)入的那個(gè)區(qū)域的能力萌焰,因?yàn)樗麄儾荒芤砸环N線性的瀏覽策略穿越放置產(chǎn)品的目錄頁(yè)面哺眯。

為神馬你同時(shí)需要兩種類型的面包屑

任何用非線性方式(通過(guò)內(nèi)部或外部的搜索,通過(guò)一個(gè)主打的推銷)登錄到產(chǎn)品頁(yè)面的用戶會(huì)經(jīng)常使用面包屑來(lái)查看同一子目錄下的其他產(chǎn)品扒俯。本質(zhì)上奶卓,這是一個(gè)讓用戶找到相關(guān)產(chǎn)品的方法,盡管他們是從網(wǎng)站的一個(gè)完全不同的區(qū)域取得到這個(gè)產(chǎn)品的方法撼玄,甚至完全地是從另一個(gè)網(wǎng)站而來(lái)夺姑。對(duì)于搜索,推銷和其他非線性路徑來(lái)說(shuō)掌猛,層次結(jié)構(gòu)性面包屑是非常重要的盏浙,因?yàn)樗軌蜃層脩羟袚Q到一個(gè)線性的產(chǎn)品瀏覽策略,如果這個(gè)范圍是和他們相關(guān)的荔茬。

在 Best Buy網(wǎng)站废膘,有一個(gè)測(cè)試對(duì)象從‘賣的最好’的配件列表里打開(kāi)了一個(gè)Targus筆記本電腦適配器。但是慕蔚,因?yàn)椴皇前俜种俅_信(是不是要買這個(gè))丐黄,測(cè)試對(duì)象想查看一下別的筆記本電腦適配器 — 幸運(yùn)的是,這個(gè)被證實(shí)很容易孔飒,只要點(diǎn)擊產(chǎn)品目錄頁(yè)面上基于層次結(jié)構(gòu)的面包屑,就可以直接帶他去‘筆記本電腦充電器&適配器’類別頁(yè)面灌闺。

雖然基于層次結(jié)構(gòu)的面包屑能很好的為那些以非線性方式進(jìn)入產(chǎn)品頁(yè)面的用戶服務(wù),他們確不能總是適應(yīng)那些以線性方式進(jìn)入產(chǎn)品目錄頁(yè)面的用戶的需求坏瞄。如果一個(gè)用戶在產(chǎn)品目錄頁(yè)面使用過(guò)大量的過(guò)濾器桂对,然后打開(kāi)了一個(gè)產(chǎn)品,點(diǎn)擊這個(gè)產(chǎn)品頁(yè)面上基于層次結(jié)構(gòu)面包屑的目錄通常不會(huì)保留過(guò)濾結(jié)果鸠匀,而只會(huì)把用戶送回沒(méi)有過(guò)濾結(jié)果的產(chǎn)品目錄頁(yè)面接校,因?yàn)檫@只是一個(gè)去產(chǎn)品目錄的鏈接,而不是基于用戶的歷史記錄的狮崩。其實(shí)用戶真正需要的是一個(gè)基于歷史記錄的面包屑,可以把他們送回他們之前在的頁(yè)面 — 不管它是一個(gè)搜索結(jié)果列表鹿寻,一個(gè)有以前過(guò)濾結(jié)果的產(chǎn)品目錄睦柴,還是應(yīng)用的排序分類結(jié)果。

毫無(wú)疑問(wèn)毡熏,對(duì)兩種類型面包屑的需求都是合情合理的 — 所以你會(huì)執(zhí)行哪一種坦敌? 答案是兩種都要。一種簡(jiǎn)潔的,相對(duì)來(lái)說(shuō)比較簡(jiǎn)單的方法是有一套固定的基于層次結(jié)構(gòu)的面包屑狱窘,然后在結(jié)尾或開(kāi)頭附加一個(gè)基于歷史記錄的‘返回到結(jié)果’的選項(xiàng)杜顺。這讓用戶兩全其美:取得了去產(chǎn)品目錄的方法,盡管他們是用一種非線性的方式進(jìn)入到的產(chǎn)品頁(yè)面蘸炸,然而同樣給用戶提供了一個(gè)返回到之前有許多過(guò)濾結(jié)果/排序分類/搜索結(jié)果都原封不動(dòng)的頁(yè)面躬络。

Sears 和 Macy’s通過(guò)同時(shí)包含兩種類型解決了面包屑的歷史記錄vs層次結(jié)構(gòu)的問(wèn)題。一個(gè)基于歷史記錄的‘返回到結(jié)果’的選項(xiàng)搭儒,把用戶帶回到了保留所有過(guò)濾結(jié)果的產(chǎn)品列表頁(yè)面穷当,它是附加在基于層次結(jié)構(gòu)的面包屑上的。

這是一個(gè)關(guān)于表面上看起來(lái)很普通的網(wǎng)站元素實(shí)際上確能在用戶瀏覽你們網(wǎng)站產(chǎn)品目錄的能力上有很大影響的一個(gè)很好的例子淹禾。通過(guò)融合基于層次結(jié)構(gòu)和基于歷史記錄的面包屑馁菜,用戶可以改變產(chǎn)品瀏覽策略并且無(wú)縫過(guò)渡到產(chǎn)品列表頁(yè)面。

讓這種融合方式特別有趣的是铃岔,它將網(wǎng)站分類系統(tǒng)和用戶行為混合進(jìn)了一個(gè)簡(jiǎn)單的功能性元素里汪疮。有一些細(xì)節(jié)可以因此讓網(wǎng)站之間產(chǎn)生差異,比如支持快速的產(chǎn)品瀏覽和轉(zhuǎn)換到產(chǎn)品結(jié)構(gòu)策略毁习,這就是網(wǎng)站(常常會(huì))制約的一點(diǎn)智嚷。


(原文鏈接:http://baymard.com/blog/ecommerce-breadcrumbs 來(lái)自<電商可用性研究>)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市蜓洪,隨后出現(xiàn)的幾起案子纤勒,更是在濱河造成了極大的恐慌,老刑警劉巖隆檀,帶你破解...
    沈念sama閱讀 211,817評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件摇天,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡恐仑,警方通過(guò)查閱死者的電腦和手機(jī)泉坐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)裳仆,“玉大人腕让,你說(shuō)我怎么就攤上這事∑缯澹” “怎么了纯丸?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,354評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)静袖。 經(jīng)常有香客問(wèn)我觉鼻,道長(zhǎng),這世上最難降的妖魔是什么队橙? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,498評(píng)論 1 284
  • 正文 為了忘掉前任坠陈,我火速辦了婚禮萨惑,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘仇矾。我一直安慰自己庸蔼,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布贮匕。 她就那樣靜靜地躺著姐仅,像睡著了一般。 火紅的嫁衣襯著肌膚如雪粗合。 梳的紋絲不亂的頭發(fā)上萍嬉,一...
    開(kāi)封第一講書(shū)人閱讀 49,829評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音隙疚,去河邊找鬼壤追。 笑死,一個(gè)胖子當(dāng)著我的面吹牛供屉,可吹牛的內(nèi)容都是我干的行冰。 我是一名探鬼主播,決...
    沈念sama閱讀 38,979評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼伶丐,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼悼做!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起哗魂,我...
    開(kāi)封第一講書(shū)人閱讀 37,722評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤肛走,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后录别,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體朽色,經(jīng)...
    沈念sama閱讀 44,189評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評(píng)論 2 327
  • 正文 我和宋清朗相戀三年组题,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了葫男。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,654評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡崔列,死狀恐怖梢褐,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情赵讯,我是刑警寧澤盈咳,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站边翼,受9級(jí)特大地震影響鱼响,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜讯私,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評(píng)論 3 313
  • 文/蒙蒙 一热押、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧斤寇,春花似錦桶癣、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,762評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至莫秆,卻和暖如春间雀,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背镊屎。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,993評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工惹挟, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人缝驳。 一個(gè)月前我還...
    沈念sama閱讀 46,382評(píng)論 2 360
  • 正文 我出身青樓连锯,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親用狱。 傳聞我的和親對(duì)象是個(gè)殘疾皇子运怖,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容