圖片輪播,或者旋轉木馬(也叫做「rotating offers」),我相信你見過沒有幾百次至少也有幾十次了吧。或許你甚至還對他們有些好感,但事實上,它們可並不是什麼好東西。
既然它們效果並不好,為什麼人們還要用呢?兩個原因:
打個廣告:如果你想成為一名頂尖的數據營銷者,藉此助力事業騰飛,請戳 CXL Institute。
來用事實說話並不只是我一個人持這樣的觀點,那些做過許多 轉換最優化 測試的專家們也都這麼說:
我們做過許多圖片輪播方面的測試,最終發現,用這種方式來展示主頁內容真的很糟糕。
Chris Goward, Wider Funnel
圖片輪播簡直就是個惡魔,它應該立即消失。
Tim Ash, Site Tuners
Jakob Nielsen(沒錯,可用性領域的大師) 在測試中證實了這一點 。他們針對可用性進行了一項研究。在研究中,他們拋給用戶以下問題:『西門子的洗衣機有哪些優惠?』 答案就在最明顯的輪播上。但用戶卻視而不見 —— 廣告盲點徹底地影響了用戶們。Nielsen 的結論是:人們會忽略輪播圖。
聖母大學也做過 測試 。只有圖片輪播中的第一張圖片能得到一些點擊量(1%!),其他的根本就沒有。1% 的點擊佔用了頁面一半(或者更多)的位置?
產品設計大師 Luke Wroblweski 總結道:
在 StackExchange UX 上有個關於自動圖片輪播的 討論
一些參與測試的人們是這麼說的:
我所管理的那些測試幾乎都證明了一點:通過圖片輪播展示的內容終將被用戶無視。用戶和輪播圖幾乎沒有交互,並且許多評論說他們看起來像廣告,橫幅盲點的概念在這裡發揮得淋漓盡致,我算是見識到了。
但就空間利用和內容推廣方面而言,在這一片或使用戶分心的位置上,卻可以放置大量互相之間毫無關聯性的信息。
Adam Fellows
這兒還有一位:
圖片輪播在這一點上倒是挺高效的:它能告知市場營銷的高管們,他們的最新想法已經出現在了主頁上了。
而對於用戶來說,這幾乎就是無用的,還常常被無視,因為它們看起來像廣告。因此,這是一項在主頁上獲取無用信息的好技術(見第一句)。
總而言之,你要麼使用它來放一些讓用戶無視的內容,要麼,你就永遠別再使用它。
順帶說一句,這可不是我的一己之見,而是基於觀察了幾千個用戶測試之後得出的結論。
Lee Duddell
最後:
在我做的所有測試中,主頁的圖片輪播完全是無效的。其一,除了初始視圖之外,其他視圖與用戶的交互都大大減少。其二,圖片輪播中的信息與用戶正在尋找的信息相匹配的概率極其渺小。以至於在這種情況下,圖片輪播框作為一個大橫幅卻往往被忽略。在一次又一次的測試之後發現,當用戶在瀏覽一個帶有大型圖片輪播框的網站時,總是直接滑動滑鼠跳過輪播,進而尋找自己想要的內容。
Craig Kistler
它為什麼不管用呢?有兩個主要原因:
原因 #1:人眼對動態事物的反應(使得重要信息被錯過)我們的大腦可以分為三個層次,其中最原始的那部分甚至與爬行動物的沒什麼區別。這部分關心的是生存問題。而視野上的突變極有可能關係到生死,所以人們對運動的東西常常很敏感 —— 包括圖片輪播框中不斷播放的圖片。
eye可這是一件好事呀!不是嗎?
除非你的網站上只有一個圖片輪播框(可別這麼做!),不然這樣並不好。這意味著它將把注意力從其他真正重要的內容上拿走。比如你的 價值主張 、網站內容以及你的產品。
原因 #2:消息太多意味著無消息由於旗幟盲點,大多數人甚至都不會去關注那些圖片輪播框,就連那些不能真正得到消息的人也是如此。
訪客登錄你的網站,在輪播框中看到一條消息,正要開始閱讀:『這個秋天你要……』咻! 不見啦。這些滑塊輪轉得太快了,用戶根本來不及讀完一條消息(即使他們真的想)。
專注即高效。
原因 #3:旗幟盲點它們看起來像一幅鮮明的旗幟,可用戶就是視而不見。
用戶需掌握控制權圖片輪播常常有著 糟糕的可用性 —— 它們移動得太快了,而它們的導航圖標又太小了(如果有的話!),並且常常不聽話地自己動起來了,即使用戶想要自己手動瀏覽其內容。UI 設計的一條重要準則就是 用戶需掌握控制權。
如今許多電商網站上都使用了圖片輪播技術 —— 而且我認為他們並不是因為做過測試而選擇了這一技術,不過是群體心理作祟,人云亦云罷了。
這是 Forever21 的主頁,被詬病的是 —— 每 4 秒鐘就要在 3 張圖片之間切換一次:
21如果用戶在第一眼看到的不是他們所喜歡的(相關的),那怎麼辦?又或者,如果這三樣東西用戶一個都不喜歡呢?這明顯不利於提高你的 顧客終身價值 。
出於用戶至上的考慮,一旦滑鼠移動到圖片輪播框的箭頭上時,你應該讓它立即停止自動播放。不僅如此,當你離開一段時間後再次回到網站時,頁面中顯示的要正好是你想看到的內容。
我建議你還是用一個靜態的單一頁面把它替換掉吧。
這是來自 J.J. Buckley 的一個靜態頁面 —— 專注於單一元素使得信息得到了傳達:
jj一些之前使用過圖片輪播的用戶,如 Adobe,Gap 以及 Hilton 也都紛紛轉而使用靜態的消息頁面了。
Adobe :
adobesGap :
gap請注意,儘管 Hilton 的頁面中有一個圖像滑塊,但它並不會自動輪播。如果你想跳轉,那就點擊它。
hilton結論如果可以,請儘量避免使用它。追隨效益,而不是去隨大流(它早晚會過時)。
那麼你將用什麼來代替它呢?或許你可以像這樣使用靜態圖片:
Brad Frost 承認『儘管圖片輪播並非那麼高效,但我總覺得它不會馬上消失』並寫下了這篇如何 改善圖片輪播 的文章。
作為網站站長,或者是用戶,你對圖片輪播這一技術又有什麼看法呢?