電商平臺首頁搜索功能交互設計研究

0 評論 8428 瀏覽 69 收藏 10 分鐘

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

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

一、搜索前

淘寶:

在淘寶首頁,搜索功能在訂閱和推薦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協議

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!