[譯文]移動(dòng)電商網(wǎng)站中輪播組件用法研究
看到這個(gè)標(biāo)題你內(nèi)心里或許會(huì)充滿疑惑,我在寫這篇文章之前,也曾經(jīng)有很多疑問。你去問任何一個(gè)人,他們都不會(huì)推薦使用輪播這種模式。但是輪播本身并不是那么一無是處。 本文將基于真實(shí)的數(shù)據(jù),針對(duì)近期業(yè)界對(duì)輪播組件的各種爭(zhēng)論做個(gè)回應(yīng),看看大家對(duì)它的評(píng)論是不是名副其實(shí)。我會(huì)針對(duì)各個(gè)觀點(diǎn)進(jìn)行剖析,看看我們的數(shù)據(jù)與預(yù)期是否一致。通過這些內(nèi)容,我會(huì)詳細(xì)闡述我們的研究發(fā)現(xiàn)和研究方法,并給大家一些建議,希望對(duì)大家未來在判斷何時(shí)以及如何使用輪播組件有價(jià)值。
之前有很多人不看好輪播這種模式。從NNG的一篇文章開始;真正的轉(zhuǎn)折點(diǎn)是Erik Runyon發(fā)表的關(guān)于圣母大學(xué)網(wǎng)站的一篇詳細(xì)分析輪播模式的文章“輪播組件用法詳解”;在Jared Smith的文章“是否應(yīng)該使用輪播”中,他建議大家放棄使用輪播組件;Brad Frost也在他的文章“輪播組件”中呼應(yīng)了這種對(duì)輪播的負(fù)面評(píng)價(jià);緊接著Luke Wroblewski加入了反對(duì)派的陣營(yíng),他說從目前的數(shù)據(jù)來看,建議不要使用輪播,他的文章詳情見“ 以后絕對(duì)不再使用輪播”,(他后來又補(bǔ)充數(shù)據(jù)說對(duì)他的結(jié)論有懷疑)。
在Mobify(提供移動(dòng)建站服務(wù)的網(wǎng)站),我們開發(fā)用于移動(dòng)設(shè)備的大型電子商務(wù)網(wǎng)站。很多情況下,這些網(wǎng)站都有一個(gè)輪播組件。我們這樣做錯(cuò)了嗎?是不是傷害了我們的用戶?如果我們停止使用輪播組件,我們的網(wǎng)站是否就會(huì)變得更好?這些問題是我和這篇文章的共同作者Peter Maclachlan在審查我們開發(fā)的網(wǎng)站時(shí)反復(fù)問自己的。我和Peter決定做我們自己的研究,而不是盲目追隨網(wǎng)上這些反對(duì)輪播組件的聲音。
自此,我們開始研究那些我們能獲取的數(shù)據(jù)。剛開始,我們充滿好奇,我們的數(shù)據(jù)說明了什么呢?我們的發(fā)現(xiàn)令人非常驚喜,并且鼓舞著我們不斷深入研究。我們?cè)跒槠?1個(gè)月的時(shí)間里審查了幾個(gè)中型到大型的網(wǎng)站。我說的中型到大型網(wǎng)站,是指在過去一年里交易額不少于兩千萬美金的網(wǎng)站。在這11個(gè)月的時(shí)間里,我們研究了近750萬次輪播組件的交互事件。這篇文章的結(jié)論都是基于這些數(shù)據(jù)所做的分析。
我們?yōu)槭裁匆褂幂啿ソM件
輪播組件存在的意義絕對(duì)不僅僅是為了在首頁(yè)顯示更多的市場(chǎng)營(yíng)銷信息。因?yàn)槲覀兪菍W⒂谧鰺o線端設(shè)計(jì)的,我們最大的顧慮就是要確保在有限的屏幕尺寸和信息的密度之間做好平衡。這意味著,我們總是要在有限的面積里做好水平和垂直方向上的空間利用。我們使用輪播組件可以增強(qiáng)信息的密度,并且不需要用戶在查看時(shí)滾動(dòng)頁(yè)面。
使用情景也是理解輪播組件的一部分。我們的設(shè)計(jì)團(tuán)隊(duì)只是在規(guī)避使用輪播組件,而沒有向用戶提供具體的使用情景。大部分情況下,我們只是在一中情境中使用輪播組件:在商品詳情頁(yè)中展示更多的圖片。在商品詳情頁(yè)中,用戶知道左右滑動(dòng)一個(gè)輪播組件可以查看更多的商品圖片。在一個(gè)網(wǎng)站首頁(yè)的市場(chǎng)營(yíng)銷輪播組件中,用戶是沒有辦法知道下一張圖片是什么內(nèi)容的,也不清楚這里面的信息是否需要去關(guān)注。
反對(duì)輪播組件的理由
目前反對(duì)使用輪播組件的理由主要有以下幾個(gè)方面:
- 用戶不會(huì)點(diǎn)擊輪播組件中的內(nèi)容;
- 如果用戶要點(diǎn)擊輪播組件中的內(nèi)容,他們只會(huì)點(diǎn)第一個(gè);
- 輪播組件不易理解;
- 自動(dòng)輪播對(duì)用戶不友好;
針對(duì)前兩條,我們將用我們自己的數(shù)據(jù)和Erik Runyon文中的數(shù)據(jù)作比較。最后兩點(diǎn)更多的是定性的結(jié)論,我會(huì)針對(duì)性的剖析。
猜想一、用戶不會(huì)使用輪播組件
大家的爭(zhēng)議
這個(gè)猜想基于Erik Runyon文章中展現(xiàn)的圣母大學(xué)網(wǎng)站數(shù)據(jù)。只有1.07%的訪問者點(diǎn)擊了網(wǎng)站的Banner輪播圖。只是查看Banner無法作為交互行為被記錄,只有產(chǎn)生點(diǎn)擊行為的用戶才算數(shù)。為了反駁這一猜想,需要有數(shù)據(jù)能夠顯示實(shí)際上發(fā)生交互行為的人數(shù)高于1.07%才行。
我們的結(jié)論
用戶對(duì)產(chǎn)品圖片輪播產(chǎn)生交互行為的比例:72%的用戶至少切換輪播圖一次;23%的用戶會(huì)放大圖片。如果你看我們的研究結(jié)果,具體的以放大操作為例,你會(huì)發(fā)現(xiàn)23%的用戶直接進(jìn)行圖片的放大以獲得更多的信息。如果你更關(guān)心哪些用戶有切換輪播圖的行為,數(shù)據(jù)顯示高達(dá)72%的用戶直接產(chǎn)生了操作行為。下文中將會(huì)展示我們的數(shù)據(jù)是如果獲取的,請(qǐng)留意“發(fā)現(xiàn)”部分。
猜想二、用戶只對(duì)第一張輪播圖感興趣
大家的爭(zhēng)議
Erik提到的點(diǎn)擊了輪播圖的1.07%的用戶中,有89.1%的人點(diǎn)擊了第一張輪播圖。并且,我們猜測(cè)如果這個(gè)輪播組件是有效的,那么隨著輪播圖數(shù)量的不斷增加,點(diǎn)擊分布將會(huì)有一個(gè)合理的下降趨勢(shì)。Erik的數(shù)據(jù)顯示,在第二個(gè)位置的輪播圖只有整個(gè)點(diǎn)擊數(shù)據(jù)的3.1%。更客觀地來看,圣母大學(xué)網(wǎng)站中3,755,297位訪客中只有1,234人點(diǎn)擊了第二個(gè)位置上的輪播圖。第二個(gè)位置之后的輪播圖的點(diǎn)擊數(shù)據(jù)也符合我們預(yù)期的落差。我們?nèi)绻瘩g這個(gè)猜想,那么就要有數(shù)據(jù)顯示,對(duì)第二個(gè)位置上的輪播圖有交互行為的用戶比例高于3.1%。
我們的結(jié)論 我們的數(shù)據(jù)顯示,和第二個(gè)位置上的產(chǎn)品圖片輪播有交互行為的用戶占比為15.7%。至少64%的用戶從第二個(gè)位置的產(chǎn)品圖切換到了第三個(gè)位置的產(chǎn)品圖。用戶切換輪播圖有一個(gè)線性的變化規(guī)律。不同的輪播圖切換方式會(huì)導(dǎo)致不同的數(shù)據(jù)結(jié)果。所有的數(shù)據(jù)都表明用戶從當(dāng)前的輪播圖切換到其他輪播圖的比例較高。和第一個(gè)位置上的輪播圖有交互的用戶中,有64%的人和第二個(gè)位置上的輪播圖也產(chǎn)生了交互。
圣母大學(xué)的數(shù)據(jù)只是包含了用戶的點(diǎn)擊,而不是全部交互行為。為了確保我們的數(shù)據(jù)更有說服力,我們也會(huì)看產(chǎn)生直接交互行為的數(shù)據(jù)。對(duì)于我們的產(chǎn)品圖輪播組件來說,那就是用戶的放大操作。數(shù)據(jù)顯示,有23%的用戶產(chǎn)生了放大產(chǎn)品圖的行為,其中54.1%的人放大的是第一個(gè)位置的產(chǎn)品圖。所有的放大行為中,有15.7%發(fā)生在第二個(gè)位置的產(chǎn)品圖。
這個(gè)圖和Erik的數(shù)據(jù)很相似:第一個(gè)位置的輪播圖占據(jù)了絕大多數(shù)交互行為。然而,我們的數(shù)據(jù)中隨著輪播圖位置而產(chǎn)生的數(shù)據(jù)衰減趨勢(shì)更為合理;45.9%的直接交互行為發(fā)生在第一個(gè)位置之外的輪播圖上。這就意味著,接近一半的直接交互行為產(chǎn)生在第一個(gè)位置的輪播圖之外。 提示:關(guān)于這個(gè)數(shù)據(jù)的來源,詳情請(qǐng)查看下文中“發(fā)現(xiàn)”部分。
猜想三、輪播組件不屬于無障礙設(shè)計(jì)
接下來的問題是不好的,但是易于解釋。這個(gè)爭(zhēng)議整體上沒有否定輪播組件,只是對(duì)于當(dāng)前用法的質(zhì)疑。輪播組件本身并沒有所謂的無障礙問題。當(dāng)然,我們?cè)趹?yīng)用輪播組件的時(shí)候,可能存在設(shè)計(jì)上對(duì)無障礙的考慮。 這一點(diǎn),我不認(rèn)為是輪播組件本身的問題,但是當(dāng)你決定要用輪播組件的時(shí)候,你必須要考慮。下一個(gè)版本中,我們一定會(huì)讓我們的輪播組件變成一個(gè)無障礙的插件。這不是關(guān)于輪播組件有效性爭(zhēng)議的一部分,所以這里我們就不做更多論述了。輪播組件本身不算是無障礙的,但是這并不能說明我們將來在應(yīng)用的時(shí)候做不到無障礙。
猜想四、輪播組件的自動(dòng)輪播對(duì)用戶不友好
這個(gè)爭(zhēng)議是說能自動(dòng)輪播的輪播組件,想要去點(diǎn)擊的用戶會(huì)有障礙。我們完全同意這種觀點(diǎn)。如果你想要用輪播組件,一定要避免使用自動(dòng)輪播。
沒有那個(gè)輪播組件我們?cè)O(shè)計(jì)成自動(dòng)輪播的。 如果你不得不使用自動(dòng)輪播,那么在用戶準(zhǔn)備要產(chǎn)生交互行為的時(shí)候,請(qǐng)停止自動(dòng)輪播。 當(dāng)用戶想要點(diǎn)擊一個(gè)輪播圖的時(shí)候,因?yàn)樽詣?dòng)輪播到下一張,導(dǎo)致用戶點(diǎn)擊錯(cuò)誤,這種體驗(yàn)非常糟糕。
在PC端,這意味著當(dāng)用戶的光標(biāo)Hover到輪播圖的時(shí)候,停止自動(dòng)輪播。在移動(dòng)端,這意味著當(dāng)用戶準(zhǔn)備觸摸的時(shí)就停止自動(dòng)輪播。自動(dòng)輪播不友好。如果你要使用輪播組件,請(qǐng)不要讓它自動(dòng)輪播。
發(fā)現(xiàn)
提醒:這一部分主要是揭秘我們是如何做上述研究,數(shù)據(jù)是如何獲取的。如果你對(duì)此感興趣,請(qǐng)繼續(xù)往下讀,如果不感興趣,請(qǐng)?zhí)^這一部分。
研究方法及情景:這些數(shù)據(jù)來源于對(duì)幾個(gè)中型到大型電子商務(wù)網(wǎng)站長(zhǎng)達(dá)11個(gè)月的分析。在此期間,我們抽樣了大約750萬個(gè)輪播組件的交互事件。我們遵循隱私保護(hù)協(xié)議,沒有保留任何個(gè)人信息。
為了針對(duì)上述的前兩個(gè)猜想,我們的數(shù)據(jù)主要著眼于以下兩點(diǎn):
1、用戶與輪播組件產(chǎn)生交互的頻率;
2、用戶與輪播組件中第一個(gè)位置之外的圖片產(chǎn)生交互的頻率;
定義交互方式
在研究中,我們跟蹤了輪播圖組件中的四種交互方式:
1、智能手機(jī)中,用左右滑動(dòng)的手勢(shì)切換輪播圖;
2、單擊輪播圖組件中的箭頭,每次切換一張圖;
3、單擊輪播圖組件底部的縮略圖切換;
4、單擊輪播圖中當(dāng)前的圖片,放大至全屏查看;
為了和圣母大學(xué)的數(shù)據(jù)相對(duì)應(yīng),我們選擇了第四種交互方式,單擊放大,這個(gè)操作和點(diǎn)擊比較類似。兩種情況下,用戶都是對(duì)當(dāng)前的輪播圖比較感興趣,并且希望了解更多內(nèi)容。補(bǔ)充另外一點(diǎn),我們關(guān)注的交互方式是指那些最核心的交互,不包含那些無法觸發(fā)交互事件的操作。沒有導(dǎo)致輪播圖切換的意外滑動(dòng)也不算是能觸發(fā)交互事件的交互。
結(jié)論
1.各種交互方式的使用占比:我們首先研究的是用戶使用手機(jī)中輪播圖組件的頻率,我們是通過獨(dú)立的交互事件來看這一現(xiàn)象。這里所說的獨(dú)立交互事件,是指用戶通過上述的交互方式和輪播圖組件的首次交互行為。如果一個(gè)用戶點(diǎn)擊了5個(gè)輪播圖的縮略圖,那么我們計(jì)算的時(shí)候還是只算一個(gè)獨(dú)立的交互事件。下文中我們將更詳盡的闡述獨(dú)立交互事件。
數(shù)據(jù)顯示,一個(gè)頁(yè)面中大約72%的用戶以各種方式對(duì)輪播圖進(jìn)行了操作??s略圖是最清晰地,能夠提前預(yù)知內(nèi)容的交互方式:55%的用戶至少點(diǎn)擊一個(gè)縮略圖。
1a.各種交互方式的占比:我們的數(shù)據(jù)表明,縮略圖是最受用戶歡迎的交互方式。事實(shí)上,縮略圖的使用率是其他類型的輪播圖切換方式的兩倍,受歡迎程度比箭頭和左右滑動(dòng)加起來還要高。
放大操作是用戶進(jìn)行的操作中頻次僅次于點(diǎn)擊縮略圖的操作。放大和左右滑動(dòng)的共性是,可以出發(fā)操作的區(qū)域都比較大,幾乎是點(diǎn)擊輪播圖的任何位置都可以觸發(fā)。我們猜想用戶的放大操作中又不部分可能是誤操作。話雖這么說,放大操作仍然是用戶目的性比較強(qiáng)的一個(gè)操作,所以產(chǎn)生意外操作的概率不高。大約23%的訪客進(jìn)行了放大操作。左右滑動(dòng)是用戶使用率最低的操作。這一點(diǎn)強(qiáng)有力的說明,給用戶提供一個(gè)清晰的控制系統(tǒng)有利于引導(dǎo)用戶進(jìn)行操作。箭頭和左右滑動(dòng)操作都是為了切換到下一張輪播圖。如果我們把這兩種交互方式整合在一起,他們的使用率和縮略圖比較接近。
2.所有類型的操作:總體上看,每個(gè)輪播圖平均有2.4次交互事件。這表明與輪播圖產(chǎn)生交互的72%的訪客中,產(chǎn)生多次交互行為是很正常的。
2a.各種類型的交互方式操作次數(shù)占比(非獨(dú)立:點(diǎn)擊縮略圖的用戶中更傾向于使用縮略圖而不是其他交互方式,平均在一個(gè)輪播圖中點(diǎn)擊6張縮略圖。 左右滑動(dòng)和點(diǎn)擊箭頭進(jìn)行操作的用戶有近似的操作頻率:平均數(shù)分別是3.5和3.9次。放大操作的交互次數(shù)較少,這表明用戶只有在對(duì)某張產(chǎn)品圖非常感興趣的情況下才會(huì)放大。
操作縮略圖的用戶擁有最高的點(diǎn)擊次數(shù),這說明略縮圖的交互方式比箭頭和左右滑動(dòng)有更高的用戶參與度。探索這一層次的參與度所導(dǎo)致的額外轉(zhuǎn)化,比如“加入購(gòu)物車”將會(huì)是件有趣的事情。如果結(jié)合箭頭和左右滑動(dòng)兩種交互方式來看,數(shù)據(jù)和我們分析的獨(dú)立交互方式比較接近,前后移動(dòng)(滑動(dòng)或箭頭操作)是輪播圖中最普遍的交互方式。
3.交互頻次衰減率
從我們統(tǒng)計(jì)到的數(shù)據(jù),可以畫出用戶每次操作時(shí)之后再次操作的概率曲線。在輪播圖切換的案例中,這就是說在用戶從第一張輪播圖切換到第二張輪播圖之后,再?gòu)牡诙堓啿D切換到第三張輪播圖。 在直接交互的案例中,這就是說點(diǎn)擊放大第一張輪播圖之后再去點(diǎn)擊放大其他的輪播圖。我們畫出了各種不同交互方式下的曲線:縮略圖、箭頭、滑動(dòng)、放大。
3a.縮略圖
每一張被點(diǎn)擊過的縮略圖,用戶有大約69%的可能性會(huì)繼續(xù)點(diǎn)擊其他縮略圖。從下圖中的指數(shù)衰減曲線可以更精確的看出這一變化趨勢(shì)。盡管用戶點(diǎn)擊縮略圖可以有很多可能的順序,但是大部分的縮略圖用戶還是按照輪播圖中默認(rèn)給定順序查看。
3b.箭頭
對(duì)于每個(gè)被點(diǎn)擊的箭頭,我們發(fā)現(xiàn)用一個(gè)接近線性的衰減曲線來描述是比較準(zhǔn)確的。在這種線性衰減中,用戶有大約76%的可能性會(huì)會(huì)再次點(diǎn)擊這個(gè)箭頭來查看下一張輪播圖。
3c.左右滑動(dòng)
左右滑動(dòng)的衰減也是線性的,用戶有64%的可能性會(huì)再次滑動(dòng)。下圖是一個(gè)更精準(zhǔn)的指數(shù)變化趨勢(shì)圖。
3d.放大 放大操作的規(guī)律遵循冪定律,線性的變化不能準(zhǔn)確描述這一趨勢(shì),下圖的函數(shù)能夠比較真實(shí)的反映其趨勢(shì)。
一些思考
營(yíng)銷類輪播圖 VS 圖片輪播
這是我們?cè)谟梦覀兊臄?shù)據(jù)和Erik統(tǒng)計(jì)的圣母大學(xué)的數(shù)據(jù)作比較時(shí)發(fā)現(xiàn)的問題。我們用的輪播圖類型不同。我認(rèn)為這個(gè)問題并不影響我們的研究結(jié)論。這兩種輪播圖或許在視覺樣式上不相同,但是我們的研究說明他們的基本模式是成功的。我們這項(xiàng)研究的目的是為了驗(yàn)證這種水平滾動(dòng)的多頁(yè)輪播圖是不是有缺陷。從數(shù)據(jù)來看,并沒有明顯的缺陷。圣母大學(xué)輪播圖的問題可能不在輪播圖組件本身,而是設(shè)計(jì)問題。
用戶對(duì)營(yíng)銷Banner的認(rèn)知本身就比較疑惑。這類輪播Banner可能根本就不能給用戶提供有效信息。有很多的原因會(huì)導(dǎo)致輪播Banner的無效,以至于大家認(rèn)為這個(gè)UI模式本身就有問題。我們的網(wǎng)站有時(shí)也會(huì)使用營(yíng)銷類輪播Banner。接下來我們將會(huì)用我們的數(shù)據(jù)和圣母大學(xué)網(wǎng)站的數(shù)據(jù)作一個(gè)很有意思的比較。
Luke Wroblewski在Google的一次演講中提到Amazon UX經(jīng)理PJ McCormick的數(shù)據(jù)。PJ展示了Amazon使用營(yíng)銷Banner輪播圖組件的一些積極樂觀的數(shù)據(jù)。Luke認(rèn)為目前的營(yíng)銷輪播組件最大的設(shè)計(jì)問題是控制輪播的部分不夠明確。下圖中,Amazon的輪播圖組件設(shè)計(jì)明確的將控制輪播的部分單獨(dú)出來,這樣做就很好地回避了控制部分不夠明確的問題。
手機(jī)端交互 VS PC端交互
我們的輪播組件只在手機(jī)端有。圣母大學(xué)的網(wǎng)站只在PC端有輪播組件。用戶在手機(jī)端的交互要比PC端頻繁。這有可能是因?yàn)槭謾C(jī)端有滑動(dòng)操作,也可能是因?yàn)镻C端用鼠標(biāo)操作小控件比較難。還有可能是由于輪播組件原本就是更適合手機(jī)上實(shí)用的一種模式。
輪播組件成功應(yīng)用的標(biāo)準(zhǔn) 我們這里說的輪播組件成功應(yīng)用的標(biāo)準(zhǔn)和Erik的標(biāo)準(zhǔn)不同。Erik的更在意用戶是否通過輪播圖點(diǎn)擊到了里面的內(nèi)容,重點(diǎn)看這個(gè)轉(zhuǎn)化率。我們的標(biāo)準(zhǔn)是看用戶是否有查看更多的意圖,是否看了所有產(chǎn)品圖片。前者的標(biāo)準(zhǔn)顯然更高,要求用戶點(diǎn)擊打開新的頁(yè)面。這就是為什么圣母大學(xué)網(wǎng)站中的輪播組件數(shù)據(jù)相對(duì)于我們的數(shù)據(jù)更低。
大學(xué)的網(wǎng)站VS電子商務(wù)網(wǎng)站 我們拿圣母大學(xué)的網(wǎng)站和我們的網(wǎng)站作比較,有一個(gè)局限性,那就是圣母大學(xué)的網(wǎng)站用戶和我們的網(wǎng)站用戶使用情景不同,兩個(gè)網(wǎng)站或許沒有可比性。電子商務(wù)網(wǎng)站用戶的目標(biāo)是發(fā)現(xiàn)更多關(guān)于產(chǎn)品的信息以便于做出購(gòu)買決策。大學(xué)網(wǎng)站的用戶是為了學(xué)習(xí)或者找到關(guān)于大學(xué)的一個(gè)具體信息。
對(duì)未來的一些思考
這一次的數(shù)據(jù)分析使我明白了,對(duì)于輪播組件,我們還有很多研究工作要做。下面的這些內(nèi)容使我希望自己將來可以進(jìn)一步研究,也希望看到其他同行可以針對(duì)此進(jìn)行一些研究:
1、針對(duì)不同類型的輪播組件做對(duì)比研究。這將有助于研究我們的營(yíng)銷類輪播組件和 Erik Runyon的數(shù)據(jù)有何不同。
2、衡量交互方式是如何影響用戶的操作行為趨勢(shì)。如果他們操作的是一個(gè)產(chǎn)品圖片集合,他們是更愿意還是更不意愿使用加入購(gòu)物車呢?
3、我希望知道是否有辦法衡量手機(jī)端、PAD端、PC端用戶在輪播組件的交互方式的差異。不幸的是,我們不做PC端的站點(diǎn),所以我們?nèi)狈C端的數(shù)據(jù)。我們期望做直接的對(duì)比,而不僅僅是從已知數(shù)據(jù)去做推測(cè)。
4、數(shù)據(jù)顯示,在手機(jī)端,滑動(dòng)是最低頻的操作。我認(rèn)為滑動(dòng)操作在手機(jī)上被其他交互方式弱化了,或許也是因?yàn)樵赑C端,用戶對(duì)滑動(dòng)操作還沒有什么認(rèn)知。通過提供額外的控件,用戶可以很明確的獲得操作輪播組件的交互方式,因此,他們更愿意選擇這樣的交互方式。假如移除了輪播組件中其他的可操作控件,那么滑動(dòng)的交互方式是否會(huì)增加?
結(jié)論
這篇文章是在徹底調(diào)查Mobify為什么以及如何使用我們提供的輪播組件,構(gòu)建自己的網(wǎng)站。
不同類型的輪播組件之間差別很大。給用戶提供了額外的上下文情景之后,不用迫使用戶做滾動(dòng)操作,他們就很樂意使用輪播了。
目前關(guān)于輪播組件的數(shù)據(jù)都是關(guān)于市場(chǎng)營(yíng)銷Banner的。這些數(shù)據(jù)都說明了一點(diǎn),用戶對(duì)輪播組件中的內(nèi)容很少產(chǎn)生交互。同時(shí)也說明了,用戶切換輪播組件中的內(nèi)容,翻到下一張輪播圖的概率非常低。當(dāng)然,這些數(shù)據(jù)也證明了一些普適性的觀點(diǎn):輪播組件不易于理解,自動(dòng)輪播不友好。 我們的數(shù)據(jù)和Erik Runyon提供的關(guān)于圣母大學(xué)的數(shù)據(jù)共性比較少。用戶在我們的網(wǎng)站上交互行為更多。
相對(duì)于圣母大學(xué)網(wǎng)站的用戶數(shù)據(jù),我們的用戶對(duì)當(dāng)前輪播圖之外的內(nèi)容有更高的交互行為比率。產(chǎn)生這些差異是是有很多原因的,這也是我們想在總結(jié)的環(huán)節(jié)去探討的。不同的的輪播組件形式適用于不同的產(chǎn)品目標(biāo)。 對(duì)我而言,這就是本文最大的結(jié)論。 輪播組件有很多的形狀和尺寸。有一些很有效,有一些效果并不好。在盲目的批判之前,我們應(yīng)該針對(duì)不同的情況收集更為豐富的數(shù)據(jù),來充分了解真實(shí)的狀況。Erik的研究結(jié)果認(rèn)為,首頁(yè)的市場(chǎng)營(yíng)銷輪播效果不好也是事實(shí)。用戶不知道能從輪播組件的內(nèi)容中獲取到什么信息,因此,他們也不想去操作。如果你能夠很清晰的告訴用戶你將會(huì)獲得什么信息,這些信息對(duì)你有什么用,那么,用戶肯定也樂意去做更多的操作。
那么,你到底會(huì)不會(huì)用輪播組件呢?
不要僅僅是為了在有限的屏幕空間展示更多內(nèi)容而去用輪播組件。輪播組件主要是用于為用戶提供特定情境下更多的內(nèi)容。
在手機(jī)端,當(dāng)橫向的屏幕空間有限,內(nèi)容彼此有關(guān)聯(lián)性,并且這個(gè)內(nèi)容對(duì)用戶有意義的時(shí)候通常會(huì)用輪播組件。 當(dāng)內(nèi)容根本就無趣或?qū)τ脩魺o意義時(shí)不要用輪播組件。第一張展示給用戶的輪播圖一定要能傳達(dá)出其他剩余輪播圖將要給用戶傳遞的內(nèi)容。用戶從當(dāng)前輪播圖切換到其他輪播圖的時(shí)候必然是因?yàn)檫@樣可以獲得更多有用的信息。輪播的內(nèi)容要有吸引力,這樣才能保障輪播的有效性。如果用戶對(duì)你的輪播不感興趣,這不一定是是輪播組件本身的問題。 不要為了讓用戶看到你要展示的全部的容而使用輪播。即使你的輪播是有效的,用戶也不會(huì)查看所有的內(nèi)容。第一個(gè)展示的輪播內(nèi)容應(yīng)該是最重要的,所有的輪播圖應(yīng)該按照重要性的順序展示。如果查看多個(gè)內(nèi)容很重要,但是這不是必要的操作,那么我推薦使用縮略圖輪播的方式。 這個(gè)問題并沒有唯一的答案。在某些情況下,與市場(chǎng)營(yíng)銷Banner輪播一樣,答案是NO。在其他情況下,與產(chǎn)品輪播圖一樣,答案是YES。在各種不同的設(shè)計(jì)模式下,如果你要問“我是不是應(yīng)該用輪播組件”,這的確有一個(gè)正確的回答:如果這適合你的用戶就是對(duì)的。
原文地址:[http://www.smashingmagazine.com/2015/02/09/carousel-usage-exploration-on-mobile-e-commerce-websites]
原文作者:Kyle Peatt
來源:阿里巴巴(中國(guó)站)用戶體驗(yàn)設(shè)計(jì)中心
- 目前還沒評(píng)論,等你發(fā)揮!