移動電商網站中輪播組件用法研究

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

之前有很多人不看好輪播這種模式。從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%的訪客進行瞭放大操作。左右滑動是用戶使用率最低的操作。這一點強有力的說明,給用戶提供一個清晰的控制系統有利於引導用戶進行操作。箭頭和左右滑動操作都是為瞭切換到下一張輪播圖。如果我們把這兩種交互方式整合在一起,他們的使用率和縮略圖比較接近。