UX首頁設計應該這樣做

UX首頁設計​應該這樣做

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

Homepage best in class
進一步優化:菜單中的標籤圖標。
  • 清楚的CTA(Call to action):搜索。
  • 明確的價值主張:1)立即訂購,明天收集。
  • 包含漢堡包菜單和購物車的綜合菜單。
  • 位置圖標可推動人流。
  • 主頁上的熱門產品類別。
  • 清晰的字體大小。
  • 移除自動輪播。
  • 沒有整頁插頁式廣告。
Homepage best in class WarbyParker
  • 具有易於查找菜單的合併導航欄。
  • 清晰,易於查找的CTA。
  • 吸引的推銷價格:$95。
  • 清晰的主要類別:太陽鏡/眼鏡, 男人女人。
  • 其它關鍵操作,例如查找位置,了解更多信息。
  • 頁面底部有關鍵聯繫信息。
  • 非侵入式應用橫幅。

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

清晰的CTA(Call to action)設計

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

具有描述性的CTA設計

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

引導性CTA設計的好處

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

Call to action

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

不要使用整頁插頁式廣告

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

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

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

Research shows that carousels rarely work
  • 人腦已橫幅廣告自動忽略。
  • 容易錯過重要內容。
  • 資訊過多等於沒有資訊
相關研究:

在首頁上顯示熱門產品類別

社交媒體等的認證

顯示合併菜單

面積佔頁面不多於5分1

顯示電話圖標和號碼

如果電話聯絡很重要,請在菜單中加入電話圖標或電話號碼

顯示實體店座標

如果您有實體店,請在頁眉或菜單中包含商店定位器圖標

UX商店定位圖標的例子

一頁就顯示整個菜單

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

顯示客戶服務

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

動態菜單設計

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

UX動態菜單設計的例子

UX浮動菜單設計

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

資料來源:UX Playbook for Retail

加入評論

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