UX網頁設計首頁應該這樣做Blog, 網頁設計 要解決的問題 在首頁的網頁設計上,必須先要回答自己一個關鍵問題,就是我的網站是否提供的資訊是否是用戶想要的? 進一步優化:菜單中的標籤圖標。 清楚的CTA(Call to action):搜索。 明確的價值主張:1)立即訂購,明天收集。 包含漢堡包菜單和購物車的綜合菜單。 位置圖標可推動人流。 主頁上的熱門產品類別。 清晰的字體大小。 移除自動輪播。 沒有整頁插頁式廣告。 具有易於查找菜單的合併導航欄。 清晰,易於查找的CTA。 吸引的推銷價格:$95。 清晰的主要類別:太陽鏡/眼鏡, 男人女人。 其它關鍵操作,例如查找位置,了解更多信息。 頁面底部有關鍵聯繫信息。 非侵入式應用橫幅。 進一步優化:在菜單中標記圖標,不使用幻像按鈕。 清晰的CTA(Call to action)設計 引導用戶如何有效地與網站平台和產品服務的交互。 warbyparker tuftandneedle nest amazon asos nike 具有描述性的CTA設計 引導用戶如何有效地與網站平台和產品服務的交互。 warbyparker tuftandneedle nest 引導性CTA設計的好處 研究顯示UX CTA 設計導致會員註冊人數增加了33% 在首頁清晰地進行有價值的引導 sephora target westelm 不要使用整頁插頁式廣告 adiamor forever21 asos 不要自動輪播,應由用戶主導選擇 novica macys asos 研究顯示自動輪播橫幅廣告沒有效益 主頁上的圖像自動輪播可以被視為橫幅廣告,不應該自動輪播,而應該由用戶主導播放與否。 人腦已橫幅廣告自動忽略。 容易錯過重要內容。 資訊過多等於沒有資訊 相關研究: Conversion XL ClickZ Widerfunnel List Item NN Group Erik Runyon 在首頁上顯示熱門產品類別 boots lulus victorianplumbing petco asos crutchfield 社交媒體等的認證 crutchfield tuftandneedle poshmark 顯示合併菜單 面積佔頁面不多於5分1 boots asos victorianplumbing 顯示電話圖標和號碼 如果電話聯絡很重要,請在菜單中加入電話圖標或電話號碼 casper arrow 顯示實體店座標 如果您有實體店,請在頁眉或菜單中包含商店定位器圖標 charlestyrwhitt hay sephora UX商店定位圖標的例子 charmingcharlie zumiez 一頁就顯示整個菜單 當使用動態菜單或擴展器設計時,要一頁就能夠顯示整個菜單。 dobell farfetch sephora 顯示客戶服務 在菜單中顯示售後操作,例如客戶服務。 dobell netaporter patagonia 動態菜單設計 使用動態菜單設計時,以得到更好的視覺層次。 netaporter farfetch macys UX動態菜單設計的例子 warbyparker sephora patagonia UX浮動菜單設計 當用戶滾動時該菜單時,可以考慮一個浮動菜單設計。 cos moo lyst 資料來源:UX Playbook for Retail 相關文章: Google優化指南:零售篇 UX網頁設計的優化指南