[譯] 別再使用圖片輪播了

• 原文地址：Don’t Use Automatic Image Sliders or Carousels
• 原文做者：Peep Laja
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：shawnchenxmu
• 校對者：laiyun90 thisisandy

別再使用圖片輪播了

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 認可『儘管圖片輪播並不是那麼高效，但我總以爲它不會立刻消失』並寫下了這篇如何 改善圖片輪播 的文章。

做爲網站站長，或者是用戶，你對圖片輪播這一技術又有什麼見解呢？

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。