深入淺出之——面包屑導(dǎo)航
編輯導(dǎo)語:面包屑的由來出自童話:兩個孩子為了不在森林里迷路,于是沿途灑下了面包屑作為標(biāo)記,幫助自己能夠原路返回。之所以被稱為面包屑導(dǎo)航,正是因為它在網(wǎng)站中也起了相同的作用,讓用戶既能看清自己在網(wǎng)站中所處的位置,也能快速的找到其他同類型產(chǎn)品。
面包屑導(dǎo)航(下文簡稱為“面包屑”)在B端產(chǎn)品設(shè)計中是非常常見的元素,在各類B端產(chǎn)品設(shè)計中幾乎都有應(yīng)用,這是一種“歷史記錄”的應(yīng)用方式。
在產(chǎn)品設(shè)計多樣化的今天,什么樣的B端產(chǎn)品適合用面包屑導(dǎo)航?本文將探討面包屑在不同場景下如何應(yīng)用。
一、什么是面包屑導(dǎo)航?
面包屑就是我們經(jīng)??吹降摹爸鞣诸?gt;一級分類>二級分類>三級分類>……>最終內(nèi)容頁面”這樣的方式,一種表達(dá)內(nèi)容歸屬的界面元素,如下圖所示:
為了瀏覽體驗,一般情況只有3級,首頁>欄目頁>內(nèi)容頁,3層目錄結(jié)構(gòu)可以讓用戶隨時隨地的找到自己所在的位置又能保證欄目分類后的各個欄目的權(quán)重不至于太分散。
1. 面包屑來源
童話故事“漢賽爾和格萊特”,漢賽爾和格萊特穿過森林時,不小心迷路了,但是他們發(fā)現(xiàn)在沿途走過的地方都撒下了面包屑,讓這些面包屑來幫助他們找到回家的路。對于使用網(wǎng)站的用戶來說,什么是家?而他們?yōu)槭裁葱枰姘嫉膸椭丶?
家=首頁?不是,如果首頁是家,那可以做個返回首頁的功能,為什么需要面包屑呢?
家=返回上一層級?不是,如果返回上一級是家,直接用瀏覽器的返回鍵就可以,面包屑的層級關(guān)系有什么作用呢?
那到底什么是家?可以觀察下筆者逛網(wǎng)站的記錄:
因為最近想買一個鞋柜,所以打開了“京東”網(wǎng)站,在搜索框中輸入鞋柜后,便開始進(jìn)行瀏覽,看到喜歡的鞋柜便進(jìn)入詳情頁面進(jìn)行查看。
如果發(fā)現(xiàn)不是自己想要的鞋柜,就會再次返回到鞋柜頁面,繼續(xù)瀏覽。無論是從搜索進(jìn)入詳情頁,還是從首頁-家具-鞋柜進(jìn)入詳情頁。面包屑的記錄路徑均顯示為:家具>客廳家具>鞋柜>某品牌>鞋柜名稱。
從上述行為中,得到:
- 用戶想要回到的位置,才能被稱之為家。這個位置不是用戶第一次訪問,而是再次訪問,所以被稱之為“回家”;
- 用戶之所以回家,是在當(dāng)前位置沒有找到自己需要的信息,需要通過快速回家的方式,重新出發(fā);
- 從面包屑的路徑記錄來看,用戶在網(wǎng)站上到達(dá)深層信息頁面的路徑是唯一的,可以幫助用戶定位自己的位置,并且返回各個層級。
因此,面包屑針對的場景是用戶想要返回使用路徑上的任意一個節(jié)點。
百度百科對于路徑的解釋是:路徑(path)在不同的領(lǐng)域有不同的含義。在網(wǎng)絡(luò)中,路徑指的是從起點到終點的全程路由;在日常生活中指的是道路。
依據(jù)這個解釋,用戶在網(wǎng)站上的使用路徑,就是用戶在網(wǎng)站上走過的道路或者留下的痕跡。
當(dāng)用戶在當(dāng)前的道路上沒有找到自己需要的信息時,便會返回返回返回使用路徑上的任意一個節(jié)點繼續(xù)尋找。用戶在系統(tǒng)中迷失方向,會對系統(tǒng)造成很多負(fù)面影響。
如:用戶體驗下降,任務(wù)不能完成,用戶流失等,在現(xiàn)在各種網(wǎng)站多樣的情況下,如果用戶得到一次不好的體驗,他們將不會回來。
如果在競爭對手那兒的感覺更好,那么他們下次將訪問競爭對手的網(wǎng)站。所以,為了留住用戶,為了能讓用戶多次使用系統(tǒng),甚至是讓用戶在系統(tǒng)中停留的時間更久一些,我們都需要解決這個問題。
提供一個優(yōu)質(zhì)的用戶體驗,是一個重要的、可持續(xù)性的競爭優(yōu)勢,用戶體驗形成了用戶對網(wǎng)站的整體印象,界定了我們和競爭對手的差異,并且確定了用戶是否會再次光顧。
2. 包屑的分類
從B端產(chǎn)品的分類上,面包屑又可以分為以下幾種路徑:
1)屬性路徑
百度百科上對于屬性的解釋是,一個事物的性質(zhì)與關(guān)系,對一個對象抽象方面的刻畫。當(dāng)事物的屬性存在層級關(guān)系時,便可以形成路徑。層次屬性是指在網(wǎng)站中,屬性表現(xiàn)出來的多層次的特征。
任何屬性路徑都不是獨立的,它和周圍環(huán)境的其他屬性形成一種特定的層級關(guān)系,由淺層級向深層級遞進(jìn),從而形成了一層一層的面包屑路徑,比如下圖路徑,【騰訊QQ專區(qū)>QQ專秀>QQ秀服飾】 QQ秀服飾屬于QQ秀,而QQ秀又屬于騰訊QQ專區(qū)。
對于一個產(chǎn)品來講,往往不止一個屬性,有大屬性,有小屬性。像這種從屬關(guān)系的路徑,就可以用面包屑來展示,直觀明了。
2)位置路徑
百度百科上對于地理位置的解釋是:一般是用來描述地理事物時間和空間關(guān)系。所以當(dāng)用戶在網(wǎng)站點擊的位置出現(xiàn)了時間與空間上的先后關(guān)系,便構(gòu)成了位置路徑。
如下圖所示:【首頁>行業(yè)動態(tài)>綜合百貨行業(yè)動態(tài)】,用戶到達(dá)這個頁面需要先點擊首頁,再點擊行業(yè)動態(tài),接著在點擊綜合百貨才能到達(dá)。
能夠使訪客了解自己的位置,以及可以更快的找到自己想要到達(dá)的頁面,能夠很好的提高用戶的友好體驗。
3)業(yè)務(wù)路徑
業(yè)務(wù),即需要處理的事務(wù)。當(dāng)用戶需要處理的事務(wù)構(gòu)成了一種邏輯上的先后順序,就形成了業(yè)務(wù)路徑。
如下圖所示:【我是賣家>店鋪管理>域名設(shè)置】,在這個路徑中,用戶可以很明顯的知道自己所要辦理的業(yè)務(wù),屬于哪個模塊下面,便于用戶進(jìn)行業(yè)務(wù)上的操作配置。
3. 面包屑的作用
面包屑最主要的作用就是提高用戶體驗,具體體現(xiàn)在以下幾個方面:
- 告訴用戶他們目前在網(wǎng)站中的位置,以及快速返回各個層級。什么情況下用戶需要知道他們在網(wǎng)站的位置?當(dāng)進(jìn)入到某一個很深層級的頁面時,用戶需要知道他們通過什么路徑到達(dá)的,當(dāng)用戶在當(dāng)前的道路上沒有找到自己需要的信息時,便會返回使用路徑上的任意一個節(jié)點繼續(xù)尋找。當(dāng)網(wǎng)站的層級只有2級的時候,用戶點擊瀏覽器的返回按鈕就知道自己當(dāng)下所處的位置是如何進(jìn)來的;
- 在觀察自己使用網(wǎng)站的過程中,我發(fā)現(xiàn)面包屑可以幫助我理解當(dāng)前頁面與其他頁面之間的關(guān)系;
- 從另外一個角度講,面包屑所承載的歷史記錄屬性,對用戶而言可以自動保留相關(guān)查詢信息,人們很少想要完全從頭開始查詢,除非他們想明確的表示這個行為相反。在每一次變化的時候,用戶希望盡量多的保留查詢信息,并希望系統(tǒng)幫助他建立一個更“符合情理”的查詢。
二、總結(jié)
不是所有的網(wǎng)站都適合用面包屑,當(dāng)網(wǎng)站層級較深時,適合用面包屑。如果網(wǎng)站層級只有2級,沒有必要用面包屑,直接用瀏覽器的返回按鈕就可以返回到一級頁面。
其次,網(wǎng)站的每個模塊都是相互獨立不交叉的,如果網(wǎng)站內(nèi)容存在交叉關(guān)系,那么到達(dá)詳情頁面的路徑就不是唯一的,用戶的體驗感會不好,給用戶造成一種混亂的感覺。
由此可見,面包屑導(dǎo)航適合層級較深,各層級獨立而不交叉的系統(tǒng)。
在這類層級結(jié)構(gòu)較深的系統(tǒng)中,用戶往往會因為系統(tǒng)的信息繁雜而迷路,層級與層級之間沒有關(guān)系,沒有規(guī)律,無法找到自己需要的信息,要么從頭開始再次尋找,要么從某個節(jié)點再次尋找。
而面包屑導(dǎo)航記錄了用戶的使用路徑,各層級之間存在著從屬關(guān)系,既能顯示用戶當(dāng)下的所處的位置,又能夠幫助用戶快速的返回各個層級,重新出發(fā)。
比如:購物類網(wǎng)站、淘寶、京東、唯品會、一號店等,還有一些復(fù)雜的業(yè)務(wù)系統(tǒng),淘寶后臺管理系統(tǒng)等都會采用面包屑導(dǎo)航輔助用戶操作。
本文由 @? 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于CC0協(xié)議。
寫的很好
寫的很不錯
666