如何正確使用麵包屑導航

已發表: 2017-01-07

Breadcrumbs 將我們帶回到您在幼兒園時可能讀過的古老童話故事。當 Hansel 決定鋪上麵包屑追踪回家的路時，兩個孩子 Hansel 和 Gretel 被迫離開他們在樹林裡的家。雖然麵包屑被森林裡討厭的小鳥吃掉了，但在故事寫完很多年後，它們還是給人們留下了深刻的印象。

在網頁設計中，麵包屑的用途與 Hansel 的想法相似。麵包屑作為網站導航中的輔助導航，幫助訪問者在從一個頁面轉到另一個頁面後放心。就像古老的童話故事一樣，它有助於向用戶展示他們降落的地方以及他們最後的位置。

一旦麵包屑被集成到網站的層次結構中，用戶就可以深入產品類別並導航回到他們開始的地方，而無需瘋狂地點擊“返回”按鈕。

麵包屑還用作圖形控制元素，以幫助經驗不足的訪問者在電子商務網站上導航。對於此類網站，內部結構必須進行智能設計。有了麵包屑，在線購物平台不僅要為訪問者提供易用性，還要防止潛在客戶因為迷路而放棄他們的頁面。

麵包屑導航

麵包屑是通過確定訪問者當前位置和途中訪問過的地方來引導訪問者的有效手段。它們用作站點層次結構中的視覺輔助。但就客戶用戶體驗而言，麵包屑可以幫助他們回答這三個問題。

我在哪裡？
麵包屑讓用戶了解他們在網站上的下落，開始他們的旅程。
我可以去哪裡？
它通過建議用戶下一步去哪裡來幫助用戶。由於結構已經擺在他們面前，用戶不再需要搜索和查找類別或站點部分。
我應該去那裡嗎？
麵包屑有助於促進更好的瀏覽並向用戶展示內容價值。例如，如果客戶登陸網頁以搜索產品，他可能會找到其他可以證明與他的需求非常匹配的產品。這有助於降低網站的跳出率。

好處

減少行動

為了達到更高級別的頁面，麵包屑有助於減少沒有。網站訪問者到達那裡所需的操作。訪問者可以簡單地使用麵包屑導航返回，而不是不斷地使用“返回”按鈕或網站的主導航。

需要最小的空間

它只需要一條充滿文本鏈接的水平線。通過佔用最小的空間並允許網站上的其他元素呼吸，這有助於健康的網頁設計結構。這也有助於提高網站的加載速度。

每個用戶都知道如何操作麵包屑

它易於理解，並且不需要任何技術知識即可與它們進行交互。文本解釋了用戶過去、現在和可以去的地方。這是每個用戶都能理解的自我解釋導航系統。

何時使用麵包屑？

構建站點地圖以顯示您網站的導航結構是確定您的網站是否可以從麵包屑中受益的最佳方法之一。然後，您可以通過試用和測試來分析麵包屑導航是否正在幫助用戶瀏覽您的網站內容。

當需要在類別內和清晰的線性結構中組織大量更大的內容時，最好使用麵包屑導航。在大多數電子商務網站中，相同的標準用於將大量產品分組到邏輯類別中。
麵包屑不能用於沒有任何邏輯層次結構來對內容或產品進行分組的網站。

何時避免使用它們

在麵包屑對網站結構至關重要的情況下，也存在應避免使用的情況。如果有一個網站由單層結構組成，沒有任何明確的分組指示，那麼它符合網站的最佳利益，以避免添加麵包屑。就像我們上面提到的，圖表或站點地圖對於確定網站的導航架構非常有幫助。

麵包屑只有在主導航支持時才有用。麵包屑充當肌肉，而主要導航是將它們結合在一起的骨架。沒有它們的完整移動，網站層次結構就無法有效運行。

麵包屑的類型

您應該了解三種類型的麵包屑：位置、路徑和屬性。

1. 基於位置

基於位置的麵包屑用於展示網站的基本結構。它們允許用戶瀏覽具有多個級別和全面內容路徑的網站。這種類型的麵包屑對於從外部來源登陸網站並輸入更深層次內容的訪問者非常有用。例如，如果您正在搜索特定類型的產品並單擊 Google 顯示的搜索結果，一旦您進入網頁，您就會發現自己處於許多類別之間。麵包屑將幫助您確定您的位置並導航到層次結構中的可能性。那些包含深層內容的網站非常適合基於位置的麵包屑。一個理想的例子是 eBay。

2. 基於路徑

這些麵包屑對於網站的歷史軌跡導航非常重要。基於路徑的麵包屑基本上顯示了用戶為了到達當前位置而訪問的每條路徑。通常，此類麵包屑鏈接是動態生成的。雖然基於路徑的插件對花費大量時間瀏覽網站的用戶很有幫助，但它們對大多數用戶來說大多是令人費解的。由於大多數訪問者自行決定瀏覽，從一個頁面移動到另一個頁面。瀏覽器中的“返回”按鈕解決了他們更改路徑的大部分需求。這使得它尤其對於那些到達已經在網站深處的網站頁面的訪問者來說毫無用處。

3. 基於屬性

電子商務網站從基於屬性的麵包屑中受益最多。它們有助於根據特定頁面或產品列出類別。這種類型的麵包屑對於鼓勵用戶了解產品之間的關係非常有幫助。例如，如果網站銷售牛仔褲，他們將使用基於屬性的麵包屑來幫助客戶從常規版型、修身版或緊身牛仔褲中進行導航。

麵包屑導航最佳實踐

在設計麵包屑導航時，請務必牢記以下幾點。麵包屑導航是改善用戶在您網站上的體驗的額外幫助。

避免重複元素

如果你真的想在你的網站上添加麵包屑，你最好以正確的方式來做。首先，您需要消除可能出現在麵包屑路徑之間的任何重複元素。可悲的是，我在許多排名靠前的網站中看到了這一點，其中相同的頁面屬於多個類別或顯示的內容級別。這不僅會使訪問者感到困惑，而且還會在您的網站上產生不良影響。

搜索引擎優化兼容性

麵包屑不僅是訪問者的導航控件，也是您的 SEO 實踐的重要資產。您可以使用麵包屑中的關鍵字來提高您在搜索引擎上的排名。建議您為網站類別選擇 SEO 友好名稱，以便搜索引擎可以輕鬆地在其結果中的麵包屑中列出。

使用麵包屑作為替代導航

雖然麵包屑是幫助用戶從一個點導航到另一個點的絕佳來源，但重要的是它們應該只被視為次要來源。麵包屑是增強訪問者可用性的額外功能，在任何情況下都不能取代網站的主要導航結構。

在麵包屑導航中鏈接當前頁面毫無意義

儘管在麵包屑路徑上顯示訪問者的當前位置是可選的，但您必須確保線性結構中顯示的鏈接不可點擊或點擊。向他們展示他們當前所在頁面的鏈接只會使訪問者感到困惑。

添加分隔符

使用分隔符是一種很好的做法，可以為您的麵包屑導航提供乾淨且可觀的外觀。如果用戶進入更深層次，它可以防止文本過於接近，並創建易於理解和交互的動態結構。

您可以使用 › 符號來表示層次結構，因為它通常用於類別格式，例如衣服 › 襯衫 › 領襯衫等。其他符號包括箭頭 (→)、直角引號 (») 和斜線 (⁄)。

介紹麵包屑的大小和填充

在設計麵包屑時，您必須考慮填充和目標大小。一個麵包屑與另一個麵包屑之間的間距必須明顯，否則訪問者可能無法有效地使用它們。同時，確保麵包屑的大小不會影響其周圍的其他元素，因此主導航不受影響。

永遠不要將注意力集中在麵包屑的設計上

切勿使用鮮豔的顏色或花哨的字體來表示您的麵包屑。儘管麵包屑路徑對用戶登陸頁面後很重要，但它不應該是他們注意到的第一件事。為麵包屑導航添加華麗可能會導致用戶忽略網站的主要導航。這可能會分散用戶進入頁面的真正意圖，並導致商店失去潛在的轉換。在這方面，谷歌是最好的例子。擁有如此多級別的搜索內容，它顯示了一個簡單的麵包屑導航路徑，沒有任何花哨的字體或顏色，以便用戶可以輕鬆找到麵包屑並與之交互。

應該避免哪種類型？

關於是否使用基於位置/屬性的麵包屑或基於路徑的麵包屑來顯示站點層次結構，這是一個有爭議的論點。根據經驗，麵包屑不能顯示用戶的歷史記錄，而是站點層次結構。在我們的評估和意見中，您可能不應該再為基於路徑的麵包屑而煩惱。一方面，它對用戶體驗沒有幫助，因為由於不同級別之間缺乏層次結構，它可能會導致訪問者混淆。這就是為什麼基於位置和屬性的麵包屑優於基於路徑的麵包屑。

最後的想法

麵包屑與網站上的任何其他元素一樣重要。現在技術已經允許存儲更多的數據、更快的互聯網速度和更快的加載時間，導航可以在更高的層次結構上更全面地顯示，而不會出汗。在麵包屑的幫助下，您的網站不僅會產生更好的用戶體驗，還會從客戶那裡產生更大的銷售額。更流暢和簡單的導航意味著更容易訪問產品頁面並減少結帳過程。