淘寶京東這 10 個搜索細節,你最喜歡哪個?

5 評論 15885 瀏覽 182 收藏 11 分鐘

618、雙 11……有朋友說,買買買是 Ta 認識世界的方式?,F在無論是電子產品還會生鮮食品,你都能上網買。為了讓你在小小的手機屏幕上找到自己想要的東西,淘寶和京東等網站都做了不少努力。今天編譯這篇來自?Nick Babich?的文章,帶你了解京東搜索體驗背后的設計方法。

「搜索」就如同用戶與系統之間的對話——用戶的問題是其對某信息的需求;而系統的答案則是一系列的搜索結果。搜索結果頁面作為用戶搜索體驗的重要組成部分,它就像一座燈塔,為用戶所需指引「前行的路」。

這篇文章,譯者結合京東、淘寶等平臺上的搜索體驗,簡單易懂地告訴你 10 條提升用戶搜索體驗的最佳實踐。

1. 保留搜索歷史

一定要保留原搜索信息。查詢重構(query reformulation)在許多信息搜索過程中都非常重要。如果用戶找不到想要的信息,他們也許會稍微調整搜索關鍵詞再次搜尋。

要將整個過程簡化的話,最好保留搜索歷史,這樣就能避免用戶再次搜索時重新輸入所有信息。

舉個例子:在搜索框中分別輸入「傻不拉嘰狗糧」和「狗糧」,若搜索結果一樣的話,那么「狗糧」就是對「傻不拉嘰狗糧」的重構。

2. 提供精準的搜索結果

搜索結果的首頁至關重要。這一頁是用戶搜索體驗的重要來源,它事關整個網站的轉化率。用戶通常會快速評估網站的價值,而其評估標準則是基于搜索結果的質量。

此外,搜索結果一定要精確,否則用戶就不再信任該搜索工具。因此,搜索結果一定要優化排序,最重要的結果一定要放在最前面。

3. 提供有用的自動提示

沒用的自動提示,不敢說它搜索體驗能好到哪里去。所以,要提供有用的自動提示,包括詞根識別、文本預測、以及用戶輸入文本后的相關推薦。

通過有效的自動提示,整個搜索進程可以更快,讓用戶有始有終,從而保證網站轉化率。

4. 輸入錯誤照樣能生成相關搜索結果

打字過程中,誰都難免出錯。如果用戶不小心輸入錯誤信息,而系統又能發現該錯誤,并且還能提供你猜測或修正后的搜索內容,那這個系統就會讓人眼前一亮了。

前文第 1 條中,通過關鍵詞「傻不拉嘰狗糧」,搜索出的結果仍是「狗糧」相關的商品,就是很好的例子。這樣,也不會讓用戶在整個搜索體驗中感到沮喪。畢竟,用戶面對的不再是「找到 0 個結果」頁面,也不用再次輸入關鍵詞二次搜索。

我以為蘋果鼠標叫「iMouse」,結果只有「找到 0 個結果」:

而京東好像明白我在找什么:

5. 顯示搜索商品數量

在頁面上顯示搜索結果的數量,讓用戶心里有數,從而可以決定到底花多少時間瀏覽這些結果。

6. 保留最近搜索記錄

即使我們對搜索工具了如指掌,有時候仍需要回憶相關搜索信息。要搜索到滿意的結果,用戶會通過發散性思維,將相關聯的內容都輸入到搜索框中。

所以,在設計搜索體驗時,可不要忘了基本的可用性原則——哪怕是用戶的一丁點投入,也值得你萬分關注。

要保留最近所有的搜索歷史,以方便大家在下次搜索時進行必要的關聯。

保留了搜索歷史,用戶想要再次搜索的時候就可以節省時間和人力了。

小提示:搜索歷史條數不要多于 10 條(并且最好不借助滾動條),不然信息量太大也不好。

7. 選擇適當的頁面布局

顯示搜索結果的挑戰之一,是不同類型的內容需要用不同的視圖模式來呈現。

這個經驗法則在具體的產品頁面有何體現呢?大家都知道,產品的具體特征非常重要。比如家電這類產品,用戶在瀏覽搜索時重點會關注它們的細節(型號、尺寸等)。這種情況下,列表視圖就更好用。

對于需要呈現細節的產品,列表視圖再合適不過了。

而不需要呈現太多產品細節的產品,則推薦用柵格視圖來呈現。比如首飾這類產品,用戶在瀏覽選擇時不會過多依賴于文本信息,主要看的還是「顏值」。

用戶關注的是產品間的視覺差別,寧愿在「瀑布式」頁面上不斷地往下滑,也不愿重復地在列表視圖和產品細節頁面不停地切換。

對于需要呈現視覺體驗的產品,柵格視圖再合適不過了。

小提示:

  • 允許用戶自行選擇用「列表視圖」還是「柵格視圖」來呈現搜索結果,從而讓他們有更多的自主性。
  • 在設計柵格視圖時,要注意選擇合適的卡片(圖片)大小,大到足以讓用戶識別清楚,而小到在單位面積內呈現更多的產品。

8. 顯示搜索進程

我們搜索時,最理想的狀態是搜索結果可以立馬顯示出來。但若做不到的話,最好通過進度顯示條暫時用作對用戶的反饋。此外,如果能準確地提示用戶需要等待的時間,那就錦上添花了。

京東旅行在搜索航班信息時,有一個橙色飛機進度條。當飛機從界面左端逐漸向右端滑行時,從最開始未找到航班信息的動效開始,逐漸到「已為您找到 x 個航班」,待航班數量不斷增加并最終完成搜索后,該進度條才消失。

小提示:如果搜索時間太長,不妨試試加入動效。好的動效,可以轉移用戶的注意力,這在一定程度上能減少用戶對長時間等待的抱怨。

9. 提供分類及篩選功能

如果用戶通過關鍵詞搜索得到的結果頁面信息量過大,或者結果無關的,那就真的尷尬了。設計過程中,最好加入篩選功能,讓用戶自行篩選有用的信息,從而篩選出用戶想要的搜索結果。

篩選功能可以幫助用戶過濾搜索結果,否則用戶會花大量時間和功夫不斷地向下滑動或翻頁。

小提示:

  • 篩選功能選項不要設置過多。如果過多,建議默認狀態下可以折疊部分選項。
  • 不要隱藏篩選選項里的分類功能,它們非常有用。
  • 若用戶選擇了某較小搜索范圍,要清晰地在搜索頁面頂端顯示該范圍。

10. 對「找到 0 個結果」說不

用戶得到「找到 0 個結果」反饋,是非常沮喪的,特別是在多次嘗試的前提下。在用戶搜索體驗過程中,最好不要把用戶逼上「絕路」??梢栽囍蛴脩籼峁╊愃频慕Y果,這樣的反饋比「找到 0 個結果」要有價值得多。

結束語

要經營好一個網站,搜索體驗是非常關鍵的一步。在查詢過程中,用戶喜歡暢通無阻的體驗。你的網站價值高不高,用戶通過搜索結果的質量就可以快速做出判斷。

友好的搜索設計,可以讓用戶簡單快速地搜尋到其想要的信息。你的網站,能做到嗎?

謝謝!

 

編譯:Jorri

作者:Nick Babich,軟件工程師,關注 UI 和 UX。

來源:http://www.ifanr.com/app/842617

本文編譯自?Best Practices for Search Results,已獲原作者授權編譯。

本文來源于人人都是產品經理合作媒體@愛范兒,作者@Nick Babich

題圖來自PEXELS,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 寫的很好,贊一個,小小的搜索看出了大智慧,但我有個問題,像京東和天貓這幾家做大型電商的企業,他們有龐大的資源和計算能力,他們有優秀的工程師來完成產品經理的想法,但作為小型電商企業來說,我們沒有那么大的能力也沒有必要將這些功能全部都做出來,那有哪些不是一個小型電商企業所必須的功能呢?或者給這些功能的必要性排個序,謝謝了!

    來自上海 回復
    1. 個人認為,如何讓搜索變得更精準是一個核心問題,這個問題在整個搜索分類里是優先級最高的,因為這個可以直接影響轉化率。而搜索的準確又包括切詞的準確,商品匹配的準確,推薦的準確等等;其中商品匹配和切詞的準確是起步階段最重要的,也是最基礎的,這里面的牽扯的內容太多,就比如搜索手機殼,搜索結果出來了手機,這看似是一個很不可理解的bug,但是就是整個切詞體系沒有搭建好。只有把幾個搜索的基礎項做好,才有資格談后續的用戶體驗。

      來自湖南 回復
  2. 想問幾個問題:
    1.類似電商的搜索功能在產品功能等級上能排到什么位置(加入1-5五個等級,1最低,5最高)
    2.有沒有什么好方法解決搜索結果為0的反饋?如果將精準推薦放置在搜索結果為0這里是否可行?
    題外話:以前總聽人說京東的用戶體驗做的好,看了簡單的搜索功能之后,這話一點不假
    上述問題還請大佬解答一下,謝謝哈 ??

    來自江蘇 回復
    1. 1、至于搜索排到什么級別位置,根據電商產品的相關搜索數據應該能很好說明這一點,肯定優先級比較高,要不然也不會置頂、懸停設計了,這是一個基本功能。

      2、搜索為0的結果,一方面是類似于作者說的推薦類似結果,避免為0的狀態,此外,當結果為0時,可以引導用戶去嘗試其他操作,如換個搜索詞、如去相關推薦看看。至于你說的精準推薦當然是可以的,另外一方面搜索結果頁是有很多商業化可做的,不是僅僅反饋一個0那么簡單。

      來自江蘇 回復
    2. 看來以后做相關項目的搜索要好好思考一下了

      來自江蘇 回復