每一次搜索過程實際上就像是用戶和系統之間的一次對話:用戶將他們的信息需求表征為每一次查詢,而系統則將其響應表達為一組結果。搜索的結果頁面則是整個搜索體驗的一個關鍵部分:它的質量從很大程度上決定了這場對話的有效性以及用戶對系統的信任度。
在本文中,我想分享10個有效的設計指南,以幫助你改進搜索結果的用戶體驗:
1、在用戶點擊搜索按鈕後,不要清除用戶的搜索關鍵詞
保留用戶鍵入的關鍵詞。 查詢重組是許多信息瀏覽過程中關鍵的一個步驟。 如果用戶找不到他們要查找的內容,他們可能會使用稍微修改的關鍵詞再次搜索。為了方便用戶,請在搜索框中保留初始的搜索關鍵詞,這樣他們就不必再次重新鍵入了。
2、提供準確和相關的結果
第一屏結果頁是黃金位置。搜索結果頁是搜索體驗的關鍵所在,搜索結果的質量可以在很大程度上提升/降低網站的轉化率。用戶通常會基於一兩次/組搜索結果的質量對網站的應用價值進行非常快速的判斷。
將準確的結果返回給用戶顯然很重要,否則他們便很難再信任搜索工具。 因此,你的搜索必須以合理的方式確定結果的優先級,將所有最重要的匹配都顯示在第一頁上。
3、使用有效的自動提示
無效的自動提示自然會使搜索體驗大打折扣,一定要確保自動提示功能是有效的。 根詞識別、文本預測都可以應用其中。這種做法有助於加快搜索過程,並讓用戶隨時進行轉換。
4、糾正拚寫錯誤
打字本就是容易出錯的。如果用戶錯誤地輸入了某個搜索關鍵詞而你的搜索引擎又可以檢測到該錯誤,則可以針對系統猜測和“更正”後的關鍵詞顯示搜索結果。這避免了由於沒有返回任何結果,迫使用戶重新輸入關鍵詞而導致的鬱悶挫折感。
在Apple商店搜索結果頁上不支持查詢重組
當發生打字錯誤時,Asos 很好地顯示了替代結果,而不會令用戶不愉快。 它使用“we also searched for Overcoats”這樣的文字,措辭友好,考慮周到
5、顯示搜索結果的數量
顯示有效的搜索結果的數量,以便用戶自己決定他們要花費多長時間來查看這些結果。
匹配結果的數量有助於用戶做出更明智的搜索
6、保留最近的搜索曆史
即使用戶對搜索功能已經了然於心,每一次搜索也都需要用戶從記憶中調用一些信息。為了想出一個有意義的搜索關鍵詞,用戶需要考慮到他要查找的目標所具有的相關屬性,並將它們融合到查詢條件中。在設計搜索體驗時,你應該記住基本的可用性規則:
尊重用戶的努力
你應該保存所有最近的搜索曆史,以便在下次進行搜索時更快的向用戶提供該信息。
最近的搜索有利於用戶節省他們在再次搜索相同信息時的時間和精力。
提示:顯示的記錄不要多於10條(並且不要顯示滾動條),過多的信息會具有壓倒性。
7、選用合適的頁面布局
顯示搜索結果的挑戰之一是不同類型的內容需要不同的頁面布局。而內容呈現的兩個基本布局分別是列表視圖和網格視圖,經驗法則表明:
網格重圖片,列表重細節
不妨看看產品頁面的顯示布局是如何應用這倆個原則的。此時,產品細節信息的重要與否決定了倆中不同的布局。對於類似家用電器這樣的產品,諸如型號、評級和尺寸等細節是用戶在選擇購買過程中關注的主要因素,因此列表視圖更有意義。
列表視圖更適合細節導向的布局
對於需要較少產品信息的產品,網格視圖是一個很好的選擇。像服裝這樣的產品,用戶在挑選購買過程中對文字描述信息不會太關心,主要依賴於服裝的外觀設計做出決定。對於這種類型的產品,用戶的關注點在於產品之間的視覺區別,他們寧願在單個長頁面上下滾動快速瀏覽,而不是在列表頁面和產品詳細頁面之間重複切換。
網格視圖更適合於視覺導向的布局
提示:
1)允許用戶為搜索結果選擇“列表視圖”或“網格視圖”,這樣一來,用戶便能選擇他們更喜歡的方式來查看搜索結果。
允許用戶通過一個視圖菜單來更改布局
2)當設計網格布局時,既要注意使圖片大到足夠用戶識別和區分,又要確保足夠小到每屏能顯示更多的產品。
8、顯示搜索進度
理想情況下,搜索結果應該做到即時顯示,但如果做不到,則應該使用一個進度指示器向用戶反饋當前的系統狀態,而且能夠清楚的指示他們需要等待多長時間。
Aviasales網站告訴用戶,搜索將需要一些時間
提示:如果搜索耗時過長,你可以使用動畫。好的動畫效果可以分散用戶的注意力,使得他們忽略長時間的搜索過程。
9、提供排序和篩選項
當搜索結果跟用戶輸入的關鍵詞看起來不相關並且/或搜索結果太多時,用戶往往就會感到茫然。 你應該向用戶提供與其搜索相關的篩選項,並使其能夠在每次選擇多個選項以篩選掉不必要的結果。
篩選項能有效的幫助用戶縮小其結果範圍,否則他們可能需要大量的滾動/翻頁後才能找到滿意的結果
提示:
1)不要給用戶太多的選擇,否則可能淹沒他們。如果你的搜索確實需要/包含大量篩選項,那麼默認情況最好折疊隱藏起來一些(優先級相對次要一些的選項。
2)不要把排序功能隱藏在篩選功能裏面,它們本就是不同的任務。
3)當用戶選擇一個狹窄的搜索範圍時,在結果頁面的頂部明確說明該範圍。
10、不要返回”無結果”的狀態
將用戶置於沒有任何搜索結果的頁面(空頁面)上難免會令人沮喪,尤其是他們嚐試過幾次搜索之後仍然沒有結果。當他們的搜索沒有任何匹配結果時,你應該避免讓他們步入死胡同,應該考慮是不是能為用戶提供其他有價值的替代品(例如,在線商店可以從相似類別中為用戶推薦替代商品)。
在HP示例中看到的“無結果”頁面實際上是一條死胡同。它與在無結果頁面上顯示有價值的替代品形成鮮明對比,如Amazon示例中所示
結論
搜索是構建有利可圖的網站的關鍵要素。 用戶在尋找和學習事物時期望獲得平滑的體驗,並且他們通常基於一組或兩組搜索結果的質量對網站的價值做出非常快速的判斷。 一個優秀的搜索工具應該幫助用戶快速,輕鬆地找到他們想要的。
譯自:https://uxplanet.org/best-practices-for-search-results-1bbed9d7a311#.7zj766h1a
原文鏈接:http://www.jianshu.com/p/1dcccf4d6e5e
推薦設計
優秀海報設計精選集(8)海報設計2022-09-23
充滿自然光線!32平米精致裝修設計2022-08-14
親愛的圖書館 | VERSE雜誌版版式設計2022-07-11
生活,就該這麼愛!2022天海報設計2022-06-02
最新文章
25款純CSS的星級評定效果實網頁理論2019-07-04
網頁柵格係統應該怎麼用網頁理論2019-06-24
UI界面圖標設計終極指南網頁理論2019-06-02
創建用戶友好型表單網頁理論2018-07-20