電子商務(wù)網(wǎng)站設(shè)計(jì)分析—面包屑導(dǎo)航
網(wǎng)站中的面包屑導(dǎo)航(Breadcrumb Navigation)導(dǎo)航是一種作為輔助和補(bǔ)充的導(dǎo)航方式,它能幫助用戶明確當(dāng)下所在的網(wǎng)站內(nèi)位置,并快捷返回之前的路徑。
面包屑的由來出自一個(gè)童話,兩個(gè)孩子為了不在森林里迷路,于是沿途灑下了面包屑作為標(biāo)記,幫助自己能夠原路返回。通過這個(gè)故事我們可以看出,之所以被稱為面包屑導(dǎo)航,正是因?yàn)樗诰W(wǎng)站中也起了相同的作用,讓用戶既能看清自己在網(wǎng)站中所處的位置,也能快速的找到其他同類型產(chǎn)品。
一個(gè)小小的面包屑是最能體現(xiàn)網(wǎng)站用戶體驗(yàn)的部分之一。電商網(wǎng)站的子頁面數(shù)不勝數(shù),而面包屑是指引用戶的一盞明燈,由此可見面包屑導(dǎo)航對(duì)于用戶瀏覽的重要性。
1.關(guān)鍵詞統(tǒng)一,避免用詞重復(fù)
面包屑導(dǎo)航的存在就是為了讓用戶能最直觀的了解自己所處的位置,因此,用詞精簡(jiǎn)直接并且唯一,是面包屑必須遵守的原則。也就是說,每一個(gè)產(chǎn)品頁面都有屬于它的唯一導(dǎo)航,這樣能減少用戶在購物時(shí)產(chǎn)生的疑問。在用詞方面也要盡量避免有歧義的用詞,京東的面包屑導(dǎo)航在這方面做的就不夠好(如下圖)。
一級(jí)分類和二級(jí)分類分別為“家用電器”和“生活電器”,這兩個(gè)含義相近的詞匯增加了用戶的思考時(shí)間。因此,近義詞和平級(jí)詞匯應(yīng)該在面包屑中盡量避免。
淘寶網(wǎng)中的面包屑就相對(duì)直觀。從“所有分類”到“女裝”再到“羽絨服”,每一個(gè)大分類都沒有重復(fù)性,讓用戶能在第一時(shí)間做出反應(yīng)。
2.顯示層級(jí)頁面的產(chǎn)品數(shù)量
用戶使用面包屑的目的主要有兩種,一種是想要返回上級(jí),第二種就是查看頁面中展示產(chǎn)品的類型。在用戶的實(shí)際操作中,這兩種需求的重要程度不分上下,但是大多數(shù)電商網(wǎng)站都忽略了后者。其實(shí),這方面的改善并不困難,只要在層級(jí)頁面的分類中展現(xiàn)出商品的數(shù)量,用戶就能很清晰的看到所需商品的種類數(shù)量,便于用戶挑選。
優(yōu)購時(shí)尚商城的面包屑導(dǎo)航就注意到了這方面的小細(xì)節(jié)。系統(tǒng)會(huì)根據(jù)用戶對(duì)條件的篩選自動(dòng)抓取商品種類的數(shù)量,讓用戶根據(jù)商品的實(shí)際情況進(jìn)行選擇。
3.分類少也能使用面包屑
傳統(tǒng)意義上都建議當(dāng)網(wǎng)站的層級(jí)分類很多的時(shí)候可以使用面包屑,如果網(wǎng)站分類較少就可以省去這個(gè)部分。但AnyForWeb認(rèn)為,面包屑還能有助于用戶明確產(chǎn)品定位。當(dāng)用戶對(duì)產(chǎn)品沒有目標(biāo)性時(shí),定位式面包屑就能讓用戶擁有更加順暢的購物體驗(yàn)。
聚美優(yōu)品的商品分類其實(shí)并不算少,但他們?nèi)匀贿x擇使用定位式的面包屑設(shè)計(jì)。設(shè)計(jì)師將產(chǎn)品大分類和用戶容易更改的部分做了一些小間隔,便于用戶對(duì)條件進(jìn)行修改。
4.使用具有指向性的符號(hào)
面包屑的從用戶體驗(yàn)上來說是一個(gè)“重要的小角色”,既要讓用戶看得清楚,又不能太醒目,因此,在色彩上主要以黑、灰為主,形狀上可以采用單獨(dú)連接符號(hào),多考慮關(guān)鍵字之間的包含關(guān)系,并且具有指示性。
亞馬遜網(wǎng)站的面包屑在符號(hào)上用戶體驗(yàn)很不令人滿意,“:”既不能明確的顯示出字詞之間的概括性,指示性也遠(yuǎn)不如箭頭那么直接。
而魅力惠的面包屑符號(hào)就滿足了所有的標(biāo)準(zhǔn),符號(hào)顏色和字詞相同,大小也很適中,讓用戶在有需要的時(shí)候能馬上找到它,但又毫不耀眼。
5.降低干擾
面包屑導(dǎo)航的設(shè)計(jì)應(yīng)該始終遵循這樣一個(gè)經(jīng)驗(yàn)法則:它不應(yīng)該抓住用戶的注意力。一個(gè)稱職的面包屑一定不能起到主宰頁面的作用,低調(diào)的扮演著協(xié)助主導(dǎo)航的角色,讓用戶在購物時(shí)完全不受到它的干擾。
銀泰的面包屑設(shè)計(jì)不像大多數(shù)網(wǎng)站選擇全透明背景,而是使用了與周圍背景色很相近的灰色。這種做法很容易讓面包屑就此融入全局中,不產(chǎn)生用戶使用時(shí)的任何困擾。
6.避免重復(fù)主導(dǎo)航的形式
現(xiàn)在的電商網(wǎng)站都很熱衷于在小細(xì)節(jié)上做文章,他們的出發(fā)點(diǎn)是希望在細(xì)節(jié)中體現(xiàn)出優(yōu)良的用戶體驗(yàn),就比如在原本簡(jiǎn)單的面包屑中添加下拉菜單。網(wǎng)站方認(rèn)為這樣做能讓用戶在更短的時(shí)間內(nèi)找到自己需要的商品,但其實(shí)意義并不大。
以一號(hào)店為例,電子商務(wù)網(wǎng)站的主導(dǎo)航基本都有下拉擴(kuò)展分類的功能,所以,面包屑導(dǎo)航如果也采用相同的形式就會(huì)變得很重復(fù),而在實(shí)際功能上其實(shí)差異也不大。
京東的網(wǎng)站就避免了這一點(diǎn),主導(dǎo)航是常規(guī)的下拉菜單形式,面包屑的設(shè)計(jì)也比較簡(jiǎn)單明了,沒有過多的功能。
7.盡量精簡(jiǎn)層級(jí)
精簡(jiǎn)面包屑導(dǎo)航層級(jí)原因不僅僅為了提升用戶體驗(yàn),也為了利于搜索引擎的抓取。盡量把面包屑控制在4個(gè)層級(jí)以內(nèi),對(duì)用戶視覺和SEO都有很大的好處。
唯品會(huì)的面包屑就顯得過于拖沓繁瑣了。雖然從分類上來說比較精細(xì),分門別類十分清晰,但是“傻瓜式”的面包屑更適合實(shí)際使用。
蘇寧易購的面包屑與唯品會(huì)的風(fēng)格就完全不一樣,蘇寧易購的面包屑默認(rèn)控制在4層以內(nèi),其他的多元化選項(xiàng)在另外一個(gè)區(qū)域中存在,降低了用戶在使用時(shí)的受干擾程度。
8.在面包屑中使用關(guān)鍵字
面包屑對(duì)于網(wǎng)站的SEO有著很大的影響作用,因此把握關(guān)鍵字的設(shè)置也許能為網(wǎng)站帶來更多的流量。
正如天貓的案例所示,在面包屑導(dǎo)航的第四層級(jí)中,用戶可以根據(jù)自己的時(shí)機(jī)需求篩選關(guān)鍵字,讓呈現(xiàn)出的產(chǎn)品更加準(zhǔn)確。
總結(jié):
AnyForWeb認(rèn)為,面包屑是每個(gè)電子商務(wù)網(wǎng)站的一個(gè)必備模塊,用戶體驗(yàn)是否過關(guān)在這里可以有很好的體現(xiàn)。所有的網(wǎng)站元素可能都講究創(chuàng)新改變,但是面包屑卻始終如一,用最簡(jiǎn)單的方式來滿足用戶的瀏覽需求。
本文為AnyForWeb UDC投稿發(fā)布,轉(zhuǎn)載請(qǐng)注明來源于人人都是產(chǎn)品經(jīng)理并附帶本文鏈接
很不錯(cuò)