每一次搜索過(guò)程實(shí)際上就像是用戶和系統(tǒng)之間的一次對(duì)話：用戶將他們的信息需求表征為每一次查詢，而系統(tǒng)則將其響應(yīng)表達(dá)為一組結(jié)果。搜索的結(jié)果頁(yè)面則是整個(gè)搜索體驗(yàn)的一個(gè)關(guān)鍵部分：它的質(zhì)量從很大程度上決定了這場(chǎng)對(duì)話的有效性以及用戶對(duì)系統(tǒng)的信任度。
在本文中，我想分享10個(gè)有效的設(shè)計(jì)指南，以幫助你改進(jìn)搜索結(jié)果的用戶體驗(yàn)：
1、在用戶點(diǎn)擊搜索按鈕后，不要清除用戶的搜索關(guān)鍵詞
保留用戶鍵入的關(guān)鍵詞。 查詢重組是許多信息瀏覽過(guò)程中關(guān)鍵的一個(gè)步驟。 如果用戶找不到他們要查找的內(nèi)容，他們可能會(huì)使用稍微修改的關(guān)鍵詞再次搜索。為了方便用戶，請(qǐng)?jiān)谒阉骺蛑斜Ａ舫跏嫉乃阉麝P(guān)鍵詞，這樣他們就不必再次重新鍵入了。
2、提供準(zhǔn)確和相關(guān)的結(jié)果
第一屏結(jié)果頁(yè)是黃金位置。搜索結(jié)果頁(yè)是搜索體驗(yàn)的關(guān)鍵所在，搜索結(jié)果的質(zhì)量可以在很大程度上提升/降低網(wǎng)站的轉(zhuǎn)化率。用戶通常會(huì)基于一兩次/組搜索結(jié)果的質(zhì)量對(duì)網(wǎng)站的應(yīng)用價(jià)值進(jìn)行非常快速的判斷。
將準(zhǔn)確的結(jié)果返回給用戶顯然很重要，否則他們便很難再信任搜索工具。 因此，你的搜索必須以合理的方式確定結(jié)果的優(yōu)先級(jí)，將所有最重要的匹配都顯示在第一頁(yè)上。
3、使用有效的自動(dòng)提示
無(wú)效的自動(dòng)提示自然會(huì)使搜索體驗(yàn)大打折扣，一定要確保自動(dòng)提示功能是有效的。 根詞識(shí)別、文本預(yù)測(cè)都可以應(yīng)用其中。這種做法有助于加快搜索過(guò)程，并讓用戶隨時(shí)進(jìn)行轉(zhuǎn)換。
4、糾正拼寫錯(cuò)誤
打字本就是容易出錯(cuò)的。如果用戶錯(cuò)誤地輸入了某個(gè)搜索關(guān)鍵詞而你的搜索引擎又可以檢測(cè)到該錯(cuò)誤，則可以針對(duì)系統(tǒng)猜測(cè)和“更正”后的關(guān)鍵詞顯示搜索結(jié)果。這避免了由于沒(méi)有返回任何結(jié)果，迫使用戶重新輸入關(guān)鍵詞而導(dǎo)致的郁悶挫折感。
在Apple商店搜索結(jié)果頁(yè)上不支持查詢重組
當(dāng)發(fā)生打字錯(cuò)誤時(shí)，Asos 很好地顯示了替代結(jié)果，而不會(huì)令用戶不愉快。 它使用“we also searched for Overcoats”這樣的文字，措辭友好，考慮周到
5、顯示搜索結(jié)果的數(shù)量
顯示有效的搜索結(jié)果的數(shù)量，以便用戶自己決定他們要花費(fèi)多長(zhǎng)時(shí)間來(lái)查看這些結(jié)果。
匹配結(jié)果的數(shù)量有助于用戶做出更明智的搜索
6、保留最近的搜索歷史
即使用戶對(duì)搜索功能已經(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é)省他們?cè)谠俅嗡阉飨嗤畔r(shí)的時(shí)間和精力。
提示：顯示的記錄不要多于10條（并且不要顯示滾動(dòng)條），過(guò)多的信息會(huì)具有壓倒性。
7、選用合適的頁(yè)面布局
顯示搜索結(jié)果的挑戰(zhàn)之一是不同類型的內(nèi)容需要不同的頁(yè)面布局。而內(nèi)容呈現(xiàn)的兩個(gè)基本布局分別是列表視圖和網(wǎng)格視圖，經(jīng)驗(yàn)法則表明：
網(wǎng)格重圖片，列表重細(xì)節(jié)
不妨看看產(chǎn)品頁(yè)面的顯示布局是如何應(yīng)用這倆個(gè)原則的。此時(shí)，產(chǎn)品細(xì)節(jié)信息的重要與否決定了倆中不同的布局。對(duì)于類似家用電器這樣的產(chǎn)品，諸如型號(hào)、評(píng)級(jí)和尺寸等細(xì)節(jié)是用戶在選擇購(gòu)買過(guò)程中關(guān)注的主要因素，因此列表視圖更有意義。
列表視圖更適合細(xì)節(jié)導(dǎo)向的布局
對(duì)于需要較少產(chǎn)品信息的產(chǎn)品，網(wǎng)格視圖是一個(gè)很好的選擇。像服裝這樣的產(chǎn)品，用戶在挑選購(gòu)買過(guò)程中對(duì)文字描述信息不會(huì)太關(guān)心，主要依賴于服裝的外觀設(shè)計(jì)做出決定。對(duì)于這種類型的產(chǎn)品，用戶的關(guān)注點(diǎn)在于產(chǎn)品之間的視覺區(qū)別，他們寧愿在單個(gè)長(zhǎng)頁(yè)面上下滾動(dòng)快速瀏覽，而不是在列表頁(yè)面和產(chǎn)品詳細(xì)頁(yè)面之間重復(fù)切換。
網(wǎng)格視圖更適合于視覺導(dǎo)向的布局
提示：
1）允許用戶為搜索結(jié)果選擇“列表視圖”或“網(wǎng)格視圖”，這樣一來(lái)，用戶便能選擇他們更喜歡的方式來(lái)查看搜索結(jié)果。
允許用戶通過(guò)一個(gè)視圖菜單來(lái)更改布局
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)，而且能夠清楚的指示他們需要等待多長(zhǎng)時(shí)間。
Aviasales網(wǎng)站告訴用戶，搜索將需要一些時(shí)間
提示：如果搜索耗時(shí)過(guò)長(zhǎng)，你可以使用動(dòng)畫。好的動(dòng)畫效果可以分散用戶的注意力，使得他們忽略長(zhǎng)時(shí)間的搜索過(guò)程。
9、提供排序和篩選項(xiàng)
當(dāng)搜索結(jié)果跟用戶輸入的關(guān)鍵詞看起來(lái)不相關(guān)并且/或搜索結(jié)果太多時(shí)，用戶往往就會(huì)感到茫然。 你應(yīng)該向用戶提供與其搜索相關(guān)的篩選項(xiàng)，并使其能夠在每次選擇多個(gè)選項(xiàng)以篩選掉不必要的結(jié)果。
篩選項(xiàng)能有效的幫助用戶縮小其結(jié)果范圍，否則他們可能需要大量的滾動(dòng)/翻頁(yè)后才能找到滿意的結(jié)果
提示：
1）不要給用戶太多的選擇，否則可能淹沒(méi)他們。如果你的搜索確實(shí)需要/包含大量篩選項(xiàng)，那么默認(rèn)情況最好折疊隱藏起來(lái)一些（優(yōu)先級(jí)相對(duì)次要一些的選項(xiàng)。
2）不要把排序功能隱藏在篩選功能里面，它們本就是不同的任務(wù)。
3）當(dāng)用戶選擇一個(gè)狹窄的搜索范圍時(shí)，在結(jié)果頁(yè)面的頂部明確說(shuō)明該范圍。
10、不要返回”無(wú)結(jié)果”的狀態(tài)
將用戶置于沒(méi)有任何搜索結(jié)果的頁(yè)面（空頁(yè)面）上難免會(huì)令人沮喪，尤其是他們嘗試過(guò)幾次搜索之后仍然沒(méi)有結(jié)果。當(dāng)他們的搜索沒(méi)有任何匹配結(jié)果時(shí)，你應(yīng)該避免讓他們步入死胡同，應(yīng)該考慮是不是能為用戶提供其他有價(jià)值的替代品（例如，在線商店可以從相似類別中為用戶推薦替代商品）。
在HP示例中看到的“無(wú)結(jié)果”頁(yè)面實(shí)際上是一條死胡同。它與在無(wú)結(jié)果頁(yè)面上顯示有價(jià)值的替代品形成鮮明對(duì)比，如Amazon示例中所示
結(jié)論
搜索是構(gòu)建有利可圖的網(wǎng)站的關(guān)鍵要素。 用戶在尋找和學(xué)習(xí)事物時(shí)期望獲得平滑的體驗(yàn)，并且他們通常基于一組或兩組搜索結(jié)果的質(zhì)量對(duì)網(wǎng)站的價(jià)值做出非常快速的判斷。 一個(gè)優(yōu)秀的搜索工具應(yīng)該幫助用戶快速，輕松地找到他們想要的。
譯自：https://uxplanet.org/best-practices-for-search-results-1bbed9d7a311#.7zj766h1a
原文鏈接：http://www.jianshu.com/p/1dcccf4d6e5e
