為什么寫昨天看了騰訊ISUX的《你還在用輪播圖么?》(原文鏈接:https://isux.tencent.com/carousels.html) ,感覺寫得很棒,想總結一篇學習筆記。剛好前一陣接觸到結構化思維,就嘗試用結構化思維做了這篇學習筆記:
1.?輪播圖缺點
1)點擊率通常都很低
A.設計不當的輪播圖容易被用戶當成與他想瀏覽的內容不相關的廣告圖片而直接無視
B.輪播圖的交互效果十分不理想:只有1%的用戶點擊了輪播圖上切換按鈕,其中84%的用戶只在首屏點了1次
C.還有學者針對30多個B2B的網站的網站進行了研究分析,根據輪播圖的內容分成了三類:品牌宣傳(Branding)、白皮書/在線研討會(Thought Leadership)、服務推廣(Service Promtion),發現不管是哪一類的內容,點擊率都很低(0.16%~0.65%)
2)轉化效果也并不好
3)不利于SEO:
A.復雜的大圖導致網站性能低,加載速度慢。
B.使用輪換的標題。
C.Flash的使用。
2.?確保你是否必須使用輪播圖?
這么做的目的是什么,當用戶打開頁面時,最希望他關注什么內容,這些內容是否能分出優先級;通過已有的研究結論,理性認識輪播圖的效果(并非萬能,如果設計不當可能帶來負面效應);思考是否有更好的方式去達到同樣的目的;當無法抉擇時,做ABtest
3.?如果一定要用輪播圖,該怎么設計?
1)讓輪播圖看起來像是站點的一部分
2)不要自動切換:
“自動切換”這樣的交互方式不僅起不到曝光更多內容的作用,反而影響了體驗:沒有多少用戶會盯著圖片為了未知的內容耐心等待5秒,當用戶對當前的圖片內容感興趣進入閱讀狀態時,突然的自動切換會打斷用戶的閱讀進程
3)對于面積較小的點擊區域(如定位指示點),給予適當的容錯區間。
4)提示用戶所在的位置,提示用戶操作后可見的內容:
在下圖的案例中,banner區域的下方展示了不同視圖下的縮略圖和標題文字,讓用戶能夠在不進行任何切換時,就獲取隱藏的信息內容,然后再選擇自己感興趣的進行操作。
5)保證可用性,兼顧SEO:須考慮到網站的加載速度,對內容進行優化,使用輕量的圖片元素和轉場動畫,保證網站的可用性