如何提升“高級(jí)搜索”的用戶體驗(yàn)?

什么是高級(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è)展開它們并選擇值。

Image title

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ù)。

Image title

Jira在頂部顯示常用的搜索參數(shù)

單擊“更多”選項(xiàng)會(huì)顯示一個(gè)菜單,其中列出可添加到搜索條件的可用參數(shù)。每次用戶想要添加參數(shù)時(shí),都會(huì)轉(zhuǎn)到“更多”并從列表中選擇所需的選項(xiàng)。

Image title

單擊“更多”將顯示列出可用參數(shù)的菜單

Linkedin在擴(kuò)展面板中顯示詳細(xì)參數(shù)。

Image title

Linkedin顯示擴(kuò)展面板并列出所有參數(shù)

eBay在對(duì)話框中顯示詳細(xì)參數(shù)。

Image title

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ù)輸入框的搜索條件,以便用戶可以輸入所需的值。

Image title

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)搜索。

Image title

在Microsoft招聘搜索頁(yè)面上,搜索參數(shù)值在多選框列表中顯示

Linkedin工作搜索以多選框列表的形式在下拉菜單中顯示所選參數(shù)的選項(xiàng)。

Image title

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ì)信息。

Image title

Amazon搜索作為超鏈接在左側(cè)面板中顯示部門

Image title

選擇部門鏈接僅顯示子鏈接并隱藏其他部門

eBay不隱藏任何內(nèi)容,無(wú)論是否選擇了鏈接,層次結(jié)構(gòu)中的所有鏈接仍然可見且可訪問(wèn)。

Image title

在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)。

Image title

eBay:?jiǎn)芜x選項(xiàng)可用,用戶只能為參數(shù)選擇一個(gè)值

Image title

eBay:高級(jí)搜索對(duì)話框?qū)?shù)值顯示為單選按鈕

當(dāng)參數(shù)需要單一選擇時(shí),Linkedin也使用相同的方法。

Image title

Linkedin:下拉菜單中的參數(shù)值顯示為單選按鈕

分析:

a. 用戶在進(jìn)行選擇后必須明確執(zhí)行搜索時(shí),可以用單選按鈕。否則,超鏈接是在運(yùn)行時(shí)顯示結(jié)果的更好方法。

5. 視覺圖標(biāo)

像圖像、圖標(biāo)或顏色框這樣的視覺表示用作特定類型參數(shù)的值。

客戶評(píng)論由Amazon顯示為星形圖標(biāo)。

Image title

Amazon:標(biāo)志性的客戶評(píng)論

eBay為搜索表單中的顏色選擇提供顏色名稱。

Image title

eBay:文本形式的顏色值

Amazon展示了用于顏色選擇的可視顏色框。

Image title

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)行選擇。

Image title

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)的所有值。

Image title

eBay:每個(gè)參數(shù)的“查看全部”選項(xiàng),都可以查看對(duì)話框中的完整列表

Amazon使用相同的方法,在搜索方面的參數(shù)顯示為8-10個(gè)值。選擇“查看更多”選項(xiàng)時(shí),可以看到剩余值。但如果計(jì)數(shù)值非常大,所有值都會(huì)在單獨(dú)的頁(yè)面上顯示。

Image title

Amazon:“查看更多”和“查看更少”選項(xiàng)可用于顯示和隱藏所有值

Microsoft招聘頁(yè)面在側(cè)邊滑動(dòng)條上顯示的所有值。為用戶方便選擇,他們?cè)诿總€(gè)參數(shù)的頂部提供了一個(gè)搜索框。

Image title

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)行。

AmazoneBay都是在用戶設(shè)置任何給定選項(xiàng)后執(zhí)行搜索。

Linkedin的搜索是用戶設(shè)置參數(shù)后點(diǎn)擊應(yīng)用按鈕時(shí)執(zhí)行的。

Image title

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é)果。

TwitterLinkedin遵循在單獨(dú)頁(yè)面上顯示搜索結(jié)果的慣例。

Image title

Twitter在單獨(dú)的屏幕上顯示搜索參數(shù)。單擊“應(yīng)用”按鈕會(huì)打開搜索結(jié)果

Image title

Linkedin列出所有搜索參數(shù)顯示擴(kuò)展區(qū)域。單擊“應(yīng)用”按鈕將關(guān)閉此區(qū)域顯示的結(jié)果

Microsoft招聘提供搜索結(jié)果的參數(shù)面板。加載結(jié)果時(shí),僅自動(dòng)刷新結(jié)果區(qū)域。

Image title

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)。

Image title

Amazon:加載圖標(biāo)顯示搜索結(jié)果正在頁(yè)面中加載

Microsoft招聘的顯示加載圖標(biāo)是提供搜索結(jié)果將在一段時(shí)間內(nèi)顯示的指示。

Image title

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)格模式。

Image title

eBay:用戶可在列表和網(wǎng)格視圖之間切換查看搜索結(jié)果

Linkedin顯示的搜索結(jié)果將默認(rèn)視圖從經(jīng)典視圖改為拆分視圖。

Image title

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)容。

eBayMicrosoft招聘在結(jié)果頁(yè)面的底部分頁(yè)顯示。

Image title

eBay:結(jié)果頁(yè)面的分頁(yè)控制

Image title

Microsoft招聘:結(jié)果頁(yè)面的分頁(yè)控制

當(dāng)超過(guò)頁(yè)面大小時(shí)Twitter用無(wú)限滾動(dòng)顯示加載的搜索結(jié)果。

Image title

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ò)濾器。

Image title

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ò)展面板中。

Image title

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ù)。

Image title

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)的搜索條件。

Image title

eBay:未找到匹配的結(jié)果

Amazon顯示空結(jié)果的消息。所有內(nèi)容都顯示在結(jié)果區(qū)域中,表示未應(yīng)用過(guò)濾器。

Image title

Amazon:未找到匹配的結(jié)果

Linkedin因?yàn)闆]有找到結(jié)果,會(huì)顯示一條供用戶再次檢查標(biāo)準(zhǔn)定義的指令。

Image title

Linkedin:未找到匹配的結(jié)果

Microsoft招聘顯示零結(jié)果消息。它沒有對(duì)用戶顯示任何建議列表或說(shuō)明。

Image title

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é)果范圍。

Image title

eBay:提供排序,更改視圖,過(guò)濾,分組等選項(xiàng)以縮小搜索結(jié)果范圍

Twitter搜索結(jié)果包含頂部的類型明智過(guò)濾器和左側(cè)面板中的屬性明智搜索過(guò)濾器。這些可以幫助用戶進(jìn)一步優(yōu)化搜索結(jié)果。

Image title

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ò)濾器。

Image title

eBay:用戶可以使用“保存此搜索”選項(xiàng)保存已定義的參數(shù)

Image title

eBay:保存已定義的參數(shù)

用戶可以通過(guò)轉(zhuǎn)到“My eBay”設(shè)置來(lái)訪問(wèn)此保存的過(guò)濾器。過(guò)濾器列表提供了用戶可以在過(guò)濾器上應(yīng)用的一些功能:排序,編輯搜索過(guò)濾器,查看結(jié)果。

Image title

eBay:可以根據(jù)要求執(zhí)行和更新已保存的搜索

Jira在搜索頁(yè)面上提供了“另存為”選項(xiàng),用戶可以單擊該選項(xiàng),命名搜索過(guò)濾器并保存。保存的過(guò)濾器顯示在左側(cè)面板中,用戶只需單擊過(guò)濾器即可執(zhí)行。

可以對(duì)選定的過(guò)濾器應(yīng)用不同的功能,包括重命名、復(fù)制和刪除。

Image title

Jira:保存過(guò)濾器

Image title

Jira:左側(cè)面板中顯示保存的過(guò)濾器

Twitter在搜索結(jié)果頁(yè)面的下拉列表中提供“保存過(guò)濾器”選項(xiàng)。過(guò)濾器以默認(rèn)名稱保存,可以再次單擊菜單中的搜索框進(jìn)行訪問(wèn)。

Image title

Twitter:使用下拉菜單中的選項(xiàng)保存搜索

Image title

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ú)法看到任何幫助。

Image title

Microsoft Outlook提供查詢式搜索

Jira是提供即時(shí)幫助的高級(jí)搜索選項(xiàng)一個(gè)很棒的例子。

Image title

當(dāng)用戶編寫搜索查詢時(shí),Jira提供即時(shí)幫助

Image title

Image title

當(dāng)用戶編寫搜索查詢時(shí),Jira提供即時(shí)幫助

Image title

當(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)下載!