高級搜索設(shè)計(jì)：如何提升用戶體驗(yàn)？

1 評論 19908 瀏覽 68 收藏 32 分鐘

搜索是一種從巨大內(nèi)容中查找所需信息的方法?；A(chǔ)搜索是用于查找項(xiàng)目的單個(gè)參數(shù)（通常是名稱）。高級搜索是一種通過指定包含多個(gè)參數(shù)的條件從大型項(xiàng)目列表中查找內(nèi)容的方法。我們來看一些示例并提取最佳實(shí)踐，這些實(shí)踐會(huì)幫助你設(shè)計(jì)簡單有效的用戶體驗(yàn)，在設(shè)計(jì)產(chǎn)品時(shí)執(zhí)行高級搜索。

如何進(jìn)行高級搜索？

高級搜索選項(xiàng)通常位于用戶界面上的基本搜索框附近，便于用戶可以輕松找到。

用戶定義搜索過濾器并將其應(yīng)用在大數(shù)據(jù)上以縮小其范圍。通過添加不同的參數(shù)來創(chuàng)建過濾器。例如，搜索的內(nèi)容列表，參數(shù)可以是名稱，ID，類型，狀態(tài)，創(chuàng)建日期，作者等。用戶選擇參數(shù)并定義它的價(jià)值。一個(gè)參數(shù)可以有一組用于選擇的值，例如類型可以是圖片，文檔，PDF等。

為特定標(biāo)準(zhǔn)定義的多個(gè)參數(shù)構(gòu)成過濾器。用戶可以定義并保存過濾器以供以后使用。執(zhí)行搜索時(shí)，顯示結(jié)果，用戶可以查看并進(jìn)一步縮小這些結(jié)果的范圍。

這就是高級搜索的工作原理。

下面介紹了一些用于高級搜索用戶界面定義簡單直觀的用戶體驗(yàn)的案例和最佳實(shí)踐。

高級搜索的最佳實(shí)踐：

一、如何添加搜索參數(shù)

二、如何選擇參數(shù)值

三、需要顯示多少個(gè)值

四、如何執(zhí)行搜索

五、如何顯示搜索結(jié)果

六、過濾和搜索結(jié)果

七、如何保存和訪問過濾器

八、如何退出搜索模式

九、技術(shù)用戶的高級模式

一、如何添加搜索參數(shù)

搜索參數(shù)和參數(shù)值可以以不同方式顯示。

1. 前端用戶界面上可用的所有參數(shù)

高級搜索頁面在前端用戶界面上顯示所有可用參數(shù)，用戶無需顯式添加參數(shù)。他只需根據(jù)所需參數(shù)選擇值即可。這稱為分面搜索。

Microsoft的職業(yè)頁面在左側(cè)面板中顯示搜索參數(shù)。默認(rèn)情況下，所有參數(shù)都處于折疊狀態(tài)，用戶可以逐個(gè)展開它們并選擇值。

Microsoft的職業(yè)頁面在左側(cè)面板中顯示搜索參數(shù)（構(gòu)面）

分析：

  • 在前端UI上顯示所有參數(shù)是一種用戶友好的方法，用戶可以輕松掃描它們。
  • 適用于大量內(nèi)容。
  • 唯一的缺點(diǎn)是需要足夠的空間來顯示所有參數(shù)，有時(shí)它會(huì)給用戶界面造成混亂。

2. 在前端用戶界面上使用常用的參數(shù)

此方法在前端用戶界面上顯示常用的搜索參數(shù)。參數(shù)顯示在下拉菜單中，用戶可以從菜單中選擇所需的參數(shù)。

每次重復(fù)相同的步驟添加參數(shù)。

ira在用戶界面上顯示常用參數(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在對話框中顯示詳細(xì)參數(shù)。

eBay用一個(gè)對話框列出所有參數(shù)

分析：

  • 這種方法適用于大多數(shù)常用參數(shù)用于執(zhí)行搜索的情況。用戶不再擔(dān)心不需要的細(xì)節(jié)。
  • 在用戶界面上僅顯示少量參數(shù)需要更少的空間，因此在用戶界面上的混亂更少。
  • 每用戶添加參數(shù)都需要更多次點(diǎn)擊。
  • 對于復(fù)雜內(nèi)容不好。

二、如何選擇參數(shù)值

有不同的方法可以根據(jù)參數(shù)顯示值?？梢赃x擇最適合當(dāng)前環(huán)境和要求的方法。

1. 輸入框

如果用戶要輸入?yún)?shù)，則會(huì)顯示一個(gè)簡單的文本框。

Twitter顯示一個(gè)搜索表單，用于定義包含參數(shù)輸入框的搜索條件，以便用戶可以輸入所需的值。

Twitter高級搜索表單

分析：

  • 當(dāng)沒有可用于參數(shù)的定義值時(shí)，使用輸入框。
  • 有關(guān)所需輸入的類型和格式的占位符文本對用戶很有幫助。
  • 如果輸入框可以包含多個(gè)值，則應(yīng)向用戶明確指示。例如，諸如“添加由逗號分隔的多個(gè)值”之類的幫助文本很有用。

2. 多選框列表

如果用戶可以為所選參數(shù)選擇多個(gè)選項(xiàng)，就會(huì)顯示多選框列表。此多選框列表可以作為單獨(dú)的列表提供，也可以封裝在下拉菜單中節(jié)省空間。

當(dāng)用戶展開參數(shù)名稱時(shí)，Microsoft招聘搜索頁面會(huì)顯示參數(shù)的可用選項(xiàng)。此外，可以在下圖中看到輸入框可用于在值內(nèi)搜索。

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

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

Linkedin搜索參數(shù)顯示值作為下拉菜單多選框列表

分析：

  • 如果用戶必須從多個(gè)選項(xiàng)中進(jìn)行選擇，多選框列表則是一個(gè)不錯(cuò)的選擇。
  • 多選框列表是一個(gè)用戶友好的控件，因?yàn)樗峁┝诉x擇和取消選擇值的清晰體驗(yàn)。
  • 應(yīng)該取消選中默認(rèn)狀態(tài)，因?yàn)檫x擇所需選項(xiàng)對用戶來說更方便，而不是取消選擇他們不想要的內(nèi)容。
  • 在下拉菜單中提供多選框列表可節(jié)省空間，但需要更多點(diǎn)擊。此外，在下拉框中顯示多個(gè)選定選項(xiàng)是一項(xiàng)挑戰(zhàn)。

3. 超鏈接

很少有搜索參數(shù)需要給定值列表的單個(gè)輸入。超鏈接用于此目的。

由于超鏈接具有多個(gè)層級，因此有時(shí)僅在用戶界面上顯示當(dāng)前級別。

Amazon使用選擇性隱藏的父級超鏈接方法?！安块T”是顯示部門列表的主要級別鏈接。當(dāng)用戶選擇部門時(shí)，Amazon隱藏了指向其他部門的鏈接。這意味著用戶現(xiàn)在只能關(guān)注所選部門的詳細(xì)信息。

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

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

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

在eBay搜索的任何等級中所有類別都保留在左面板中，且不考慮選擇的類別

分析：

  • 超鏈接用于立即執(zhí)行搜索，用戶無需選擇“查詢”按鈕便可查看結(jié)果。
  • 所選超鏈接應(yīng)顯示為選定狀態(tài)，以便用戶可以輕松地將其與其他超鏈接區(qū)分開來。
  • 從多級列表中選擇鏈接時(shí)，最好只顯示層次結(jié)構(gòu)中的當(dāng)前級別。當(dāng)用戶只想在一個(gè)級別工作時(shí)顯示所有級別會(huì)產(chǎn)生額外的混亂。

4. 單選按鈕列表

當(dāng)用戶必須為參數(shù)選擇一個(gè)值時(shí)，單選按鈕也可用于顯示值。

eBay在搜索方面以及高級搜索表單中顯示單選選項(xiàng)，用戶可以在其中為參數(shù)選擇單個(gè)選項(xiàng)。

eBay：單選選項(xiàng)可用，用戶只能為參數(shù)選擇一個(gè)值

eBay：高級搜索對話框?qū)?shù)值顯示為單選按鈕

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

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

分析：

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

5. 視覺圖標(biāo)

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

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

Amazon：標(biāo)志性的客戶評論

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

eBay：文本形式的顏色值

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

Amazon：顏色列表顯示為顏色框

分析：

  • 視覺提供了一種良好且吸引人的信息呈現(xiàn)方式。如果搜索參數(shù)包含使用視覺效果最佳理解值，使用它們就會(huì)是最佳實(shí)踐。例如，顏色應(yīng)以視覺形式而不是名稱給出。
  • 提供工具提示、圖標(biāo)及視覺效果使其更易于理解是一種很好的方法。
  • 標(biāo)準(zhǔn)圖標(biāo)及視覺效果需要在適用的地方使用，以便用戶輕松地將其聯(lián)系起來。

6. 滑動(dòng)條

當(dāng)用戶必須從范圍內(nèi)選擇值時(shí)，可以使用滑動(dòng)條。

Mango使用滑動(dòng)條顯示價(jià)格范圍，用戶可以拖動(dòng)按鈕進(jìn)行選擇。

Mango滑動(dòng)條顯示價(jià)格的選擇

分析：

  • 滑動(dòng)條可快速了解可用范圍和選定值。
  • 當(dāng)開始和結(jié)束值已知時(shí)，應(yīng)使用滑動(dòng)條。
  • 觸摸設(shè)備更加用戶友好，因?yàn)槭褂檬髽?biāo)難以選擇精確值。

三、需要顯示值的數(shù)量

另一個(gè)重要的事是確定參數(shù)顯示值的數(shù)量，以便用戶可以進(jìn)行選擇。

eBay的每個(gè)參數(shù)都會(huì)顯示7-8項(xiàng)目。選擇每個(gè)參數(shù)旁邊的“查看全部”選項(xiàng)會(huì)顯示對話框內(nèi)的所有值。

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

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

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

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

Microsoft招聘：所有值都可以在搜索方面滾動(dòng)。

分析：

  • 由于值以列表的形式顯示為清單、單選選項(xiàng)和超鏈接。列表中顯示選項(xiàng)數(shù)量的通用準(zhǔn)則適用于此處。
  • 最佳方法是在小于8時(shí)顯示所有值。如果大于8，僅使用“更多”選項(xiàng)顯示常用值。當(dāng)項(xiàng)目數(shù)仍然超出時(shí)，在擴(kuò)展列表或?qū)υ捒蛑刑峁┦Ｓ囗?xiàng)目。
  • 用滑動(dòng)顯示同一位置的所有項(xiàng)目會(huì)使用戶難以找到所需的數(shù)值。
  • 用值顯示可用項(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)用”按鈕。

分析：

  • 在運(yùn)行時(shí)執(zhí)行搜索為用戶提供愉快簡單的體驗(yàn)，在每次點(diǎn)擊后用戶便可以看到結(jié)果。
  • 按下按鈕時(shí)執(zhí)行搜索時(shí)需要用戶設(shè)置所有參數(shù)，單擊按鈕以查看結(jié)果。如果用戶想要在每次更改后查看結(jié)果，則每次更改參數(shù)時(shí)都必須單擊該按鈕。
  • 另外，如果用戶想要回到以前的狀態(tài)，他必須恢復(fù)所有更改，況且他很可能已經(jīng)忘記了已定義的選項(xiàng)。

五、如何顯示搜索結(jié)果

在執(zhí)行搜索時(shí)，內(nèi)容按照已定義的過濾器顯示。顯示搜索結(jié)果時(shí)應(yīng)該考慮幾個(gè)因素。

1. 搜索結(jié)果的位置

搜索結(jié)果顯示在定義過濾器的同一頁面上，或者打開一個(gè)新頁面顯示結(jié)果。

Twitter和Linkedin遵循在單獨(dú)頁面上顯示搜索結(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ù)的同一頁面上。

分析：

  • 當(dāng)打開新頁面顯示搜索結(jié)果時(shí)，用戶的所在環(huán)境會(huì)發(fā)生變化，會(huì)感覺像打開了一個(gè)新內(nèi)容。
  • 如果搜索參數(shù)在單獨(dú)的屏幕或?qū)υ捒蛏巷@示，每當(dāng)用戶想要更改參數(shù)時(shí)都必須返回。
  • 僅將結(jié)果區(qū)域重新刷新為Microsoft招聘是一種很好的方法，因?yàn)橛脩魰?huì)強(qiáng)烈感覺到他正在同一頁面上工作。

2. 搜索進(jìn)度

搜索操作需要一些時(shí)間顯示結(jié)果。在等待期間，顯示關(guān)于搜索功能的進(jìn)展的反饋。

加載結(jié)果時(shí)，Amazon會(huì)在頁面中心顯示加載圖標(biāo)。

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

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

Microsoft招聘：生成結(jié)果時(shí)會(huì)顯示加載圖標(biāo)。

分析：

  • 加載圖標(biāo)是顯示正在加載內(nèi)容的一個(gè)好辦法。
  • 如果在加載結(jié)果時(shí)出現(xià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)典視圖顯示。

分析：

根據(jù)搜索項(xiàng)目類型和用戶需求完美地描述搜索項(xiàng)目的布局。

4.分頁與無限滾動(dòng)

搜索結(jié)果通常包含需要在多個(gè)頁面上顯示的大內(nèi)容。分頁或無限滾動(dòng)用于導(dǎo)航內(nèi)容。

eBay和Microsoft招聘在結(jié)果頁面的底部分頁顯示。

eBay：結(jié)果頁面的分頁控制。

Microsoft招聘：結(jié)果頁面的分頁控制。

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

Twitter的搜索結(jié)果加載了更多結(jié)果。

分析：

  • 無限滾動(dòng)最適合網(wǎng)站和APP的用戶生成內(nèi)容流，比如：Twitter，F(xiàn)acebook，Pinterest，Instagram。另一方面，分頁非常適合以目標(biāo)為導(dǎo)向的網(wǎng)站和APP。
  • 當(dāng)用戶自上至下查看結(jié)果時(shí)，可能會(huì)在頂部跳過頁面導(dǎo)航。所以一個(gè)更加對用戶友好的方法是在底部顯示分頁。

5. 應(yīng)用過濾器列表

搜索結(jié)果顯示了應(yīng)用于生成結(jié)果的過濾器列表。用戶可以刪除任何應(yīng)用的過濾器，并相應(yīng)地更新搜索結(jié)果。

eBay在搜索結(jié)果的頂部列出了所有應(yīng)用的過濾器。用戶可以刪除任何他想要?jiǎng)h除的過濾器。單擊“全部清除”選項(xiàng)將立即刪除所有過濾器。

eBay：所有應(yīng)用的過濾器都列在搜索結(jié)果的頂部。用戶可刪除不再需要的過濾器。

Linkedin在頂部顯示應(yīng)用的過濾器。由于所有過濾器前端的用戶界面都不可見，因此“清除”選項(xiàng)會(huì)顯示應(yīng)用過濾器的數(shù)量。單擊“全部過濾器”選項(xiàng)時(shí)，應(yīng)用過濾器的詳細(xì)信息將顯示在擴(kuò)展面板中。

Linkedin：應(yīng)用過濾器列表顯示在頁面頂部。要查看所有應(yīng)用的過濾器，用戶單擊“所有過濾器”選項(xiàng)。

分析：

  • 應(yīng)在結(jié)果頁面上列出所有應(yīng)用的過濾器，以便用戶可以輕松地將它們與結(jié)果相關(guān)聯(lián)。
  • 如果用戶必須轉(zhuǎn)到其他頁面才能查看應(yīng)用的過濾器，則會(huì)向用戶提供斷開連接的行為。

6. 結(jié)果計(jì)數(shù)

結(jié)果計(jì)數(shù)顯示作為搜索結(jié)果生成的項(xiàng)目數(shù)。

Microsoft招聘頁面顯示頁面頂部的結(jié)果數(shù)。

分析：

結(jié)果計(jì)數(shù)是可幫助用戶了解為應(yīng)用過濾器生成的結(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)用過濾器。

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

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

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

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

Microsoft招聘：未找到匹配的結(jié)果。

分析：

  • 為用戶提供一些回應(yīng)空白搜索結(jié)果的建議。
  • eBay似乎是最好的例子。它會(huì)給出的標(biāo)準(zhǔn)結(jié)果和幾個(gè)已定義的參數(shù)相匹配。用戶更改一個(gè)或多個(gè)參數(shù)查看更新的結(jié)果會(huì)更容易。

六、過濾搜索結(jié)果

搜索結(jié)果通常包含很多用戶信息。最好提供一些用戶可以在結(jié)果上應(yīng)用的邏輯過濾器。

排序選項(xiàng)幫助用戶按所需順序?qū)Y(jié)果進(jìn)行排序。

用戶還可以在首選布局中更改查看結(jié)果的視圖方式。

eBay提供排序，更改視圖，過濾和分組選項(xiàng)以縮小搜索結(jié)果范圍。

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

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

Twitter：搜索結(jié)果包含過濾器和搜索選項(xiàng)，以優(yōu)化搜索結(jié)果。

分析：

  • 過濾器可用于進(jìn)一步限制結(jié)果的數(shù)量。
  • 但在結(jié)果頁面上提供大量過濾器并不是一個(gè)好想法，這會(huì)讓用戶對結(jié)果的搜索感到困難。確定一些幫助用戶過濾結(jié)果的邏輯過濾器。

七、如何保存并訪問過濾器

保存應(yīng)用的搜索過濾器，以便可以用于以后的搜索是一種常見做法。也可以選擇已保存的過濾器并進(jìn)行更改以創(chuàng)建新過濾器。

eBay中的搜索結(jié)果和用戶點(diǎn)擊“保存此搜索”選項(xiàng)，保存此過濾器。使用基于定義的過濾器的自動(dòng)生成的名稱保存過濾器。填充的心形圖標(biāo)和“已保存”文本顯示已保存過濾器。

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

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

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

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

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

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

Jira：保存過濾器。

Jira：左側(cè)面板中顯示保存的過濾器。

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

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

Twitter：在搜索菜單中顯示保存的過濾器。

分析：

  • 應(yīng)在高級搜索頁面上提供保存搜索的選項(xiàng)，方便用戶可以定義過濾器并對其進(jìn)行保存。
  • 用戶應(yīng)能輕松訪問過濾器并在其上執(zhí)行不同的功能，如執(zhí)行、編輯或刪除。

八、如何退出搜索模式

提供一個(gè)退出選項(xiàng)以便用戶返回到啟動(dòng)搜索的屏幕。

eBay，Microsoft招聘，Linkedin都提供清除所有應(yīng)用過濾器的“清除”選項(xiàng)，此為退出搜索模式。

分析：

在高級搜索頁面上需要顯示簡潔易懂的選項(xiàng)

九、技術(shù)用戶的高級模式

查詢式搜索適用于技術(shù)用戶。

用戶可以在搜索框中編寫復(fù)雜的SQL查詢（結(jié)構(gòu)化查詢語言）。

Microsoft Outlook提供查詢式搜索。但當(dāng)用戶輸入查詢參數(shù)時(shí)，無法看到任何幫助。

Microsoft Outlook提供查詢式搜索。

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

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

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

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

分析：

  • 當(dāng)用戶編寫查詢時(shí)，需要提供正確即時(shí)的幫助。
  • 與用戶的顯式執(zhí)行操作相比，查詢格式的運(yùn)行時(shí)評估更有幫助。

結(jié)論

提供執(zhí)行高級搜索的簡化體驗(yàn)是一個(gè)挑戰(zhàn)?？赏ㄟ^在設(shè)計(jì)高級搜索屏幕時(shí)遵循最佳實(shí)踐來實(shí)現(xiàn)。

 

原文地址：https://uxplanet.org/how-to-improve-advanced-search-ux-450df698004c

原文作者：Saadia Minhas（用戶體驗(yàn)設(shè)計(jì)的熱衷者）

譯者：SKYUI

本文由 @SKYUI 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels ，基于 CC0 協(xié)議

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
SKYUI
中國第一家專業(yè)用戶體驗(yàn)設(shè)計(jì)公司
9篇作品 118573總閱讀量
06-0315951 瀏覽
產(chǎn)品原型設(shè)計(jì)的思考過程
08-233922 瀏覽
組件詳解｜日歷日期選擇器 Calendar date picker
02-102179 瀏覽
Google 版 ChatGPT「翻車」，中國公司紛紛跟進(jìn)，它們急什么？
09-222231 瀏覽
7天搞定小報(bào)童800付費(fèi)訂閱，小IP知識付費(fèi)產(chǎn)品從0-1路徑全解析
03-244045 瀏覽
支付寶和微信的第二次對標(biāo)
評論
評論請登錄

  1. 受益匪淺，謝謝

    來自北京 回復(fù)