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

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

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

保留用戶鍵入的關(guān)鍵詞。 查詢重組是許多信息瀏覽過程中關(guān)鍵的一個(gè)步驟。 如果用戶找不到他們要查找的內(nèi)容，他們可能會(huì)使用稍微修改的關(guān)鍵詞再次搜索。為了方便用戶，請?jiān)谒阉骺蛑斜Ａ舫跏嫉乃阉麝P(guān)鍵詞，這樣他們就不必再次重新鍵入了。

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

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

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

3、使用有效的自動(dòng)提示

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

4、糾正拼寫錯(cuò)誤

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

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

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

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

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

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

6、保留最近的搜索歷史

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

尊重用戶的努力

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

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

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

7、選用合適的頁面布局

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

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

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

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

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

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

提示：

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

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

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

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

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

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

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

9、提供排序和篩選項(xiàng)

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

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

提示：

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

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

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

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

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

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

結(jié)論

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

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