注：為了讓你在小小的手機(jī)屏幕上找到自己想要的東西，淘寶和京東等網(wǎng)站都做了不少努力。今天編譯這篇來(lái)自 Nick Babich 的文章，帶你了解京東搜索體驗(yàn)背后的設(shè)計(jì)方法。
「搜索」就如同用戶與系統(tǒng)之間的對(duì)話——用戶的問(wèn)題是其對(duì)某信息的需求；而系統(tǒng)的答案則是一系列的搜索結(jié)果。搜索結(jié)果頁(yè)面作為用戶搜索體驗(yàn)的重要組成部分，它就像一座燈塔，為用戶所需指引「前行的路」。
這篇文章，譯者結(jié)合京東、淘寶等平臺(tái)上的搜索體驗(yàn)，簡(jiǎn)單易懂地告訴你 10 條提升用戶搜索體驗(yàn)的最佳實(shí)踐。
1. 保留搜索歷史
一定要保留原搜索信息。查詢(xún)重構(gòu)（query reformulation）在許多信息搜索過(guò)程中都非常重要。如果用戶找不到想要的信息，他們也許會(huì)稍微調(diào)整搜索關(guān)鍵詞再次搜尋。
要將整個(gè)過(guò)程簡(jiǎn)化的話，最好保留搜索歷史，這樣就能避免用戶再次搜索時(shí)重新輸入所有信息。
舉個(gè)例子：在搜索框中分別輸入「傻不拉嘰狗糧」和「狗糧」，若搜索結(jié)果一樣的話，那么「狗糧」就是對(duì)「傻不拉嘰狗糧」的重構(gòu)。
2. 提供精準(zhǔn)的搜索結(jié)果
搜索結(jié)果的首頁(yè)至關(guān)重要。這一頁(yè)是用戶搜索體驗(yàn)的重要來(lái)源，它事關(guān)整個(gè)網(wǎng)站的轉(zhuǎn)化率。用戶通常會(huì)快速評(píng)估網(wǎng)站的價(jià)值，而其評(píng)估標(biāo)準(zhǔn)則是基于搜索結(jié)果的質(zhì)量。
此外，搜索結(jié)果一定要精確，否則用戶就不再信任該搜索工具。因此，搜索結(jié)果一定要優(yōu)化排序，最重要的結(jié)果一定要放在最前面。
3. 提供有用的自動(dòng)提示
沒(méi)用的自動(dòng)提示，不敢說(shuō)它搜索體驗(yàn)?zāi)芎玫侥睦锶�。所以，要提供有用的自�?dòng)提示，包括詞根識(shí)別、文本預(yù)測(cè)、以及用戶輸入文本后的相關(guān)推薦。
通過(guò)有效的自動(dòng)提示，整個(gè)搜索進(jìn)程可以更快，讓用戶有始有終，從而保證網(wǎng)站轉(zhuǎn)化率。
4. 輸入錯(cuò)誤照樣能生成相關(guān)搜索結(jié)果
打字過(guò)程中，誰(shuí)都難免出錯(cuò)。如果用戶不小心輸入錯(cuò)誤信息，而系統(tǒng)又能發(fā)現(xiàn)該錯(cuò)誤，并且還能提供你猜測(cè)或修正后的搜索內(nèi)容，那這個(gè)系統(tǒng)就會(huì)讓人眼前一亮了。
前文第 1 條中，通過(guò)關(guān)鍵詞「傻不拉嘰狗糧」，搜索出的結(jié)果仍是「狗糧」相關(guān)的商品，就是很好的例子。這樣，也不會(huì)讓用戶在整個(gè)搜索體驗(yàn)中感到沮喪。畢竟，用戶面對(duì)的不再是「找到 0 個(gè)結(jié)果」頁(yè)面，也不用再次輸入關(guān)鍵詞二次搜索。
我以為蘋(píng)果鼠標(biāo)叫「iMouse」，結(jié)果只有「找到 0 個(gè)結(jié)果」：
而京東好像明白我在找什么：
5. 顯示搜索商品數(shù)量
在頁(yè)面上顯示搜索結(jié)果的數(shù)量，讓用戶心里有數(shù)，從而可以決定到底花多少時(shí)間瀏覽這些結(jié)果。
6. 保留最近搜索記錄
即使我們對(duì)搜索工具了如指掌，有時(shí)候仍需要回憶相關(guān)搜索信息。要搜索到滿意的結(jié)果，用戶會(huì)通過(guò)發(fā)散性思維，將相關(guān)聯(lián)的內(nèi)容都輸入到搜索框中。
所以，在設(shè)計(jì)搜索體驗(yàn)時(shí)，可不要忘了基本的可用性原則——哪怕是用戶的一丁點(diǎn)投入，也值得你萬(wàn)分關(guān)注。
要保留最近所有的搜索歷史，以方便大家在下次搜索時(shí)進(jìn)行必要的關(guān)聯(lián)。
保留了搜索歷史，用戶想要再次搜索的時(shí)候就可以節(jié)省時(shí)間和人力了。
小提示：搜索歷史條數(shù)不要多于 10 條（并且最好不借助滾動(dòng)條），不然信息量太大也不好。
7. 選擇適當(dāng)?shù)捻?yè)面布局
顯示搜索結(jié)果的挑戰(zhàn)之一，是不同類(lèi)型的內(nèi)容需要用不同的視圖模式來(lái)呈現(xiàn)。
這個(gè)經(jīng)驗(yàn)法則在具體的產(chǎn)品頁(yè)面有何體現(xiàn)呢？大家都知道，產(chǎn)品的具體特征非常重要。比如家電這類(lèi)產(chǎn)品，用戶在瀏覽搜索時(shí)重點(diǎn)會(huì)關(guān)注它們的細(xì)節(jié)（型號(hào)、尺寸等）。這種情況下，列表視圖就更好用。
對(duì)于需要呈現(xiàn)細(xì)節(jié)的產(chǎn)品，列表視圖再合適不過(guò)了。
而不需要呈現(xiàn)太多產(chǎn)品細(xì)節(jié)的產(chǎn)品，則推薦用柵格視圖來(lái)呈現(xiàn)。比如首飾這類(lèi)產(chǎn)品，用戶在瀏覽選擇時(shí)不會(huì)過(guò)多依賴(lài)于文本信息，主要看的還是「顏值」。
用戶關(guān)注的是產(chǎn)品間的視覺(jué)差別，寧愿在「瀑布式」頁(yè)面上不斷地往下滑，也不愿重復(fù)地在列表視圖和產(chǎn)品細(xì)節(jié)頁(yè)面不停地切換。
對(duì)于需要呈現(xiàn)視覺(jué)體驗(yàn)的產(chǎn)品，柵格視圖再合適不過(guò)了。
小提示：
8. 顯示搜索進(jìn)程
我們搜索時(shí)，最理想的狀態(tài)是搜索結(jié)果可以立馬顯示出來(lái)。但若做不到的話，最好通過(guò)進(jìn)度顯示條暫時(shí)用作對(duì)用戶的反饋。此外，如果能準(zhǔn)確地提示用戶需要等待的時(shí)間，那就錦上添花了。
京東旅行在搜索航班信息時(shí)，有一個(gè)橙色飛機(jī)進(jìn)度條。當(dāng)飛機(jī)從界面左端逐漸向右端滑行時(shí)，從最開(kāi)始未找到航班信息的動(dòng)效開(kāi)始，逐漸到「已為您找到 x 個(gè)航班」，待航班數(shù)量不斷增加并最終完成搜索后，該進(jìn)度條才消失。
小提示：如果搜索時(shí)間太長(zhǎng)，不妨試試加入動(dòng)效。好的動(dòng)效，可以轉(zhuǎn)移用戶的注意力，這在一定程度上能減少用戶對(duì)長(zhǎng)時(shí)間等待的抱怨。
9. 提供分類(lèi)及篩選功能
如果用戶通過(guò)關(guān)鍵詞搜索得到的結(jié)果頁(yè)面信息量過(guò)大，或者結(jié)果無(wú)關(guān)的，那就真的尷尬了。設(shè)計(jì)過(guò)程中，最好加入篩選功能，讓用戶自行篩選有用的信息，從而篩選出用戶想要的搜索結(jié)果。
篩選功能可以幫助用戶過(guò)濾搜索結(jié)果，否則用戶會(huì)花大量時(shí)間和功夫不斷地向下滑動(dòng)或翻頁(yè)。
小提示：
-
篩選功能選項(xiàng)不要設(shè)置過(guò)多。如果過(guò)多，建議默認(rèn)狀態(tài)下可以折疊部分選項(xiàng)。
-
不要隱藏篩選選項(xiàng)里的分類(lèi)功能，它們非常有用。
-
若用戶選擇了某較小搜索范圍，要清晰地在搜索頁(yè)面頂端顯示該范圍。
10. 對(duì)「找到 0 個(gè)結(jié)果」說(shuō)不
用戶得到「找到 0 個(gè)結(jié)果」反饋，是非常沮喪的，特別是在多次嘗試的前提下。在用戶搜索體驗(yàn)過(guò)程中，最好不要把用戶逼上「絕路」�？梢栽囍蛴脩籼峁╊�(lèi)似的結(jié)果，這樣的反饋比「找到 0 個(gè)結(jié)果」要有價(jià)值得多。
|
您現(xiàn)在的位置： 
