你瀏覽的是我們在Google的加速版網頁,你可以點選Logo回到主網站取得更多的資訊
加入LINE@好友 隨時掌握SEO最新趨勢

Google電商 UX設計指南-立即優化行動網站,打造完美使用者體驗!



2018行動裝置新戰場?談Mobile SEO的重要性中,提到在行動優先時代,行動網站的設計對SEO影響力逐漸上升。

若你近期有收到「納入行動版內容優先索引系統」的email,內容明確地提到:

Googlebot 現在將根據行動版內容建立索引和排名,讓越來越多採用行動裝置的使用者能更快找到所需的資訊。
Google推出最新的 UX playbook for retail-UX設計指南(電商零售版),透過實際優化的案例,提升電商網站的轉換率。

以下為你整理出精華摘要,完整版及實際案例請點選上方檔案做功課哦!




💡內容涵蓋六大主題,並附上各項目執行難易度、影響程度、關鍵指標:



Creating frictionless experiences across the funnel ( Photo from Google )



 一、首頁/著陸頁:秀出使用者想看的資訊  




1.      清楚的CTA (Call to action):主畫面就清楚運用圖片、按鈕或文字,呼籲訪客進一步行動。

2.      明確價值主張:首頁上半部文案明確顯示價值主張,例:免運優惠只到今天、訂閱獲得免費教學文件

3.      移除蓋板廣告不要使用擋住整個畫面的彈跳式廣告,橫幅廣告較不令人反感。

4.      不使用輪播圖:數據顯示 Banner使用輪播圖容易讓消費者分心,太多資訊=沒資訊。

5.      顯示主打產品分類:在首頁顯示當期熱銷商品分類或活動,影響跳出率、分類點擊率。

6.      適當字體大小:使用清晰可閱讀的字體大小(16px以上),影響網頁停留時間。

7.      描述型CTACTA須搭配說明資訊或誘因,例:了解更多、立即購買、免費檢測。

8.      使用第三方認證:足夠的第三方或社群認證、背書,有效提高轉換率(CVR)。


 二、選單/導覽設計:完善了解品牌的產品服務、資訊  





1.      置頂目錄選單:設計動態式選單,收起畫面不要超過版面五分之一;展開不要超過一頁。

2.      附加資訊:如果有聯繫電話、實體店面、email的話,建議放上目錄點擊。

3.      主打訊息:選單放上「熱銷商品」、「本季新品」。若有售後服務(例:會員系統、包裹查詢)也建議放上。

4.      目錄排序:目錄主分類以熱門度排序,次分類可依字母排序。

5.      浮動選單:建議使用浮動式選單(Floating Menu),當行捲動時,目錄仍舊固定在上方。


 三、搜尋設計:快速找到想要的商品,提升轉換率  




1.      清楚的搜尋欄:設計明顯的搜尋框,或是放大鏡圖示,數據顯示使用者搜尋後擁有更高的轉換率。

2.      自動建議搜尋:當使用者搜尋時,可以自動顯示出網站中相近的答案。

3.      錯字修正:當訪客打錯字時能自動修正錯字,導出正確的搜尋。

4.      歷史搜尋:搜尋頁面可加入近期最多人搜尋的項目,影響跳出率。

5.      永遠回應結果:即使搜尋後找不到相對應的結果,建議自動推薦其他熱門商品或頁面。


 四、分類/商品首頁:刺激購買意願  




1.      主打訊息:確保價值主張顯示在購物流程中每一頁上方,例:全館滿499即免運。

2.      自由篩選:允許消費者能輕易篩選、排序想要的商品,例:依照熱門度排序、篩選「哈利波特」相關書籍

3.      清楚的價格、商品描述:在「商品內頁」主要畫面就顯示價格,並條列式確保商品描述的易讀性。

4.      緊急促銷提示:刺激購買慾望,例:僅存最後一件、此商品免運中、優惠只到今天、立即挑選情人節禮物吧。

5.      添加評論評分:若商品銷售狀況不錯,建議加上評分星等或是實際評論(正面評論置頂)。

6.      次要的CTA:行動購物易受干擾,建議加上收藏清單、到店取貨,掌握實際名單即可提醒消費者完成購物。


 五、購物車/轉換頁:簡化購買流程,完成轉換的關鍵!  




1.      購物按鈕:加入購物車後不要直接跳轉到結帳畫面,讓消費者選擇繼續購買或立即結帳。

2.      儲存購物車內容利用「寄到Email」或「暫存稍後觀看」讓使用者在其他裝置完成購物流程。

3.      減少結帳跳出點:上方只顯示回首頁、回到購物車、聯絡資訊,不要顯示完整目錄。

4.      允許訪客購買:允許訪客不加入會員就能購買。數據顯示若不支援訪客結帳,35%的消費者會直接放棄。

5.      顯示進度條:如果購物流程超過兩步驟,建議加入進度條讓消費者知道自己到哪個階段了。

6.      註冊福利:允許訪客使用社群登入或是給予註冊會員專屬福利,像是註冊首購88折。

7.      顯示購物摘要:確定完成結帳前顯示購物摘要,以及下訂成功的後續流程。

8.      修改容易:不須重新下單就能在購物車更改數量、尺寸。


 六、表格優化:手機輸入資訊不易,簡化欄位提升轉換! 




(✨豐富實際案例,建議觀看完整版!)

1.      簡化欄位:減少填寫欄位,像是姓名可以同一格、省略第二地址、移除選填欄位。

2.      即時驗證:立即顯示沒有輸入到的項目,或即時驗證資料正確性,不須跳到下一頁。

3.      自動填入:能自動填入已知訊息,也提供消費者設置默認地址的按鈕,省去再次輸入的麻煩。




4.      以點選取代下拉式選單:如果選項在三項以內,建議「展開點選」取代下拉式選單,轉換率較高。

5.      跳出符合格式的鍵盤:輸入信箱、電話、密碼時,依照需要的格式跳出合適的鍵盤。


Resource & Photo / Google
Translation / SharkTech

 

#總結  行動優先時代,優化行動網站就能搶得商機!

和去年推出的《Google官方寶典:25條行動網站設計的必備原則》很類似,但 Google UX playbook for retail 涵蓋更多的實際案例,以及優化後的成長數據。

適合行動瀏覽的網站,Google也會更推薦給使用者,有助於SEO排名往前電商轉換率上升

如果你也正在經營品牌電商,不妨將這篇分享給行銷、設計或工程師,一起提供消費者更好的購物體驗吧❤️