如何設(shè)計更好的面包屑導(dǎo)航

沒有人會對面包屑導(dǎo)航感到特別興奮。這些微小的路徑碎片說明了用戶當(dāng)前在網(wǎng)站錯綜復(fù)雜的層次結(jié)構(gòu)中的位置。它們的設(shè)計看起來很明顯，他們在頁面上的位置也是如此，看起來面包屑發(fā)光不需要太多的創(chuàng)新。
事實證明，有很多細(xì)微的小細(xì)節(jié)可以使面包屑變得混亂或無限地更有用。在本文中，我們將仔細(xì)研究其中的一些。我們將探索我們何時真正需要面包屑，用戶如何使用它們，以及如何更好地設(shè)計它們以加快用戶在我們網(wǎng)站上的導(dǎo)航。
讓我們首先探索人們?nèi)绾螢g覽網(wǎng)站，以及面包屑究竟如何幫助我們的旅程。如何瀏覽網(wǎng)站每個可用性測試都表明，沒有單一的、通用的和完善的網(wǎng)站瀏覽方式。根據(jù)手頭的任務(wù)和訪問頻率，用戶應(yīng)用非常不同的導(dǎo)航模式。在某些網(wǎng)站上，幾乎不使用搜索但主導(dǎo)航得到很多關(guān)注的情況并不少見。在其他方面，類別幾乎沒有任何點擊，但搜索查詢卻在屋頂。有時面包屑恰好是整個網(wǎng)站上最受歡迎的導(dǎo)航選擇。

澳大利亞郵政服務(wù)在一個頁面上結(jié)合了大量的導(dǎo)航模式。它們都有不同的用途，并且運行良好。
以澳大利亞郵政為例，各種導(dǎo)航需要協(xié)同工作。全局導(dǎo)航欄、主導(dǎo)航、面包屑、側(cè)邊欄和選項卡。用戶可以在各個級別之間跳轉(zhuǎn)，他們可以使用面包屑輕松地向后移動，使用頂部的水平導(dǎo)航向前移動，使用側(cè)邊欄導(dǎo)航橫向移動以及使用選項卡在頁面的各個部分中切換上下文。
我們很少逐個瀏覽每個部分，甚至很少注意到網(wǎng)站上所有可用的導(dǎo)航。對于經(jīng)常訪問的網(wǎng)站，例如新聞網(wǎng)站，我們將使用非常有限的一組頁面和功能。事實上，我們可能無法記住我們單擊了哪些功能和部分，但我們可能會記住它們在界面中的位置。

一旦你登陸頁面，你將如何理解你在哪里？在這里，面包屑有很大幫助。示例：冰島郵政服務(wù)
當(dāng)我們登陸一個我們以前從未訪問過的網(wǎng)站時，例如國家歌劇網(wǎng)站，我們首先評估選項和功能的廣度。這通常是通過上下滾動頁面來實現(xiàn)的——先是慢，然后是更快——并熟悉導(dǎo)航菜單。我們點擊側(cè)邊欄，在選項卡之間切換并打開大型下拉菜單。我們只是四處游蕩，相信導(dǎo)航路標(biāo)和我們極其不可靠的預(yù)感。我們掃描、識別模式并相信我們的直覺。
有時，如果我們找不到我們所追求的東西，我們的旅程就會變成對各種頁面和類別的瘋狂探索——通常是緊張的、混亂的、耗時的和令人沮喪的。如果有任何事情沒有按預(yù)期工作，我們就不再使用它，因為我們不再信任它。一旦我們真的沒有任何選擇，我們就會完全放棄。

有時，重新設(shè)計的網(wǎng)站會導(dǎo)致流量大幅下降。這不是因為出了什么問題。相反：我們在用戶所在的地方遇見用戶，直接顯示答案，因此無需訪問網(wǎng)站。
但是，當(dāng)幾乎不使用導(dǎo)航和搜索時，不一定是因為網(wǎng)站設(shè)計或構(gòu)建不佳。相反：內(nèi)容可能組織得非常好，以至于人們實際上很快就找到了他們需要的東西——甚至可能在首先訪問網(wǎng)站之前，僅僅通過瀏覽谷歌的搜索結(jié)果。一旦他們這樣做了，就沒有太多理由留在網(wǎng)站上。
雖然我們經(jīng)常關(guān)注退出率和跳出率以及在頁面上花費的時間，但這些指標(biāo)很少能揭示用戶在網(wǎng)站上所做的事情的完整故事。有人在給定頁面上花費 4:30 分鐘這一事實不一定是一個好的指標(biāo)。有人在 30 秒內(nèi)離開這一事實并不一定是壞事。
為了跟蹤用戶對導(dǎo)航（和搜索）的理解和使用情況，我們需要跟蹤用戶在手頭任務(wù)上的成功程度。您可以將其視為在較長時間內(nèi)建立和研究的設(shè)計 KPI 。值得收集有關(guān)以用戶為中心的指標(biāo)的見解，例如：任務(wù)完成率， 任務(wù)完成時間， 第一次分享的時間， 客戶支持查詢， 負(fù)面評論的比率， 提交數(shù)據(jù)的準(zhǔn)確性因此，我們的任務(wù)是為用戶鋪平道路，讓他們清楚、明確、明確地幫助他們完成任務(wù)。這通常意味著支持三個導(dǎo)航方向：前向?qū)Ш健⒑笙驅(qū)Ш胶蛡?cè)向?qū)Ш健?p>

對于導(dǎo)航樹較淺的網(wǎng)站，面包屑可以集成到標(biāo)題和標(biāo)題中。手工藝委員會就是這樣做的。轉(zhuǎn)發(fā)導(dǎo)航我們訪問網(wǎng)站是有原因的，在某些網(wǎng)站上，它可以像檢查銀行賬戶或探索大型數(shù)據(jù)集一樣具體。因此，一旦我們最終進入主頁或儀表板，我們就會在網(wǎng)站的層次結(jié)構(gòu)中向前移動，從非常廣泛的頁面到非常具體的頁面，以嘗試完成我們已經(jīng)著手完成的任務(wù)。

結(jié)合了多種導(dǎo)航方向——通過主導(dǎo)航、側(cè)邊欄導(dǎo)航、頁內(nèi)導(dǎo)航和面包屑導(dǎo)航，可以輕松向前、向后和橫向?qū)Ш?。一次全部?br />在導(dǎo)航方面，我們從主頁移動到一個類別，再到子類別，再到進一步的頁面內(nèi)導(dǎo)航，以找到我們最終需要點擊的特定功能。如果幸運的話，我們可以跳過整個旅程，并更早地從大型下拉菜單或號召性用語中獲得該功能。作為設(shè)計師，我們越能縮短意圖和行動之間的距離，用戶體驗就會越好。
向后導(dǎo)航不過，我們并不總是有一個特定的任務(wù)。通常情況下，我們的目標(biāo)是多方面的，我們會改變主意，忽略事物，做出自發(fā)的決定，并因閃爍的通知而分心。因此，我們的數(shù)字旅程很少是嚴(yán)格線性的，尤其是當(dāng)網(wǎng)站上的導(dǎo)航有些復(fù)雜時。
在這種情況下，我們最終會倒退。事實上，我們后退是為了重新定位自己，選擇一條探索的路線，然后朝著另一個方向前進。然后我們再次跳同樣的舞蹈，一次又一次，直到我們實現(xiàn)了我們的意圖。在許多方面，這個過程類似于寫一篇這樣的文章。有一個總體思路可以推動文章向前發(fā)展，但也有絆腳石和重新考慮讓你退縮。
在網(wǎng)絡(luò)上，尤其是當(dāng)我們最終進入一個似乎無處可尋、內(nèi)容過時、沒有提供急需功能的頁面，或者當(dāng)我們的搜索查詢過于模糊而無法提供準(zhǔn)確和相關(guān)的結(jié)果時，就會發(fā)生這種情況。

德意志銀行的導(dǎo)航不會突出顯示用戶當(dāng)前所在的位置。
我們經(jīng)常使用的一個簡單測試是給用戶一個 URL，并要求他們解釋他們目前在網(wǎng)站的哪個部分，并找到相似或相關(guān)的部分。在上面的德意志銀行示例中，這會有點困難，因為導(dǎo)航中沒有當(dāng)前頁面的亮點。

默認(rèn)情況下，當(dāng)前導(dǎo)航級別不會在導(dǎo)航欄中突出顯示。
事實證明，我們處于導(dǎo)航的第三級。通常“spareandanlegen”應(yīng)該處于活動狀態(tài)并在頁面上突出顯示，但事實并非如此。只有當(dāng)我們打開一個懸停菜單時，我們才能發(fā)現(xiàn)當(dāng)前頁面實際上是什么。在德意志銀行，向后導(dǎo)航有點麻煩。橫向?qū)Ш?/strong>好像來回走動還不夠，有時我們還會橫著走——在各個級別、部分、頁面和子類別之間猛烈地上下跳躍。這通常發(fā)生在我們想要探索類似的主題或相關(guān)頁面，或者探索以某種方式與當(dāng)前頁面相關(guān)的更多信息時。
當(dāng)我們?yōu)g覽可用選項但尚未下定決心時，也會發(fā)生這種情況?；旧?，我們探索、瀏覽和點擊，試圖創(chuàng)建一個我們面前的綜合圖片。

奧地利郵政服務(wù)支持橫向?qū)Ш?，右?cè)有附加信息側(cè)邊欄。
正如我們所做的那樣，我們需要指引我們朝著正確方向前進的路標(biāo)。事實上，考慮到發(fā)生了多少運動，對我們的導(dǎo)航方式進行一致且可預(yù)測的跟蹤肯定會有所幫助。事實上，這正是面包屑提供的。
乍一看，面包屑似乎只對向后導(dǎo)航有幫助，但我們經(jīng)常使用它們向后移動，找到更好的路線并再次向前移動。通過這種方式，它們服務(wù)于所有方向的導(dǎo)航，并且做得很好。
上面列出的所有選項確實提供了方向感，但它們也需要相當(dāng)多的水平或垂直空間才能做到這一點。在整個用戶旅程中，它們需要是可見的，以引導(dǎo)用戶從一個頁面移動到下一個頁面。如果它們在其中一個頁面上突然消失，用戶很可能會迷路。在搜索結(jié)果中添加健康劑量的噪音和稍微繁瑣的導(dǎo)航，我們不應(yīng)該對用戶在查找他們正在尋找的內(nèi)容時遇到問題感到驚訝。
相比之下，面包屑簡潔、緊湊、集中，并且可以很好地完成工作。它們不是顯示所有級別的導(dǎo)航，而是指示頁面所在的位置，以及對其所有父級的快速訪問，一直到主頁。有時這正是我們所需要的：不多也不少。面包屑清單并非每個面包屑導(dǎo)航都會出現(xiàn)并且工作方式相似。我們已經(jīng)看到了一些非常不同的模式和細(xì)微的細(xì)節(jié)，其中面包屑的設(shè)計和實現(xiàn)有所不同。
像往常一樣，這里是設(shè)計更好的面包屑時要考慮的一些重要指南的一般清單：面包屑總是需要補充主導(dǎo)航。 面包屑最適合全局導(dǎo)航。 它們也可能出現(xiàn)在主標(biāo)題上方。 分隔符應(yīng)指向右側(cè)（在 RTL 接口中）。 面包屑應(yīng)該是可見的，無需滾動。 避免“禁用”面包屑并將所有面包屑變成鏈接。 如果面包屑位于標(biāo)題上方，則可以刪除當(dāng)前頁面。 否則，為了清楚起見，將當(dāng)前頁面包含在面包屑中。 在移動設(shè)備上，如果需要，使用手風(fēng)琴顯示完整路徑。 當(dāng)前頁面的父頁面應(yīng)該始終可見。對于您的用戶來說，橫向面包屑

可能是一個非常令人驚訝和有用的發(fā)現(xiàn)。

當(dāng)前標(biāo)題：如何設(shè)計更好的面包屑導(dǎo)航
網(wǎng)頁路徑：http://www.muchs.cn/news/237937.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項目有面包屑導(dǎo)航等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)