每一次搜索過程實際上就像是用戶和系統(tǒng)之間的一次對話：用戶將他們的信息需求表征為每一次查詢，而系統(tǒng)則將其響應(yīng)表達(dá)為一組結(jié)果。搜索的結(jié)果頁面則是整個搜索體驗的一個關(guān)鍵部分：它的質(zhì)量從很大程度上決定了這場對話的有效性以及用戶對系統(tǒng)的信任度。

在本文中，我想分享10個有效的設(shè)計指南，以幫助你改進(jìn)搜索結(jié)果的用戶體驗：

1、在用戶點擊搜索按鈕后，不要清除用戶的搜索關(guān)鍵詞

保留用戶鍵入的關(guān)鍵詞。 查詢重組是許多信息瀏覽過程中關(guān)鍵的一個步驟。 如果用戶找不到他們要查找的內(nèi)容，他們可能會使用稍微修改的關(guān)鍵詞再次搜索。為了方便用戶，請在搜索框中保留初始的搜索關(guān)鍵詞，這樣他們就不必再次重新鍵入了。

2、提供準(zhǔn)確和相關(guān)的結(jié)果

第一屏結(jié)果頁是黃金位置。搜索結(jié)果頁是搜索體驗的關(guān)鍵所在，搜索結(jié)果的質(zhì)量可以在很大程度上提升/降低網(wǎng)站的轉(zhuǎn)化率。用戶通常會基于一兩次/組搜索結(jié)果的質(zhì)量對網(wǎng)站的應(yīng)用價值進(jìn)行非?？焖俚呐袛?。

將準(zhǔn)確的結(jié)果返回給用戶顯然很重要，否則他們便很難再信任搜索工具。 因此，你的搜索必須以合理的方式確定結(jié)果的優(yōu)先級，將所有最重要的匹配都顯示在第一頁上。

3、使用有效的自動提示

無效的自動提示自然會使搜索體驗大打折扣，一定要確保自動提示功能是有效的。 根詞識別、文本預(yù)測都可以應(yīng)用其中。這種做法有助于加快搜索過程，并讓用戶隨時進(jìn)行轉(zhuǎn)換。

4、糾正拼寫錯誤

打字本就是容易出錯的。如果用戶錯誤地輸入了某個搜索關(guān)鍵詞而你的搜索引擎又可以檢測到該錯誤，則可以針對系統(tǒng)猜測和“更正”后的關(guān)鍵詞顯示搜索結(jié)果。這避免了由于沒有返回任何結(jié)果，迫使用戶重新輸入關(guān)鍵詞而導(dǎo)致的郁悶挫折感。

在Apple商店搜索結(jié)果頁上不支持查詢重組

當(dāng)發(fā)生打字錯誤時，Asos 很好地顯示了替代結(jié)果，而不會令用戶不愉快。 它使用“we also searched for Overcoats”這樣的文字，措辭友好，考慮周到

5、顯示搜索結(jié)果的數(shù)量

顯示有效的搜索結(jié)果的數(shù)量，以便用戶自己決定他們要花費多長時間來查看這些結(jié)果。

匹配結(jié)果的數(shù)量有助于用戶做出更明智的搜索

6、保留最近的搜索歷史

即使用戶對搜索功能已經(jīng)了然于心，每一次搜索也都需要用戶從記憶中調(diào)用一些信息。為了想出一個有意義的搜索關(guān)鍵詞，用戶需要考慮到他要查找的目標(biāo)所具有的相關(guān)屬性，并將它們?nèi)诤系讲樵儣l件中。在設(shè)計搜索體驗時，你應(yīng)該記住基本的可用性規(guī)則：

尊重用戶的努力

你應(yīng)該保存所有最近的搜索歷史，以便在下次進(jìn)行搜索時更快的向用戶提供該信息。

最近的搜索有利于用戶節(jié)省他們在再次搜索相同信息時的時間和精力。

提示：顯示的記錄不要多于10條（并且不要顯示滾動條），過多的信息會具有壓倒性。

7、選用合適的頁面布局

顯示搜索結(jié)果的挑戰(zhàn)之一是不同類型的內(nèi)容需要不同的頁面布局。而內(nèi)容呈現(xiàn)的兩個基本布局分別是列表視圖和網(wǎng)格視圖，經(jīng)驗法則表明：

網(wǎng)格重圖片，列表重細(xì)節(jié)

不妨看看產(chǎn)品頁面的顯示布局是如何應(yīng)用這倆個原則的。此時，產(chǎn)品細(xì)節(jié)信息的重要與否決定了倆中不同的布局。對于類似家用電器這樣的產(chǎn)品，諸如型號、評級和尺寸等細(xì)節(jié)是用戶在選擇購買過程中關(guān)注的主要因素，因此列表視圖更有意義。

列表視圖更適合細(xì)節(jié)導(dǎo)向的布局

對于需要較少產(chǎn)品信息的產(chǎn)品，網(wǎng)格視圖是一個很好的選擇。像服裝這樣的產(chǎn)品，用戶在挑選購買過程中對文字描述信息不會太關(guān)心，主要依賴于服裝的外觀設(shè)計做出決定。對于這種類型的產(chǎn)品，用戶的關(guān)注點在于產(chǎn)品之間的視覺區(qū)別，他們寧愿在單個長頁面上下滾動快速瀏覽，而不是在列表頁面和產(chǎn)品詳細(xì)頁面之間重復(fù)切換。

網(wǎng)格視圖更適合于視覺導(dǎo)向的布局

提示：

1）允許用戶為搜索結(jié)果選擇“列表視圖”或“網(wǎng)格視圖”，這樣一來，用戶便能選擇他們更喜歡的方式來查看搜索結(jié)果。

允許用戶通過一個視圖菜單來更改布局

2）當(dāng)設(shè)計網(wǎng)格布局時，既要注意使圖片大到足夠用戶識別和區(qū)分，又要確保足夠小到每屏能顯示更多的產(chǎn)品。

8、顯示搜索進(jìn)度

理想情況下，搜索結(jié)果應(yīng)該做到即時顯示，但如果做不到，則應(yīng)該使用一個進(jìn)度指示器向用戶反饋當(dāng)前的系統(tǒng)狀態(tài)，而且能夠清楚的指示他們需要等待多長時間。

Aviasales網(wǎng)站告訴用戶，搜索將需要一些時間

提示：如果搜索耗時過長，你可以使用動畫。好的動畫效果可以分散用戶的注意力，使得他們忽略長時間的搜索過程。

9、提供排序和篩選項

當(dāng)搜索結(jié)果跟用戶輸入的關(guān)鍵詞看起來不相關(guān)并且/或搜索結(jié)果太多時，用戶往往就會感到茫然。 你應(yīng)該向用戶提供與其搜索相關(guān)的篩選項，并使其能夠在每次選擇多個選項以篩選掉不必要的結(jié)果。

篩選項能有效的幫助用戶縮小其結(jié)果范圍，否則他們可能需要大量的滾動/翻頁后才能找到滿意的結(jié)果 

提示：

1）不要給用戶太多的選擇，否則可能淹沒他們。如果你的搜索確實需要/包含大量篩選項，那么默認(rèn)情況最好折疊隱藏起來一些（優(yōu)先級相對次要一些的選項。

2）不要把排序功能隱藏在篩選功能里面，它們本就是不同的任務(wù)。

3）當(dāng)用戶選擇一個狹窄的搜索范圍時，在結(jié)果頁面的頂部明確說明該范圍。

10、不要返回”無結(jié)果”的狀態(tài)

將用戶置于沒有任何搜索結(jié)果的頁面（空頁面）上難免會令人沮喪，尤其是他們嘗試過幾次搜索之后仍然沒有結(jié)果。當(dāng)他們的搜索沒有任何匹配結(jié)果時，你應(yīng)該避免讓他們步入死胡同，應(yīng)該考慮是不是能為用戶提供其他有價值的替代品（例如，在線商店可以從相似類別中為用戶推薦替代商品）。

在HP示例中看到的“無結(jié)果”頁面實際上是一條死胡同。它與在無結(jié)果頁面上顯示有價值的替代品形成鮮明對比，如Amazon示例中所示

結(jié)論

搜索是構(gòu)建有利可圖的網(wǎng)站的關(guān)鍵要素。 用戶在尋找和學(xué)習(xí)事物時期望獲得平滑的體驗，并且他們通常基于一組或兩組搜索結(jié)果的質(zhì)量對網(wǎng)站的價值做出非?？焖俚呐袛?。 一個優(yōu)秀的搜索工具應(yīng)該幫助用戶快速，輕松地找到他們想要的。

譯自：https://uxplanet.org/best-practices-for-search-results-1bbed9d7a311#.7zj766h1a
原文鏈接：http://www.jianshu.com/p/1dcccf4d6e5e