導覽路徑標示（Breadcrumbs）

就像實體的建築設計一樣，網站設計也要在每一個網頁清楚的讓訪客知道 You Are Here! 訪客迷路了，都可以循著來時路回到前面逛過的任何一站。例如下圖是flickr網站導覽路徑標示（Breadcrumbs），目前所在的位置是clusters，以紅字顯示，可以往前回到上一層nature，也可以直接跳回Tags或Explore。

有些網站直接就以 You are here:以導引訪客，如About.com.

Krug（2006）將這種設計稱為 Breadcrumbs，因為在格林童話《糖果屋》中Hansel 和Gretel第二次被丟棄到森林時，就是沿路撒麵包屑，當做線索的。（可是故事的麵包屑是被小鳥吃掉了所以才找到糖菓屋還是薑餅屋的，作者說要以此來說明迷路是多麼令人不愉快）

換句話說，資訊結構師在設計網站時，要幫訪客撒好麵包屑，讓訪客可以很容易地找到回家的路。（好佳在，網路沒有小鳥會飛來偷吃麵包屑）不過，我建議還是精確一點，翻譯成「導覽路徑標示」。

Krug（2006, pp. 78-79）認為About.com的「導覽路徑標示」設計得很好，下列幾項是最佳典範（best practices）。

• 放在網頁頂端
  
  網頁導覽路徑標示放在網頁的頂端齊左，最好！About.com是最佳範例，就像是每本書的頁碼一樣，導覽路徑標示也嵌入成為網頁的一部分。如果將導覽路徑標示往下移，就有可能和其他的導覽要素混淆，然後就會Make me think；使用者就得要停下來想想，那個是真的導覽路徑？我該用那一個呢？
  


• 用＞區分層級
  
經過trial and error顯示，最佳區隔符號是大於符號（＞）；雖然冒號（：）和斜撇（/）也都有人用，還是＞符號最能滿足使用者的需求，最具有自明性，因為＞符號本身就有方向的意涵在。
Flickr就是用斜撇（/）來區分層級。字體則是藍字與紅色。


• 用較小字體
  
小體稍小，可以明確區分主從關係。


• 貼上" You are here"
  
大部分的使用者都知道導覽路徑標示是什麼，貼上" You are here"更具自明性。


• 最後一項字體加粗或變色

最後一項應該是所在網頁的網頁名稱，用粗體字，更明顯。
About.com是用黑體子標示You ar here:，用藍色字體顯示各層標題，以紅色字體標示現在所在網頁。


• 不要用導覽路徑標示來取代網頁名稱
  
  有些網站會把最後一項字體放大，同時充當網頁名稱。這種設計對使用者不見得好用，因為使用者通常會期待網頁名稱出現在網頁的正中央或是齊左，而不會認為導覽路徑標示的最後一項就是網頁名稱。
  

Krug, S. (2006). Don't make me think: A common sense approach to web usability (2nd ed.). Berkeley, CA: New Riders.