Social Navigation

社會導覽（Social Navigation）的基本想法是，每個人都對其他人感興趣，都想要知道其他人都看什麼、喜歡什麼；所以Morville與Rosenfeld(2007, 142)認為觀察其他使用者的行為，可以為個別使用者創造價值，因此已被大型網站廣泛探用。

最簡單的社會導覽是類似紐約時報的「熱門推薦」（most popular ），較為複雜的社會導覽是亞馬遜網路書店的「協同篩選」（collaborative filtering）、Epinion的「建議引擎」（recommendation engine）和Flickr的「標籤雲」（tag clouds）。

1. Most Popular
   最簡單的社會導覽是「熱門推薦」（most popular）。紐約時報網站（New York Times）提供Most Popular網頁，為使用者整理最多人轉寄的文章（Most E-mailed）、最多博客連結的文章（Most Blogged）、最多人搜尋的關鍵詞（Most Searched）和最熱門的電腦（Most Popular Movies）。
   
   這張圖是在4月20日上網捉的，最熱門的搜尋關鍵詞第二名是virginia tech。
   
2. Collaborative filtering
   當我上Amazon搜尋到Information Architecture for the World Wide Web這本書時，Amazon會推薦我買這本書的顧客同時還買了那五本書，同時還可以直接點選 Explore similar items : Books (49) 瀏覽類似的49本書。
   
   


3. Recommendation engine
   Epinions提供上圖書、電影、車子等百萬種產品的review，是讓消費者分享消費經驗（好的和不好的）的一個平台。
   


4. Tag clouds （標籤雲）
   Flickr利用標籤的字體大小來表示tag popularity，是一種視覺化的呈現方式。Flickr讓使用者在上傳照片時，可以為每張照片貼上標籤（最多70個），使用者可以上網瀏覽或搜尋標籤，所以可以知道那些標籤最熱門。
   

目前大部分的企業網站都還沒有採用社會導覽的方式，相信假以時日，這類型的應用將會愈來愈普及。至少，企業會發現追蹤分析search log、使用統計、和顧客資料庫，可以提供有價值的資訊，設計更好用的「文內導覽」（contextual navigation）。更希望使用者行為能回饋到網站設計，建立彈性的導覽系統，隨著使用者的行為與偏好，調整導覽，顯著地提高網站的好用性。

Morville, P., & Rosenfeld, L. (2007). Information architecture for the World Wide Web (3rd ed.). Cambridge, MA: O'Reilly.

導覽路徑標示（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.