什么是高級(jí)搜索?
搜索是一種從巨大內(nèi)容中查找所需信息的方法。基礎(chǔ)搜索是用于查找項(xiàng)目的單個(gè)參數(shù)(通常是名稱)。高級(jí)搜索是一種通過(guò)指定包含多個(gè)參數(shù)的條件從大型項(xiàng)目列表中查找內(nèi)容的方法。
我們來(lái)看一些示例并提取最佳實(shí)踐,這些實(shí)踐會(huì)幫助你設(shè)計(jì)簡(jiǎn)單有效的用戶體驗(yàn),在設(shè)計(jì)產(chǎn)品時(shí)執(zhí)行高級(jí)搜索。
如何進(jìn)行高級(jí)搜索?
高級(jí)搜索選項(xiàng)通常位于用戶界面上的基本搜索框附近,便于用戶可以輕松找到。
用戶定義搜索過(guò)濾器并將其應(yīng)用在大數(shù)據(jù)上以縮小其范圍。通過(guò)添加不同的參數(shù)來(lái)創(chuàng)建過(guò)濾器。例如,搜索的內(nèi)容列表,參數(shù)可以是名稱,ID,類型,狀態(tài),創(chuàng)建日期,作者等。用戶選擇參數(shù)并定義它的價(jià)值。一個(gè)參數(shù)可以有一組用于選擇的值,例如類型可以是圖片,文檔,PDF等。
為特定標(biāo)準(zhǔn)定義的多個(gè)參數(shù)構(gòu)成過(guò)濾器。用戶可以定義并保存過(guò)濾器以供以后使用。執(zhí)行搜索時(shí),顯示結(jié)果,用戶可以查看并進(jìn)一步縮小這些結(jié)果的范圍。
這就是高級(jí)搜索的工作原理。
下面介紹了一些用于高級(jí)搜索用戶界面定義簡(jiǎn)單直觀的用戶體驗(yàn)的案例和最佳實(shí)踐。
一、如何添加搜索參數(shù)
搜索參數(shù)和參數(shù)值可以以不同方式顯示。
1. 前端用戶界面上可用的所有參數(shù)
高級(jí)搜索頁(yè)面在前端用戶界面上顯示所有可用參數(shù),用戶無(wú)需顯式添加參數(shù)。他只需根據(jù)所需參數(shù)選擇值即可。這稱為分面搜索。
Microsoft招聘頁(yè)面在左側(cè)面板中顯示搜索參數(shù)。默認(rèn)情況下,所有參數(shù)都處于折疊狀態(tài),用戶可以逐個(gè)展開它們并選擇值。
Microsoft招聘頁(yè)面在左側(cè)面板中顯示搜索參數(shù)(構(gòu)面)
分析:
a. 在前端UI上顯示所有參數(shù)是一種用戶友好的方法,用戶可以輕松掃描它們。
b. 適用于大量?jī)?nèi)容。
c. 唯一的缺點(diǎn)是需要足夠的空間來(lái)顯示所有參數(shù),有時(shí)它會(huì)給用戶界面造成混亂。
2. 在前端用戶界面上使用常用的參數(shù)
此方法在前端用戶界面上顯示常用的搜索參數(shù)。參數(shù)顯示在下拉菜單中,用戶可以從菜單中選擇所需的參數(shù)。
每次重復(fù)相同的步驟添加參數(shù)。
Jira在用戶界面上顯示常用參數(shù),用戶可以從可用列表中添加更多參數(shù)。
Jira在頂部顯示常用的搜索參數(shù)
單擊“更多”選項(xiàng)會(huì)顯示一個(gè)菜單,其中列出可添加到搜索條件的可用參數(shù)。每次用戶想要添加參數(shù)時(shí),都會(huì)轉(zhuǎn)到“更多”并從列表中選擇所需的選項(xiàng)。
單擊“更多”將顯示列出可用參數(shù)的菜單
Linkedin在擴(kuò)展面板中顯示詳細(xì)參數(shù)。
Linkedin顯示擴(kuò)展面板并列出所有參數(shù)
eBay在對(duì)話框中顯示詳細(xì)參數(shù)。
eBay用一個(gè)對(duì)話框列出所有參數(shù)
分析:
a. 這種方法適用于大多數(shù)常用參數(shù)用于執(zhí)行搜索的情況。用戶不再擔(dān)心不需要的細(xì)節(jié)。
b. 在用戶界面上僅顯示少量參數(shù)需要更少的空間,因此在用戶界面上的混亂更少。
c. 每用戶添加參數(shù)都需要更多次點(diǎn)擊。
d. 對(duì)于復(fù)雜內(nèi)容不好。
二、如何選擇參數(shù)值
有不同的方法可以根據(jù)參數(shù)顯示值??梢赃x擇最適合當(dāng)前環(huán)境和要求的方法。
1. 輸入框
如果用戶要輸入?yún)?shù),則會(huì)顯示一個(gè)簡(jiǎn)單的文本框。
Twitter顯示一個(gè)搜索表單,用于定義包含參數(shù)輸入框的搜索條件,以便用戶可以輸入所需的值。
Twitter高級(jí)搜索表單
分析:
a. 當(dāng)沒有可用于參數(shù)的定義值時(shí),使用輸入框。
b. 有關(guān)所需輸入的類型和格式的占位符文本對(duì)用戶很有幫助。
c. 如果輸入框可以包含多個(gè)值,則應(yīng)向用戶明確指示。例如,諸如“添加由逗號(hào)分隔的多個(gè)值”之類的幫助文本很有用。
2. 多選框列表
如果用戶可以為所選參數(shù)選擇多個(gè)選項(xiàng),就會(huì)顯示多選框列表。此多選框列表可以作為單獨(dú)的列表提供,也可以封裝在下拉菜單中節(jié)省空間。
當(dāng)用戶展開參數(shù)名稱時(shí),Microsoft招聘搜索頁(yè)面會(huì)顯示參數(shù)的可用選項(xiàng)。此外,可以在下圖中看到輸入框可用于在值內(nèi)搜索。
在Microsoft招聘搜索頁(yè)面上,搜索參數(shù)值在多選框列表中顯示
Linkedin工作搜索以多選框列表的形式在下拉菜單中顯示所選參數(shù)的選項(xiàng)。
Linkedin搜索參數(shù)顯示值作為下拉菜單多選框列表
分析:
a. 如果用戶必須從多個(gè)選項(xiàng)中進(jìn)行選擇,多選框列表則是一個(gè)不錯(cuò)的選擇。
b. 多選框列表是一個(gè)用戶友好的控件,因?yàn)樗峁┝诉x擇和取消選擇值的清晰體驗(yàn)。
c. 應(yīng)該取消選中默認(rèn)狀態(tài),因?yàn)檫x擇所需選項(xiàng)對(duì)用戶來(lái)說(shuō)更方便,而不是取消選擇他們不想要的內(nèi)容。
d. 在下拉菜單中提供多選框列表可節(jié)省空間,但需要更多點(diǎn)擊。此外,在下拉框中顯示多個(gè)選定選項(xiàng)是一項(xiàng)挑戰(zhàn)。
3. 超鏈接
很少有搜索參數(shù)需要給定值列表的單個(gè)輸入。超鏈接用于此目的。
由于超鏈接具有多個(gè)層級(jí),因此有時(shí)僅在用戶界面上顯示當(dāng)前級(jí)別。
Amazon使用選擇性隱藏的父級(jí)超鏈接方法?!安块T”是顯示部門列表的主要級(jí)別鏈接。當(dāng)用戶選擇部門時(shí),Amazon隱藏了指向其他部門的鏈接。這意味著用戶現(xiàn)在只能關(guān)注所選部門的詳細(xì)信息。
Amazon搜索作為超鏈接在左側(cè)面板中顯示部門
選擇部門鏈接僅顯示子鏈接并隱藏其他部門
但eBay不隱藏任何內(nèi)容,無(wú)論是否選擇了鏈接,層次結(jié)構(gòu)中的所有鏈接仍然可見且可訪問(wèn)。
在eBay搜索的任何等級(jí)中所有類別都保留在左面板中,且不考慮選擇的類別
分析:
a. 超鏈接用于立即執(zhí)行搜索,用戶無(wú)需選擇“查詢”按鈕便可查看結(jié)果。
b. 所選超鏈接應(yīng)顯示為選定狀態(tài),以便用戶可以輕松地將其與其他超鏈接區(qū)分開來(lái)。
c. 從多級(jí)列表中選擇鏈接時(shí),最好只顯示層次結(jié)構(gòu)中的當(dāng)前級(jí)別。當(dāng)用戶只想在一個(gè)級(jí)別工作時(shí)顯示所有級(jí)別會(huì)產(chǎn)生額外的混亂。
4. 單選按鈕列表
當(dāng)用戶必須為參數(shù)選擇一個(gè)值時(shí),單選按鈕也可用于顯示值。
eBay在搜索方面以及高級(jí)搜索表單中顯示單選選項(xiàng),用戶可以在其中為參數(shù)選擇單個(gè)選項(xiàng)。
eBay:?jiǎn)芜x選項(xiàng)可用,用戶只能為參數(shù)選擇一個(gè)值
eBay:高級(jí)搜索對(duì)話框?qū)?shù)值顯示為單選按鈕
當(dāng)參數(shù)需要單一選擇時(shí),Linkedin也使用相同的方法。
Linkedin:下拉菜單中的參數(shù)值顯示為單選按鈕
分析:
a. 用戶在進(jìn)行選擇后必須明確執(zhí)行搜索時(shí),可以用單選按鈕。否則,超鏈接是在運(yùn)行時(shí)顯示結(jié)果的更好方法。
5. 視覺圖標(biāo)
像圖像、圖標(biāo)或顏色框這樣的視覺表示用作特定類型參數(shù)的值。
客戶評(píng)論由Amazon顯示為星形圖標(biāo)。
Amazon:標(biāo)志性的客戶評(píng)論
eBay為搜索表單中的顏色選擇提供顏色名稱。
eBay:文本形式的顏色值
但Amazon展示了用于顏色選擇的可視顏色框。
Amazon:顏色列表顯示為顏色框
分析:
a. 視覺提供了一種良好且吸引人的信息呈現(xiàn)方式。如果搜索參數(shù)包含使用視覺效果最佳理解值
b. 使用它們就會(huì)是最佳實(shí)踐。例如,顏色應(yīng)以視覺形式而不是名稱給出。
c. 提供工具提示、圖標(biāo)及視覺效果使其更易于理解是一種很好的方法。
d. 標(biāo)準(zhǔn)圖標(biāo)及視覺效果需要在適用的地方使用,以便用戶輕松地將其聯(lián)系起來(lái)。
6. 滑動(dòng)條
當(dāng)用戶必須從范圍內(nèi)選擇值時(shí),可以使用滑動(dòng)條。
Mango使用滑動(dòng)條顯示價(jià)格范圍,用戶可以拖動(dòng)按鈕進(jìn)行選擇。
Mango滑動(dòng)條顯示價(jià)格的選擇
分析:
a. 滑動(dòng)條可快速了解可用范圍和選定值。
b. 當(dāng)開始和結(jié)束值已知時(shí),應(yīng)使用滑動(dòng)條。
c. 觸摸設(shè)備更加用戶友好,因?yàn)槭褂檬髽?biāo)難以選擇精確值。
三、需要顯示值的數(shù)量
另一個(gè)重要的事是確定參數(shù)顯示值的數(shù)量,以便用戶可以進(jìn)行選擇。
eBay的每個(gè)參數(shù)都會(huì)顯示7-8項(xiàng)目。選擇每個(gè)參數(shù)旁邊的“查看全部”選項(xiàng)會(huì)顯示對(duì)話框內(nèi)的所有值。
eBay:每個(gè)參數(shù)的“查看全部”選項(xiàng),都可以查看對(duì)話框中的完整列表
Amazon使用相同的方法,在搜索方面的參數(shù)顯示為8-10個(gè)值。選擇“查看更多”選項(xiàng)時(shí),可以看到剩余值。但如果計(jì)數(shù)值非常大,所有值都會(huì)在單獨(dú)的頁(yè)面上顯示。
Amazon:“查看更多”和“查看更少”選項(xiàng)可用于顯示和隱藏所有值
Microsoft招聘頁(yè)面在側(cè)邊滑動(dòng)條上顯示的所有值。為用戶方便選擇,他們?cè)诿總€(gè)參數(shù)的頂部提供了一個(gè)搜索框。
Microsoft招聘:所有值都可以在搜索方面滾動(dòng)
分析:
a. 由于值以列表的形式顯示為清單、單選選項(xiàng)和超鏈接。列表中顯示選項(xiàng)數(shù)量的通用準(zhǔn)則適用于此處。
b. 最佳方法是在小于8時(shí)顯示所有值。如果大于8,僅使用“更多”選項(xiàng)顯示常用值。當(dāng)項(xiàng)目數(shù)仍然超出時(shí),在擴(kuò)展列表或?qū)υ捒蛑刑峁┦S囗?xiàng)目。
c. 用滑動(dòng)顯示同一位置的所有項(xiàng)目會(huì)使用戶難以找到所需的數(shù)值。
d. 用值顯示可用項(xiàng)目的計(jì)數(shù)是向用戶提供所要執(zhí)行搜索的項(xiàng)目數(shù)量的一種好方法。
四、如何執(zhí)行搜索
可以使用以下任一方式執(zhí)行搜索:
1. 點(diǎn)擊“搜索”或“確定”按鈕,或按Enter鍵
2. 用戶更改參數(shù)時(shí)運(yùn)行。
Amazon和eBay都是在用戶設(shè)置任何給定選項(xiàng)后執(zhí)行搜索。
Linkedin的搜索是用戶設(shè)置參數(shù)后點(diǎn)擊應(yīng)用按鈕時(shí)執(zhí)行的。
Linkedin:執(zhí)行搜索需求在設(shè)置參數(shù)后按“應(yīng)用”按鈕
分析:
a. 在運(yùn)行時(shí)執(zhí)行搜索為用戶提供愉快簡(jiǎn)單的體驗(yàn),在每次點(diǎn)擊后用戶便可以看到結(jié)果。
b. 按下按鈕時(shí)執(zhí)行搜索時(shí)需要用戶設(shè)置所有參數(shù),單擊按鈕以查看結(jié)果。如果用戶想要在每次更改后查看結(jié)果,則每次更改參數(shù)時(shí)都必須單擊該按鈕。
c. 另外,如果用戶想要回到以前的狀態(tài),他必須恢復(fù)所有更改,況且他很可能已經(jīng)忘記了已定義的選項(xiàng)。
五、如何顯示搜索結(jié)果
在執(zhí)行搜索時(shí),內(nèi)容按照已定義的過(guò)濾器顯示。顯示搜索結(jié)果時(shí)應(yīng)該考慮幾個(gè)因素。
1. 搜索結(jié)果的位置
搜索結(jié)果顯示在定義過(guò)濾器的同一頁(yè)面上,或者打開一個(gè)新頁(yè)面顯示結(jié)果。
Twitter和Linkedin遵循在單獨(dú)頁(yè)面上顯示搜索結(jié)果的慣例。
Twitter在單獨(dú)的屏幕上顯示搜索參數(shù)。單擊“應(yīng)用”按鈕會(huì)打開搜索結(jié)果
Linkedin列出所有搜索參數(shù)顯示擴(kuò)展區(qū)域。單擊“應(yīng)用”按鈕將關(guān)閉此區(qū)域顯示的結(jié)果
Microsoft招聘提供搜索結(jié)果的參數(shù)面板。加載結(jié)果時(shí),僅自動(dòng)刷新結(jié)果區(qū)域。
Microsoft招聘:搜索結(jié)果加載在用戶定義參數(shù)的同一頁(yè)面上
分析:
a. 當(dāng)打開新頁(yè)面顯示搜索結(jié)果時(shí),用戶的所在環(huán)境會(huì)發(fā)生變化,會(huì)感覺像打開了一個(gè)新內(nèi)容。
b. 如果搜索參數(shù)在單獨(dú)的屏幕或?qū)υ捒蛏巷@示,每當(dāng)用戶想要更改參數(shù)時(shí)都必須返回。
c. 僅將結(jié)果區(qū)域重新刷新為Microsoft招聘是一種很好的方法,因?yàn)橛脩魰?huì)強(qiáng)烈感覺到他正在同一頁(yè)面上工作。
2. 搜索進(jìn)度
搜索操作需要一些時(shí)間顯示結(jié)果。在等待期間,顯示關(guān)于搜索功能的進(jìn)展的反饋。
加載結(jié)果時(shí),Amazon會(huì)在頁(yè)面中心顯示加載圖標(biāo)。
Amazon:加載圖標(biāo)顯示搜索結(jié)果正在頁(yè)面中加載
Microsoft招聘的顯示加載圖標(biāo)是提供搜索結(jié)果將在一段時(shí)間內(nèi)顯示的指示。
Microsoft招聘:生成結(jié)果時(shí)會(huì)顯示加載圖標(biāo)
分析:
a. 加載圖標(biāo)是顯示正在加載內(nèi)容的一個(gè)好辦法。
b. 如果在加載結(jié)果時(shí)出現(xiàn)問(wèn)題,應(yīng)以正確的消息形式傳達(dá)給用戶。
3. 布局
搜索結(jié)果以適用于網(wǎng)站或應(yīng)用程序的列表或網(wǎng)格形式顯示。
eBay在列表視圖中顯示結(jié)果,用戶也可將視圖改為網(wǎng)格模式。
eBay:用戶可在列表和網(wǎng)格視圖之間切換查看搜索結(jié)果
Linkedin顯示的搜索結(jié)果將默認(rèn)視圖從經(jīng)典視圖改為拆分視圖。
Linkedin:搜索結(jié)果用拆分視圖和經(jīng)典視圖顯示
分析:
a. 根據(jù)搜索項(xiàng)目類型和用戶需求完美地描述搜索項(xiàng)目的布局。
4. 分頁(yè)與無(wú)限滾動(dòng)
搜索結(jié)果通常包含需要在多個(gè)頁(yè)面上顯示的大內(nèi)容。分頁(yè)或無(wú)限滾動(dòng)用于導(dǎo)航內(nèi)容。
eBay和Microsoft招聘在結(jié)果頁(yè)面的底部分頁(yè)顯示。
eBay:結(jié)果頁(yè)面的分頁(yè)控制
Microsoft招聘:結(jié)果頁(yè)面的分頁(yè)控制
當(dāng)超過(guò)頁(yè)面大小時(shí)Twitter用無(wú)限滾動(dòng)顯示加載的搜索結(jié)果。
Twitter的搜索結(jié)果加載了更多結(jié)果
分析:
a. 無(wú)限滾動(dòng)最適合網(wǎng)站和APP的用戶生成內(nèi)容流,比如:Twitter,F(xiàn)acebook,Pinterest,Instagram。另一方面,分頁(yè)非常適合以目標(biāo)為導(dǎo)向的網(wǎng)站和APP。
b. 當(dāng)用戶自上至下查看結(jié)果時(shí),可能會(huì)在頂部跳過(guò)頁(yè)面導(dǎo)航。所以一個(gè)更加對(duì)用戶友好的方法是在底部顯示分頁(yè)。
5. 應(yīng)用過(guò)濾器列表
搜索結(jié)果顯示了應(yīng)用于生成結(jié)果的過(guò)濾器列表。用戶可以刪除任何應(yīng)用的過(guò)濾器,并相應(yīng)地更新搜索結(jié)果。
eBay在搜索結(jié)果的頂部列出了所有應(yīng)用的過(guò)濾器。用戶可以刪除任何他想要?jiǎng)h除的過(guò)濾器。單擊“全部清除”選項(xiàng)將立即刪除所有過(guò)濾器。
eBay:所有應(yīng)用的過(guò)濾器都列在搜索結(jié)果的頂部。用戶可刪除不再需要的過(guò)濾器
Linkedin在頂部顯示應(yīng)用的過(guò)濾器。由于所有過(guò)濾器前端的用戶界面都不可見,因此“清除”選項(xiàng)會(huì)顯示應(yīng)用過(guò)濾器的數(shù)量。單擊“全部過(guò)濾器”選項(xiàng)時(shí),應(yīng)用過(guò)濾器的詳細(xì)信息將顯示在擴(kuò)展面板中。
Linkedin:應(yīng)用過(guò)濾器列表顯示在頁(yè)面頂部。要查看所有應(yīng)用的過(guò)濾器,用戶單擊“所有過(guò)濾器”選項(xiàng)
分析:
a. 應(yīng)在結(jié)果頁(yè)面上列出所有應(yīng)用的過(guò)濾器,以便用戶可以輕松地將它們與結(jié)果相關(guān)聯(lián)。
b. 如果用戶必須轉(zhuǎn)到其他頁(yè)面才能查看應(yīng)用的過(guò)濾器,則會(huì)向用戶提供斷開連接的行為。
6. 結(jié)果計(jì)數(shù)
結(jié)果計(jì)數(shù)顯示作為搜索結(jié)果生成的項(xiàng)目數(shù)。
Microsoft招聘頁(yè)面顯示頁(yè)面頂部的結(jié)果數(shù)
分析:
a. 結(jié)果計(jì)數(shù)是可幫助用戶了解為應(yīng)用過(guò)濾器生成的結(jié)果數(shù)量,并查看它們所需導(dǎo)航數(shù)量的一種有用信息。
7. 空白結(jié)果
如果搜索結(jié)果不包含任何項(xiàng)目,就需要優(yōu)雅地處理。
eBay顯示空白結(jié)果的消息。但他所顯示的項(xiàng)目更接近標(biāo)準(zhǔn)的搜索條件。
eBay:未找到匹配的結(jié)果
Amazon顯示空結(jié)果的消息。所有內(nèi)容都顯示在結(jié)果區(qū)域中,表示未應(yīng)用過(guò)濾器。
Amazon:未找到匹配的結(jié)果
Linkedin因?yàn)闆]有找到結(jié)果,會(huì)顯示一條供用戶再次檢查標(biāo)準(zhǔn)定義的指令。
Linkedin:未找到匹配的結(jié)果
Microsoft招聘顯示零結(jié)果消息。它沒有對(duì)用戶顯示任何建議列表或說(shuō)明。
Microsoft招聘:未找到匹配的結(jié)果
分析:
a. 為用戶提供一些回應(yīng)空白搜索結(jié)果的建議。
b. eBay似乎是最好的例子。它會(huì)給出的標(biāo)準(zhǔn)結(jié)果和幾個(gè)已定義的參數(shù)相匹配。用戶更改一個(gè)或多個(gè)參數(shù)查看更新的結(jié)果會(huì)更容易。
六、過(guò)濾搜索結(jié)果
搜索結(jié)果通常包含很多用戶信息。最好提供一些用戶可以在結(jié)果上應(yīng)用的邏輯過(guò)濾器。
排序選項(xiàng)幫助用戶按所需順序?qū)Y(jié)果進(jìn)行排序。
用戶還可以在首選布局中更改查看結(jié)果的視圖方式。
eBay提供排序,更改視圖,過(guò)濾和分組選項(xiàng)以縮小搜索結(jié)果范圍。
eBay:提供排序,更改視圖,過(guò)濾,分組等選項(xiàng)以縮小搜索結(jié)果范圍
Twitter搜索結(jié)果包含頂部的類型明智過(guò)濾器和左側(cè)面板中的屬性明智搜索過(guò)濾器。這些可以幫助用戶進(jìn)一步優(yōu)化搜索結(jié)果。
Twitter:搜索結(jié)果包含過(guò)濾器和搜索選項(xiàng),以優(yōu)化搜索結(jié)果
分析:
a. 過(guò)濾器可用于進(jìn)一步限制結(jié)果的數(shù)量。
b. 但在結(jié)果頁(yè)面上提供大量過(guò)濾器并不是一個(gè)好想法,這會(huì)讓用戶對(duì)結(jié)果的搜索感到困難。確定一些幫助用戶過(guò)濾結(jié)果的邏輯過(guò)濾器。
七、如何保存并訪問(wèn)過(guò)濾器
保存應(yīng)用的搜索過(guò)濾器,以便可以用于以后的搜索是一種常見做法。也可以選擇已保存的過(guò)濾器并進(jìn)行更改以創(chuàng)建新過(guò)濾器。
eBay中的搜索結(jié)果和用戶點(diǎn)擊“保存此搜索”選項(xiàng),保存此過(guò)濾器。使用基于定義的過(guò)濾器的自動(dòng)生成的名稱保存過(guò)濾器。填充的心形圖標(biāo)和“已保存”文本顯示已保存過(guò)濾器。
eBay:用戶可以使用“保存此搜索”選項(xiàng)保存已定義的參數(shù)
eBay:保存已定義的參數(shù)
用戶可以通過(guò)轉(zhuǎn)到“My eBay”設(shè)置來(lái)訪問(wèn)此保存的過(guò)濾器。過(guò)濾器列表提供了用戶可以在過(guò)濾器上應(yīng)用的一些功能:排序,編輯搜索過(guò)濾器,查看結(jié)果。
eBay:可以根據(jù)要求執(zhí)行和更新已保存的搜索
Jira在搜索頁(yè)面上提供了“另存為”選項(xiàng),用戶可以單擊該選項(xiàng),命名搜索過(guò)濾器并保存。保存的過(guò)濾器顯示在左側(cè)面板中,用戶只需單擊過(guò)濾器即可執(zhí)行。
可以對(duì)選定的過(guò)濾器應(yīng)用不同的功能,包括重命名、復(fù)制和刪除。
Jira:保存過(guò)濾器
Jira:左側(cè)面板中顯示保存的過(guò)濾器
Twitter在搜索結(jié)果頁(yè)面的下拉列表中提供“保存過(guò)濾器”選項(xiàng)。過(guò)濾器以默認(rèn)名稱保存,可以再次單擊菜單中的搜索框進(jìn)行訪問(wèn)。
Twitter:使用下拉菜單中的選項(xiàng)保存搜索
Twitter:在搜索菜單中顯示保存的過(guò)濾器
分析:
a. 應(yīng)在高級(jí)搜索頁(yè)面上提供保存搜索的選項(xiàng),方便用戶可以定義過(guò)濾器并對(duì)其進(jìn)行保存。
b. 用戶應(yīng)能輕松訪問(wèn)過(guò)濾器并在其上執(zhí)行不同的功能,如執(zhí)行、編輯或刪除。
八、如何退出搜索模式
提供一個(gè)退出選項(xiàng)以便用戶返回到啟動(dòng)搜索的屏幕。
eBay,Microsoft招聘,Linkedin都提供清除所有應(yīng)用過(guò)濾器的“清除”選項(xiàng),此為退出搜索模式。
分析:
a. 在高級(jí)搜索頁(yè)面上需要顯示簡(jiǎn)潔易懂的選項(xiàng)
九、技術(shù)用戶的高級(jí)模式
查詢式搜索適用于技術(shù)用戶。
用戶可以在搜索框中編寫復(fù)雜的SQL查詢(結(jié)構(gòu)化查詢語(yǔ)言)。
Microsoft Outlook提供查詢式搜索。但當(dāng)用戶輸入查詢參數(shù)時(shí),無(wú)法看到任何幫助。
Microsoft Outlook提供查詢式搜索
Jira是提供即時(shí)幫助的高級(jí)搜索選項(xiàng)一個(gè)很棒的例子。
當(dāng)用戶編寫搜索查詢時(shí),Jira提供即時(shí)幫助
當(dāng)用戶編寫搜索查詢時(shí),Jira提供即時(shí)幫助
當(dāng)用戶編寫搜索查詢時(shí),Jira提供即時(shí)幫助
分析:
a. 當(dāng)用戶編寫查詢時(shí),需要提供正確即時(shí)的幫助。
b. 與用戶的顯式執(zhí)行操作相比,查詢格式的運(yùn)行時(shí)評(píng)估更有幫助。
結(jié)論
提供執(zhí)行高級(jí)搜索的簡(jiǎn)化體驗(yàn)是一個(gè)挑戰(zhàn)??赏ㄟ^(guò)在設(shè)計(jì)高級(jí)搜索屏幕時(shí)遵循最佳實(shí)踐來(lái)實(shí)現(xiàn)。
原文地址:https://uxplanet.org/how-to-improve-advanced-search-ux-450df698004c
原文作者:Saadia Minhas
譯者:SKYUI
全站高品質(zhì)素材免費(fèi)下載!