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

• 原文地址：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、前端、後端、產品、設計 等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃。