別再用圖片輪播了,單張大圖才是王道

在優秀的使用者經驗設計中,使用者行為背後的心理學一直扮演主要角色,特別是在線上購物及電子商務網站,網頁上的每個元素都跟銷售漏斗(Sales Funnel )的精確定義息息相關,轉換率的最佳化是依賴數據而非直覺。

其中一個趨勢就是原本網頁上主要區塊的圖片輪播(automatic sliders or carousels)逐漸被單張大圖(hero images)所取代,理由是根據多項眼球追蹤實驗及A/B測試,網頁圖片輪播無法帶來更多客戶。

99%的使用者直接忽略網頁輪播圖片,因為他們根本沒時間去注意

根據WeedyGarden的研究顯示,只有1%的使用者會去點擊輪播圖片,意指輪播圖片絕大部分的內容從來沒有被看到。也就是說,在輪播圖片裡傳達單一訊息是不明智的。相對的,使用單張大圖來傳達訊息更顯得簡單明確,也讓使用者更快了解網站的內容方向。

網頁輪播圖片容易讓使用者分心,也減少內容的能見度

靜止的訊息展示能更快的傳達;動態的圖片輪播則讓使用者難以專注在其內容的呈現,在 Nielsen Norman Group的易用性研究中指出圖片輪播會讓使用者分心以及減少圖片內容的能見度。

輪播圖片的切換時機點無法滿足所有人

Nielsen Norman Group研究更進一步指出,輪播圖片對教育程度較低及非母語的使用者來說,可能會在還沒來的及閱讀和了解訊息前,圖片就開始切換了。除此之外,輪播速度太快可能會引起廣告盲化現象(banner-blindness),而造成使用者對輪播訊息的誤解。那輪播速度調慢總可以吧,不行,太慢的切換速度則會惱怒原生語言的使用者。

缺少可控制的介面(大部分)

無法控制圖片輪播會影響使用者體驗,而單張大圖完全不需要任何控制介面,使用者不用花太多力氣就能解讀訊息。

輪播圖片在行動裝置上難以最佳化

現今有超過60%的網路使用者透過行動裝置瀏覽網頁,行動裝置網站的最佳化是必要的,不管螢幕尺寸的大小都要給使用者平順的使用體驗,而google所提倡的響應式網頁設計可以只需一套html碼就可跨平台兼容各種尺寸的螢幕。

對響應式網頁設計來說,圖片最佳化可以可以減少頁面載入時間,也減少使用者的跳出率,而輪播圖片因為內含多張圖片,會影響到圖片最佳化的效率,因此,單張大圖除了能加快最佳化效率也能減少伺服器的負擔。

研究顯示使用者在瀏覽網頁,尤其是行動裝置的網頁時,只要等待頁面載入超過3秒就會感到不耐煩,這也是為什麼圖片最佳化如此重要,當然,也要有好的網站伺服器才能處理大量的流量數據。

多才是好?

自動圖片輪播也許是呈現更多訊息和促銷產品的好方法,但前面說過,圖片輪播會造成廣告盲化現象,也因此促銷訊息可能無法正確地傳達給使用者。

而單張大圖包含圖片及簡短的文字訊息,可以減少使用者分心,而讓使用者快速了解訊息進一步到達銷售漏斗的下一個階段,CrazyEgg 提供許多相關案例說明將圖片輪播替換成單張大圖可明顯提升轉換率。

文章來源:Research: Why You Should Replace Image Sliders With Hero Images