手機網(wǎng)站中面包屑導(dǎo)航是否有存在的必要?

1 評論 6877 瀏覽 12 收藏 14 分鐘

編輯導(dǎo)語:面包屑導(dǎo)航,這個概念來自童話故事“漢賽爾和格萊特”,當漢賽爾和格萊特穿過森林時,不小心迷路了,但是他們發(fā)現(xiàn)在沿途走過的地方都撒下了面包屑,讓這些面包屑來幫助他們找到回家的路。所以,面包屑導(dǎo)航的作用是告訴訪問者他們目前在網(wǎng)站中的位置以及如何返回。那么,手機網(wǎng)站中面包屑導(dǎo)航是否有存在的必要?

最近正好關(guān)注了一下面包屑導(dǎo)航的問題,試著回答一下,先說結(jié)論:絕大多數(shù)手機網(wǎng)站中面包屑導(dǎo)航?jīng)]有存在的必要。

一、需求分析

1. 面包屑導(dǎo)航是什么,有什么作用?

面包屑是一種“歷史記錄”的應(yīng)用方式,作用是幫助追溯來路、告訴訪問者他們目前在網(wǎng)站中的位置,以及如何返回。面包屑導(dǎo)航是一種線性的導(dǎo)航方式,顯示方式是“主分類>一級分類>二級分類>三級分類>……>最終內(nèi)容頁面”這樣。

面包屑導(dǎo)航是判斷頁面在整個網(wǎng)站結(jié)構(gòu)中的位置的最好方法,它能誘惑首次訪問者在進入一個頁面后去瀏覽整個網(wǎng)站,降低網(wǎng)站的總體跳出率;增加網(wǎng)站的內(nèi)部鏈接,提高用戶體驗。

2. 用戶在什么情況下需要用面包屑導(dǎo)航?

網(wǎng)站層級較多(3層及以上),內(nèi)容龐雜。主導(dǎo)航展示能力不足或者使用不便,無法滿足指引用戶的需求。

用戶不熟悉網(wǎng)站,他們需要直觀清晰地了解目前所處的位置,以及當前頁面在整個網(wǎng)站中的位置、怎么回來,比如工信部官網(wǎng)有大量的新用戶訪問。

用戶有讀完某一頁面的下級頁面的需求,比如學生依次閱讀重要的學校官網(wǎng)通知:

用戶回到上一層級比較麻煩,比如容易誤操作、回退步驟多、缺乏上級頁面的快捷入口、或者用戶自身操作不便。

3. 面包屑導(dǎo)航適合哪些網(wǎng)站使用?

面包屑導(dǎo)航適用于層級較深的網(wǎng)站,如果只有一級分類的話,通過主導(dǎo)航就已經(jīng)能夠起到快速定位的作用,扁平型架構(gòu)的網(wǎng)站就沒有使用面包屑導(dǎo)航的必要。

由于面包屑導(dǎo)航路徑是線性結(jié)構(gòu)的,即下一級分類必定只屬于上一級分類,因此網(wǎng)站內(nèi)容必須劃分得非常清晰,且不存在交叉。否則,面包屑導(dǎo)航的路徑是不唯一的,同一個分類可能出現(xiàn)在不同的路徑中,讓用戶感到困惑。

目前常見的該結(jié)構(gòu)網(wǎng)站包括門戶類、電子商務(wù)類等層級較深,且內(nèi)容的組織分類邏輯性強,獨立不交叉的網(wǎng)站。

如圖,淘寶的二級頁面沒有面包屑,新浪在進入財經(jīng)頻道后開始面包屑導(dǎo)航。

如圖,新浪房產(chǎn)和新浪體育在UI上有較大的區(qū)別,用戶很少會感到困惑。從用戶需求的角度來講,大多數(shù)WAP站都沒有必要添加面包屑導(dǎo)航:

在PC端,使用面包屑導(dǎo)航的主要是新聞網(wǎng)站、電商網(wǎng)站、官方網(wǎng)站。但是新聞網(wǎng)站和電商網(wǎng)站的趨勢是變得更加“頻道化”,為了將網(wǎng)站的縱深控制在三四個頁面,分別做不同主題的垂直網(wǎng)站。

例如淘寶會將用戶分流到全球購、天貓超市、淘寶美妝等二級網(wǎng)站,而這些二級頁面和淘寶主站并不是非常緊密的連接;新浪也將用戶分流到新浪財經(jīng)、新浪新聞等網(wǎng)站,而不強調(diào)它們與門戶的從屬關(guān)系。

事實上,它的每個子網(wǎng)站的界面都不同,采用不同的信息組織方式,更像是彼此獨立的網(wǎng)站。

在這種情況下,單一WAP站的層級自然變少了,不同的UI也提醒用戶分別處在門戶的不同頻道,添加面包屑的需求也就減少了。

二、用戶體驗分析

1. 用戶在使用手機網(wǎng)站時有哪些習慣?

1)時間更為碎片化

大多數(shù)時候,用戶沒精力系統(tǒng)閱覽整個網(wǎng)站的信息架構(gòu),WAP站隨之變得更為扁平化、垂直化。

2)瀏覽速度快,停留時間短

用戶使用手機上WAP站時,他們的下滑操作是很機械的,要不斷尋求新的視線著力點,而且只會把視線落在有實際內(nèi)容的地方,導(dǎo)航作為輔助的功能一般退居其次。

3)注意力不集中

對WAP站而言,頁面內(nèi)容是否吸引、是否有“爆點”更加重要。

用戶在使用手機時往往更容易喪失耐心,并且感受到冗余信息的困擾。所以應(yīng)該留足頁面內(nèi)容的空間,并把有用的東西排列好,除掉其他一切冗雜信息。

4)不停地被打斷

用戶隨時被電話微信吸引走注意力,所以會傾向于使用簡單粗暴的方式回退。跳出率有一個天花板,所以就更不應(yīng)該讓用戶停頓和學習怎么使用,不要讓他們困惑。

2. 其他的回溯方式是否具備足夠的替代性?

和手機返回鍵相比:比起使用面包屑導(dǎo)航,手機返回更方便、更深入人心。

Android系統(tǒng)一般都給實體按鍵一個返回的功能,對用戶而言,只要在Android手機上,這個按鍵無論何時都是退回上層的意思;而iOS系統(tǒng)下,頁面左上角是預(yù)留的返回位置,沿用這種設(shè)計可以順利地契合用戶習慣。

和瀏覽器返回按鈕相比:瀏覽器返回更方便、更快捷,學習成本更低。

手機瀏覽器(包括app內(nèi)嵌瀏覽器)都會有地址欄、收藏夾、返回鍵這些,在瀏覽WAP站頁面的過程中,底欄的返回鍵和頂欄的地址一直存在,用戶若要返回會首先使用瀏覽器的返回。

如圖,百度和UC瀏覽器都在底欄放置了前進和后退按鈕。

而微信的內(nèi)嵌瀏覽器左上角有返回、關(guān)閉兩個按鈕;知乎的內(nèi)嵌瀏覽器底欄有后退、前進兩個按鈕,同時頁面左上角可以退出內(nèi)嵌瀏覽器。

從用戶體驗的角度來講,WAP站自身幾乎沒有必要添加面包屑導(dǎo)航:

絕大多數(shù)WAP站都將配合手機瀏覽器或APP內(nèi)嵌瀏覽器使用,而幾乎所有的瀏覽器都會有很方便的回溯功能。隨著大數(shù)據(jù)的發(fā)展,網(wǎng)頁的推薦已經(jīng)可以做到一定程度上貼近用戶,用戶更傾向于通過推薦內(nèi)容擴展和接續(xù)閱讀行為而非回溯。

4G和Wi-Fi網(wǎng)絡(luò)的發(fā)展已經(jīng)大大提升移動網(wǎng)絡(luò)的速度,用戶的的閱讀行為也隨之變得更加任性而并非中規(guī)中矩地沿一條路線查看。

社交網(wǎng)絡(luò)和分享功能的興盛讓我們越來越難以預(yù)測用戶是從何處進入某個WAP頁面查看的,那么接續(xù)閱讀最好的方法是基于人際互動的推薦(看過這篇文章的人也看過的、你的朋友也喜歡的、分享次數(shù)也很多的內(nèi)容)而非回溯上級頁面。

無論如何,WAP站的主導(dǎo)航依然存在,iOS等系統(tǒng)已經(jīng)可以做到輕觸回到頂部主導(dǎo)航處,能比較快捷地滿足用戶導(dǎo)航的需求。

三、網(wǎng)頁設(shè)計角度分析

1. 面包屑導(dǎo)航的設(shè)計原則與WAP站的設(shè)計原則有沖突

WAP站的頁面寬度較低,在WAP站的設(shè)計規(guī)范中,對每行字數(shù)上限做了限定?,F(xiàn)今大多數(shù)的網(wǎng)站一行字數(shù)上限為14個中文字符。

面包屑導(dǎo)航只能逐層降級,不可跳級,文字必須橫排排列,且不可以省略字數(shù)和符號。一旦層級較多就很容易超限,但如果層級很少,又沒必要使用面包屑。

展示在手機屏幕的WAP站首屏頁面非常珍貴,寸土寸金,應(yīng)該把更多空間交給引爆用戶的內(nèi)容而不是輔助型的導(dǎo)航。

面包屑導(dǎo)航條只能出現(xiàn)在頁面頭部和尾部,但手機瀏覽器的上下部分已經(jīng)預(yù)留了按鍵:頭部有回退按鈕,尾部有回退按鈕或手機按鍵,所以面包屑導(dǎo)航條的必要性大大降低了。

面包屑導(dǎo)航需要持續(xù)使用,但只對三級頁面有較大的意義,相對成本高。

面包屑導(dǎo)航不應(yīng)該過于顯眼,一般都比較小,但是手機字體本來就比較小,繼續(xù)變小的話,點按會變得十分困難,太大又會占用過多的地方。

2. 不適合使用面包屑的WAP站

  • 新聞類、電商類網(wǎng)站:目前多采用分頻道的方式區(qū)分二級站點和主站,減少層級,努力做到結(jié)構(gòu)上的扁平化;
  • 社交類網(wǎng)站:結(jié)構(gòu)一般都比較扁平,層次也比較清晰,功能點較少不需要指引;
  • 知識類、生活類網(wǎng)站:一般使用站點地圖來體現(xiàn)整個站點的結(jié)構(gòu),如同PC端一樣,他們更注重展示與內(nèi)容,較少采用面包屑。

3. 政府網(wǎng)站、官方網(wǎng)站:適合使用面包屑導(dǎo)航

查看政府網(wǎng)站和官方網(wǎng)站的人一般是新用戶,不夠了解該網(wǎng)站。這些網(wǎng)站由于是 to B 的項目,其信息架構(gòu)會受到乙方的較大干涉,會出現(xiàn)各不相同的狀態(tài),就更容易讓用戶感到困惑。

官網(wǎng)的內(nèi)容量比較少而且穩(wěn)定,并不會像媒體類、電商類網(wǎng)站有海量信息,也不像UGC網(wǎng)站有許多用戶自擬的標簽。WAP設(shè)計者可以對之保持較高的控制力,將層級保持在合理的范圍內(nèi)。

面包屑導(dǎo)航條利于搜索引擎優(yōu)化,百度蜘蛛直接沿著導(dǎo)航鏈走就可以了,能更好地對網(wǎng)站內(nèi)容進行抓取。而Google已經(jīng)將面包屑導(dǎo)航整合到搜索結(jié)果里面,因此添加面包屑有利于官網(wǎng)的推廣,對企業(yè)是有好處的。

綜上所述,除官方網(wǎng)站、政府網(wǎng)站之外,其他大多數(shù)WAP站沒有必要添加面包屑導(dǎo)航。

 

作者:淺野早苗

來源:https://www.zhihu.com/question/19760227/answer/58054143

本文由 @淺野早苗 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 弱弱地請教下,WAP是什么的縮寫?

    來自上海 回復(fù)