輪播圖失寵?無輪播圖設計可能成為移動產品設計趨勢

8 評論 9383 瀏覽 31 收藏 13 分鐘

編輯導語:此前,輪播圖是APP中必備的一個模塊,如今,輪播圖逐漸從APP中消失。為何曾經標配的輪播圖會逐漸消失?是否還有其存在的必要?作者做出了關于輪播圖取消的幾種猜想。一起來看看。

最近,在移動APP育兒商城改版優化過程中,參考其他APP時發現一個現象,就是不少主流應用APP都將輪播圖從首頁去掉了!目前這種設計形式逐漸開始蔓延開,越來越多的移動產品開始采用無輪播圖模式。下面是我最近看的一些首頁采用了無輪播圖設計的移動APP:

  • 電商APP:京東、淘寶、蘇寧易購、網易嚴選、閑魚
  • 外賣APP:美團外賣、餓了么
  • 讀書APP:掌閱、微信讀書、番茄小說
  • 運動影音APP:KEEP、QQ音樂、蜻蜓FM

為何越來越多的應用將輪播圖這個移動APP“標配”功能從首頁去掉呢??我有以下的幾種猜想:

一、個性化推薦機制成為主流

輪播圖是移動APP在很早之前就有的產物,當時輪播圖的設置,是為了告訴用戶,我們推薦的這些東西很好很重要,你快來看一下吧!但是隨著大數據與用戶畫像技術的成熟,個性化推薦逐漸成為內容與用戶匹配的主流機制,用戶的行為喜好通過大數據來獲取,通過首頁信息流智能推薦給用戶更多他們喜歡或者可能喜歡的東西,如淘寶和京東APP。

輪播圖一般采用官方推薦內容的機制,即運營人員決定將哪些內容投放在輪播圖中展示給用戶(可能有人會說輪播圖中的內容也可以采用個性化推薦機制生成啊,這就涉及到運營成本的問題了,在第2個問題中會講到)。

輪播圖一般一屏幕中只能展示1個內容,采用左右滑動切換形式展示更多內容。而與輪播圖相比,其他的形式(比如卡片/瓷貼樣式)可以采用同時展示多個商品的設計策略,所以輪播圖這種占用首頁過大區域的內容就有點雞肋了。

二、輪播圖個性化推薦運營成本陡增

當然,個性化推薦機制可以用于輪播圖、卡片區、信息流等多個位置上,但相對卡片/瓷片區、信息流,輪播圖對展示內容的圖片和標題文字的要求更高,如果采用質量不高的圖片或文字,會造成整個界面的美觀度大大降低,更不利于用戶點擊甚至購買內容。

因此對于輪播圖中展示內容,需要對每個內容都制作一張適合的高質量圖片(如改版前的淘寶輪播圖展示的圖片都是特意制作的圖片,而非普通商品圖),才能在使用個性化推薦技術,將成千上萬的內容推薦給數以萬計的用戶,APP的界面有一個較好的展示效果。

這樣,運營成本就會直線上升,加上輪播圖本身點擊率和轉化率相比其他位置偏低,輪播圖投放的ROI更低,因此沒有必要在輪播圖位置大費周章,甚至去掉輪播圖,給其他位置更多的曝光機會,效果可能會更好。

三、更合理的存在方式

其實這些主流的APP沒有完全將輪播從首頁完全去掉,有些APP采用了變式設計,將輪播圖從傳統固有的頁面頂部位置移動到了金剛區下方的卡片/瓷貼區,將輪播圖作為一張卡片或瓷貼,這樣做有兼顧了個性化推薦、APP界面美觀和降低運營成本三種優勢。以下紅框內為淘寶APP的卡片輪播圖:

可以看出這個輪播圖中的內容是根據我最近查看和購買商品推薦的相關商品(我最近買了男鞋和變形金剛玩具),同樣里面有一些圖的質量并不高,如圖中T恤商品用的是普通商品圖,但不影響頁面整體美觀性,試想這張圖放在頂部輪播圖中會是什么樣子,肯定會很不美觀。

此外,不用付出額外的運營成本,也是這種形式的優勢之一。

四、其他位置視覺比重增加,有效提升了轉化率

有學者專門針對移動端的電商網站輪播圖交互效果進行了研究分析,得出結論:23%的用戶點擊了輪播圖上的內容,其中的54.1%在第一張圖上完成了轉化,其中的15.7%在第二張圖上進行了操作,且位置越在后面的內容曝光率越低,呈線性遞減狀態,越往后越低,甚至到了可以忽略不計的程度。

去掉輪播圖后,金剛區和下方卡片區的視覺比重就有了較大提升,加上本身這些位置的點擊率和轉化率就高于輪播圖,用戶關注個性化推薦的內容時,更能關注內容本身,提高了用戶對內容的專注力,也就提升了這些位置的轉化率。

在運營成本不變的情況下,轉化率得到提升,增加了營收,ROI就得到了提升。

五、用戶體驗方面存在不足

1.?復雜的大圖導致APP性能低,加載速度慢

一般輪播圖都會承載大量的圖片信息,尤其是那些高分辨率輪播圖片,龐大的圖片信息會對加載速度造成很大影響。每多加載1秒,就會流失更多用戶。無論是用戶還是搜索引擎,都偏好加載更快的網站和應用。

2. 用戶對自動切換的無奈

“固定靜止的banner圖比自動切換的banner圖能帶來更高的有效點擊率。如果你還不夠了解你的用戶,投放100%符合他們預期的內容幾乎是不可能的,這時似乎在內容上給他們提供更多選擇=更多點擊率=更多銷售額。這實際是行不通的?!? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?—— 電商專家 Depesh Mandalia

Web易用性大師Jakob Nielsen也曾專門針對會自動切換的輪播圖做了可用性研究,結論表明自動切換的輪播圖會惹惱用戶并更容易被他們忽略。

這種設計似乎非常普遍:在一個固定的區域中,每5秒自動切換展示一張圖片。這看起來似乎很方便,提高了更多內容的曝光率。然而實際并沒有多少用戶會盯著圖片為了未知的內容耐心等待5秒,這樣做太低效了,他們的視線早就轉移到了其他地方。除此之外,當用戶對當前的圖片內容感興趣進入閱讀狀態時,突然的自動切換會打斷用戶的閱讀進程,讓用戶喪失可控感,感到沮喪和惱怒。最關鍵的是,自動切換的圖片會比默認靜止的圖片看起來更像廣告而非APP應用的一部分。

由于移動端的一屏內容有限,用戶不會做過多的停留就會往下翻看其他內容,“自動切換”這樣的交互方式不僅起不到曝光更多內容的作用,反而影響了體驗。好的做法是,讓頁面保持穩定的狀態,通過進度指示點或者隱藏部分內容的方式,提示用戶可以左右滑動查看更多。

以上說明了移動APP中首頁去掉輪播圖可能存在的一些原因,那哪些情況仍然比較適用輪播圖呢?建議保留輪播圖設計的情景包括以下兩種:

(1)內容少,無法使用內容個性化推薦

有些移動APP的內容量不夠豐富,無法達到像淘寶、京東、美團這種大廠的內容規模,內容量無法支撐使用個性化推薦機制,或者個性化推薦的技術欠缺,做不到面向用戶的個性化推薦,這種情況下還可以保留輪播圖。無法實現個性化推薦,就采用官方統一推薦的形式。特別適用于特定行業品牌的新品上市的推廣宣傳?!跋膊琛焙汀叭鹦铱Х取辈捎玫木褪沁@種推廣機制:

前面展示的這些去輪播圖的應用,大多是電商類應用這種內容展示量非常大的應用。而小而美的應用,則專注聚焦自己的要點就好。反其道而行之,將首頁的圖片進行加大,采用大圖烘托活動或商品上新的氛圍,突顯產品優勢特色,引導用戶購買焦點區域的爆款商品。

(2)品牌宣傳,向用戶傳遞品牌價值

對于需要向用戶進行品牌價值傳遞的場景,通過持續曝光在用戶心理上塑造品牌形象,可以采用輪播圖形式,且需要占幅較大,這樣通過品牌圖形化向用戶傳達所蘊含的價值。

Less is More。只選擇一張能表達你品牌內容的圖,給用戶一種沉浸的體驗,用戶的注意力更集中,實際獲得的信息其實可能更多。當然,也可以加上一層文字說明更好地表達信息。另外,這張圖或者文字也可以隨時按照你的目的進行更換。

有些情況下,圖片可能也不足以表達你需要表達的信息,或者你認為短視頻更有利于提升你的APP的用戶體驗和轉化率等,那就用短視頻吧。不同的表現形式也會帶來表達角度的轉變,充分利用好短視頻的特點,為用戶講一個故事,或者進行產品教學,都是不錯的內容選題。

比如一個APP則采用了使用視頻的形式傳遞“科學、優質、安全、平價”的商城品牌價值,右下角“了解詳情”的Call to Action按鈕,讓用戶可以感興趣的時候主動點擊了解詳細內容。

 

本文由 @牛仔貝多芬 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 首先我們沖輪播圖產生的目的說起;
    輪播圖出現的最初目的是推廣核心單品,促進轉化、提高營收;

    但是目前主流的大型電商平臺都有了一個千人千面的個性化推薦系統;而推薦系統的效果直接超越了原本的輪播的作用;在千人千面推薦系統面前輪播的作用就相形見絀,而且還占據了首頁寶貴的版面資源;所以全品類大品類等有前人前面推薦系統的情況下輪播就背取代了;但是在沒有一個能夠進行個性化自動推薦的系統前,我們的細分垂直電商輪播的作用任然不可低估,他在促銷方面起到的作用依舊不??;

    如文中所說,在有千人千面推薦系統下輪播背后的運營成本與能夠帶來的營銷轉化是完成不成正比的(或者說是完全比不上千人千面系統的)!所以在這種情況下慢慢取消輪播是勢在必行的;

    來自四川 回復
    1. 說得對

      來自山東 回復
    2. 一段話十幾個錯別字真是醉了

      來自廣東 回復
  2. 寫得很好 贊

    來自廣東 回復
  3. 輪播圖適合那些主題活動推廣吧

    來自浙江 回復
    1. 在推廣方面驗證過輪播沒有彈窗轉化效果好

      來自山東 回復
  4. 個性化推薦比輪播圖更能吸引顧客和引導下單,所以很多app取消了輪播

    回復
    1. 是的,個性化推薦的回報率更高,所以對于商品稠密度高的產品,能夠支撐面向用戶進行個性化推薦,輪播圖的運營就很雞肋了

      來自山東 回復