探討移動電子商務網站中的圖文滾動切換設計

.mod-gallery .gallery-photo-items{text-align:center;}

查看完整組圖

上一頁

下一頁

很多人都會和我說,網站中的滾動切換設計一般都是弊多利少,盡量不要使用。但是,本文會告訴你並非所有情況都是如此。

我寫這篇文章就是希望我們能夠更多理解網站中的滾動切換設計,不要聽信傳聞。我將用我們的調查數據來闡述我們的發現,介紹我們用以調研的方法,同時,對如何正確使用圖文滾動切換提出一些建議。

可以說,有很多人都對滾動切換的壞名聲做出瞭貢獻。例如,Nielsen Norman團隊(由Jakob Nielsen, Donald Norman 和 Bruce Tognazzini於1998年成立的一傢電腦用戶界面和用戶體驗的咨詢公司)曾發表過關於滾動切換會妨礙用戶捕捉頁面上關鍵信息的文章。此外,最主要的言論來自於Erik Runyon(聖母大學The University of Notre Dame的技術總監和開發人員)的一篇關於學院網站中圖片滾動切換應用的分析文章。在Jared Smith 制作的一個Should I Use A Carousel?網站上,他也堅定地稱,不要使用滾動切換。隨後,網頁設計師Brad Frost在他的Carousels文章中也表達瞭對滾動切換的負面情感。最後,國際公認的數碼產品的領導者Luke Wroblewski(曾設計的軟件在海內外有十億用戶的影響力)也說現在基本已有的數據足以說服讓大傢不要再用滾動切換(下文中會提及Luke的一些言論觀點)。

在Mobify(一個幫助企業優化他們在智能手機以及平板電腦間的網頁轉換的移動電子商務平臺),我們為移動設備開發瞭大規模的電商網頁。在這些電商網頁上,大多至少都有一個滾動切換的應用。如此看來,我們做錯瞭嗎?我們在給用戶幫倒忙嗎?如果我們停止使用滾動切換,我們的網頁可以更好嗎?我和我的合作編輯Peter Maclachlan在瀏覽我們開發的網站時一直在探討這些問題。於是,我們想與其一直在別人的研究結論中迷茫,不如開始我們自己的研究。

因此,我們開始分析我們所能獲得的數據。剛開始,我們隻是很好奇我們的數據能夠反映什麼?然而,從這些數據中不斷獲得的小驚喜足以鼓動我們繼續深究下去。我們用瞭11個月的時間檢測瞭許許多多中到大型的電商網頁。在這裡我說的中到大型是指每年至少有2千萬美金(約1.26億RMB)的電商銷量的網頁。這期間,大約750萬個滾動切換的交互行為被我們進行采樣,基於這些數據,以下是我們的研究成果。

我們為什麼要用滾動切換?

我們研究中所測的一個滾動切換的案例

滾動切換不僅是一種將產品信息呈現在主頁上的方法,更是一種在移動設備上用以平衡信息密度的工具。在移動設備上,有限的小屏幕需要得到最大化的利用,我們要盡量確保總能最佳使用頁面的空間,因此通過滾動切換,就可以使信息的密度最大化,也使用戶不用通過進一步向下滑屏來獲得信息。

我們研究中所測的另一種滾動切換案例

此外,對於滾動切換來說,滾動切換間的上下關系是相互呼應並且完整的。我們的設計團隊會盡量避免提供前後關系不呼應的滾動切換給用戶。多數情況下,我們隻在網頁中的一個地方使用滾動切換,即:在呈現產品細節圖集的時候。此時,用戶知道可以通過滑動滾動切換來獲得產品更多的圖片信息。而在主頁上的商用滾動切換中,用戶往往會對下一張會呈現什麼內容以及他們為什麼要關註這些內容一無所知。

滾動切換的反對聲

目前關於滾動切換應用的批評主要在以下四點:

1.用戶無法用滾動切換進行交互。

2.如果用戶用滾動切換進行交互,那他們的交互行為也僅僅局限於第一張圖文。

3.滾動切換這種方法是不可取的 。

4.用戶不喜歡滾動切換中元素的自動更替。

我們將通過對比Erik Runyon的數據以及我們所找到的數據來解說前兩個問題,後兩個問題因為比較偏向滾動切換的性質意義,因此我將單獨來分析。

假設1:用戶無法用滾動切換進行交互。

論點:

現在的論據主要以Erik Runyon為聖母大學網站作調研時所提供的數據為中心。這些數據表明,隻有1.07%的網站來訪者會點擊特定的商業廣告滾動切換。此處,瀏覽圖文不能算是一種交互,隻有當用戶點擊瞭圖文才能算。

於是,為瞭辯駁這一假設,我們的數據必須顯示出用戶與滾動切換的交互率高於1.07%。

我們的結論:

在產品圖片集的滾動切換中,高達72%的用戶會至少一次切到下一張滾屏,又有23%的用戶會通過縮放行為(zooming)來與網站中的滾屏切換進行直接交互。

如果你仔細研究一下我們交互數據的縮放行為(zooming),你可以發現有23%的用戶會直接點擊進去獲取更多信息。如果把范圍擴大,即以任何方式切換到下一張滾屏都算做一種交互行為,那麼有72%的用戶會這麼做。

註釋:

如果想知道我們獲得這些結論的方法,請閱讀下文中的Findings。

假設2:如果用戶用滾動切換進行交互,那他們的交互行為也僅僅局限於第一張滾屏。

論點:

在上文中所提及的Erik所說的 1.07%會點擊滾動切換圖文的用戶中,有89.1%會點擊第一張圖文。如果我們假設圖文滾動切換是可以進行有效交互的,那麼隨著我們添加更多圖文頁,數據會呈現出一個合理的下降趨勢。Erik的數據表明位於第二張的圖文隻有3.1%的點擊率,出現瞭大幅衰減。更精準地說,在訪問聖母大學網站的3755297位用戶中,隻有1234的來訪者點擊瞭第二張圖文頁。而第二張開始後的圖文頁訪問量的衰減的趨勢是我們預期的。

於是,如果我們要辯駁這個假設,數據必須顯示出用戶在訪問第二張圖文頁時的比例需大於3.1%。

我們的結論:

我們發現用戶與滾動切換的產品圖集中的第二張圖文的直接交互率是15.7%,其中至少有64%的用戶會進一步從第二張切到第三張。

下圖中的數據顯示出用戶切換各張滾動的圖文頁的訪問比例大致呈現出一種線性的規律。當然,不同控制方式的設計會得出不同交互可能性的結果。但都體現出用戶對於下一張圖文有很高的參與度,至少64%的用戶在與第一張圖文交互後會繼續與第二張交互。

聖母大學的數據很明顯是依照用戶點擊圖文來測量交互率的。為瞭使得數據之間進行有效的對比,在我們的研究中,這是一種直接交互中的縮放行為交互(zooming)。我們的數據顯示,23%的用戶會進行縮放交互,這其中,54.1%的用戶會縮放第一張圖文,而會於第二張圖文交互的比例達到瞭15.7%。(如下圖所示)

我們的數據圖看起來和Erik的很相似,即絕大多數用戶的直接交互行會發生在第一張圖文。但是,在之後交互比例的遞減趨勢中,我們的調研數據會看起來比聖母大學的數據更合理一點。因為在我們的數據中,出現在第一張圖文以後的直接交互比例總和是45.9%,這就意味著近一半的直接交互會出現在首張圖文之後。

註釋:

如果想知道我們獲得這些結論的方法,請閱讀下文中的Findings。