185 月

[網站規劃] 別再讓你的使用者迷路了：麵包屑(導覽路徑)

不知你對麵包屑這個字眼是否熟知，又有多少的了解？最基本的印象不外乎於一長串的文字>文字>文字組合，就如同下圖那樣，但這個看似平凡的一串文字連結，究竟隱藏著什麼樣的功用呢？本篇文章將進一步的說明：

隨著許多的網站的架構越來越複雜，擁有很多的頁面與分類，而『麵包屑』(或稱為導覽路徑)則扮演了重要的導航角色，它的存在大大提高使用者能夠更正確的在網站各個層級裡遊走而不迷失方向，甚至更快速的前往各個頁面。

如同上圖所示，當你在購物網站尋找商品，並發現這結果不是你所預期的，麵包屑就能快速的帶領你回到正確的層級，而不是只能靠著瀏覽器的上一頁重複click到手痠。此外，良好規劃麵包屑上、下層的連接也能有利於搜尋引擎的檢索。

開始重視麵包屑吧！瞧瞧麵包屑的優點：

• 方便用戶：麵包屑的層級連結可以有效的輔助使用者，讓他們永遠找得到回頭的路徑，並且更加瞭解網站的分類架構。
   
• 輕易返回上層頁面、減少點擊次數：尤其對於大型的多層級網站來說，正確的使用麵包屑可以讓使用者容易的前往各個層級，也減少了使用者點擊次數。
   
• 降低跳出率：對於首次訪問的使用者來說，麵包屑路徑也是一種帶領使用者更進一步瀏覽各網頁的方式。

  例如：使用者藉由搜尋『巧克力餅乾』，而進入你網站的某一產品的介紹頁，麵包屑的存在讓使用者可以快速的往更上層的去瀏覽，假設你的麵包屑是『首頁>產品介紹>甜點零食>餅乾>巧克力口味>小熊巧克力餅』，使用者可以往上一層去看所有巧克力口味的餅乾，或是直接去看你所有的甜點零食商品，這樣的方式也進一步降低了網站的跳出率。

• 不會占用太多的頁面空間：麵包屑是基本的橫向文字連結組合，這樣的形式不會佔用掉你的網頁空間，也不會對你的網頁內容有任何的影響，所以只要適當使用，基本上它不會帶給你任何的負擔與負面的影響。

如何讓人注意麵包屑？麵包屑使用要點：

從設計上的角度來看麵包屑，主要的重點包括：

1. 麵包屑功用在於導覽，是個補助性的角色，所以不要喧賓奪主，應保持適當的大小，與主選單、副選單有所區分。
2. 避免同站的主選單、副選單與麵包屑在擺放位置上太過接近而互相干擾。
3. 儘量使用共通的符號、表達形式，讓使用者即使是第一次拜訪你的網站，仍然可以依照以往的經驗使用『麵包屑』，例如：文字連結 > 文字連結 ，是最普遍的形式。

更詳盡的內容可參閱：Breadcrumbs In Web Design: Examples And Best Practices

除上述的內容外，在『User Mental Models of Breadcrumbs』文章中提到，在一個網頁上讓使用者進行相關頁面的尋找方式有很多，他們可以使用搜尋尋找有相同關鍵字的頁面，或是使用『返回』的連結，回到自己先前瀏覽的頁面。

但，影響使用者決定以『麵包屑』的方式找尋的關鍵因素是：『麵包屑使用的連結文字與使用者尋找的內容有相關』，這個具有相關性的文字連結，會讓使用者願意嘗試、賭賭運氣，看看使用麵包屑是否可以用最快的速度，帶領他們找到他們所想要的。

由此來看，對於使用者而言，也許他們根本不瞭解什麼是麵包屑，最主要的是它對使用者『說了什麼』。

更詳盡的內容可參閱： User Mental Models of Breadcrumbs

Posted by admin  Posted on 18 5 月 

breadcrumbs, 導覽路徑, 網站規劃, 麵包屑

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。