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. 描述型CTA:CTA須搭配說明資訊或誘因,例:了解更多、立即購買、免費檢測。
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排名往前、電商轉換率上升!
如果你也正在經營品牌電商,不妨將這篇分享給行銷、設計或工程師,一起提供消費者更好的購物體驗吧❤️