Google優化指南2019:零售篇

Google優化指南2019:零售篇

網際網路的搜尋引擎龍頭 Google,2019年初發布了最新版的 Google UX Playbook,對各行各業的網頁平台如何創造零阻力使用者體驗(UX)作出建議,當中對零售電商的UX網頁設計優化指南包括了:

UX首頁設計

要解決的問題:我的網站是否提供用戶想要的?

Homepage best in class
進一步優化:菜單中的標籤圖標。

  • 清楚的CTA(Call to action):搜索。
  • 明確的價值主張:1)立即訂購,明天收集。
  • 包含漢堡包菜單和購物車的綜合菜單。
  • 位置圖標可推動人流。
  • 主頁上的熱門類別。
  • 清晰的字體大小。
  • 移除自動輪播。
  • 沒有整頁插頁式廣告。

Homepage best in class WarbyParker

  • 具有易於查找菜單的合併導航欄。
  • 清晰,易於查找的CTA。
  • 吸引的推銷價格:$95。
  • 清晰的主要類別:太陽鏡/眼鏡, 男人女人。
  • 其它關鍵操作,例如查找位置,了解更多信息。
  • 頁面底部有關鍵聯繫信息。
  • 非侵入式應用橫幅。

進一步優化:在菜單中標記圖標,不使用幻像按鈕。

UX導航設計

要解決的問題:用戶可以快速地瀏覽他們感興趣的內容嗎?

Navigation best in class:Net a Porter

  • 菜單選項保持在單頁上。
  • 折疊菜單包括“註冊”和“登錄”之類的售後動作。
  • 產品類別按瀏覽量排列。
  • 產品子類別別按字母順序排列。
  • 容易返回。
  • 額外優化:使用動態菜單代替擴展菜單。

Navigation best in class:macys

  • 菜單選項保持在單頁上。
  • 折疊菜單上方包括“註冊”和“登錄”之類的售後行為。
  • 產品類別按瀏覽量排列。
  • 子類別按字母順序排列。
  • 容易展現和收起菜單。
  • 額外優化:使用動態菜單代替擴展菜單。

進一步優化:在菜單中標記圖示,以確保動畫符合RAIL標準。

UX搜尋設計

要解決的問題:如何幫助用戶找到他們要的內容?
Search best in class:Sephora

  • 搜索欄顯而易見。
  • 使用打字建議,例如:產品和類別。
  • 對常見的拼寫錯誤的使用自動更正。
  • 容易返回結果。
  • 顯示搜索記錄。

進一步優化:在菜單中標記圖標,以確保動畫符合RAIL標準。

Search best in class:Staples

  • 搜索欄顯而易見。
  • 使用打字建議,例如:產品和類別。
  • 顯示最近的搜索和趨勢。
  • 顯示搜索記錄。
  • 對常見的拼寫錯誤的使用自動更正。

進一步優化:標籤圖標。

UX產品類別設計

要解決的問題:用戶是否容易找到適合他們需求的產品?如果用戶不感興趣,如何引導他們的建立新的興趣?
Category Product best in class:Sephora

  • 進行篩選分類。
  • 對搜尋和類別頁面的結果進行篩選排列。
  • 容易返回搜尋和產品類別的上一頁。
  • 在產品頁面中的有CTA按鈕,方便找到其產品和價格的資訊。
  • 容易理解和便於閱讀的產品說明。
  • 產品可以被評論。

UX購物流程設計

要解決的問題:購買過程如何簡易化?
如何幫助猶豫不決的用戶在下次進行購買的行動?

  • 15%折扣的信息顯而易見。
  • 容易更改購買數量和儲存相關產品訊息。
  • 用戶可以隨時進行付款結帳。
  • 引導用戶註冊成為會員,甚至容許結帳後進行註冊。
  • 簡化付款結帳的表格流程。
  • 付款結帳流程以數個分頁,一步步地簡易完成。

Cart Conversion best in class:Zumiez

  • 容易更改購買數量和儲存相關產品訊息。
  • 可以透過電子郵件發送我的購物車資料。
  • 容許用戶以訪客的方式付款結帳。
  • 付款結帳時, 引導用戶專註付款而不被其它訊息打擾。
  • 讓用戶知道結帳付款是在安全加密的環境中進行。
  • 付款結帳流程以數個分頁,一步步地簡易完成。
  • 用有描述性的CTA按鈕,讓用戶對下一步的行為更有了解,例如以“選擇運費”的明確訊息代替不明確的“繼續”或“下一步”的字眼。

UX表單優化

要解決的問題:如何幫助用戶快速便捷地付款?
Form optimization best in class:Warby Parker

  • 合併名字和姓氏。
  • 用戶不需輸入兩次密碼。
  • 即時驗證(以綠點)。
  • 跳過字段時出現提示。
  • 使用自動填寫。
  • 地址信息使用Google Places API自動填寫5種送貨方式。
  • 信用卡字段直到點擊時才展開。
  • 自動計算運費。
  • 頁底有聯繫客戶服務的訊息。

Form optimization best in class:ThredUp

  • 付款結帳時, 引導用戶專註付款而不被其它訊息打擾。
  • 簡化填寫地址行數,只需一行以供輸入。
  • 使用自動填寫。
  • 即時驗證(以綠點)。
  • 地址信息使用Google Places API自動填寫5種送貨方式。
  • 信用卡字段使用正確的鍵盤
  • 自動計算運費。
  • 頁面底部“免費送貨與退貨”的信息,加強用戶購買的信心。
  • 頁底有聯繫客戶服務的訊息。

Form optimization best in class:Zalando

  • 付款結帳時, 引導用戶專註付款而不被其它訊息打擾。
  • 分頁在頂部顯示用戶身處於何步驟,可以返回上一步或下一步。
  • 頁面頂部讓用戶知道結帳付款是在安全加密的環境中進行。
  • 頁底有聯繫客戶服務的訊息。
  • 有地址以供查詢。
  • 以有付款和交貨這2個選擇代替選項的下拉菜單。
  • 因應文字或數字的輸入,自動轉用正確的鍵盤介面。

UX CTA(Call to action)設計

引導用戶如何有效地與網站平台和產品服務的交互。

Call to action
warbyparker
Call to action
tuftandneedle
Call to action
nest
Call to action
amazon
Call to action
asos
Call to action
nike

具有描述性的CTA設計

引導用戶如何有效地與網站平台和產品服務的交互。

Call to action
warbyparker
Call to action
tuftandneedle
Call to action
nest

引導性CTA設計的好處

研究顯示UX CTA 設計導致會員註冊人數增加了33%

Call to action

在首頁清晰地進行有價值的引導

Display a clear benefit oriented value prop
sephora
Display a clear benefit oriented value prop
target
Display a clear benefit oriented value prop
westelm

不要使用整頁插頁式廣告

不要使用整頁插頁式廣告
adiamor
不要使用整頁插頁式廣告
forever21
不要使用整頁插頁式廣告
asos

不要自動輪播,應由用戶主導選擇

不要自動輪播
novica
不要自動輪播
macys
不要自動輪播
asos

研究顯示自動輪播橫幅廣告沒有效益

主頁上的圖像自動輪播可以被視為橫幅廣告,不應該自動輪播,而應該由用戶主導播放與否。

Research shows that carousels rarely work

  • 人腦已橫幅廣告自動忽略。
  • 容易錯過重要內容。
  • 資訊過多等於沒有資訊

相關研究:

在首頁上顯示熱門類別

Show top categories on homepage
boots
Show top categories on homepage
lulus
Show top categories on homepage
victorianplumbing

Show top categories on homepage
petco
Show top categories on homepage
asos
Show top categories on homepage
crutchfield

社交媒體等的認證

Use social proof

crutchfield

Use social proof
tuftandneedle
Use social proof
poshmark

顯示合併菜單

面積佔頁面不多於5分1
Show consolidated menu
boots
Show consolidated menu
asos
Show consolidated menu
victorianplumbing

顯示電話圖標和號碼

如果電話聯絡很重要,請在菜單中加入電話圖標或電話號碼
consolidated menu phone no
casper
consolidated menu phone no
arrow

顯示實體店座標

如果您有實體店,請在頁眉或菜單中包含商店定位器圖標
a physical store include store locator icon
charlestyrwhitt
a physical store include store locator icon
hay
a physical store include store locator icon
sephora

UX商店定位圖標的例子

顯示商店定位圖標
charmingcharlie
顯示商店定位圖標
zumiez

一頁就顯示整個菜單

當使用動態菜單或擴展器設計時,要一頁就能夠顯示整個菜單。
一頁就顯示整個菜單​
dobell
一頁就顯示整個菜單​
farfetch
一頁就顯示整個菜單​
sephora

顯示客戶服務

在菜單中顯示售後操作,例如客戶服務。

顯示客戶服務
dobell
顯示客戶服務
netaporter
顯示客戶服務
patagonia

動態菜單設計

使用動態菜單設計時,以得到更好的視覺層次。
使用動態菜單設計
netaporter
使用動態菜單設計
farfetch
使用動態菜單設計
macys

UX動態菜單設計的例子

UX動態菜單設計
warbyparker
UX動態菜單設計
sephora
UX動態菜單設計
patagonia

UX浮動菜單設計

當用戶滾動時該菜單時,可以考慮一個浮動菜單設計。
UX浮動菜單設計
cos
UX浮動菜單設計
moo
UX浮動菜單設計
lyst

UX導航設計

可以考慮自下而上的導航。

自下而上的UX導航
wordery
自下而上的UX導航
fandango
自下而上的UX導航
glossier


資料來源:UX Playbook for Retail

One Response

加入評論

Your email address will not be published. Required fields are marked *