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

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

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

一體化查找的挑戰(zhàn)

在petermorville最近的UIE網(wǎng)絡(luò)研討會上，他稱贊了綜合查找的優(yōu)點：“瀏覽和搜索串聯(lián)工作…查找界面很好的實現(xiàn)了平衡，讓用戶在瀏覽 和搜索中流暢自如的移動?！辈恍业氖牵缃窈芏嗑W(wǎng)站沒有有效的一體化分面查找和瀏覽。例如，walmart.com瀏覽和搜索的途徑是使用兩個不同的界 面，創(chuàng)建一堆重復(fù)的控件淹沒用戶，使網(wǎng)站更加難以使用。如圖1.

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

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

分面面包屑一體化（IFB）設(shè)計

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

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

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

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

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

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

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

3、無限通道：搜索和瀏覽的結(jié)合，允許無限制的訪問任何頁面與當(dāng)前查詢頁面。

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

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

6、應(yīng)變性：為擴大搜索范圍，訪問與當(dāng)前查詢相關(guān)的產(chǎn)品和服務(wù)提供了機會。

什么讓IFB與眾不同？

Danniel Tunkelang在2009UIE網(wǎng)絡(luò)研討會（分面搜索：設(shè)計你的內(nèi)容、導(dǎo)航和UI）上說，大部分基于面包屑的查找不直觀也不易使用的。什么讓IFB設(shè) 計與眾不同？我相信IFB的設(shè)計相對于其他的分面面包屑更加直觀，應(yīng)變性更強，根據(jù)多年設(shè)計和研究分面界面的經(jīng)驗得到以下關(guān)鍵設(shè)計建議：

1、層級位置與面包屑特征結(jié)合

2、利用變化而不是設(shè)置刪除

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

4、面包屑的分類標(biāo)簽

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

6、允許直接操作關(guān)鍵詞

在下面幾節(jié)中，我將討論這些設(shè)計建議，解釋對比與現(xiàn)有的分面面包屑，IFB的解決方案是什么。

1、分層的位置與面包屑特征結(jié)合

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

圖3. Ariba查找網(wǎng)絡(luò)的屬性路徑面包屑UI

不幸的是，屬性路徑面包屑從一體化搜索和瀏覽的角度來看并不能應(yīng)變的幫助用戶查找相關(guān)內(nèi)容：

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

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

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

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

相反，位置面包屑是有層級架構(gòu)的：他們不處理用戶去過哪里，只處理現(xiàn)在所處頁面組織。層級結(jié)構(gòu)提供了一個直觀的方式來訪問復(fù)雜性和訪問資源，在大范 圍的查找和導(dǎo)航任務(wù)中都是非常有用的。我們?nèi)绾未_定屬性的層級？我的研究讓我相信，大部分人會直觀的發(fā)現(xiàn)，在位置屬性中，把會顯示未選中的分類（最典型的 是左側(cè)導(dǎo)航欄），把分類看作另外一種屬性的面包屑，顯示未選中的層級也提供了一種有效的整合搜索和瀏覽的方法，在大多數(shù)查找界面中，分類首先出現(xiàn)在左側(cè)導(dǎo) 航中，這使得“瀏覽”類別屬性的價值大于分面搜索的價值。

圖 4. Amazon.com的左側(cè)導(dǎo)航欄

大多數(shù)人發(fā)現(xiàn)IFB面包屑結(jié)構(gòu)簡單直觀，能夠準(zhǔn)確地預(yù)測復(fù)雜篩選任務(wù)的系統(tǒng)行為，只操作幾分鐘就可以應(yīng)用、刪除和改變篩選值。

2、利用變化而不是設(shè)置刪除

圖5.通過復(fù)選框?qū)崿F(xiàn).庫存積壓設(shè)置刪除

刪除應(yīng)用是在面包屑方旁邊取消選中復(fù)選框，對于大部分人來說，設(shè)置刪除項是不符合用戶心理模型的。一個評估者表 示：“這個感覺就像我每次要切換電臺都不得不關(guān)閉收音機?！贝蟛糠秩苏J(rèn)為使用下拉框把佳能換成尼康更為簡單方便，而不是為了選擇尼康而刪除佳能。下拉操作 比典型的刪除操作更為直觀，用戶可以從父級分類或者目錄發(fā)現(xiàn)所有的導(dǎo)航選項。這個方法最先是由luke wrobelwski在他的優(yōu)秀書籍網(wǎng)站中介紹的：網(wǎng)絡(luò)可用性的視覺方法。edmunds.com實現(xiàn)了在面包屑中使用下拉框空間，如圖6.

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

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

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