注冊 | 登陸
您的位置:阿里西西 > 前端技術 > 界面設計 > 詳細內容

提升網站高級搜索功能的用戶體驗經驗分享

  稿源:本站整理   2018-10-04   點擊:   撤稿糾錯
提供執行高級搜索的簡化體驗是一個挑戰。可通過在設計高級搜索屏幕時遵循最佳實踐來實現。

阿里西西web開發網為大家整理了這篇提升網站高級搜索功能的用戶體驗經驗分享,如果這篇文章在您的工作或學習中有幫助,歡迎常回來看看哦,更多精彩的教程請訪問我們的主頁,以下是教程瀏覽:

什么是高級搜索?

搜索是一種從巨大內容中查找所需信息的方法。基礎搜索是用于查找項目的單個參數(通常是名稱)。高級搜索是一種通過指定包含多個參數的條件從大型項目列表中查找內容的方法。

我們來看一些示例并提取最佳實踐,這些實踐會幫助你設計簡單有效的用戶體驗,在設計產品時執行高級搜索。

如何進行高級搜索?

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

用戶定義搜索過濾器并將其應用在大數據上以縮小其范圍。通過添加不同的參數來創建過濾器。例如,搜索的內容列表,參數可以是名稱,ID,類型,狀態,創建日期,作者等。用戶選擇參數并定義它的價值。一個參數可以有一組用于選擇的值,例如類型可以是圖片,文檔,PDF等。

為特定標準定義的多個參數構成過濾器。用戶可以定義并保存過濾器以供以后使用。執行搜索時,顯示結果,用戶可以查看并進一步縮小這些結果的范圍。

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

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

一、如何添加搜索參數

搜索參數和參數值可以以不同方式顯示。

1. 前端用戶界面上可用的所有參數

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

Microsoft招聘頁面在左側面板中顯示搜索參數。默認情況下,所有參數都處于折疊狀態,用戶可以逐個展開它們并選擇值。

Image title

Microsoft招聘頁面在左側面板中顯示搜索參數(構面)

分析:

a. 在前端UI上顯示所有參數是一種用戶友好的方法,用戶可以輕松掃描它們。

b. 適用于大量內容。

c. 唯一的缺點是需要足夠的空間來顯示所有參數,有時它會給用戶界面造成混亂。

2. 在前端用戶界面上使用常用的參數

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

每次重復相同的步驟添加參數。

Jira在用戶界面上顯示常用參數,用戶可以從可用列表中添加更多參數。

Image title

Jira在頂部顯示常用的搜索參數

單擊“更多”選項會顯示一個菜單,其中列出可添加到搜索條件的可用參數。每次用戶想要添加參數時,都會轉到“更多”并從列表中選擇所需的選項。

Image title

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

Linkedin在擴展面板中顯示詳細參數。

Image title

Linkedin顯示擴展面板并列出所有參數

eBay在對話框中顯示詳細參數。

Image title

eBay用一個對話框列出所有參數

分析:

a. 這種方法適用于大多數常用參數用于執行搜索的情況。用戶不再擔心不需要的細節。

b. 在用戶界面上僅顯示少量參數需要更少的空間,因此在用戶界面上的混亂更少。

c. 每用戶添加參數都需要更多次點擊。

d. 對于復雜內容不好。

二、如何選擇參數值

有不同的方法可以根據參數顯示值。可以選擇最適合當前環境和要求的方法。

1. 輸入框

如果用戶要輸入參數,則會顯示一個簡單的文本框。

Twitter顯示一個搜索表單,用于定義包含參數輸入框的搜索條件,以便用戶可以輸入所需的值。

Image title

Twitter高級搜索表單

分析:

a. 當沒有可用于參數的定義值時,使用輸入框。

b. 有關所需輸入的類型和格式的占位符文本對用戶很有幫助。

c. 如果輸入框可以包含多個值,則應向用戶明確指示。例如,諸如“添加由逗號分隔的多個值”之類的幫助文本很有用。

2. 多選框列表

如果用戶可以為所選參數選擇多個選項,就會顯示多選框列表。此多選框列表可以作為單獨的列表提供,也可以封裝在下拉菜單中節省空間。

當用戶展開參數名稱時,Microsoft招聘搜索頁面會顯示參數的可用選項。此外,可以在下圖中看到輸入框可用于在值內搜索。

Image title

在Microsoft招聘搜索頁面上,搜索參數值在多選框列表中顯示

Linkedin工作搜索以多選框列表的形式在下拉菜單中顯示所選參數的選項。

Image title

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

分析:

a. 如果用戶必須從多個選項中進行選擇,多選框列表則是一個不錯的選擇。

b. 多選框列表是一個用戶友好的控件,因為它提供了選擇和取消選擇值的清晰體驗。

c. 應該取消選中默認狀態,因為選擇所需選項對用戶來說更方便,而不是取消選擇他們不想要的內容。

d. 在下拉菜單中提供多選框列表可節省空間,但需要更多點擊。此外,在下拉框中顯示多個選定選項是一項挑戰。

3. 超鏈接

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

由于超鏈接具有多個層級,因此有時僅在用戶界面上顯示當前級別。

Amazon使用選擇性隱藏的父級超鏈接方法。“部門”是顯示部門列表的主要級別鏈接。當用戶選擇部門時,Amazon隱藏了指向其他部門的鏈接。這意味著用戶現在只能關注所選部門的詳細信息。

Image title

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

Image title

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

eBay不隱藏任何內容,無論是否選擇了鏈接,層次結構中的所有鏈接仍然可見且可訪問。

Image title

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

分析:

a. 超鏈接用于立即執行搜索,用戶無需選擇“查詢”按鈕便可查看結果。

b. 所選超鏈接應顯示為選定狀態,以便用戶可以輕松地將其與其他超鏈接區分開來。

c. 從多級列表中選擇鏈接時,最好只顯示層次結構中的當前級別。當用戶只想在一個級別工作時顯示所有級別會產生額外的混亂。

4. 單選按鈕列表

當用戶必須為參數選擇一個值時,單選按鈕也可用于顯示值。

eBay在搜索方面以及高級搜索表單中顯示單選選項,用戶可以在其中為參數選擇單個選項。

Image title

eBay:單選選項可用,用戶只能為參數選擇一個值

Image title

eBay:高級搜索對話框將參數值顯示為單選按鈕

當參數需要單一選擇時,Linkedin也使用相同的方法。

Image title

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

分析:

a. 用戶在進行選擇后必須明確執行搜索時,可以用單選按鈕。否則,超鏈接是在運行時顯示結果的更好方法。

5. 視覺圖標

像圖像、圖標或顏色框這樣的視覺表示用作特定類型參數的值。

客戶評論由Amazon顯示為星形圖標。

Image title

Amazon:標志性的客戶評論

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

Image title

eBay:文本形式的顏色值

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

Image title

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

分析:

a. 視覺提供了一種良好且吸引人的信息呈現方式。如果搜索參數包含使用視覺效果最佳理解值

b. 使用它們就會是最佳實踐。例如,顏色應以視覺形式而不是名稱給出。

c. 提供工具提示、圖標及視覺效果使其更易于理解是一種很好的方法。

d. 標準圖標及視覺效果需要在適用的地方使用,以便用戶輕松地將其聯系起來。

6. 滑動條

當用戶必須從范圍內選擇值時,可以使用滑動條。

Mango使用滑動條顯示價格范圍,用戶可以拖動按鈕進行選擇。

Image title

Mango滑動條顯示價格的選擇

分析:

a. 滑動條可快速了解可用范圍和選定值。

b. 當開始和結束值已知時,應使用滑動條。

c. 觸摸設備更加用戶友好,因為使用鼠標難以選擇精確值。

三、需要顯示值的數量

另一個重要的事是確定參數顯示值的數量,以便用戶可以進行選擇。

eBay的每個參數都會顯示7-8項目。選擇每個參數旁邊的“查看全部”選項會顯示對話框內的所有值。

Image title

eBay:每個參數的“查看全部”選項,都可以查看對話框中的完整列表

Amazon使用相同的方法,在搜索方面的參數顯示為8-10個值。選擇“查看更多”選項時,可以看到剩余值。但如果計數值非常大,所有值都會在單獨的頁面上顯示。

Image title

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

Microsoft招聘頁面在側邊滑動條上顯示的所有值。為用戶方便選擇,他們在每個參數的頂部提供了一個搜索框。

Image title

Microsoft招聘:所有值都可以在搜索方面滾動

分析:

a. 由于值以列表的形式顯示為清單、單選選項和超鏈接。列表中顯示選項數量的通用準則適用于此處。

b. 最佳方法是在小于8時顯示所有值。如果大于8,僅使用“更多”選項顯示常用值。當項目數仍然超出時,在擴展列表或對話框中提供剩余項目。

c. 用滑動顯示同一位置的所有項目會使用戶難以找到所需的數值。

d. 用值顯示可用項目的計數是向用戶提供所要執行搜索的項目數量的一種好方法。

四、如何執行搜索

可以使用以下任一方式執行搜索:

1. 點擊“搜索”或“確定”按鈕,或按Enter鍵

2. 用戶更改參數時運行。

AmazoneBay都是在用戶設置任何給定選項后執行搜索。

Linkedin的搜索是用戶設置參數后點擊應用按鈕時執行的。

Image title

Linkedin:執行搜索需求在設置參數后按“應用”按鈕

分析:

a. 在運行時執行搜索為用戶提供愉快簡單的體驗,在每次點擊后用戶便可以看到結果。

b. 按下按鈕時執行搜索時需要用戶設置所有參數,單擊按鈕以查看結果。如果用戶想要在每次更改后查看結果,則每次更改參數時都必須單擊該按鈕。

c. 另外,如果用戶想要回到以前的狀態,他必須恢復所有更改,況且他很可能已經忘記了已定義的選項。

五、如何顯示搜索結果

在執行搜索時,內容按照已定義的過濾器顯示。顯示搜索結果時應該考慮幾個因素。

1. 搜索結果的位置

搜索結果顯示在定義過濾器的同一頁面上,或者打開一個新頁面顯示結果。

TwitterLinkedin遵循在單獨頁面上顯示搜索結果的慣例。

Image title

Twitter在單獨的屏幕上顯示搜索參數。單擊“應用”按鈕會打開搜索結果

Image title

Linkedin列出所有搜索參數顯示擴展區域。單擊“應用”按鈕將關閉此區域顯示的結果

Microsoft招聘提供搜索結果的參數面板。加載結果時,僅自動刷新結果區域。

Image title

Microsoft招聘:搜索結果加載在用戶定義參數的同一頁面上

分析:

a. 當打開新頁面顯示搜索結果時,用戶的所在環境會發生變化,會感覺像打開了一個新內容。

b. 如果搜索參數在單獨的屏幕或對話框上顯示,每當用戶想要更改參數時都必須返回。

c. 僅將結果區域重新刷新為Microsoft招聘是一種很好的方法,因為用戶會強烈感覺到他正在同一頁面上工作。

2. 搜索進度

搜索操作需要一些時間顯示結果。在等待期間,顯示關于搜索功能的進展的反饋。

加載結果時,Amazon會在頁面中心顯示加載圖標。

Image title

Amazon:加載圖標顯示搜索結果正在頁面中加載

Microsoft招聘的顯示加載圖標是提供搜索結果將在一段時間內顯示的指示。

Image title

Microsoft招聘:生成結果時會顯示加載圖標

分析:

a. 加載圖標是顯示正在加載內容的一個好辦法。

b. 如果在加載結果時出現問題,應以正確的消息形式傳達給用戶。

3. 布局

搜索結果以適用于網站或應用程序的列表或網格形式顯示。

eBay在列表視圖中顯示結果,用戶也可將視圖改為網格模式。

Image title

eBay:用戶可在列表和網格視圖之間切換查看搜索結果

Linkedin顯示的搜索結果將默認視圖從經典視圖改為拆分視圖。

Image title

Linkedin:搜索結果用拆分視圖和經典視圖顯示

分析:

a. 根據搜索項目類型和用戶需求完美地描述搜索項目的布局。

4. 分頁與無限滾動

搜索結果通常包含需要在多個頁面上顯示的大內容。分頁或無限滾動用于導航內容。

eBayMicrosoft招聘在結果頁面的底部分頁顯示。

Image title

eBay:結果頁面的分頁控制

Image title

Microsoft招聘:結果頁面的分頁控制

當超過頁面大小時Twitter用無限滾動顯示加載的搜索結果。

Image title

Twitter的搜索結果加載了更多結果

分析:

a. 無限滾動最適合網站和APP的用戶生成內容流,比如:Twitter,Facebook,Pinterest,Instagram。另一方面,分頁非常適合以目標為導向的網站和APP。

b. 當用戶自上至下查看結果時,可能會在頂部跳過頁面導航。所以一個更加對用戶友好的方法是在底部顯示分頁。

5. 應用過濾器列表

搜索結果顯示了應用于生成結果的過濾器列表。用戶可以刪除任何應用的過濾器,并相應地更新搜索結果。

eBay在搜索結果的頂部列出了所有應用的過濾器。用戶可以刪除任何他想要刪除的過濾器。單擊“全部清除”選項將立即刪除所有過濾器。

Image title

eBay:所有應用的過濾器都列在搜索結果的頂部。用戶可刪除不再需要的過濾器

Linkedin在頂部顯示應用的過濾器。由于所有過濾器前端的用戶界面都不可見,因此“清除”選項會顯示應用過濾器的數量。單擊“全部過濾器”選項時,應用過濾器的詳細信息將顯示在擴展面板中。

Image title

Linkedin:應用過濾器列表顯示在頁面頂部。要查看所有應用的過濾器,用戶單擊“所有過濾器”選項

分析:

a. 應在結果頁面上列出所有應用的過濾器,以便用戶可以輕松地將它們與結果相關聯。

b. 如果用戶必須轉到其他頁面才能查看應用的過濾器,則會向用戶提供斷開連接的行為。

6. 結果計數

結果計數顯示作為搜索結果生成的項目數。

Image title

Microsoft招聘頁面顯示頁面頂部的結果數

分析:

a. 結果計數是可幫助用戶了解為應用過濾器生成的結果數量,并查看它們所需導航數量的一種有用信息。

7. 空白結果

如果搜索結果不包含任何項目,就需要優雅地處理。

eBay顯示空白結果的消息。但他所顯示的項目更接近標準的搜索條件。

Image title

eBay:未找到匹配的結果

Amazon顯示空結果的消息。所有內容都顯示在結果區域中,表示未應用過濾器。

Image title

Amazon:未找到匹配的結果

Linkedin因為沒有找到結果,會顯示一條供用戶再次檢查標準定義的指令。

Image title

Linkedin:未找到匹配的結果

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

Image title

Microsoft招聘:未找到匹配的結果

分析:

a. 為用戶提供一些回應空白搜索結果的建議。

b. eBay似乎是最好的例子。它會給出的標準結果和幾個已定義的參數相匹配。用戶更改一個或多個參數查看更新的結果會更容易。

六、過濾搜索結果

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

排序選項幫助用戶按所需順序對結果進行排序。

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

eBay提供排序,更改視圖,過濾和分組選項以縮小搜索結果范圍。

Image title

eBay:提供排序,更改視圖,過濾,分組等選項以縮小搜索結果范圍

Twitter搜索結果包含頂部的類型明智過濾器和左側面板中的屬性明智搜索過濾器。這些可以幫助用戶進一步優化搜索結果。

Image title

Twitter:搜索結果包含過濾器和搜索選項,以優化搜索結果

分析:

a. 過濾器可用于進一步限制結果的數量。

b. 但在結果頁面上提供大量過濾器并不是一個好想法,這會讓用戶對結果的搜索感到困難。確定一些幫助用戶過濾結果的邏輯過濾器。

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

保存應用的搜索過濾器,以便可以用于以后的搜索是一種常見做法。也可以選擇已保存的過濾器并進行更改以創建新過濾器。

eBay中的搜索結果和用戶點擊“保存此搜索”選項,保存此過濾器。使用基于定義的過濾器的自動生成的名稱保存過濾器。填充的心形圖標和“已保存”文本顯示已保存過濾器。

Image title

eBay:用戶可以使用“保存此搜索”選項保存已定義的參數

Image title

eBay:保存已定義的參數

用戶可以通過轉到“My eBay”設置來訪問此保存的過濾器。過濾器列表提供了用戶可以在過濾器上應用的一些功能:排序,編輯搜索過濾器,查看結果。

Image title

eBay:可以根據要求執行和更新已保存的搜索

Jira在搜索頁面上提供了“另存為”選項,用戶可以單擊該選項,命名搜索過濾器并保存。保存的過濾器顯示在左側面板中,用戶只需單擊過濾器即可執行。

可以對選定的過濾器應用不同的功能,包括重命名、復制和刪除。

Image title

Jira:保存過濾器

Image title

Jira:左側面板中顯示保存的過濾器

Twitter在搜索結果頁面的下拉列表中提供“保存過濾器”選項。過濾器以默認名稱保存,可以再次單擊菜單中的搜索框進行訪問。

Image title

Twitter:使用下拉菜單中的選項保存搜索

Image title

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

分析:

a. 應在高級搜索頁面上提供保存搜索的選項,方便用戶可以定義過濾器并對其進行保存。

b. 用戶應能輕松訪問過濾器并在其上執行不同的功能,如執行、編輯或刪除。

八、如何退出搜索模式

提供一個退出選項以便用戶返回到啟動搜索的屏幕。

eBay,Microsoft招聘,Linkedin都提供清除所有應用過濾器的“清除”選項,此為退出搜索模式。

分析:

a. 在高級搜索頁面上需要顯示簡潔易懂的選項

九、技術用戶的高級模式

查詢式搜索適用于技術用戶。

用戶可以在搜索框中編寫復雜的SQL查詢(結構化查詢語言)。

Microsoft Outlook提供查詢式搜索。但當用戶輸入查詢參數時,無法看到任何幫助。

Image title

Microsoft Outlook提供查詢式搜索

Jira是提供即時幫助的高級搜索選項一個很棒的例子。

Image title

當用戶編寫搜索查詢時,Jira提供即時幫助

Image title

Image title

當用戶編寫搜索查詢時,Jira提供即時幫助

Image title

當用戶編寫搜索查詢時,Jira提供即時幫助

分析:

a. 當用戶編寫查詢時,需要提供正確即時的幫助。

b. 與用戶的顯式執行操作相比,查詢格式的運行時評估更有幫助。

結論

提供執行高級搜索的簡化體驗是一個挑戰。可通過在設計高級搜索屏幕時遵循最佳實踐來實現。

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

原文作者:Saadia Minhas

譯者:SKYUI

本頁網址:http://www.hmtlio.tw/web/a/2018100498584.shtml,如果對您有幫助歡迎收藏或轉載網址,歡迎再次訪問http://www.hmtlio.tw
更多關于 高級搜索 用戶體驗 的文章
·上一篇:分享幾個非常好的用戶體驗交互設計案例
·下一篇:已經沒有了
相關閱讀

相關排行總榜

網頁教程

網站運營

特效排行

教你如何使用js+CSS寫出類似FLASH動畫的網
一款CSS3制作的帶尖角的按鈕實例代碼
目前主流瀏覽器對于HTML5與CSS3的支持情況
全面剖析前端Ajax技術原理及知識
分享一個HTML5 + JavaScript實現Flash動畫
用PHOTOSHOP把美女頭畫像制作成漂亮的仿手
淘寶網及新浪網等幾大官方IP查詢API接口地
用Photoshop制作淘寶大促雙十一電商促銷宣
用HTML5+css3制作HTML5驗證的網頁表單
通過html5代碼實現在網頁中插入和播放mp4
如何讓您的微信公眾號內容快速增加閱讀量
網站用戶界面設計(網頁設計)命名規范
分享一些企業微信營銷推廣的技巧與經驗
可以借鑒和學習的小米模式4大經驗要素
SEO優化中網站title標題優化總結及經驗分
為什么說建站要從網站用戶忠誠度著手,知
一個優秀的SEM進行百度搜索推廣賬號架構經
談談從了解用戶開始互聯網推廣的營銷策略
談談新手運營網站如何做好網站的廣告位投
清理您網站上的黑鏈的幾個招數
JS制作循環上下左右平移轉圈的圖層特效
原生js寫的貪食蛇網頁版小游戲特效代碼,
用CSS3實現的addidas阿迪達斯標志LOGO特效
HTML5打造的酷炫3D 360度圖片立體瀏覽特效
通用canvas代碼實現的JS畫圓圈動畫特效代
通過HTML5+SVG制作奔跑的小馬駒動畫特效
jquery實現拖拽進度條并顯示百分比的特效
用HTML5+canvas代碼繪制的星空月亮圖案特
簡單實用的純CSS實現的橫向多級導航特效代
原生JS寫的一個書架式的圖片縮放滾動展示
彩票25选5开奖结果