Google的UX指導手冊中文版(電商零售篇)

更新 發佈閱讀 5 分鐘
vocus|新世代的創作平台

測試喔在自由自在字字句句看Google 最近推出了UX playbook — Retail,裡面列出了電商零售產業,在網站及 app 上應該要注意的細節,包含十足的品牌案例分享及數據的研究結果,非常適合所有設計及行銷人參考學習!

目前只有全英文版,隨手記錄下來這幾個重點,可以當作一份 checklist,來幫自己的網站健檢一下!(不專業翻譯,歡迎大家指教或校正。)

Google提出,建立一個流暢的體驗,可以分成以下六個階段,而每個階段都有其對應的細節:

Creating frictionless experiences across the funnel ( Photo from Google )

Creating frictionless experiences across the funnel ( Photo from Google )


A. 首頁 / 到達頁(Homepage/Landing page)

  1. 在不捲動捲軸的情況下(Above the fold),可以看到清楚的呼籲按鈕
  2. 使用描述型的呼籲文案(CTAs),而非直敘型
  3. 文案強調清楚明確的價值主張(benefit-oriented value prop)
  4. 不要使用插頁式廣告
  5. 移除自動輪播圖
  6. 在首頁顯示最熱銷的主題
  7. 確保(尤其在手機)清晰可閱讀的字體大小
  8. 足夠的社群佐證

B. 選單 / 導覽頁(Menu / Navigation)

  1. 一個收合型的選單(但面積不要超過 1/5 頁面)
  2. 如果有實體店,別忘了在選單加上地點的圖標提示
  3. 如果電話聯絡也是重要的聯絡管道,別忘了在每一頁加上電話圖示
  4. 選單項目排序中,主要項目以熱門度排序,子項目則建議以字母排序
  5. 別忘了在選單加上促銷訊息

C. 搜索(Search)

  1. 建立站內搜索,並讓其清楚易見
  2. 在搜索時列出自動推薦項目
  3. 即使搜索結果中,沒有完全相同的產品,也要提出類似的結果(增加畫面閱覽率)
  4. 包含前次的搜索紀錄對使用者是幫助的

D. 種類 / 產品(Category / Product)

  1. 在購買流程中,別忘了在每個階段重申你的價值主張
  2. 讓使用者可以依照條件篩選自己所需要的產品
  3. 提升篩選器的易用性
  4. 在產品頁面中顯示價格資訊
  5. 加上緊急、限量等的提示(例如:剩餘幾件、倒數幾天)
  6. 用條列式說明,讓產品敘述簡單易懂
  7. 在轉換發生(例如:下單購買)前再次強調價值主張,增強信心
  8. 次要的呼籲按鈕,在購物流程中也一樣重要(例如:收藏最愛、下次再買)

E. 轉換(Conversion)

  1. 不要在加入購物車後,直接指向結帳頁
  2. 在購物車頁面再次強調價值主張(例如:免運費)
  3. 允許使用者更新編輯他的購物車
  4. 使用者儲存後,可以在其他裝置(X-device)下繼續使用
  5. 在整個購物流程中,限制可能跳出流程的因素,相對地,可以引導使用者到首頁或回到購物車
  6. 允許使用者在非會員的情況結帳
  7. 在創建帳號時,說明原因及其價值主張
  8. 不要讓使用者重複確認帳號資訊
  9. 讓使用者連結社群帳號註冊
  10. 一個驗證過的 API 位址,讓使用者不需要再次輸入帳號密碼登入
  11. 如果整個購物流程超過兩個步驟,建議使用進度條,讓使用者知道自己在哪個步驟

F. 表格欄位(Form optimization)

  1. 在必填欄位加上星號註記
  2. 行內顯示驗證結果(而不是送出資料後才顯示)
  3. 自動填入已知資訊
  4. 減少結帳時填寫欄位的數量
  5. 低於三個選項時,建議不要使用下拉式選單
  6. 不同的填寫欄位,呼叫對應的數字或英文鍵盤

看了這麼多,只能說魔鬼藏在細節裡,要建立一個流暢的購物體驗,整個流程中有非常多細節需要考慮,包含 UI 的畫面設計、文案撰寫,甚至是程式的功能調整。

要創建一個好的 UX 體驗,不是只有UX設計師自己就可以完成的。

另外也發現,手機載具的體驗幾乎成為顯學,現在已經要考慮的已經不是 Mobile-first,更多的是 Mobile-native 的使用者,資訊架構的流程與操作行為都與過去電腦的使用行為有所不同,而這也是在做企業優化轉型前需要考量的因素。

儘管因應不同的受眾、產品與市場,這些官方建議不一定真的對你的產品有效,但我們仍然可以透過別人的案例分析,了解他們這麼做的原因及脈絡。

而且在數位的時代裡面,想要知道有沒有成效,直接做一次 A/B Test ,我想就會是最快也最有效的方式了!

以上,如果你有任何想法或建議,歡迎直接留言跟我分享。

謝謝你看到這裡,如果我的文章有幫助到你,拍個手可以讓我更有動力。


留言
avatar-img
Yuki 的書適圈
115會員
50內容數
我喜歡閱讀「設計、心理學、自我成長」等類別書籍。相信每個人都有自己的時區,不快不慢剛剛好,所以紀錄在閱讀成長的路上,覺得深刻又值得推薦的內容。
Yuki 的書適圈的其他內容
2023/12/24
在上一篇文章 《人生四千個禮拜》|重新思考與理解時間的意義中有提到,作者的主張:坦然接受「生也有涯」,要我們直面生命與時間的有限性,在書末給出十項具體的操作方法,跟大家分享十項具體操作步驟中,我實際應用在生活與工作中的方式: 最近剛好專案結束
Thumbnail
2023/12/24
在上一篇文章 《人生四千個禮拜》|重新思考與理解時間的意義中有提到,作者的主張:坦然接受「生也有涯」,要我們直面生命與時間的有限性,在書末給出十項具體的操作方法,跟大家分享十項具體操作步驟中,我實際應用在生活與工作中的方式: 最近剛好專案結束
Thumbnail
2023/11/16
遠端工作兩年多來,雖然偶爾也會帶電腦到咖啡廳工作,但出國工作還是第一次體驗,2023年11月,我出發前往韓國大邱遠端工作幾天,這次在準備行李時,因應工作需求做了不同的準備,再加上實際體驗下來,有一些不同於單純旅遊的心得。 身邊比較少人跟我有一樣經驗,覺得可以順便做個紀錄給未來的自己參考。
Thumbnail
含有成人內容
2023/11/16
遠端工作兩年多來,雖然偶爾也會帶電腦到咖啡廳工作,但出國工作還是第一次體驗,2023年11月,我出發前往韓國大邱遠端工作幾天,這次在準備行李時,因應工作需求做了不同的準備,再加上實際體驗下來,有一些不同於單純旅遊的心得。 身邊比較少人跟我有一樣經驗,覺得可以順便做個紀錄給未來的自己參考。
Thumbnail
含有成人內容
看更多
你可能也想看
Thumbnail
近期 Google 搜尋引擎API機密文件的外流事件,絕對是近期震撼數位行銷世界的一大頭條,其內容揭示了一些有關 Google 搜尋結果生成原理的重要細節。今天本男爵就來跟各位聊聊這其中獲得的寶貴洞察,或許會對您在設計網站內容時有一些不同的想法!
Thumbnail
近期 Google 搜尋引擎API機密文件的外流事件,絕對是近期震撼數位行銷世界的一大頭條,其內容揭示了一些有關 Google 搜尋結果生成原理的重要細節。今天本男爵就來跟各位聊聊這其中獲得的寶貴洞察,或許會對您在設計網站內容時有一些不同的想法!
Thumbnail
好的網站應該要有直覺性網站版面配置與迅速的網頁載入速度,需要具備好的使用者體驗,進而提升SEO關鍵字排名。隨著時代演進,網站設計經歷了五個世代的變革,並逐漸注重UI/UX的整合。本文說明網站版面的重要觀念、配色的重要性、動畫對網站行銷的影響,以及改善網站PSI分數的優化方法。
Thumbnail
好的網站應該要有直覺性網站版面配置與迅速的網頁載入速度,需要具備好的使用者體驗,進而提升SEO關鍵字排名。隨著時代演進,網站設計經歷了五個世代的變革,並逐漸注重UI/UX的整合。本文說明網站版面的重要觀念、配色的重要性、動畫對網站行銷的影響,以及改善網站PSI分數的優化方法。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
文章目錄 GA4 簡介 SEO 代理商 GA4 應用 社群媒體代理商 GA4 應用 數位廣告代理商 GA4 應用 數位行銷顧問公司 GA4 應用 網站設計與開發公司 GA4 應用 影片製作公司與內容行銷代理商 GA4 應用 聯絡 TenMax 獲得免費 GA4 健檢機會 GA4
Thumbnail
文章目錄 GA4 簡介 SEO 代理商 GA4 應用 社群媒體代理商 GA4 應用 數位廣告代理商 GA4 應用 數位行銷顧問公司 GA4 應用 網站設計與開發公司 GA4 應用 影片製作公司與內容行銷代理商 GA4 應用 聯絡 TenMax 獲得免費 GA4 健檢機會 GA4
Thumbnail
【設計素材】Google Fonts Icons 這個網站是 Google Fonts 的「Icons」頁面,提供了免費的字型,其中的 Material Symbols 圖示字型,這組字型收錄了超過三千個圖示 icon。在這組圖示中,還提供了多款可調整的樣式,包含了不同粗細組合,您可以直接
Thumbnail
【設計素材】Google Fonts Icons 這個網站是 Google Fonts 的「Icons」頁面,提供了免費的字型,其中的 Material Symbols 圖示字型,這組字型收錄了超過三千個圖示 icon。在這組圖示中,還提供了多款可調整的樣式,包含了不同粗細組合,您可以直接
Thumbnail
本文用圖解的方式,說明新手需知的 GA4 基本功能及 GA4 設定教學。詳解如何使用 Shopify、Shopline、Google Tag Manager(GTM)、手動埋碼等方式導入 GA4,讓你讀完一篇,輕鬆玩轉 GA4!
Thumbnail
本文用圖解的方式,說明新手需知的 GA4 基本功能及 GA4 設定教學。詳解如何使用 Shopify、Shopline、Google Tag Manager(GTM)、手動埋碼等方式導入 GA4,讓你讀完一篇,輕鬆玩轉 GA4!
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
本文深入探討 Google 的搜尋品質評估指南如何影響電商網站的SEO。特別是針對電商經營者,瞭解E-A-T準則(專業性、權威性、可信度)以及YMYL類別的重要性至關重要。透過解析高品質網站的關鍵要素,例如清晰的聯絡資訊、FAQ頁面以及商品評論功能,本文提供實用建議,幫助電商平臺在SEO上取得佳績。
Thumbnail
本文深入探討 Google 的搜尋品質評估指南如何影響電商網站的SEO。特別是針對電商經營者,瞭解E-A-T準則(專業性、權威性、可信度)以及YMYL類別的重要性至關重要。透過解析高品質網站的關鍵要素,例如清晰的聯絡資訊、FAQ頁面以及商品評論功能,本文提供實用建議,幫助電商平臺在SEO上取得佳績。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
當使用Google架設網站時,請考慮以下幾點。 目標設定:明確網站目的,選擇適合模板。 設計一致性:統一色系、字體和風格。 內容優化:用吸引力的標題、圖片、影片增加內容價值。 響應式設計:確保內容在各設備良好呈現。 專業域名:購買並設定獨特網域。 SEO優化:優化標題、描述、關鍵字和內部
Thumbnail
當使用Google架設網站時,請考慮以下幾點。 目標設定:明確網站目的,選擇適合模板。 設計一致性:統一色系、字體和風格。 內容優化:用吸引力的標題、圖片、影片增加內容價值。 響應式設計:確保內容在各設備良好呈現。 專業域名:購買並設定獨特網域。 SEO優化:優化標題、描述、關鍵字和內部
Thumbnail
資訊架構就像是網站的地圖,讓用戶快速找到所需的資訊。好的資訊架構可提升使用者滿意度、強化 SEO、增進擴充性、達成商業目標。資訊架構可透過使用者訪談、卡片分析、競品分析、使用者測試等方法設計。在設計資訊架構時,需考量用戶的認知方式、目標客群、資訊分類等因素。定期檢驗資訊架構,才能確保用戶體驗。
Thumbnail
資訊架構就像是網站的地圖,讓用戶快速找到所需的資訊。好的資訊架構可提升使用者滿意度、強化 SEO、增進擴充性、達成商業目標。資訊架構可透過使用者訪談、卡片分析、競品分析、使用者測試等方法設計。在設計資訊架構時,需考量用戶的認知方式、目標客群、資訊分類等因素。定期檢驗資訊架構,才能確保用戶體驗。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News