別再使用圖片輪播了

2021-02-14 恐高鄭
[譯] 別再使用圖片輪播了別再使用圖片輪播了Don't Use Automatic Image Sliders or Carousels

圖片輪播,或者旋轉木馬(也叫做「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 :

adobes

Gap :

gap

請注意,儘管 Hilton 的頁面中有一個圖像滑塊,但它並不會自動輪播。如果你想跳轉,那就點擊它。

hilton結論

如果可以,請儘量避免使用它。追隨效益,而不是去隨大流(它早晚會過時)。

那麼你將用什麼來代替它呢?或許你可以像這樣使用靜態圖片:

Brad Frost 承認『儘管圖片輪播並非那麼高效,但我總覺得它不會馬上消失』並寫下了這篇如何 改善圖片輪播 的文章。

作為網站站長,或者是用戶,你對圖片輪播這一技術又有什麼看法呢?

相關焦點

  • bootstrap輪播圖片的設計
    一個輪播圖片主要包括三個部分:  ☑ 輪播的圖片  ☑ 輪播圖片的計數器  ☑ 輪播圖片的控制器
  • Facebook輪播廣告和精品欄廣告的投放策略。
    有24.2%的Facebook主頁(包括個人主頁)使用付費媒體作為其廣告策略的一部分,因此在Facebook上投放廣告的競爭也非常激烈。 什麼是Facebook輪播廣告? Facebook輪播廣告包括多個圖像和視頻(至多10個),用戶可以使用滑動菜單進行瀏覽。
  • 愛奇藝輪播臺在哪 愛奇藝輪播臺有什麼用處
    愛奇藝是大家都很喜歡使用的一款視頻播放器,它裡面有一項「輪播臺」的頻道,整合聚集了Pconline熱門的電視節目資源,到底愛奇藝輪播臺在哪呢?快來看一看吧!2、在彈出的菜單列表中點擊「輪播臺」選項。3、好了,找到自己喜歡的輪播視頻,開始我們的視頻輪播大餐吧!輪播臺的播放是不一定要登錄愛奇藝帳號的,所以大家可以根據自己的情況來註冊登錄官方帳號。
  • vue使用uploader實現圖片上傳到後臺,選擇圖片前進行尺寸校驗
    前序:開發中我們經常會碰到上傳文件或圖片到服務端,其實現在關於文件上傳的組件庫挺多可以使用的,這裡我就以vant的uploader組件為例;當然我這裡簡單使用了vant的toast組件,實現選擇圖片前進行大小校驗提示。
  • 用jquery實現輪播圖的效果
    今天分享的是一個簡單的輪播圖,這個輪播圖的特效很簡單,能夠進行圖片的輪播以及點擊相應圖片,圖片能夠跳轉到相應位置,首先書寫的div部分:
  • Jquery製作輪播圖想見識一下嗎?
    今天就用了這五張圖片製作了一個輪播圖。首先設立一個div把這五張圖片放進去<div id="igs"> <a class="ig" href="#" style="display: block;"><img src="img/NO.1.jpg" style=" width:700px; height: 320px;"
  • 輪播圖原理深入剖析
    輪播圖效果原理剖析:網頁開發起始於布局,良好的布局,有助於我們高效的進行開發。輪播圖原理根據上面的原理圖,我們進行頁面元素的排版。輪播圖JS結束語今天的分享就到這兒了,只是簡單的實現了一下輪播圖,其實還可以加入更多的css3特效。希望能讓您有所啟發。我是路飛寫代碼,歡迎關注我,一起學習進步。
  • vue輪播圖實現
    想要達到的效果:假設輪播圖單個slide(單頁)內存在8組渲染數據,當數據存在9組的時候,slide會自動將第9組數據渲染到第二個slide下;數據存在7「個」時:
  • uni-app開發小程序實現錨點、圖片預覽、視頻播放進度保存
    scrollTop:data.top - res.top ,//到達距離頂部的top值    })  }).exec()}).exec();(2)、小程序apiwx.pageScrollTo({selector: '#a2'});2、圖片輪播
  • PPTV電視機如何播放圖片、視頻、文檔等內容?
    現在不少企業和店鋪都在公共區域安裝一臺電視機來播放宣傳圖片、視頻或者文檔等內容,但是用U盤管理和播放並不是很方便。知了知屏信息發布系統功能強大,操作簡單,用戶只需註冊一個企業帳號,在電視機上安裝知了知屏APP,即可以一鍵遠程上傳發布內容。部署簡單,5分鐘快速安裝,雲端統一管理,高效又便捷。
  • 官網為科比慶生:湖人商店降價24% 輪播經典比賽
    另外NBA TV也從美國23日零點起開始全天輪播科比生涯經典比賽,以饗球迷。另外,湖人官網也在Instagram發了一張科比圖片,稱:「我們第一次見你,你只有17歲。而那之後,我們一起經歷了波瀾壯闊的紫金王朝。生日快樂!」而官網的資深湖人隨隊記者邁克-特魯德爾也發了一張科比雙手掙著膝蓋,滿頭大汗接受他的採訪的照片。他說:「當時是4月,科比剛打滿48分鐘,然後接受賽後採訪。35歲生日快樂,比恩。」
  • 《前端5分鐘》之使用純css實現網站換膚和焦點圖切換動畫
    你將收穫網站換膚設計方案介紹:target偽類介紹和用法以及如何使用css實現網站換膚transition動畫以及如何用純css實現焦點圖動畫效果展示1.網站換膚2.焦點圖動畫>實現思路1.網站換膚通常我們實現網站換膚都基於如下方式實現:方案一: 使用OOCSS模式,通過js動態切換公共類名來達到換膚效果方案二: 點擊不同的按鈕切換不同的樣式表,如下:theme-green.csstheme-red.csstheme-black.css方案三
  • 10個超讚的jQuery圖片滑塊動畫
    在網站開發過程中,特別是前端開發這塊,經常會使用到很多圖片滑塊動畫,也就是一些基於jQuery和HTML5的焦點圖插件。
  • 戶外大屏每日輪播、活動專屬優惠,東方文德大力支持「暖愛廣州...
    戶外大屏每日輪播、活動專屬優惠,東方文德大力支持「暖愛廣州」行動金羊網  作者:鄭少玲  2020-04-10 東方文德戶外LED大屏幕接下來將會每日輪播
  • Typora使用技巧之插入圖片及圖片上傳
    還要注意的是,如果你選擇了「複製圖片到當前文件夾(./)」,那麼要把下面的「優先使用相對路徑」選項勾選上,這樣,Typora 在引用圖片時就會使用相對路徑,以後即使你移動 Markdown 文件到別的目錄下,只要圖片隨著 Markdown 文件一起移動, Typora 就永遠都能找到這張圖片。再配合接下來要講的「上傳圖片」,就能使 Markdown 文件的維護成本最小化。
  • 別再看黃片了,三月必看的17張圖片!
    別再看黃片了,三月份必看的20張圖片,大自然的魔力真強大,2月份中國大都還是白茫茫的一片,3月份中國各地都變綠了,放佛上帝打翻了綠顏色的油墨,小編這就來帶大家欣賞一下中國各地的美色吧
  • 當有一個人可以開始左右你情緒別猶豫刪圖片,當有一個人可以開始...
    有很多用戶在玩抖音的時候,有看到這樣的話,當有一個人可以開始左右你情緒別猶豫刪,這個話是什麼意思呢?小編的理解就是,如果你太在乎一個的看法和意見,那麼可以試著忘記這個人,這樣才不會迷失自我,這對自己和別人都是好的,讓你這個對待的人,也許並不需要這份關注,你也可以放開自我。
  • 圖片比率進化史:3:2、4:3、16:9 有何區別?哪個好?
    從小到大合併同類項後則有:1:1、5:4、4:3、3:2、16:10、16:9、21:9,對比如下;不同比率比較-他們怎麼展示圖片綜合看網際網路流量大戶,使用1: 1 是一個較明顯的趨勢,不管是社交媒體還是線上購物。誠然,1: 1 的處理在跨多平臺的今天是相對簡易且一致的。