電商平臺首頁搜尋功能互動設計研究

語言: CN / TW / HK

我們可以在電商軟體上解決絕大部分的購物需求,而搜尋功能作為一個基礎功能,是使用者尋找匹配商品的不可或缺的工具。本文作者以淘寶、京東、拼多多三個電商產品為例,對其搜尋功能的互動設計進行對比,希望對你有幫助。

本文章中主要以淘寶、京東、拼多多三個電商平臺搜尋功能的互動設計不同進行分析。文章的結構不從搜尋元件拆分進行分析,而是以使用者使用首頁搜尋功能的任務流程進行分析。主要分為搜尋前、搜尋中、搜尋後。

一、搜尋前

淘寶:

在淘寶首頁,搜尋功能在訂閱和推薦tab下,搜尋元件中包含有掃一掃、推薦搜尋詞、淘寶拍照和搜尋按鈕,其中搜索按鈕設計為主按鈕。搜尋推薦詞輪播展示,時間間隔大概為3秒,推薦詞內容和使用者之前和當下瀏覽內容相關進行推薦。

京東:

在京東首頁,搜尋功能在首頁和附近tab下,搜尋元件中有搜尋icon、搜尋推薦詞、拍照、掃一掃,搜尋推薦詞輪播展示,時間間隔大概為3秒,推薦詞內容和使用者之前和當下瀏覽內容相關進行推薦。整個搜尋元件會在使用者向下滑動瀏覽內容時向上移動,縮小展示空間,和京東icon、活動、訊息位於置頂導航欄。

拼多多:

在拼多多首頁,搜尋框置頂,其中包含搜尋icon、搜尋推薦詞、拍照。推薦詞內容不進行輪播展示,進行單一推薦內容。推薦詞內容預設展示上上次瀏覽商品相關內容。

搜尋前總結:

淘寶首頁搜尋功能權重最高,表明使用淘寶的使用者使用搜索功能的佔比更大,同時作為主按鈕的搜尋按鈕可以直接點選進入推薦結果頁,在減少使用者操作步驟的同時,展示了淘寶對千人千面內容分發的自信。可通過搜尋功能直達的頁面有搜尋結果頁、淘寶拍照頁面、掃一掃頁面、搜尋頁。

京東首頁搜尋功能權重次之,京東搜尋功能可直達的頁面有拍照頁面、掃一掃頁面、搜尋頁。

拼多多在首頁弱化搜尋功能,可直達的頁面有搜尋頁、拍照頁面。

淘寶和京東使用推薦詞輪播展示的形式也更能增加使用者的點選率,原因是人體的眼睛中視感細胞更容易受到移動元素的吸引,吸引使用者後,內容滿足使用者心理預期或好奇心就有可能提高點選率,從而完成轉化率的提升。

二、搜尋中

淘寶:

點選搜尋框進入,可搜尋的方式有鍵盤輸入內容、點選歷史搜尋、點選搜尋發現、點選淘寶熱搜、點選拍照搜尋、點選語音輸入。在搜尋頁面,會出現近期最後瀏覽內容推薦圖片,點選任意處可消失。單擊搜尋頁面下部分卡片可進入全網熱搜排名榜,其中Tab分類有淘寶熱搜、家裝季大促、時髦穿搭、人氣美妝、吃貨星人、二次元、新趨熱點。

京東:

點選搜尋框進入,可搜尋的方式有鍵盤輸入、語音輸入、點選搜尋歷史、點選搜尋發現、拍照搜尋、點選今日熱搜卡片。點選今日熱榜進入京東熱榜,其中Tab分類有今日熱搜、數碼極客、家庭洗護、熱門手機、煥新家電、吃貨清單、時髦穿搭、親子樂園、珍味尋鮮、圖書文教、花花草草。

拼多多:

點選搜尋框進入,可搜尋的方式有鍵盤輸入內容、語音輸入、點選猜你想搜、點選最近搜尋、點選搜尋發現、拍照搜尋。搜尋框左側可點選下拉分類選擇,分類有商品和店鋪。

搜尋中總結:

淘寶和京東最大程度的降低使用者輸入成本。產品使用多種觸達方式、多種觸達內容,減少使用者操作和記憶負擔。

此前使用者大多使用搜索功能都是有精確目的,現在使用者可以通過搜尋功能跳轉到多種商品介面,商品和使用者連結的方式更加多樣化,使用者進行搜尋過程中,出於興趣和好奇心完成轉化的可能性也變得越來越高。

三、搜尋後

淘寶:

搜尋結果頁面,商品展示主要分為了4個Tab進行篩選,分別是全部、天貓、店鋪、逛逛。其次是搜尋商品的分類用小卡片的形式展示,幫助使用者快速查詢目標商品。

京東:

搜尋結果頁面,可直接進行篩選的方式更多樣,採用兩個滾動Tab欄幫助使用者快速篩選,商品類別同樣採用圖片加文字的展示形式。

拼多多:

搜尋結果頁面,主要分為5個Tab進行篩選,分別是綜合、銷量、價格、品牌、好評,同時在Tab篩選欄下增加文字標籤幫助使用者快速進行篩選。

全部篩選:

淘寶:

搜尋結果頁面支援使用者點選右上角“更多”進行更多操作,可跳轉到其他頁面,旨在讓使用者並行和頁面相關或更多操作,突出靈活高效。在全部篩選的卡片中,突出服務和品質。

京東:

全部篩選採用抽屜樣式,突出和產品優質服務相關的篩選選項。強調位置,提醒使用者收貨地址的同時,提升產品服務的質量和物流的準時性。

拼多多:

全部篩選主要突出價格的優勢,其次是精選服務。

在三者中,全部篩選是個產品的自我價值展示,使用者點選的是全部篩選,實則是在挑選三個產品的專屬服務,也是產品在展示價值。

搜尋後的總結:

淘寶在搜尋結果頁面突出商品類別篩選,讓使用者逛淘寶;京東搜尋結果頁面突出和自身優質服務相關的篩選,包括京東物流、plus會員權益、小時達等等,讓使用者快速選中目標商品;拼多多搜尋結果頁面突出價格優惠的優勢,所以篩選標籤主要為百億補貼、退貨包運費、回頭客長拼。

看完了國內三個頭部電商首頁的搜尋功能互動設計。也給我們更多的啟發價值。

在搜尋前:

  1. 按照個人使用者不同特點分發推薦搜尋詞;
  2. 功能可見性,頁面明確告知使用者可使用多種多種搜尋方式;
  3. 搜尋任務可優化,支援使用者點選“搜尋”一步完成搜尋任務的優化;
  4. 根據產品自身定位,確定搜尋功能權重,採用對應搜尋設計的樣式。

在搜尋中:

  1. 更快搜索操作完成,減少使用者操作成本;
  2. 操作引導,助力使用者完成搜尋工作,搜尋歷史、推薦等可以提高使用者點選率;
  3. 資訊梳理和使用者控制,展示資訊多的同時支援使用者控制資訊密度。

在搜尋後:

  1. 資訊準確,提升準確性的方法可以是幫助使用者進行快速篩選,例如腳踏車商品分類;
  2. 價值傳遞,構建價值傳遞的有效路徑,在機會點刻畫自身價值;
  3. 靈活高效,多工流程可以靈活自然切換是增加產品好感度的好方法。

本文由 @汪仔9878 原創釋出於人人都是產品經理,未經許可,禁止轉載

題圖來自Unsplash,基於CC0協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供資訊儲存空間服務。

給作者打賞,鼓勵TA抓緊創作!