起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識探討移動電子商務網站中的圖文滾動切換設計
很多人都會和我說,網站中的滾動切換設計一般都是弊多利少,盡量不要使用。但是，本文會告訴你并非所有情況都是如此。
我寫這篇文章就是希望我們能夠更多理解網站中的滾動切換設計，不要聽信傳聞。我將用我們的調查數據來闡述我們的發現，介紹我們用以調研的方法,同時，對如何正確使用圖文滾動切換提出一些建議。
在Mobify（一個幫助企業優化他們在智能手機以及平板電腦間的網頁轉換的移動電子商務平臺），我們為移動設備開發了大規模的電商網頁。在這些電商網頁上，大多至少都有一個滾動切換的應用。如此看來，我們做錯了嗎？我們在給用戶幫倒忙嗎？如果我們停止使用滾動切換，我們的網頁可以更好嗎？我和我的合作編輯Peter Maclachlan在瀏覽我們開發的網站時一直在探討這些問題。于是，我們想與其一直在別人的研究結論中迷茫，不如開始我們自己的研究。
可以說，有很多人都對滾動切換的壞名聲做出了貢獻。例如，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的一些言論觀點）。因此，我們開始分析我們所能獲得的數據。
剛開始，我們只是很好奇我們的數據能夠反映什么？然而，從這些數據中不斷獲得的小驚喜足以鼓動我們繼續深究下去。我們用了11個月的時間檢測了許許多多中到大型的電商網頁。在這里我說的中到大型是指每年至少有2千萬美金（約1.26億RMB）的電商銷量的網頁。這期間，大約750萬個滾動切換的交互行為被我們進行采樣，基于這些數據，以下是我們的研究成果。
我們為什么要用”滾動切換”?
我們研究中所測的一個滾動切換的案例滾動切換不僅是一種將產品信息呈現在主頁上的方法，更是一種在移動設備上用以平衡信息密度的工具。在移動設備上，有限的小屏幕需要得到最大化的利用，我們要盡量確保總能最佳使用頁面的空間，因此通過滾動切換，就可以使信息的密度最大化，也使用戶不用通過進一步向下滑屏來獲得信息。
我們研究中所測的另一種滾動切換案例
此外，對于滾動切換來說，滾動切換間的上下關系是相互呼應并且完整的。我們的設計團隊會盡量避免提供前后關系不呼應的滾動切換給用戶。多數情況下，我們只在網頁中的一個地方使用滾動切換，即：在呈現產品細節圖集的時候。此時，用戶知道可以通過滑動滾動切換來獲得產品更多的圖片信息。而在主頁上的商用滾動切換中，用戶往往會對下一張會呈現什么內容以及他們為什么要關注這些內容一無所知。
“滾動切換”的反對聲
目前關于滾動切換應用的批評主要在以下四點：
- 用戶無法用滾動切換進行交互。
- 如果用戶用滾動切換進行交互，那他們的交互行為也僅僅局限于第一張圖文。
- 滾動切換這種方法是不可取的 。
- 用戶不喜歡滾動切換中元素的自動更替。
我們將通過對比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”。
假設3：滾動切換方法是不可取的。
這里的觀點不是說要抵制使用各種圖文滾動切換，而是要辯駁現如今已被使用的圖片滾動切換。其實讓圖片滾動切換做到易被獲取不是不可能的，但是現在還很少。確實，我們自己在設計圖片滾動切換時并不會太多考慮其易訪問性。
我認為這不是圖文滾動切換自身的錯，但是當你在決定是否要用滾動切換的時候，應該考慮他的易訪問性。因此，使滾動切換的插件可以易被他人所獲取將是我們下一個版本開發的重要特性。因為這點和滾動切換的有效性無關，在此我們將不會過多談論。
正如他們說的，圖文滾動切換缺乏易訪問性，但是沒有理由說在未來無法做到。
假設4：用戶不喜歡滾動切換中元素的自動更替。
這里的論據是，如果滾動切換應用中設置了自動更替，那么想要點擊圖文的用戶就會被頁面的自動切換所干擾。我很贊同這一觀點，如果要使用滾動切換，那一定要避免自動切換更替圖文。
如果你一定要使用自動更替的滾動切換，那么當用戶開始與圖文有交互動作時就應該把它關閉，這樣起碼比讓用戶點錯圖文要好一點。具體如何做呢？
例如，當鼠標劃過電腦屏幕上的滾動切換時，停止其自動更替，或者當用戶在手機上有一個觸屏動作時，停止其自動更替。
總之，不提倡自動更替的滾動切換，如果你要做滾動切換，那就不要讓它自動更替。
發現（Findings）
注：接下來這部分主要概括了我們如何進行調研和使用數據的。如果您覺得很有興趣的話可以閱讀一下，您也可以跳過這部分到下一個章節。
調研方法和內容
我們所使用的數據來自于超過11個月時間的對一些中到大型電商網站的研究調查。這期間，我們采集了大約750萬個滾動切換的用戶交互行為。基于隱私權政策，我們保證其中不會有用戶的可識別信息。
為了使數據能夠應用于以上的幾點假設，我們主要考慮了數據的以下兩方面：
1.用戶與滾動切換交互的頻率
2.用戶與第一張以后的圖文交互的頻率
定義交互
實驗過程中，我們定義了以下四種用戶與圖文滾動切換的交互行為。
1.輕刷（swipe）：用戶在手機屏上從左至右的滑動輕掃手勢。
2.按鍵（arrow）：用戶通過點擊按鍵進入（或返回）下一張（或上一張）圖文。
3.輕擊縮略圖（thumbnails）：用戶輕擊位于圖文滾動切換底部的縮略圖。
4.縮放（zoom）：輕擊當前圖文至全屏瀏覽。
上文中也提過，要使我們的數據和圣母大學的有可比性，即：確保所研究的交互行為的一致性。我們將用到縮放（zoom），因為這在我們和圣母大學的研究中，用戶都用到此方式來參與和滾動切換的互動。
另一個很重要的點就是我們只考慮用戶有意的交互行為，偶然的誤觸和滑屏或者因其導致的圖頁切進不會觸發交互。
研究結果
1.獨一交互率
這個數據是指手機用戶多常會與滾動切換交互一次。“獨一交互”指的是用戶第一次與圖文滾動切換的任何交互行為。例如，如果一位用戶輕擊5個縮略圖，我們也將只紀錄一次交互行為，是用戶獨有的一次的交互體驗。（下文中將會細分非獨一交互）
數據表明，大約72％的網站來訪者會與滾動切換進行任何形式下交互，其中的領跑者是縮略圖交互（thumbnails），即：55％的來訪者會至少輕擊一張縮略圖。
? 獨一交互的比例
從我們的數據中可以得出，輕擊縮略圖（thumbnails）是用戶最受歡迎的交互方式，他的幾乎是其他項的兩倍，并且要比輕刷（swipe）和按鍵（arrow）的總和還多。
縮放（zoom）排在第二位，縮放（zoom）和輕刷（swipe）相對于其他方式來說具有最大的觸發區域，也就是說，用戶可以通過滾動切換圖文中的任意區域來進行縮放（zoom）和輕刷（swipe）交互。因此，我們需要假定的是這其中的一些是用戶無意識的誤觸行為。但即便如此，縮放（zoom）還是有高達23％的比率，以至于可以忽略其偶然性。
輕刷（swipe）是最不受歡迎的，這也是為什么要提倡為用戶建立明確的可視化交互控制系統。
按鍵（arrow）和輕刷（swipe）交互都包括同一舉動，即：把用戶帶入下一張圖文頁。如果我們并合他們的比例，會發現他們之和與縮略圖（thumbnails）的比例相似。
2.合計交互率
總體說來，平均每次獨一交互中會出現2.4個交互行為。這表明在72％會與滾動切換互動的來訪者中，幾乎都會與其進行大于一次的交互。
? 相同類型的交互方式的平均交互次數（非獨一）
圖中可以看出，縮略圖（thumbnails）比例是最大的，當用戶與滾動切換交互時平均每次要點擊6張縮略圖。按鍵（arrow）和輕刷（swipe）的平均次數相近，分別是3.9和3.5次?？s放（zoom）最小，用戶只有當十分感興趣的時候才會縮放產品圖片。
通過縮略圖（thumbnails）進行交互的用戶的平均交互次數最高，這說明相較于按鍵（arrow）和輕刷（swipe），用戶在縮略圖（thumbnails）具有較高級別的參與度。而對用戶的參與度的探索可以引出一些有趣的微轉換，例如“添加到購物車”的設計。
如果我們合并按鍵（arrow）和輕刷（swipe）的數值，與分析獨一交互時所用的方法相似，那么我們可以發現，這個代表“把用戶帶入下一張圖文頁”的交互方式會成為最受歡迎的那一個。
3.交互遞減率
從我們搜集的數據中，我們可以構造繼第一次之后的交互概率模型。也就是圖文切進，具體來說，就是指用戶從第一張圖文頁切換到第二張圖文頁，再繼續從第二張切到第三張。在直接交互中，這表示第一張圖文頁后繼續輕擊縮放之后的圖頁。
我們為每一種交互方式都構造了圖文切進致使的交互衰變率模型：縮略圖（thumbnails），按鍵（arrow），輕刷（swipe）以及縮放（zoom）。
? 縮略圖（thumbnails）
在縮略圖瀏覽中，大概有69％的用戶會繼續查看下一張縮略圖，我們用下面的數據遞減圖可以更明確地表示出來。值得一提的是，即便用戶可以以任何順序來瀏覽，但大多數用戶還是會依次瀏覽滾動切換中的縮略圖。
? 按鍵（arrow）
我們從按鍵（arrow）的數據圖中可以發現一個大致的線性遞減關系，其中76％的用戶會再次輕擊按鍵來瀏覽到下一張圖文頁。
? 輕刷（swipe）
輕刷交互的數據模型也是線性遞減的，有64％的用戶會再次輕刷。
? 縮放(zoom)
縮放交互的遞減模式是一個冪次定律，即：少數幾個事件的發生頻率占了整個發生頻率的大部分， 而其余的大多數事件只占整個發生頻率的一個小部分，如果r2將近0.98，則表示契合得很好。
注意事項：
商用滾動切換 VS 圖像滾動切換
在對比我們和Erik的圣母大學數據時會遇到一個問題，那就是我們所研究的滾動切換類型是不同的。但這個對我們的研究發現影響不大，盡管兩種滾動切換的類型在視覺呈現上截然不同。我們的研究目標是為了判斷是否用水平滾動切換多張圖文頁這種方式該被抵制，數據告訴我們答案是否定的。而圣母大學所研究的根本問題看似并不是普通廣義的滾動切換，更像在談論設計。
通常在網站上的廣告盲區處會設置商用滾動切換，而這些商用滾動切換無法提供相關網站信息給用戶。商業標語類的滾動切換很無效由很多原因造成，全部怪罪到用戶界面（UI）模式是不合理的，我們確實也會在網站上使用商用滾動切換，因此，如果能夠將我們和圣母大學在這方面的數據做對比，將會是一個很有趣的隨訪。
國際公認的數碼產品的領導者Luke Wroblewski（曾設計的軟件在海內外有十億用戶的影響力）在一個Google演講中提供了來自亞馬遜（Amazon）用戶體驗經理PJ McCormick的數據。PJ炫耀了亞馬遜是如何使用商業廣告滾動切換的以及所得出的更多樂觀數據。Luke表示，現有的商用滾動切換的一個很大的問題是對其控制方式的不明顯，而亞馬遜的滾動切換通常呈現在底部，通過提供一個外顯的滾動切換控制回避了這一問題。
亞馬遜的營銷滾動屏使用了清晰的控制模塊來鼓勵用戶進行交互
移動設備交互 VS 電腦桌面交互
我們的滾動切換只是基于移動設備上的研究，然而圣母大學的數據來自于電腦桌面。在這里，有一種可能性是移動設備用戶比電腦桌面用戶與滾動切換的交互更多。因為輕刷或者控制起來比用鼠標更容易也更自然一些。
滾動切換的成功標準
我們對于衡量滾動切換是否成功方式與Erik的不同，Erik是通過用戶點擊到頁面內容，而我們則是通過用戶瀏覽下一張圖文頁并且查閱所有圖片來衡量。
前一個的衡量級別更高一些，因為需要用戶輕擊并切換到新一張的頁面，這也可能是為什么圣母大學的滾動切換的交互率會比我們的更低。
學院網站 VS 電子商務網站
另外一點在將我們與圣母大學作對比時所受到的限制是網站內容的不同。在電商網站，用戶目標是發現可以做購買決定的產品信息，而院校網站則是更多與學校相關的信息。
未來的趨勢：
這份調查研究也讓我了解到仍有很多關于網站圖文滾動切換的調研需要做，可以參考以下的步驟：
1.我們希望類似的研究能夠被應用在不同類型的網站滾動切換。
2.同樣會很有趣的是研究如何通過與滾動切換交互來影響用戶行為。例如，如果與一個產品的滾動圖集交互，用戶是否會更傾向“添加到購物籃”這個選項？
3.我還希望能有更好的方法來測量各種傳播媒介對交互率的影響，如移動設備，平板電腦，電腦桌面等。
4.數據表明輕刷（swipe）是在滾動切換中用戶使用最少的交互方式之一。
調研中發現，通過提供一個附加的控制設計，用戶可以明確知曉該如何與滾動切換進行交互，那么他們就會更傾向于這種方式，這種交互方式可能對輕刷交互會有一定影響。那么值得繼續研究的是，是否刪除這種附加的控制方式就會使得輕刷（swipe）交互比例上升。
總結
我們以反省我們在Mobify網站上為什么以及如何使用我們建立的圖文滾動切換開始說起。不同類型的圖文滾動切換間有很大區別。我們發現可以通過提供上下文相關信息使滾動切換更引人注意，而不是迫使用戶去使用。
目前現有的數據中大部分是基于商業廣告網站的圖文滾動切換。這些數據也支持關于用戶與滾動切換的交互率很低——僅1.07％的論點。同時，數據也表明用戶在與滾動切換交互時繼續切進到下一張圖文頁的概率很低。數據還反映出一些公認的觀點，即：滾動切換的不易獲得性以及滾動切換中的自動更頁是不提倡的。
我們與Erik Runyon對圣母大學的研究的共同之處很少。我們的研究發現與Erik Runyon對圣母大學的研究發現有很少的共同之處。用戶與我們的滾動切換的交互率較高，此外，他們還以一個比圣母大學的研究數據高很多的比率與其他的頁面交互。會出現這些差異性的原因主要是我們各自研究的滾動切換類型和目標不同，具體說明就在我們所討論的“注意事項”中，這也是本文的重點結論。
滾動切換有多種形態大小，一些有效一些則不是，我們需要基于更多不通情況下的數據。基于Erik的研究，其對于主頁上的商用滾動切換的反對是合理的。如果用戶不知道從頁面上可以獲悉什么，他們就不會想瀏覽，因此可以通過滾動切換來示意下一張圖文頁，從而使得其真正發揮作用。
所以，你應該要用一個“滾動切換”嗎？
首先，不要只是想添加內容而使用滾動切換，可以為滾動切換思考一個特別的使用場景，即：在一個特定的上下文環境中添加信息。另外，當網頁空間受到限制的時候頁可以使用滾動切換，如移動手機，使用時要注意滾動切換中的信息內容要與網頁內容的相關。
當滾動切換中的內容不太有趣或沒什么用時也不要使用。在滾動切換中，前一張圖文頁需要對后一張起到推波助瀾的作用。想一想為什么用戶要從一張圖文切到另一張商用標語頁？除非里面有他們需要的內容。因此，滾動切換的內容需要有吸引力才能使他們更有效。
如果你想讓用戶看到全部內容的時候就不要使用滾動切換啦！即便你的滾動切換很有效，但多數用戶都不會每一頁都看。通常第一張圖文頁會展示最重要的內容，依次的重要性遞減。如果瀏覽滾動切換中的各張圖文頁對你來說是重要但不是必要的，建議可以用縮略圖（thumbnails）的方式。
言而總之，這個問題的答案不是唯一的。對于一些情況，如商業標語的滾動切換，答案會是：不要用。而例如產品圖集的滾動切換，答案會是：絕對可以。不管怎樣，對于“我可以用圖文切換嗎？”的最好回答總是：“如果對用戶好，那就用吧！”
原文：KYLE PEATT
本文為BESD設計實驗室翻譯投稿發布，轉載請注明來源于人人都是產品經理并附帶本文鏈接
- 目前還沒評論，等你發揮！
