如何優化商詳頁,滿足多企業多場景的訴求?

1 評論 7762 瀏覽 47 收藏 7 分鐘

Saas模式,為不同企業提供交易平臺解決方案,不同企業,甚至于不同類目,商詳頁存在差異化。由于不同租戶對商詳頁的主體框架都存在不同的訴求,因此,市場上通用的商詳頁裝修(在既定好主框架上開放裝修)很難滿足多樣式需求。基于該種場景,可以通過前端組件化及用戶界面可視化裝修實現商詳頁主體框架、可擴展點的多樣化裝修。

一、商詳頁應用場景分析

1.用戶進入頁面路徑分析

站內路徑列舉:

站外路徑列舉:

從站外進入商詳頁的新用戶,商詳頁相當于首頁,因此要具備商品導航、搜索欄、頻道欄

結合上方列舉場景,商詳頁重點梳理:

  • 商品價格
  • 促銷信息
  • 商品基礎信息:圖片、標題、運費、屬性、售后服務等
  • 立即訂購、加入進貨車按鈕,保證能在首屏顯示

2.從新老用戶角度分析

新老用戶解釋:

  • 瀏覽維度:首次訪問網站的用戶,非首次訪問網站的用戶—網站/店鋪的曝光度
  • 交易維度:首次下單采購的用戶、復購用戶—網站/店鋪的成交率

小結:

  • 頁面視覺、交互,關注用戶體驗,簡化用戶采購操作
  • 頁面結構、產品功能避免大范圍調整,考慮老用戶的使用習慣

此外,商詳頁還需關注的點:

  • 商品導購信息:商品基礎信息+他人行為(評分、評價、銷量、收藏數、分享數等)
  • 價格需求延伸:促銷信息要凸顯現價和原價的比較,讓用戶明確感知優惠了多少
  • 具備采購意向的操作:收藏、咨詢、進入進貨車、立即訂購

二、頁面組件化配置

1.商詳頁組件梳理

組件拆分時,可以結合實際場景,拆分到合適的顆粒度。

(以上并非商詳頁全部組件,不同模式,對商詳頁訴求不同)

2.前端組件化平臺

所謂的前端組件化平臺,大家可以理解為管理商詳頁所有抽離出的組件平臺,該平臺主要面向研發人員或者實施顧問。

組件與布局的結合應用,搭建出不同主體框架樣式的商詳頁,應用至不同的租戶。該平臺具體實施方法,不再在此描述。主要是分享商詳頁的組件配置思路,而不再僅限于主體框架每次都需研發人員重新開發。

當然了,組件化配置商詳頁也可以關聯到類目,不同的類目,可以配置不同功能和樣式的商詳頁。

3.商詳頁可視化裝修

通過組件化方式配置商詳頁主體框架時,可以在不同的布局、不同的區域保留不同的擴展點。所謂的擴展點,即開放給各店鋪可靈活裝修的區域。店鋪可以通過產品詳情頁裝修,在商詳頁不同的可裝修區域(擴展點),選擇模塊進行可視化裝修。

三、流程與規則

流程類型:

  • 頁面加載流程
  • 按鈕操作流程。如:立即訂購、進入進貨車等

1.頁面加載流程

不同狀態,不同業務會對應不同的商詳頁,比如:下架商品、詢價商品、拼團商品等等。除此之外,加載時還需根據某些信息,展示對應的信息。比如:商品的區域價、用戶是否登錄,登錄后是否有會員價等等。

2.按鈕操作流程

商詳頁的一般常見性操作:立即訂購、加入進貨車、收藏商品、分享商品、收藏店鋪等等。

對于此類功能性操作按鈕,要注意是否需要進行用戶是否登錄、用戶身份及相關業務的要求。

舉例:觸發立即訂購,結合當前系統的業務,需要進行:是否登錄、是否風險名單用戶、是否黑名單用戶、起訂規則是否滿足、配送區域是否滿足等等規則校驗。

3.規則提示交互規范

校驗規則視具體業務而定,當用戶不滿足某些規則檢驗時,需給出相應提示及告知用戶下一步如何操作。

由于商詳頁,或者整個商城(如首頁、頻道頁、列表頁等)存在很多規則校驗,建議整理出交互提示規范,相同或者同類場景,統一交互提示規范。

結語:以上是商詳頁重構,針對降低開發成本,滿足多企業多場景對商詳頁訴求的實踐,希望能給遇到同樣場景的朋友提供不同的解決思路。

此外,在搭建前端組件化時,若發展時機較好,可以擴展為組件交易市場。

 

本文由 @搖滾小白菜 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自 Pexels ,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 受益良多,在整體行業大盤瓶頸的狀態下,流量紅利開始消退,我們能做的也只能是從產品入手,基于大數據不停的做SEO優化提高到達率,再不斷的優化商詳頁,提升轉化率,難搞~

    來自江蘇 回復