“Are home page carousels actually helpful to users? ……(此處省略一萬(wàn)字)The short answer is that home page carousels can work, but in practice the vast majority of implementations perform poorly with end users……(此處省略一萬(wàn)字)But saying that home page carousels should never be used doesn’t fully align with our seven years of large-scale usability testing — at least in an e-commerce context.”
簡(jiǎn)單來(lái)說(shuō)，作者想說(shuō)的是：使用輪播圖對(duì)于在有限空間來(lái)提升用戶閱讀效率是很有用的，但現(xiàn)有大部分情況輪播圖設(shè)計(jì)得并不好用。
遵守本文中提到的 10 個(gè)輪播圖設(shè)計(jì)原則可以提使用高輪播圖時(shí)的用戶體驗(yàn)，如果在做設(shè)計(jì)時(shí)不能很好地注意這 10 個(gè)體驗(yàn)方面的細(xì)節(jié)原則，那么最好少用輪播圖設(shè)計(jì)。
在這篇文章中，作者首先會(huì)通過(guò)實(shí)例來(lái)過(guò)一遍 10 個(gè)輪播圖設(shè)計(jì)原則，然后說(shuō)明為什么以及怎樣區(qū)別對(duì)待桌面端和移動(dòng)端的輪播圖，以及在文章最后列舉出一種相比于輪播圖更好更易用的展示方式。
在美國(guó)一份針對(duì) 50 家頂級(jí)零售電商網(wǎng)站的統(tǒng)計(jì)中發(fā)現(xiàn)輪播圖被廣泛運(yùn)用于電商網(wǎng)站：PC端52%的電商網(wǎng)站使用輪播圖，而與此同時(shí)移動(dòng)端56%的電商網(wǎng)站使用輪播圖。(以下圖表是譯者個(gè)人為方便大家理解制作的)
這篇文章的重點(diǎn)旨在講如何通過(guò)設(shè)計(jì)和交互細(xì)節(jié)使首頁(yè)輪播圖更加user-friendly，而不是關(guān)注于輪播圖本身應(yīng)該放那些內(nèi)容。此時(shí)，我們輪播圖的內(nèi)容應(yīng)該注意以下幾點(diǎn)：
如果輪播圖的內(nèi)容與網(wǎng)站本身不相關(guān)，且沒(méi)有經(jīng)過(guò)精心設(shè)計(jì)和使用高質(zhì)量的圖片，那么用戶體驗(yàn)會(huì)很糟糕 — 輪播內(nèi)容應(yīng)與網(wǎng)站主題相關(guān)
如果輪播圖的內(nèi)容看起來(lái)太像廣告，那么用戶會(huì)直接忽視它，即使輪播圖的內(nèi)容與用戶所需相關(guān) — 輪播圖內(nèi)容不能過(guò)于商業(yè)化
輪播圖的一個(gè)主要優(yōu)勢(shì)就是可以放專門(mén)設(shè)計(jì)過(guò)的和大文件的圖片 — 大文件和那些經(jīng)過(guò)設(shè)計(jì)的圖片會(huì)降低首頁(yè)的退出率并且會(huì)對(duì)網(wǎng)站和品牌產(chǎn)生積極效果，因?yàn)槟切┙?jīng)過(guò)設(shè)計(jì)的高清大圖能在首頁(yè)給用戶留下一個(gè)好印象 — 在用戶快速?zèng)Q定停留或者離開(kāi)之前增加用戶在首頁(yè)的駐足時(shí)間 — 輪播圖片要精心設(shè)計(jì)
那么，怎樣在實(shí)際運(yùn)用中做好輪播圖設(shè)計(jì)呢，作者將 10 原則分成了四個(gè)部分來(lái)進(jìn)行闡述：
1. 滑動(dòng)(輪播)順序和點(diǎn)擊后的落地頁(yè)
大部分用戶不會(huì)看完所有的首頁(yè)輪播圖，即使是一個(gè)自動(dòng)切換的輪播圖。他們常常會(huì)在所有輪播圖內(nèi)容循環(huán)一遍以前就早早的跳到另一個(gè)頁(yè)面或者向下滑動(dòng)頁(yè)面，換句話說(shuō)就是沒(méi)有人可以預(yù)測(cè)用戶下一步到底會(huì)看哪一幀輪播圖。
因此，只要輪播圖不是展示網(wǎng)站特點(diǎn)和展示網(wǎng)站產(chǎn)品的唯一方式，那么用戶即使不看完所有輪播圖問(wèn)題也不大。
我們之前做的輪播圖可用性研究(仔細(xì)安排每一幀的展示內(nèi)容和順序)，發(fā)現(xiàn)大部分用戶會(huì)在輪播圖自動(dòng)輪播完一個(gè)輪回前就跳到另一個(gè)頁(yè)面了，而在手動(dòng)輪播圖網(wǎng)站里輪播圖只會(huì)停留在第一幀，除非用戶主動(dòng)去找不然他們不會(huì)注意到那些有用的信息。所以，即使完善輪播圖的細(xì)節(jié)設(shè)計(jì)是一個(gè)很好的想法，但這并不能成為用戶獲取網(wǎng)站信息的唯一方式。
兩條原則：
原則1： 輪播圖的展示順序特別是第一幀非常重要；
原則2：把輪播圖當(dāng)成展示網(wǎng)站重要信息和特點(diǎn)的一種補(bǔ)充手段而非唯一方式。
2. PC端自動(dòng)輪播邏輯
自動(dòng)輪播形式能夠保證輪播圖的每一幀都有一定的曝光量，并且實(shí)際上自動(dòng)輪播的點(diǎn)擊率(8%~10%)要比手動(dòng)輪播的點(diǎn)擊率高(1%~2%)，這是因?yàn)椋合駝?dòng)態(tài)圖片一樣，自動(dòng)輪播圖很容易把用戶的注意力從頁(yè)面的其他靜態(tài)圖片上吸引過(guò)來(lái)，因此輪播圖的內(nèi)容和設(shè)計(jì)質(zhì)量都需要很高的要求才能保證用戶產(chǎn)生有效的閱讀，此時(shí)要注意三個(gè)極其重要的自動(dòng)輪播圖設(shè)計(jì)原則：
原則1：自動(dòng)輪播不要太快——
如果輪播得太快那么用戶就沒(méi)有足夠的時(shí)間看完感興趣的輪播圖內(nèi)容；如果輪播的太快那么用戶就會(huì)因?yàn)椴桓信d趣的輪播內(nèi)容而被騷擾。
輪播圖的展示時(shí)間應(yīng)該根據(jù)輪播圖的文案內(nèi)容來(lái)決定 — 尼爾森諾曼集團(tuán)推薦自動(dòng)輪播圖的單幀時(shí)長(zhǎng)按照 1 秒展示 3 個(gè)文案來(lái)播放，這就意味著每個(gè)輪播圖的展示時(shí)長(zhǎng)都是獨(dú)立的。
其實(shí)也可以學(xué)學(xué)蘋(píng)果將輪播時(shí)間外顯來(lái)讓用戶有一個(gè)心理預(yù)期。
原則2：用戶hover內(nèi)容時(shí)應(yīng)該暫停自動(dòng)輪播——
Web information seeking and interaction 指出用戶鼠標(biāo)的位置與他們?cè)诋?dāng)前頁(yè)面關(guān)注的內(nèi)容有內(nèi)在聯(lián)系 ：
當(dāng)用戶鼠標(biāo)懸停在某一幀輪播圖時(shí)說(shuō)明他們對(duì)它的內(nèi)容感興趣；
當(dāng)用戶懸停時(shí)輪播圖暫停的第二個(gè)理由是防止用戶在點(diǎn)擊想看的那一幀輪播圖時(shí)自動(dòng)輪播到下一幀 ；
如果用戶意識(shí)到他們點(diǎn)擊后跳轉(zhuǎn)到一個(gè)無(wú)關(guān)的頁(yè)面那么用戶會(huì)感覺(jué)很氣惱和失落，并且會(huì)不得不重新回到主頁(yè)，然后再次點(diǎn)擊原來(lái)想要的那一部幀輪播圖。
原則3：用戶有任何主動(dòng)交互行為時(shí)應(yīng)該停止自動(dòng)輪播——
當(dāng)用戶主動(dòng)點(diǎn)擊輪播圖按鈕來(lái)看前一幀或者下一幀內(nèi)容時(shí)，這種行為是有意進(jìn)行的并且 (當(dāng)前輪播內(nèi)容)不應(yīng)該被改變，即使用戶決定去查看主頁(yè)的其他內(nèi)容。
點(diǎn)擊行為是用戶的主動(dòng)響應(yīng)行為，它是反應(yīng)用戶意圖和興趣的一個(gè)強(qiáng)烈的信號(hào)。因此，當(dāng)用戶主動(dòng)對(duì)輪播圖進(jìn)行交互時(shí)(輪播圖)應(yīng)該停止自動(dòng)輪播，因?yàn)橛脩魳O有可能是有意要查看某一幀的內(nèi)容。
3. 輪播圖控件應(yīng)該具備兩項(xiàng)功能
原則1：輪播圖控件提示當(dāng)前圖片所在幀數(shù)位置——
提示用戶有更多幀數(shù)的圖片，讓用戶有更多探索的可能；
提示用戶輪播圖到底有多少幀圖片；
當(dāng)輪播圖自動(dòng)播放到最后一幀時(shí)提示用戶將循環(huán)到第一幀。
比較常用的設(shè)計(jì)是在一張五彩斑斕的圖片上設(shè)置一組小點(diǎn)，但這通常會(huì)很難識(shí)別，把這些點(diǎn)放置在圖片外面會(huì)好一點(diǎn)。
QQ客服