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排名往前、電商轉換率上升！

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