網站設計分析：超級面包屑的分面查找

　　譯者注：搜索的關鍵是讓用戶更加容易的找到所需的信息，我發現該文精心的為用戶創造了一個靈活的解決方法，交互形式不在拘泥於固有的設計原則，更多是從實際情況出發，創造更適合的交互控件。 翻譯了這篇文章跟大家共享，若大家發現任何錯誤，歡迎隨時給予糾正。

　　原文地址：faceted-finding-with-super-powered-breadcrumbs

　　如今的查找界面沒有有效的支持一體化查找，用戶的注意力經常被一些不同的搜索結果和浏覽界面所混淆。在這篇文章中，我建議使用一體化分面(分面指事物多維度的屬性)面包屑(IFB)設計，通過綜合分面的力量，更加細化的為浏覽者提供直觀的查詢擴展。盡管其他基於面包屑的查找界面依然存在，但他們都因忽略最佳的實踐而未達到預期的結果。面包屑最好的方式是放在側邊的、占有最少空間而又更強大的查找控件

　　相比之下，面包屑是IFB設計的超級英雄，處理了很多被可用性問題困擾的查找界面。為了證明這點，我盡全力測試了我的假設。12個評估者都發現了IFB更易用、更直觀和靈活的解決復雜搜索任務，這是傳統的搜索界面是很難做到的。

　　一體化查找的挑戰

　　在petermorville最近的UIE網絡研討會上，他稱贊了綜合查找的優點：“浏覽和搜索串聯工作…查找界面很好的實現了平衡，讓用戶在浏覽和搜索中流暢自如的移動。”不幸的是，如今很多網站沒有有效的一體化分面查找和浏覽。例如，walmart.com浏覽和搜索的途徑是使用兩個不同的界面，創建一堆重復的控件淹沒用戶，使網站更加難以使用。如圖1.

　　圖1.walmart.com上搜索和分面查找的雜亂機制

　　walmart.Com上豐富的篩選、鏈接和選項，使用戶成功的重復搜索或有效的發現相關主題和內容都非常不容易。重復查找的方法還創建了一個自然搜索的問題，因為每個查找頁面僅限於特定的對話。Marti hearst的《搜索用戶界面》的第8章說：分面查找的首要設計目標是實現”靈活導航、無縫綜合使用定向(關鍵字)搜索浏覽，精煉和擴展交替流暢，避免空結果，整個過程都讓用戶感到可控和理解“。

　　分面面包屑一體化(IFB)設計

　　為了滿足搜索和浏覽一體化的挑戰，我提出了一體化分面面包屑(IFB)的設計方案。推薦walmart.com采用一體化分面面包屑重新設計用戶界面的線框圖，如圖2所示。

　　圖2.walmart.com采用一體化分面面包屑(IFB)再設計界面的線框圖

　　面包屑簡單、直觀、靈活、應變能力強。正如jacob Nielsen在她的2007年ALertbox中的陳述，面包屑導航越來越有用：“相對於更高層次的概念，面包屑顯示了用戶的當前位置，幫助用戶理解與其他頁面之間的位置關系。面包屑支持一鍵訪問上一級目錄，從而解救了那些通過搜索或深度鏈接，到達非目的地的用戶。面包屑在用戶測試中從未出現問題，用戶不會誤解面包屑，也不會出現操作問題。

　　一體化分面面包屑的初步可用性評估

　　一體化分面面包屑早起可用性測試結果顯示，使用鏈接的HTML原型是非常有前景的。我用一個簡單的8頁HTML原型，測試了12個目前流行的電子商務界面和不同性別年齡背景用戶的變化。被測用戶能夠迅速的掌握一系列可能的交互，並使用界面有效的解決了復雜的查找任務，現有的搜索界面是很難做到的。經過 1~2個簡單的任務後，參與者精確預測系統行為的信息和能力也明顯提高了，這表明用戶對IFB設計的學習曲線是非常短的。盡管沒有正式的研究對比使用 IFB的性能與現有的分面查找的問題，在進行某些種類的查找任務時，相比現有的沃爾瑪針對特定分類的搜索任務使用的分面搜索設計，IFB 設計更被青睐早期可用性測試表明，IFB設計提供了許多好處超越了傳統的分面搜索設計：

　　1、學習成本低：熟悉的鏈接和下拉菜單使的這個控件相當直觀。很少使用面包屑的用戶也會很有效的操作IFB。

　　2、效率：面包屑和分類結合成一個控件有效的利用了有限的屏幕空間，大大降低了重復控件造成的雜亂。

　　3、無限通道：搜索和浏覽的結合，允許無限制的訪問任何頁面與當前查詢頁面。

　　4、一體化：充分的將落地頁、品牌目錄和類別頁整合到分面搜索的架構中。在屏幕上方有突出的位置可以看到你的當前位置和用戶所需要訪問的所有導航工具。

　　5、靈活性：在整個查找過程中，用戶可以根據需要隨時從浏覽切換到搜索。

　　6、應變性：為擴大搜索范圍，訪問與當前查詢相關的產品和服務提供了機會。

　　什麼讓IFB與眾不同?

　　Danniel Tunkelang在2009UIE網絡研討會(分面搜索：設計你的內容、導航和UI)上說，大部分基於面包屑的查找不直觀也不易使用的。什麼讓IFB設計與眾不同?我相信IFB的設計相對於其他的分面面包屑更加直觀，應變性更強，根據多年設計和研究分面界面的經驗得到以下關鍵設計建議：

　　1、層級位置與面包屑特征結合

　　2、利用變化而不是設置刪除

　　3、自動保留最近查詢信息

　　4、面包屑的分類標簽

　　5、清晰的表達如何開始一個新的搜索

　　6、允許直接操作關鍵詞

　　在下面幾節中，我將討論這些設計建議，解釋對比與現有的分面面包屑，IFB的解決方案是什麼。

　　1、分層的位置與面包屑特征結合

　　在2002年，信息建築師Keith instsone在他的第三次年度IA峰會海報上編目了面包屑的三種類型，以揭示標題：定位、路徑和屬性面包屑。在分面搜索界面中，屬性面包屑通常傳達應用方面的價值，如價格，類別，風格，品牌。一般屬性面包屑就是路徑面包屑，用戶按照目前的搜索結果的順序顯示層級值，Ariba查找網絡的屬性路徑面包屑 UI如圖3所示。

　　圖3. Ariba查找網絡的屬性路徑面包屑UI

　　不幸的是，屬性路徑面包屑從一體化搜索和浏覽的角度來看並不能應變的幫助用戶查找相關內容：

　　1、暫時的面包屑，不能使用有效鏈接和錨類別，落地頁，品牌目錄和其他浏覽頁面，正是因為它承載著所有的歷史屬性

　　2、暫時的面包屑不能有效的展示用戶可以去哪裡，因為他們只能展示用戶去過哪裡。

　　3、帶有暫時的面包屑的頁面不能通過自然搜索有效鏈接，因為用戶每次訪問就會創建不同的URL

　　4、當查詢發生變化時，面包屑上屬性就會“隨機”的跳來跳去。

　　相反，位置面包屑是有層級架構的：他們不處理用戶去過哪裡，只處理現在所處頁面組織。層級結構提供了一個直觀的方式來訪問復雜性和訪問資源，在大范圍的查找和導航任務中都是非常有用的。我們如何確定屬性的層級?我的研究讓我相信，大部分人會直觀的發現，在位置屬性中，把會顯示未選中的分類(最典型的是左側導航欄)，把分類看作另外一種屬性的面包屑，顯示未選中的層級也提供了一種有效的整合搜索和浏覽的方法，在大多數查找界面中，分類首先出現在左側導航中，這使得“浏覽”類別屬性的價值大於分面搜索的價值。

　　圖 4. Amazon.com的左側導航欄

　　大多數人發現IFB面包屑結構簡單直觀，能夠准確地預測復雜篩選任務的系統行為，只操作幾分鐘就可以應用、刪除和改變篩選值。

　　2、利用變化而不是設置刪除

　　圖5.通過復選框實現.庫存積壓設置刪除

　　刪除應用是在面包屑方旁邊取消選中復選框，對於大部分人來說，設置刪除項是不符合用戶心理模型的。一個評估者表示：“這個感覺就像我每次要切換電台都不得不關閉收音機。”大部分人認為使用下拉框把佳能換成尼康更為簡單方便，而不是為了選擇尼康而刪除佳能。下拉操作比典型的刪除操作更為直觀，用戶可以從父級分類或者目錄發現所有的導航選項。這個方法最先是由luke wrobelwski在他的優秀書籍網站中介紹的：網絡可用性的視覺方法。edmunds.com實現了在面包屑中使用下拉框空間，如圖6.

　　圖 6. Edmunds 帶有下拉選項的面包屑

　　在我的測試中，比起設置一個刪除選項的模式，絕大部分人更喜歡帶有下拉選項面包屑的設計，因為它更直觀有效。

　　3、自動保留相關查詢信息在我的研究中，我發現人們很少想要完全從頭開始查詢，除非他們想明確的表示這個行為。相反，在每一次變化的時候，用戶希望盡量多的保留查詢信息，並希望系統幫助他建立