Google 發布 6 大 UX 設計指南!提升電商轉換率,從主選單開始

數位時代網路蓬勃發展,許多廠商看準「網購商機」,紛紛加入電商戰場。一個優質的電商平台,除了要有清楚的動線、誘人的文案、賞心悅目的設計外,最重要的就是觸發消費者「下單」,將行為轉換成訂單,藉此獲取營收。

那麼,該如何建置電商平台?銷售頁該如何設計?如何能提升轉單率?對於經營電商的人而言,無時無刻都在想方設法優化介面。Ggoogle 近期推出一份零售業UX設計指南(UX Playbook for Retail),用品牌案例告訴你優質的銷售頁應具備什麼架構,本文整理出 6 個範例。

Google 認證的銷售頁架構

在 Google 這份設計指南中,列舉廠商在銷售頁的結構布局上應注意的 6 大項目,並整理出 Google 推薦的優質銷售頁範例。此份資料主要以零售業為主,並針對「行動裝置」的 UX 設計優化,一起來看看這些品牌怎麼做吧!

數位轉型
(銷售頁的結構布局。/圖:UX Playbook for Retail)

一、首頁(Home

首頁(登陸頁)對一個網站來說是非常重要的存在,主要是讓消費者清楚明瞭你到底在賣什麼商品,為呈現主要資訊的地方。以 Boots 為例,可以看到該首頁的優點:

數位轉型

❑ 清楚的 CTA:運用文字、圖片吸引消費者進一步行動
❑ 明確價值主張:利用文案顯示明確的主張。例如上圖的 order today, collect tomorrow(今天訂明天收到),強調快速到貨。
❑ 置頂的綜合選單和購物車:方便消費者找尋其他頁面及查看購物訊息
❑ 明確的類別分類:顯示類別分類,像母嬰用品、電子用品、其他等,方便消費者依類別尋找產品
❑ 適當的字體大小:讓消費者有舒適的使用體驗
❑ 沒有蓋板式廣告:不要使用讓消費者討厭的蓋板式廣告
❑ 不使用輪播圖片:輪播的 Banner 容易讓消費者分心

 

二、主選單(Navigation

當消費者由首頁進入到主選單時,如何簡單快速的引起消費者興趣、讓消費者完善了解產品資訊,主選單的架構就很重要。以下是美國 Macy 百貨的主選單設計:

數位轉型

❑ 置頂的綜合選單和購物車:方便消費者找尋其他頁面及查看購物訊息
❑ 所有的選單在同一頁:讓消費者一目了然
❑ 在選單設計註冊和登入的功能
❑ 按造「搜尋流量」設計類別排序:熱門類別排序在前面
❑ 容易進入或跳出主選單:直覺式、簡單的介面設計
❑ 設計動態選單:產品分類更詳細,例如女裝→裙子→長裙,方便消費者找尋

 

三、搜尋(Search

每個銷售網站一定有個搜尋欄,讓消費者快速的找到想要的商品有助於提升轉換率。來看看 Sephora 的案例。

數位轉型

❑ 清楚的搜尋欄位:明顯的搜尋框加上放大鏡的圖示,讓人一目了然
❑「輸入建議」搜尋:消費者打一兩個字母就能跳出類別選項
❑ 自動校正錯字功能:即使消費者拼錯字也能找到品項
❑ 回到搜尋結果頁:讓使用者用關鍵字搜尋到結果
❑ 顯示歷史搜尋:方便消費者查看歷史搜尋紀錄

 

四、分類/產品頁(Category/product

在品項類別的設計,廠商要去思考兩點:消費者怎麼找到他想要的產品?以及如何引起他們想找尋產品的興趣?以下舉 Sephora 的分類來看。

數位轉型

❑ 價值主張置頂:企業的價值主張置頂在每一頁的上方,例:全館限時 2 天免運
❑ 過濾篩選排序結果:消費者能自由篩選、排序想要的商品
❑ 清楚的產品價格資訊:在產品的主要頁面顯示價格
❑ 清楚的商品內容介紹:詳細商品介紹文案,條列式且易讀易懂
❑ 產品評論功能:設計評分星等或留言等功能

 

五、購物車/轉換頁(Cart/Conversion

在購物車的設計,廠商要去思考兩點:如何讓購物流程更簡單?若消費者當下沒有結帳,如何引起他們後續完成結帳?以下舉 Petco 的分類來看:

數位轉型

❑價值主張置頂:在購物車的每一頁顯示價值主張,如上圖的 15% 折扣訊息
❑允許訪客購買商品:不一定要註登入帳號,沒有帳號也能購買商品
❑可編輯產品數量:消費者可隨時調整購買數量、顏色、size
❑保留購物清單:購物車可保留商品清單,待消費者下次購買
❑註冊會員優惠:消費者若註冊會員可以得到購物優惠,例如 50 元商品折價卷
❑結帳流程:顯示「結帳進度條」讓消費者知道結帳進行到哪個步驟

 

六、表格優化(Form optimization

對於行動裝置購物的消費者而言,輸入訊息會比電腦版不易。設計簡單易填的表格有助於提高消費者填寫的意願,來看看 ThredUp 的案例:

數位轉型

❑ 價值主張置底:在表格下方顯示免費送貨和退貨,讓消費者更願意填寫表格
❑ 底部放置客服資訊:降底消費者的不信任度,提高填寫資料意願
❑ 簡化填寫欄位:例如填寫一個地址就好,且不須寫太詳細(可省略 XX 里等資訊)
❑ 自動填入訊息:表單能自動填入已知訊息,節省填寫時間
❑ 即時驗證功能:立即顯示消費者漏填的項目,也能即時驗證資料正確性

 

以上 6 大項目為 Google 整理的 UX 設計指南重點,並提出幾個範例供參考。雖然優化方向大致如上文所說,不過 Google也強調,所有的建議都必須經過 A/B testing,介面需要透過不斷的測試和優化,才能給消費者更好的使用體驗,進而提高轉換率。

 

首圖來源:Google UX playbook for retail
參考資料:Google UX playbook for retail
延伸閱讀:
吸睛 6 大絕招,打造電商最強 Landing Page
電商銷售密招!善用「加價購+滿額贈」,零成本飆升客單價!
搞懂「跳出率」和離開率的差異!3分鐘,學會 GA 13大指標

作者資訊

黃虹妏 | Wendy H.
黃虹妏 | Wendy H.
醫管系畢業,不務正業的走向行銷和平面設計的領域,因為背包客旅行經歷,喜歡上攝影及文字創作。目前從事數位行銷、內容編輯、企業專訪的工作,探討人事物在數位時代下的轉變與趨勢。