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

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

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

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

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

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

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

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

　　分面面包屑一體化(IFB)設(shè)計(jì)

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

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

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

　　一體化分面面包屑的初步可用性評(píng)估

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

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

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

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

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

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

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

　　什么讓IFB與眾不同?

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

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

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

　　3、自動(dòng)保留最近查詢信息

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

　　5、清晰的表達(dá)如何開始一個(gè)新的搜索

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

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

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

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

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

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

　　1、暫時(shí)的面包屑，不能使用有效鏈接和錨類別，落地頁，品牌目錄和其他瀏覽頁面，正是因?yàn)樗休d著所有的歷史屬性

　　2、暫時(shí)的面包屑不能有效的展示用戶可以去哪里，因?yàn)樗麄冎荒苷故居脩羧ミ^哪里。

　　3、帶有暫時(shí)的面包屑的頁面不能通過自然搜索有效鏈接，因?yàn)橛脩裘看卧L問就會(huì)創(chuàng)建不同的URL

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

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

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

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

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

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

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

　　圖 6. Edmunds 帶有下拉選項(xiàng)的面包屑

　　在我的測(cè)試中，比起設(shè)置一個(gè)刪除選項(xiàng)的模式，絕大部分人更喜歡帶有下拉選項(xiàng)面包屑的設(shè)計(jì)，因?yàn)樗庇^有效。

　　3、自動(dòng)保留相關(guān)查詢信息

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

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

　　我發(fā)現(xiàn)保留相關(guān)屬性值的應(yīng)變系統(tǒng)行為是適用于新的查詢，這是一直都產(chǎn)生搜過結(jié)果的最好方式。

　　圖8展示了一體化分面面包屑設(shè)計(jì)把產(chǎn)品類型由digtial camera改成lenses后，保留了brand和keywords類別，同時(shí)去掉了相機(jī)的resolution類別(因?yàn)樗贿m用于lenses類別)

　　圖8.一體化分面面包屑保留相關(guān)查詢信息

　　保留類別適用于用戶更新查詢時(shí)將注意力集中在他們的目標(biāo)上，讓系統(tǒng)來處理其他細(xì)節(jié)。

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

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

　　圖9.IFB直觀的去除了一個(gè)層級(jí)

　　4、面包屑標(biāo)簽方面

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

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

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

　　在圖3中顯示的Ariba的界面有一個(gè)單獨(dú)保留原始關(guān)鍵詞的搜索框，這種方式類似于谷歌。不幸的是，如果要進(jìn)行新的搜索，就要?jiǎng)h除原有的關(guān)鍵詞。這明顯是不靈活的，我們會(huì)如上面所說的盡力保留盡量多的查詢。

　　相反的，IFB在面包屑的home標(biāo)題下，提供了一個(gè)“新搜索”的按鈕，如圖10所示，點(diǎn)擊“新搜索”將會(huì)移除所有的層級(jí)和關(guān)鍵詞，把面包屑重新設(shè)置為一個(gè)全屏的搜索框，提醒用戶這只是一個(gè)簡(jiǎn)單的谷歌搜索。

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

　　重置是通過HTML層或類似的方法，這樣頁面其他的內(nèi)容不會(huì)發(fā)生改變。通過這種方式，搜索框的重置只有一瞬間，甚至是有一個(gè)優(yōu)雅的動(dòng)畫過渡。

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

　　很多搜索界面都像圖11overstork.Com的界面一樣，有兩個(gè)搜索框：一個(gè)是已存在的查詢“結(jié)果再查詢”，一個(gè)是輸入關(guān)鍵詞搜索。有兩個(gè)搜索框會(huì)占有寶貴的屏幕空間，也會(huì)有一些潛在的混亂。更糟糕的是，用戶在執(zhí)行查詢搜索后，不能直接修改他們的關(guān)鍵詞，因?yàn)橄到y(tǒng)已經(jīng)把關(guān)鍵詞轉(zhuǎn)換成一個(gè)不可修改的分類，只能整體刪除。

　　圖11.oversock.com不允許用戶直接修改關(guān)鍵詞查詢

　　在ben shneiderman的設(shè)計(jì)用戶界面：有效的人機(jī)交互策略中描述：直接操控是人機(jī)交互的關(guān)鍵原則之一。IFB提供了直接操控關(guān)鍵詞的動(dòng)態(tài)編輯層級(jí)。如圖12所示。

　　圖12.在IFB中直接操控關(guān)鍵詞

　　當(dāng)開始一個(gè)查詢?nèi)蝿?wù)時(shí)，搜索框就完全展開與頁面同寬。當(dāng)用戶輸入某些關(guān)鍵詞時(shí)，它們保留在搜索框中便于編輯或添加關(guān)鍵詞，如12-A所示。如果用戶選擇了一個(gè)或多個(gè)層面，他們經(jīng)常會(huì)根據(jù)他們的層級(jí)加到搜索框前面，隨著層級(jí)的增加，搜索框會(huì)的尺寸會(huì)不斷變小，直到達(dá)到一個(gè)合理的最小尺寸。如圖12-B所示。

　　如果添加了更多的層級(jí)，在home項(xiàng)后面會(huì)立刻出現(xiàn)一個(gè)滾動(dòng)箭頭，允許用戶用旋轉(zhuǎn)木馬控件滾動(dòng)除home項(xiàng)和搜索框外的其他層級(jí)，如圖12所示。動(dòng)態(tài)編輯關(guān)鍵詞的設(shè)計(jì)是非常成功的，因?yàn)槲覀兊谋粶y(cè)用戶覺得他非常直觀、靈活、易用。

　　總結(jié)

　　分面面包屑設(shè)計(jì)最近才剛剛走出他的專業(yè)用戶(學(xué)者和電腦愛好者領(lǐng)域)，慢慢的被大眾所接受。

　　分面面包屑在我看來是下一代查找界面中最直觀的關(guān)鍵控件，充分整合了分面搜索和瀏覽功能。我希望這篇文章能夠協(xié)助大家設(shè)計(jì)分面搜索界面，也希望大家?guī)椭麄鞣置婷姘荚O(shè)計(jì)，幫助我們把靈活的一體化搜索普及到實(shí)踐中。

分享文章：超級(jí)面包屑的分面查找
分享鏈接：http://www.rwnh.cn/news7/165957.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、ChatGPT、服務(wù)器托管、商城網(wǎng)站、標(biāo)簽優(yōu)化、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)