Google 最近推出了UX playbook — Retail,裡面列出了電商零售產業,在網站及 app 上應該要注意的細節,包含十足的品牌案例分享及數據的研究結果,非常適合所有設計及行銷人參考學習! 目前只有全英文版,隨手記錄下來這幾個重點,可以當作一份 checklist,來幫自己的網站健檢一下!(不專業翻譯,歡迎大家指教或校正。) Google提出,建立一個流暢的體驗,可以分成以下六個階段,而每個階段都有其對應的細節: A. 首頁 / 到達頁(Homepage/Landing page) 在不捲動捲軸的情況下(Above the fold),可以看到清楚的呼籲按鈕 使用描述型的呼籲文案(CTAs),而非直敘型 文案強調清楚明確的價值主張(benefit-oriented value prop) 不要使用插頁式廣告 移除自動輪播圖 在首頁顯示最熱銷的主題 確保(尤其在手機)清晰可閱讀的字體大小 足夠的社群佐證 B. 選單 / 導覽頁(Menu / Navigation) 一個收合型的選單(但面積不要超過 1/5 頁面) 如果有實體店,別忘了在選單加上地點的圖標提示 如果電話聯絡也是重要的聯絡管道,別忘了在每一頁加上電話圖示 選單項目排序中,主要項目以熱門度排序,子項目則建議以字母排序 別忘了在選單加上促銷訊息 C. 搜索(Search) 建立站內搜索,並讓其清楚易見 在搜索時列出自動推薦項目 即使搜索結果中,沒有完全相同的產品,也要提出類似的結果(增加畫面閱覽率) 包含前次的搜索紀錄對使用者是幫助的 D. 種類 / 產品(Category / Product) 在購買流程中,別忘了在每個階段重申你的價值主張 讓使用者可以依照條件篩選自己所需要的產品 提升篩選器的易用性 在產品頁面中顯示價格資訊 加上緊急、限量等的提示(例如:剩餘幾件、倒數幾天) 用條列式說明,讓產品敘述簡單易懂 在轉換發生(例如:下單購買)前再次強調價值主張,增強信心 次要的呼籲按鈕,在購物流程中也一樣重要(例如:收藏最愛、下次再買) E. 轉換(Conversion) 不要在加入購物車後,直接指向結帳頁 在購物車頁面再次強調價值主張(例如:免運費) 允許使用者更新編輯他的購物車 使用者儲存後,可以在其他裝置(X-device)下繼續使用 在整個購物流程中,限制可能跳出流程的因素,相對地,可以引導使用者到首頁或回到購物車 允許使用者在非會員的情況結帳 在創建帳號時,說明原因及其價值主張 不要讓使用者重複確認帳號資訊 讓使用者連結社群帳號註冊 一個驗證過的 API 位址,讓使用者不需要再次輸入帳號密碼登入 如果整個購物流程超過兩個步驟,建議使用進度條,讓使用者知道自己在哪個步驟 F. 表格欄位(Form optimization) 在必填欄位加上星號註記 行內顯示驗證結果(而不是送出資料後才顯示) 自動填入已知資訊 減少結帳時填寫欄位的數量 低於三個選項時,建議不要使用下拉式選單 不同的填寫欄位,呼叫對應的數字或英文鍵盤 看了這麼多,只能說魔鬼藏在細節裡,要建立一個流暢的購物體驗,整個流程中有非常多細節需要考慮,包含 UI 的畫面設計、文案撰寫,甚至是程式的功能調整。 要創建一個好的 UX 體驗,不是只有UX設計師自己就可以完成的。 另外也發現,手機載具的體驗幾乎成為顯學,現在已經要考慮的已經不是 Mobile-first,更多的是 Mobile-native 的使用者,資訊架構的流程與操作行為都與過去電腦的使用行為有所不同,而這也是在做企業優化轉型前需要考量的因素。 儘管因應不同的受眾、產品與市場,這些官方建議不一定真的對你的產品有效,但我們仍然可以透過別人的案例分析,了解他們這麼做的原因及脈絡。 而且在數位的時代裡面,想要知道有沒有成效,直接做一次 A/B Test ,我想就會是最快也最有效的方式了! 以上,如果你有任何想法或建議,歡迎直接留言跟我分享。 謝謝你看到這裡,如果我的文章有幫助到你,拍個手可以讓我更有動力。