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

　　原文地址：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、自動保留相關查詢信息

　　在我的研究中，我發現人們很少想要完全從頭開始查詢，除非他們想明確的表示這個行為。相反，在每一次變化的時候，用戶希望盡量多的保留查詢信息，并希望系統幫助他建立一個更“符合情理”的查詢，優雅的下拉選項便不再適用于他們的新查詢。不幸的是，如今很少有網站很好的實現這個功能，例如，很多用戶期望把模型Fusion選項改為Mustang時，不保留2005年的選項。正如圖7所示，Edmunsd.com重新選擇模型使，年份便重置為當前年，很簡單的不再顯示在面包屑上了。

　　圖7. Edmunds.com下拉分類可改變需要的查詢信息

　　我發現保留相關屬性值的應變系統行為是適用于新的查詢，這是一直都產生搜過結果的最好方式。

　　圖8展示了一體化分面面包屑設計把產品類型由digtial camera改成lenses后，保留了brand和keywords類別，同時去掉了相機的resolution類別(因為他不適用于lenses類別)

　　圖8.一體化分面面包屑保留相關查詢信息

　　保留類別適用于用戶更新查詢時將注意力集中在他們的目標上，讓系統來處理其他細節。

　　如果用戶真的非常想只瀏覽Lense產品類型呢?我的測試顯示大部分用戶可以直接點擊lense的鏈接到lenses的結果頁，這是非常直觀的。把現有面包屑鏈接加下拉功能的結果是我們獲得了一個強大的、直觀的、靈活的查找控件。

　　如果不是瀏覽，有人想要從面包屑中刪除一個層級而保留剩下的查詢分類呢?我的研究顯示，大部分用戶會很容易發現一體化面包屑在下拉菜單中，很直觀提供了“查看所有”選項，如圖9所示

　　圖9.IFB直觀的去除了一個層級

　　4、面包屑標簽方面

　　jared spool提到，面包屑的大問題在于“缺乏線索”和“個人元素的措辭變得很重要”

　　雖然大多數應用程序可以很簡單的在面包屑上展示應用的分類，我的研究表明，對分類的名字編輯，需要添加大量的信息線索。如果用戶通過自然搜索，由此而生的一體化面包屑包標題(圖9所示)，可以幫助用戶理解他們的查詢和迅速定位。

　　5、清楚的顯示如何開始一個新的搜索

　　在圖3中顯示的Ariba的界面有一個單獨保留原始關鍵詞的搜索框，這種方式類似于谷歌。不幸的是，如果要進行新的搜索，就要刪除原有的關鍵詞。這明顯是不靈活的，我們會如上面所說的盡力保留盡量多的查詢。

　　相反的，IFB在面包屑的home標題下，提供了一個“新搜索”的按鈕，如圖10所示，點擊“新搜索”將會移除所有的層級和關鍵詞，把面包屑重新設置為一個全屏的搜索框，提醒用戶這只是一個簡單的谷歌搜索。

　　圖10.IFB界面中的“新搜索”

　　重置是通過HTML層或類似的方法，這樣頁面其他的內容不會發生改變。通過這種方式，搜索框的重置只有一瞬間，甚至是有一個優雅的動畫過渡。

　　6、允許直接操控關鍵詞

　　很多搜索界面都像圖11overstork.Com的界面一樣，有兩個搜索框：一個是已存在的查詢“結果再查詢”，一個是輸入關鍵詞搜索。有兩個搜索框會占有寶貴的屏幕空間，也會有一些潛在的混亂。更糟糕的是，用戶在執行查詢搜索后，不能直接修改他們的關鍵詞，因為系統已經把關鍵詞轉換成一個不可修改的分類，只能整體刪除。

　　圖11.oversock.com不允許用戶直接修改關鍵詞查詢

　　在ben shneiderman的設計用戶界面：有效的人機交互策略中描述：直接操控是人機交互的關鍵原則之一。IFB提供了直接操控關鍵詞的動態編輯層級。如圖12所示。

　　圖12.在IFB中直接操控關鍵詞

　　當開始一個查詢任務時，搜索框就完全展開與頁面同寬。當用戶輸入某些關鍵詞時，它們保留在搜索框中便于編輯或添加關鍵詞，如12-A所示。如果用戶選擇了一個或多個層面，他們經常會根據他們的層級加到搜索框前面，隨著層級的增加，搜索框會的尺寸會不斷變小，直到達到一個合理的最小尺寸。如圖12-B所示。

　　如果添加了更多的層級，在home項后面會立刻出現一個滾動箭頭，允許用戶用旋轉木馬控件滾動除home項和搜索框外的其他層級，如圖12所示。動態編輯關鍵詞的設計是非常成功的，因為我們的被測用戶覺得他非常直觀、靈活、易用。

　　總結

　　分面面包屑設計最近才剛剛走出他的專業用戶(學者和電腦愛好者領域)，慢慢的被大眾所接受。

　　分面面包屑在我看來是下一代查找界面中最直觀的關鍵控件，充分整合了分面搜索和瀏覽功能。我希望這篇文章能夠協助大家設計分面搜索界面，也希望大家幫助宣傳分面面包屑設計，幫助我們把靈活的一體化搜索普及到實踐中。

分享文章：超級面包屑的分面查找
分享鏈接：http://m.newbst.com/news7/165957.html

成都網站建設公司_創新互聯，為您提供網站設計、ChatGPT、服務器托管、商城網站、標簽優化、企業網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯