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