[譯] 搜索結果頁的最佳實踐

• 原文地址：Best Practices for Search Results
• 原文做者：Nick Babich
• 譯文出自：掘金翻譯計劃
• 譯者：sunui
• 校對者：iloveivyxuan、Graning

搜索就像是用戶和系統之間的一次對話：用戶用一次查詢來表達他們須要的信息，而系統用一組結果作爲迴應。搜索結果頁偏偏是整個搜索體驗中的一個關鍵部分：它提供了讓用戶參與對話的機會，來指導用戶的信息需求。

這篇文章中，我願意分享 10 個最佳實踐，來幫助你提高搜索結果頁的用戶體驗。

1. 點擊搜索按鈕後，不要清除用戶的查詢內容

保留用戶輸入的原始文字。 再次查詢是信息檢索中關鍵的一步。若是用戶沒有找到他們想要的信息，他們可能會把一部分查詢內容改成更清晰的關鍵詞再搜索一遍。爲了方便用戶進行查詢，在搜索框中留下初始的關鍵詞，讓用戶不至於重複輸入。

2. 提供準確並且相關的搜索結果

搜索結果的第一頁是黃金位置。 搜索結果頁是一次搜索體驗最核心的地方，它能夠提高一個網站的轉化率也能夠毀掉它。一般用戶能夠基於一兩組搜索結果就能夠快速判斷一個網站是否存在價值。

將準確的結果返回給用戶顯然很是重要，不然他們將再也不相信這個搜索工具。因此你的搜索工具必須以合理的方式肯定結果的優先級，並把全部重要的結果放置在第一頁。

3. 使用有效的自動提示

無效的自動提示會讓搜索體驗大打折扣。 請確保自動提示是有效的。當用戶輸入文字時，像識別詞根、預測文本、搜索建議都是一些對用戶頗有幫助的功能。這些作法有助於加快搜索進度，並讓用戶在跳轉間依舊保持工做狀態。

圖片來源: ThinkWithGoogle

4. 糾正拼寫錯誤

打字原本就很容易出錯。 若是用戶錯誤的輸入了搜索關鍵詞，而你能夠檢測到這個錯誤，那麼能夠針對系統猜想或「更正」後的關鍵詞來顯示搜索結果。這樣就避免了因爲沒有返回結果，用戶不得再也不次輸入關鍵詞的尷尬。

不支持搜索重組的蘋果商店上沒有搜索到結果頁面。

Asos 網站在用戶打字錯誤時，很好地顯示了一組代替結果來避免激怒用戶。它會這樣提示用戶：「您的初始搜索爲 ‘Overcoatt’，咱們也爲您搜索了‘Overcoats’的相關結果」

5. 顯示搜索結果的數量

顯示相關搜索結果的數量，讓與用戶可以知道他們大概會花費多長時間來瀏覽這些搜索結果。

相關結果數量可以讓用戶更清楚如何進行再次搜索。

6. 保留用戶最近的搜索記錄

即便用戶很熟悉搜索引擎的功能，搜索這件事仍然須要用戶從他們的記憶裏喚起信息。爲了想出一個有意義的關鍵詞，用戶須要考慮到他要查找的目標所具備的相關屬性，並將它們融合到查詢條件中。設計搜索體驗時，你應該時刻記住基本的可用性原則：

尊重用戶的努力

你的網站應該 保存全部最近的站內搜索記錄, 當用戶下一次建立搜索的時候把這些記錄提供給他們.

保存最近搜索記錄的好處是用戶再次搜索一樣的內容時能夠節約他們的時間和精力。

提示: 提供的條目不要超過 10 個 (而且不要有滾動條) 這樣不會讓用戶以爲信息過載。

7. 選擇合適的頁面佈局

顯示搜索結果的一個挑戰是不一樣的頁面內容須要不一樣的佈局來支撐。內容展示最基本的兩種佈局分別是列表視圖和網格視圖。一個經驗法則：

列表用於詳情展現，網格用於圖片展現

不妨一塊兒在產品頁面中驗證一下這個法則。這時產品的細節特徵在就顯得尤其重要了。對於相似家用電器這樣的產品，諸如型號、評級和尺寸等 細節 是用戶在 選擇購買過程當中 關注的重要因素，所以列表視圖更有意義。

列表佈局更適合細節導向的佈局

對於一些 須要更少的產品細節信息 的產品，網格視圖 是一個更好的選擇。好比服裝這樣的產品，用戶在挑選產品的過程當中對文字描述信息不會太關心，而是依賴於 產品外觀 作決定。對於這類產品用戶更關心產品間的視覺差別，而且更願意在一個長頁面上來回滾動挑選，而不是在一個列表頁和產品詳情頁面裏反覆切換。

網格佈局更適合視覺導向的佈局

提示:

• 容許用戶爲搜索結果選擇「列表視圖」或「網格視圖」，讓用戶選擇他們本身更指望的方式來瀏覽他們的查詢結果。

容許用戶經過一個功能菜單來更改佈局

• 設計網格佈局的時候，選擇一個合適的圖片尺寸，既要足夠大到清晰識別細節，又要足夠小到讓用戶一次儘可能看到更多的條目。

8. 顯示搜索進度

理想情況下，搜索結果應該 當即 顯示，但若是作不到，應該使用進度條來爲用戶提供系統的反饋。你應該給你的用戶一個清晰的指示，讓他們知道還要等待多久。

Aviasales 網站提示用戶 搜索須要一些時間

提示: 若是搜索過於耗時，你可使用動畫. 好的動畫可以分散訪客的注意力，讓他們忽略漫長的等待。

9. 提供排序和篩選的選項

用戶搜索返回的結果和關鍵詞相關度較低或者結果太多的時候，他們每每感受很迷茫。你應該提供給用戶一些與其搜索相關的篩選選項，而且在他們應用篩選選項的時候要支持多選。

篩選選項能夠幫助用戶減小搜索結果並對其排序，否則會須要大量的（過多的）滾動和分頁。

提示:

• 不要給用戶過多的篩選選項這一點很重要。若是你的搜索須要大量的篩選，應該爲它們設定默認值。
• 不要在篩選功能中隱藏排序功能，它們是不同的。
• 當用戶限制了搜索範圍，在搜索結果頁的頂部要明確說明這這個範圍。

10. 不要反饋 「沒有找到相關結果」

把一個沒有搜索結果的頁面丟給用戶會令他很沮喪。若是他們搜索了屢次都返回這樣的結果那就更過度了。 當它們的搜索沒有匹配到結果時 應該避免讓他們陷入死衚衕 ，爲他們提供有價值的替代品。（例如，網店能夠從類似類別的商品中爲用戶推薦替代商品）

惠普網站的「沒有找到相關結果」頁就是一個死衚衕的例子。它與在無結果頁面上顯示有價值的替代品的頁面造成鮮明對比，例如亞馬遜的頁面。

結論

搜索引擎是構建一個優秀網站的關鍵要素。用戶在尋找和學習事物時指望一個流暢的體驗，並且他們一般基於一兩組搜索結果的質量對網站的價值作出很是快速的判斷。一個優秀的搜索工具應當可以幫助用戶快速而簡單地查找他們想要的結果。

謝謝!

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃。