Google ux playbook UX設計建議指南- 電商/零售重點翻譯

電商/零售網站建議指南

創造零阻力使用者體驗

Home / Landing page (主頁 /著陸頁)

  • Clear CTA above the fold 首頁上半部要有清楚的CTA(Call to action )
  • Have descriptive CTAs CTA要帶上說明資訊(例如:登入免運費)
  • Clear benefit-oriented value prop above the fold 首頁上半部要有清楚的價值主張
  • Don’t use full page interstitials不要使用滿版插頁廣告
  • Remove automatic carousels 移除自動輪播
  • Display top categories on homepage 在首頁放上主類別
  • Use legible font sizes 使用清晰的字體大小
  • Use social proof 使用第三方認證

Menu & navigation (選單&瀏覽)

  • Show consolidated menu 使用置頂選單或浮動置頂選單
  • If foot traffic is important, include a store locator button in the menu如果人流(到店)很重要的話,要包含該店的定位器在Menu裡
  • If calls are important, include click-to-call at the top of every page如果打電話的功能是很重要的話,每一頁的最上方放 直接撥打 的按鈕
  • Keep menu options on one page讓選單選上呈現在一個頁面(不要超過,一次就可以看完所有選項)
  • For main product categories, order by traffic volume. If using subcategories, organize alphabetically 對於主要產品類別,按流量排。 如果使用子類別,按字母順序排
  • Include post sales activities in the menu 把售後服務也放在選單裡(例如:查詢包裹地點、會員系統)

Search (搜尋)

  • Include search 務必要放上搜尋欄
  • Make search visible 務必讓搜尋欄清晰可見
  • Use auto-suggestions 使用自動建議字
  • Implement spelling correction 使用自動矯正拼字(假使拼錯也能找出相關商品)
  • Always return results 永遠給出答案(找不到相關產品時建議他其他可能在尋找的商品)
  • Include previous or top searches 包含預先搜尋或熱門搜尋建議

Category / product Home 分類頁 / 產品首頁

  • Have a value prop at every point in the funnel, including category and product pages 確保你的【價值主張】(EX:優惠訊息)出現在每一個渠道,包含分類頁、產品頁
  • Allow users to sort/filter large number of products easily允許使用者簡單排序或是過濾龐大產品數量
  • Add urgency elements 加入重要元素(EX:產品剩幾件、優惠期限到幾號)
  • Have price info above the fold on product pages在產品頁上方提供價格資訊
  • Have secondary CTAs that facilitate x-device, like wishlist, email or call增加次要CTA扭,像是願望清單、電子郵件或電話。讓消費者跨裝置能持續進行購物流程
  • If large number of products, add reviews如果產品數量眾多,請添加評論

Conversion 轉換

  • Don’t redirect into checkout after adding to cart加入購物車之後不要直接跳轉到結帳(可以給消費者選項,像是查看購物車或繼續購物)
  • Limit your exit points at checkout減少結帳跳出點
  • Use pagination or a progress bar if more than 2 steps in conversion flow如果轉化流程超過2個步驟,請使用進度條(或步驟123這種)
  • Re-iterate value prop at conversion point在轉換點強調你的【價值主張】
  • Have descriptive CTAs 有描述性的CTA
  • Allow users to continue on another device by emailing or saving for later利用寄到email或是 儲存等一下再看 讓使用者在其他裝置持續體驗
  • Allow checkout as guest允許結帳時使用訪客登入
  • Add value prop around why someone should create an account加入【吸引消費者加入會員的好處】給他們

Form optimization 表格優化

  • Mark required fields with an asterisk必填項目請用*標示
  • Use inline validation使用框內認證(假如消費者亂填會自動出現錯誤請他重填)
  • Use autofill使用自動代入
  • Reduce number of fields (remove optional fields, use full name instead of first/last, hide company and address line 2 by default, hide billing by default)減少填寫欄位數量(移除選擇性填寫的欄位,使用全姓名欄位來取代姓、名分開的欄位,隱藏公司欄位並且住址預設兩行。預設帳單寄送地址)
  • Use correct keypads使用正確的鍵盤(EX:輸入電話號碼就出現數字鍵盤)
  • Don’t use dropdowns for inputs with < 4 options, instead opt for buttons當選項少於四個時,用按鈕選擇,不要用下拉選單
  • Use steppers, sliders, or open field input for numerical entry rather than large dropdowns在數字填入的部分使用steppers,sliders 或是開放式填空,而非一大排得下拉選單

原圖:

原檔分享:電商/零售優化指南

謝謝我公司的美女工程師Ann的協助校稿

希望對大家都有幫助,若有翻譯錯誤的地方也麻煩跟我說:)