自從村里通了寬帶,不用再掛著modem上網之後我們看到的網頁中出現了越來越多的幻燈片(Slider,Carousel,Rotating Headers)。一時間幻燈片彷彿是網站首頁的標配,你看阿里雲、騰訊雲、Google雲哪一家的首頁不是有一個大大的幻燈片輪播。
可是你知不知道,幻燈片這樣喜聞樂見的頁面推廣重頭元素卻是CRO界一致認為的轉化率殺手?而稍微有些CRO意識的數字行銷者都會勸誡不要碰幻燈片。本篇我將和HubSpot One的讀者一同探討幻燈片的是非功過。如果你著急的話,這裡有TL;DR——shouldiuseacarousel.com
雅虎:怪我咯?
比較常見觀點認為幻燈片的普遍採用起源於2009年的雅虎。它在首頁引入了幻燈片輪播位用於推廣。從此幻燈片就被各大網站效仿。
幻燈片由於在網頁中產生動態效果,而且每一張片子都可以去到不同目的地,(這點有別於gif動圖),不單抓眼球,而且很實用。人眼從遠古開始就對運動的物體會投入更多注意力,這是無法迴避的生物特點。利用了這一特點的幻燈片順理成章地獲得了許多網站首屏的主角。根據Conversion Sciences在2018年的統計,有6成電商網站的首頁用上了幻燈片。
幻燈片被廣泛應用的另一個重要原因是大型組織內部往往有各種不可調和的聲音,A部門要賣a產品,B部門要賣b產品,C部門要賣c產品……於是最粗暴的讓所有人都站到c位的方法就是用幻燈片循環播放了。說大型組織還算是比較客氣的說法,只要是目標有差異就會有各種小九九,就會有幻燈片。幻燈片簡直就是上天賜予的防掐神器。
所以我們都要上幻燈片?
沒問題。只要你清楚地了解幻燈片能帶來的“益處”。
- 低至1%的點擊率。雖然佔了這麼大首屏的面積,幻燈片總點擊率才1%。而且九成的點擊發生在第一張幻燈片,這才是名副其實的c位。
- Banner-blindness 。不好意思,只是這幻燈片太像廣告了。雖然人們先天對運動的物體感興趣,但是後天練就了自動忽略長得像廣告的一切頁面元素。
- 糟糕的瀏覽體驗。幻燈片在絕大多數情況下會成為CWV中LCP的L,它會拖慢頁面加載。同時許多未經優化的幻燈片會造成頁面佈局大幅變動讓CLS變差。
- 閱讀困難製造者。且不說許多在後面出現的片子訪客很有可能不會看到,就連在前面的片子訪客都很有可能沒時間讀完並理解意思。
- 推波助“彈”的大塊頭。由於將大量寶貴的首屏資源讓位於幻燈片,更多有價值的內容被相應地“下推”,此時頁面的跳出率也明顯地提升。
- 都是重點=沒有重點。當訪客來到你的首頁時,大多數情況下其訪問意圖還處在相對模糊的階段。幻燈片極有可能“硬塞”入大量不相關的訊息。
所以我們要避免使用幻燈片?
無腦採用幻燈片無異於主動降智,好比人家用Top1,Top2,Top3這樣的Chinglish你也要跟風使用。只要稍微用一下頭腦,你完全可以避免使用幻燈片這樣有百害而無一利的頁面元素。
那麼問題來了,“我老闆就是喜歡幻燈片,一定要用幻燈片,虧錢也要用幻燈片”怎麼辦呢?千金難買我樂意啊! ?
如果非要使用幻燈片,HubSpot One為你總結了下面這些緩解幻燈片負面影響的舉措:
- 優化圖片大小。合理地使用jpg和png以及其他新圖片格式來優化圖片大小,加速加載。對於手機版本的圖片可以使用<picture>元素區別加載。
- 優化圖片尺寸。滿屏或者大尺寸的幻燈片會讓你有更多機會流失訪客對其他內容的關注。參考阿里雲和騰訊雲的幻燈片,這比Google雲要好。
- 預設幻燈片位置。為了避免幻燈片載入時發生佈局錯誤(Layout Shift)我們在頁面文檔讀取階段就要做好預留位置給幻燈片元素。
- 延長停留時間。把幻燈片當作靜態圖片來使用。單幀停留10秒以上,保證訪客有充分的時間閱讀理解並進行操作。把最重要的訊息放第一幀。
- 取消自動播放。當訪客發生與幻燈片互動的行為後停止自動播放輪換。這點參考騰訊雲,這比阿里雲和Google雲的幻燈片要好。
- 附加額外訊息。對每一張幻燈片添加內容標題,這樣可以讓排在後面的幻燈片獲得更多展示的機會。這點可參考SEJ的首頁幻燈片。
如果你能做好以上六點,那麼首頁幻燈片依然“可以有”,至少危害已經大大降低了。再加上積極的A/B測試,至少不會太糟。
總結一下
本篇HubSpot One和讀者探討了網頁幻燈片的六大危害和減少危害的六大舉措。即便如此,筆者還是“奉勸各位耗子尾汁”,避免使用幻燈片。下面,HubSpot One還整理了一些相關資料供擴展閱讀。
- 《Conversion Optimization Examples: Homepage Carousel vs None》- Keith Hagan
- 《Sliders suck and should be banned from your website》- Thijs de Valk
- 《Homepage Sliders: Bad For SEO, Bad For Usability》- Harrison Jones