沒有人會對面包屑導(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://m.rwnh.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)