[譯文]移動電商網站中輪播組件用法研究

看到這個標題你內心里或許會充滿疑惑，我在寫這篇文章之前，也曾經有很多疑問。你去問任何一個人，他們都不會推薦使用輪播這種模式。但是輪播本身并 不是那么一無是處。 本文將基于真實的數據，針對近期業界對輪播組件的各種爭論做個回應，看看大家對它的評論是不是名副其實。我會針對各個觀點進行剖析，看看我們的數據與預期 是否一致。通過這些內容，我會詳細闡述我們的研究發現和研究方法，并給大家一些建議，希望對大家未來在判斷何時以及如何使用輪播組件有價值。

之前有很多人不看好輪播這種模式。從NNG的一篇文章開始；真正的轉折點是Erik Runyon發表的關于圣母大學網站的一篇詳細分析輪播模式的文章“輪播組件用法詳解”；在Jared Smith的文章“是否應該使用輪播”中，他建議大家放棄使用輪播組件；Brad Frost也在他的文章“輪播組件”中呼應了這種對輪播的負面評價；緊接著Luke Wroblewski加入了反對派的陣營，他說從目前的數據來看，建議不要使用輪播，他的文章詳情見“ 以后絕對不再使用輪播”，（他后來又補充數據說對他的結論有懷疑）。
在Mobify（提供移動建站服務的網站），我們開發用于移動設備的大型電子商務網站。很多情況下，這些網站都有一個輪播組件。我們這樣做錯了嗎？是不是 傷害了我們的用戶？如果我們停止使用輪播組件，我們的網站是否就會變得更好？這些問題是我和這篇文章的共同作者Peter Maclachlan在審查我們開發的網站時反復問自己的。我和Peter決定做我們自己的研究，而不是盲目追隨網上這些反對輪播組件的聲音。
自此，我們開始研究那些我們能獲取的數據。剛開始，我們充滿好奇，我們的數據說明了什么呢？我們的發現令人非常驚喜，并且鼓舞著我們不斷深入研究。我們在 為期11個月的時間里審查了幾個中型到大型的網站。我說的中型到大型網站，是指在過去一年里交易額不少于兩千萬美金的網站。在這11個月的時間里，我們研 究了近750萬次輪播組件的交互事件。這篇文章的結論都是基于這些數據所做的分析。

我們為什么要使用輪播組件

輪播組件存在的意義絕對不僅僅是為了在首頁顯示更多的市場營銷信息。因為我們是專注于做無線端設計的，我們最大的顧慮就是要確保在有限的屏幕尺寸和 信息的密度之間做好平衡。這意味著，我們總是要在有限的面積里做好水平和垂直方向上的空間利用。我們使用輪播組件可以增強信息的密度，并且不需要用戶在查 看時滾動頁面。 使用情景也是理解輪播組件的一部分。我們的設計團隊只是在規避使用輪播組件，而沒有向用戶提供具體的使用情景。大部分情況下，我們只是在一中情境中使用輪 播組件：在商品詳情頁中展示更多的圖片。在商品詳情頁中，用戶知道左右滑動一個輪播組件可以查看更多的商品圖片。在一個網站首頁的市場營銷輪播組件中，用 戶是沒有辦法知道下一張圖片是什么內容的，也不清楚這里面的信息是否需要去關注。
反對輪播組件的理由
目前反對使用輪播組件的理由主要有以下幾個方面：

1、用戶不會點擊輪播組件中的內容；

2、如果用戶要點擊輪播組件中的內容，他們只會點第一個；

3、輪播組件不易理解；

4、自動輪播對用戶不友好；

針對前兩條，我們將用我們自己的數據和Erik Runyon文中的數據作比較。最后兩點更多的是定性的結論，我會針對性的剖析。

猜想一、用戶不會使用輪播組件
大家的爭議
這個猜想基于Erik Runyon文章中展現的圣母大學網站數據。只有1.07%的訪問者點擊了網站的Banner輪播圖。只是查看Banner無法作為交互行為被記錄，只有 產生點擊行為的用戶才算數。為了反駁這一猜想，需要有數據能夠顯示實際上發生交互行為的人數高于1.07%才行。
我們的結論
用戶對產品圖片輪播產生交互行為的比例：72%的用戶至少切換輪播圖一次；23%的用戶會放大圖片。如果你看我們的研究結果，具體的以放大操作為例，你會 發現23%的用戶直接進行圖片的放大以獲得更多的信息。如果你更關心哪些用戶有切換輪播圖的行為，數據顯示高達72%的用戶直接產生了操作行為。下文中將 會展示我們的數據是如果獲取的，請留意“發現”部分。
猜想二、用戶只對第一張輪播圖感興趣
大家的爭議
Erik提到的點擊了輪播圖的1.07%的用戶中，有89.1%的人點擊了第一張輪播圖。并且，我們猜測如果這個輪播組件是有效的，那么隨著輪播圖數量的 不斷增加，點擊分布將會有一個合理的下降趨勢。Erik的數據顯示，在第二個位置的輪播圖只有整個點擊數據的3.1%。更客觀地來看，圣母大學網站中 3,755,297位訪客中只有1,234人點擊了第二個位置上的輪播圖。第二個位置之后的輪播圖的點擊數據也符合我們預期的落差。我們如果要反駁這個猜 想，那么就要有數據顯示，對第二個位置上的輪播圖有交互行為的用戶比例高于3.1%。
我們的結論 我們的數據顯示，和第二個位置上的產品圖片輪播有交互行為的用戶占比為15.7%。至少64%的用戶從第二個位置的產品圖切換到了第三個位置的產品圖。用 戶切換輪播圖有一個線性的變化規律。不同的輪播圖切換方式會導致不同的數據結果。所有的數據都表明用戶從當前的輪播圖切換到其他輪播圖的比例較高。和第一 個位置上的輪播圖有交互的用戶中，有64%的人和第二個位置上的輪播圖也產生了交互。 圣母大學的數據只是包含了用戶的點擊，而不是全部交互行為。為了確保我們的數據更有說服力，我們也會看產生直接交互行為的數據。對于我們的產品圖輪播組件 來說，那就是用戶的放大操作。數據顯示，有23%的用戶產生了放大產品圖的行為，其中54.1%的人放大的是第一個位置的產品圖。所有的放大行為中，有 15.7%發生在第二個位置的產品圖。 這個圖和Erik的數據很相似：第一個位置的輪播圖占據了絕大多數交互行為。然而，我們的數據中隨著輪播圖位置而產生的數據衰減趨勢更為合理；45.9% 的直接交互行為發生在第一個位置之外的輪播圖上。這就意味著，接近一半的直接交互行為產生在第一個位置的輪播圖之外。 提示：關于這個數據的來源，詳情請查看下文中“發現”部分。
猜想三、輪播組件不屬于無障礙設計
接下來的問題是不好的，但是易于解釋。這個爭議整體上沒有否定輪播組件，只是對于當前用法的質疑。輪播組件本身并沒有所謂的無障礙問題。當然，我們在應用 輪播組件的時候，可能存在設計上對無障礙的考慮。 這一點，我不認為是輪播組件本身的問題，但是當你決定要用輪播組件的時候，你必須要考慮。下一個版本中，我們一定會讓我們的輪播組件變成一個無障礙的插 件。這不是關于輪播組件有效性爭議的一部分，所以這里我們就不做更多論述了。輪播組件本身不算是無障礙的，但是這并不能說明我們將來在應用的時候做不到無 障礙。
猜想四、輪播組件的自動輪播對用戶不友好
這個爭議是說能自動輪播的輪播組件，想要去點擊的用戶會有障礙。我們完全同意這種觀點。如果你想要用輪播組件，一定要避免使用自動輪播。如果你需要更多的 理由，請看這篇Brad Frost的文章。 關于這個問題的可以閱讀Jakob Nielsen的文章”用戶不喜歡自動輪播的輪播組件以及手風琴組件”，沒有那個輪播組件我們設計成自動輪播的。 如果你不得不使用自動輪播，那么在用戶準備要產生交互行為的時候，請停止自動輪播。 當用戶想要點擊一個輪播圖的時候，因為自動輪播到下一張，導致用戶點擊錯誤，這種體驗非常糟糕。在PC端，這意味著當用戶的光標Hover到輪播圖的時 候，停止自動輪播。在移動端，這意味著當用戶準備觸摸的時就停止自動輪播。自動輪播不友好。如果你要使用輪播組件，請不要讓它自動輪播。
發現
提醒：這一部分主要是揭秘我們是如何做上述研究，數據是如何獲取的。如果你對此感興趣，請繼續往下讀，如果不感興趣，請跳過這一部分。
研究方法及情景 這些數據來源于對幾個中型到大型電子商務網站長達11個月的分析。在此期間，我們抽樣了大約750萬個輪播組件的交互事件。我們遵循隱私保護協議，沒有保留任何個人信息。
為了針對上述的前兩個猜想，我們的數據主要著眼于以下兩點：
1、用戶與輪播組件產生交互的頻率；
2、用戶與輪播組件中第一個位置之外的圖片產生交互的頻率；
定義交互方式
在研究中，我們跟蹤了輪播圖組件中的四種交互方式： 1、智能手機中，用左右滑動的手勢切換輪播圖； 2、單擊輪播圖組件中的箭頭，每次切換一張圖； 3、單擊輪播圖組件底部的縮略圖切換； 4、單擊輪播圖中當前的圖片，放大至全屏查看；

為了和圣母大學的數據相對應，我們選擇了第四種交互方式，單擊放大，這個操作和點擊比較類似。兩種情況下，用戶都是對當前的輪播圖比較感興趣，并且 希望了解更多內容。補充另外一點，我們關注的交互方式是指那些最核心的交互，不包含那些無法觸發交互事件的操作。沒有導致輪播圖切換的意外滑動也不算是能 觸發交互事件的交互。

結論

1.各種交互方式的使用占比 我們首先研究的是用戶使用手機中輪播圖組件的頻率，我們是通過獨立的交互事件來看這一現象。這里所說的獨立交互事件，是指用戶通過上述的交互方式和輪播圖 組件的首次交互行為。如果一個用戶點擊了5個輪播圖的縮略圖，那么我們計算的時候還是只算一個獨立的交互事件。下文中我們將更詳盡的闡述獨立交互事件。數 據顯示，一個頁面中大約72%的用戶以各種方式對輪播圖進行了操作。縮略圖是最清晰地，能夠提前預知內容的交互方式：55%的用戶至少點擊一個縮略圖。

1a.各種交互方式的占比 我們的數據表明，縮略圖是最受用戶歡迎的交互方式。事實上，縮略圖的使用率是其他類型的輪播圖切換方式的兩倍，受歡迎程度比箭頭和左右滑動加起來還要高。 放大操作是用戶進行的操作中頻次僅次于點擊縮略圖的操作。放大和左右滑動的共性是，可以出發操作的區域都比較大，幾乎是點擊輪播圖的任何位置都可以觸發。 我們猜想用戶的放大操作中又不部分可能是誤操作。話雖這么說，放大操作仍然是用戶目的性比較強的一個操作，所以產生意外操作的概率不高。大約23%的訪客 進行了放大操作。左右滑動是用戶使用率最低的操作。這一點強有力的說明，給用戶提供一個清晰的控制系統有利于引導用戶進行操作。箭頭和左右滑動操作都是為 了切換到下一張輪播圖。如果我們把這兩種交互方式整合在一起，他們的使用率和縮略圖比較接近。

2.所有類型的操作 總體上看，每個輪播圖平均有2.4次交互事件。這表明與輪播圖產生交互的72%的訪客中，產生多次交互行為是很正常的。

2a.各種類型的交互方式操作次數占比（非獨立） 點擊縮略圖的用戶中更傾向于使用縮略圖而不是其他交互方式，平均在一個輪播圖中點擊6張縮略圖。 左右滑動和點擊箭頭進行操作的用戶有近似的操作頻率：平均數分別是3.5和3.9次。放大操作的交互次數較少，這表明用戶只有在對某張產品圖非常感興趣的 情況下才會放大。 操作縮略圖的用戶擁有最高的點擊次數，這說明略縮圖的交互方式比箭頭和左右滑動有更高的用戶參與度。探索這一層次的參與度所導致的額外轉化，比如“加入購 物車”將會是件有趣的事情。如果結合箭頭和左右滑動兩種交互方式來看，數據和我們分析的獨立交互方式比較接近，前后移動（滑動或箭頭操作）是輪播圖中最普 遍的交互方式。

3.交互頻次衰減率

從我們統計到的數據，可以畫出用戶每次操作時之后再次操作的概率曲線。在輪播圖切換的案例中，這就是說在用戶從第一張輪播圖切換到第二張輪播圖之 后，再從第二張輪播圖切換到第三張輪播圖。 在直接交互的案例中，這就是說點擊放大第一張輪播圖之后再去點擊放大其他的輪播圖。我們畫出了各種不同交互方式下的曲線：縮略圖、箭頭、滑動、放大。

3a.縮略圖

每一張被點擊過的縮略圖，用戶有大約69%的可能性會繼續點擊其他縮略圖。從下圖中的指數衰減曲線可以更精確的看出這一變化趨勢。盡管用戶點擊縮略圖可以有很多可能的順序，但是大部分的縮略圖用戶還是按照輪播圖中默認給定順序查看。

3b.箭頭

對于每個被點擊的箭頭，我們發現用一個接近線性的衰減曲線來描述是比較準確的。在這種線性衰減中，用戶有大約76%的可能性會會再次點擊這個箭頭來查看下一張輪播圖。

3c.左右滑動

左右滑動的衰減也是線性的，用戶有64%的可能性會再次滑動。下圖是一個更精準的指數變化趨勢圖。 3d.放大 放大操作的規律遵循冪定律，線性的變化不能準確描述這一趨勢，下圖的函數能夠比較真實的反映其趨勢。

一些思考

營銷類輪播圖 VS 圖片輪播

這是我們在用我們的數據和Erik統計的圣母大學的數據作比較時發現的問題。我們用的輪播圖類型不同。我認為這個問題并不影響我們的研究結論。這兩 種輪播圖或許在視覺樣式上不相同，但是我們的研究說明他們的基本模式是成功的。我們這項研究的目的是為了驗證這種水平滾動的多頁輪播圖是不是有缺陷。從數 據來看，并沒有明顯的缺陷。圣母大學輪播圖的問題可能不在輪播圖組件本身，而是設計問題。

用戶對營銷Banner的認知本身就比較疑惑。這類輪播Banner可能根本就不能給用戶提供有效信息。有很多的原因會導致輪播Banner的無 效，以至于大家認為這個UI模式本身就有問題。我們的網站有時也會使用營銷類輪播Banner。接下來我們將會用我們的數據和圣母大學網站的數據作一個很 有意思的比較。

Luke Wroblewski在Google的一次演講中提到Amazon UX經理PJ McCormick的數據。PJ展示了Amazon使用營銷Banner輪播圖組件的一些積極樂觀的數據。Luke認為目前的營銷輪播組件最大的設計問題 是控制輪播的部分不夠明確。下圖中，Amazon的輪播圖組件設計明確的將控制輪播的部分單獨出來，這樣做就很好地回避了控制部分不夠明確的問題。

手機端交互 VS PC端交互

我們的輪播組件只在手機端有。圣母大學的網站只在PC端有輪播組件。用戶在手機端的交互要比PC端頻繁。這有可能是因為手機端有滑動操作，也可能是因為PC端用鼠標操作小控件比較難。還有可能是由于輪播組件原本就是更適合手機上實用的一種模式。

輪播組件成功應用的標準 我們這里說的輪播組件成功應用的標準和Erik的標準不同。Erik的更在意用戶是否通過輪播圖點擊到了里面的內容，重點看這個轉化率。我們的標準是看用 戶是否有查看更多的意圖，是否看了所有產品圖片。前者的標準顯然更高，要求用戶點擊打開新的頁面。這就是為什么圣母大學網站中的輪播組件數據相對于我們的 數據更低。

大學的網站VS電子商務網站 我們拿圣母大學的網站和我們的網站作比較，有一個局限性，那就是圣母大學的網站用戶和我們的網站用戶使用情景不同，兩個網站或許沒有可比性。電子商務網站 用戶的目標是發現更多關于產品的信息以便于做出購買決策。大學網站的用戶是為了學習或者找到關于大學的一個具體信息。

對未來的一些思考

這一次的數據分析使我明白了，對于輪播組件，我們還有很多研究工作要做。下面的這些內容使我希望自己將來可以進一步研究，也希望看到其他同行可以針 對此進行一些研究： 1、針對不同類型的輪播組件做對比研究。這將有助于研究我們的營銷類輪播組件和 Erik Runyon的數據有何不同。 2、衡量交互方式是如何影響用戶的操作行為趨勢。如果他們操作的是一個產品圖片集合，他們是更愿意還是更不意愿使用加入購物車呢？ 3、我希望知道是否有辦法衡量手機端、PAD端、PC端用戶在輪播組件的交互方式的差異。不幸的是，我們不做PC端的站點，所以我們缺乏PC端的數據。我 們期望做直接的對比，而不僅僅是從已知數據去做推測。 4、數據顯示，在手機端，滑動是最低頻的操作。我認為滑動操作在手機上被其他交互方式弱化了，或許也是因為在PC端，用戶對滑動操作還沒有什么認知。通過 提供額外的控件，用戶可以很明確的獲得操作輪播組件的交互方式，因此，他們更愿意選擇這樣的交互方式。假如移除了輪播組件中其他的可操作控件，那么滑動的 交互方式是否會增加？

結論

這篇文章是在徹底調查Mobify為什么以及如何使用我們提供的輪播組件，構建自己的網站。不同類型的輪播組件之間差別很大。給用戶提供了額外的上 下文情景之后，不用迫使用戶做滾動操作，他們就很樂意使用輪播了。 目前關于輪播組件的數據都是關于市場營銷Banner的。這些數據都說明了一點，用戶對輪播組件中的內容很少產生交互。同時也說明了，用戶切換輪播組件中 的內容，翻到下一張輪播圖的概率非常低。當然，這些數據也證明了一些普適性的觀點：輪播組件不易于理解，自動輪播不友好。 我們的數據和Erik Runyon提供的關于圣母大學的數據共性比較少。用戶在我們的網站上交互行為更多。相對于圣母大學網站的用戶數據，我們的用戶對當前輪播圖之外的內容有 更高的交互行為比率。產生這些差異是是有很多原因的，這也是我們想在總結的環節去探討的。不同的的輪播組件形式適用于不同的產品目標。 對我而言，這就是本文最大的結論。 輪播組件有很多的形狀和尺寸。有一些很有效，有一些效果并不好。在盲目的批判之前，我們應該針對不同的情況收集更為豐富的數據，來充分了解真實的狀況。 Erik的研究結果認為，首頁的市場營銷輪播效果不好也是事實。用戶不知道能從輪播組件的內容中獲取到什么信息，因此，他們也不想去操作。如果你能夠很清 晰的告訴用戶你將會獲得什么信息，這些信息對你有什么用，那么，用戶肯定也樂意去做更多的操作。

那么，你到底會不會用輪播組件呢？

不要僅僅是為了在有限的屏幕空間展示更多內容而去用輪播組件。輪播組件主要是用于為用戶提供特定情境下更多的內容。在手機端，當橫向的屏幕空間有 限，內容彼此有關聯性，并且這個內容對用戶有意義的時候通常會用輪播組件。 當內容根本就無趣或對用戶無意義時不要用輪播組件。第一張展示給用戶的輪播圖一定要能傳達出其他剩余輪播圖將要給用戶傳遞的內容。用戶從當前輪播圖切換到 其他輪播圖的時候必然是因為這樣可以獲得更多有用的信息。輪播的內容要有吸引力，這樣才能保障輪播的有效性。如果用戶對你的輪播不感興趣，這不一定是是輪 播組件本身的問題。 不要為了讓用戶看到你要展示的全部的容而使用輪播。即使你的輪播是有效的，用戶也不會查看所有的內容。第一個展示的輪播內容應該是最重要的，所有的輪播圖 應該按照重要性的順序展示。如果查看多個內容很重要，但是這不是必要的操作，那么我推薦使用縮略圖輪播的方式。 這個問題并沒有唯一的答案。在某些情況下，與市場營銷Banner輪播一樣，答案是NO。在其他情況下，與產品輪播圖一樣，答案是YES。在各種不同的設 計模式下，如果你要問“我是不是應該用輪播組件”，這的確有一個正確的回答：如果這適合你的用戶就是對的。

原文地址：[http://www.smashingmagazine.com/2015/02/09/carousel-usage-exploration-on-mobile-e-commerce-websites] 原文作者：Kyle Peatt