Zpět na seznam článků

Slider na homepage? Máte na víc & 4 důvody, proč nefunguje

12 doporučení, jak slider udělat méně blbě, když už ho musíte mít.

Karusel-wf

Jako malý jsme si s bráchou hráli s různými hračkami. Ale měli jsme pár oblíbených. U mně to byl prakem vystřelovací parašutista (pokud ho někdo máte, rád ho koupím), no a brácha měl rád meoskop. Což bylo takové kukátko na fotky.

Z krásného bakelitu a s fotkami cizích luhů a hájů. Jelikož byly hranice obehnané ostnatým drátem, tak člověk cestoval alespoň ve své hlavě. No a do tohoto přístroje se strkaly takové kulaté placky s diapozitivy a proti světlu byl vidět obrázek.

Meoskop kukátko

Holt jsme si tehdy hráli dost jinak, než děti teď. Jednou jsem takhle skoro rozplakal maminku, když u nás byla návštěva. Zavtipkoval jsem, že jsme tak chudí, že jsem byl rád, že jsem se narodil jako chlapeček. Že si mám s čím hrát.

No nic. Ten meoskop je vlastně takový předchůdce současných animovaných sliderů /karuselů na homepage. Akorát byl výrazně uživatelsky přívětivější.

Co je to slider / karusel / animovaný banner?

Slider je to červené, co ignorujete. Alespoň podle toho, co většinou vidím v analytice a co potvrzují odborníci.

Karusel

V USA a jinde v Evropě je použití sliderů klesající trend. Podle Baymardu v roce 2013 používalo slider 52 % e-shopů, teď je to 28 %.

Schválně jsem se díval na největší české e-shopy a 7 z 10 českých e-shopů slider používá. Čestnou výjimkou je Czc.cz, Mall.cz, Rohlik.czBonami.cz.

Výhody slideru

  1. Hlavní výhodu spatřuji v tom, že na stejné ploše dokážu ukázat více než jeden obsah. Navíc většinou na tom nejdůležitějším místě – první obrazovce homepage.
  2. Uspokojit různá oddělení uvnitř firmy – v případě velkých firem často bojují jednotlivá oddělení o prostor na webu. Tímto se to vyřeší – vlk se nažere a koza zůstane celá. Sice tu kozu málokdo podojí, ale … Ne nadarmo se říká, že velbloud je kůň navržený komisí.

Nevýhody slideru

Špatný poměr proklik / velikost

Slider často zabírá většinu obrazovky. Rozhodně je to ale největší prvek na webu. Nicméně na slider v průměru kliknou jednotky procent uživatelů. Zde je příklad z univerzity v Notre Dame, tam byla proklikovost 1 % a navíc 84 % na první slide.

Notre dame univerzita - proklikovost slideru na homepage

Na 4 univerzitních webech se poměr prokliku prvního a druhého slidu mezi 1 ku 4 a 1 ku 30. Což fakticky znamená, že první slide si bude uzurpovat nadstandardně hodně pozornosti  (a kliknutí) uživatelů. Počítejte cca 1 ku 10 oproti ostatním slidům.

Lidi se naučili ignorovat cokoliv, co:

  • připomíná reklamu,
  • se hýbe.

Slider dělá oboje najednou. A i když slider pozornost přitáhne, tak stejně uživatele kropíte kobercovým náletem reklamních sdělení, které je většinou nezajímají. Ideální je to uzpůsobit uživatelům na míru a ve slideru jim ukazovat různé věci na základě toho:

  1. kolikrát už na webu byli
    Pokud 1-2, ukažte průřez sortimentem a hlavní výhody oproti konkurenci. Pokud 3krát a víc, tak už můžete ukazovat například oblíbené kategorie, akce.
  2. co na webu dělali
    Ukažte jim navštívené produkty, obsah košíku, navštívené kategorie.
  3. odkud přišli
    Na základě GeoIP lokace můžete ukazovat dopravu zdarma nebo to, že do dané lokality dodáváte (a jak rychle).
  4. zda jsou zaregistrovaní / přihlášení do newsletteru
    Nabídnout jim slevu za registraci nebo přihlášení do newsletteru.

Blbé je, že tohle všechno je už trochu náročné na koordinaci a vývoj.

„Začněte tím, že uživatelům, co na váš web přišli poprvé, ukážete na prvním slidu celkový průřez sortimentem a představíte firmu.“

Protože se mi při UX analýze stalo, že jsem testoval 1. dojem. A firma zrovna slavila 20 let – tak na prvním slidu měla dort a balónky. A polovina dotazovaných si myslela, že je to cukrárna nebo dovážka párty předmětu. A oni v reálu prodávali bazény.

Horší přístupnost

Je poměrně hodně lidí, co mají poruchu pozornosti. Co jsem to chtěl? Jo… od autismu po ADHD. A pro ty jsou animované karusely trochu smrt.

Zpomalení nahrávání stránky

Představte si, že máte na homepage 8 slidů, které jsou v HD – nebo nedej bože retina rozlišení. Každý bude mít od půl do jednoho mega. Takže si k průměrné velikosti stránky – která je teď přes 3 MB připočtěte dalších 8 MB jen kvůli slideru, na který klikne 1 % uživatelů. A o mobilu se radši ani nezmiňuji.

Sice jsou způsoby, jak psychologicky zmenšit pocit čekání, ale je to taková z nouze ctnost.

12 doporučení, jak navrhnout správně slider (když už ho musíte mít)

1. Užitečný obsah

Trochu hraběcí rada, já vím. Ale ukážu vám na konci článku případovku, kdy změnou pořadí slidů došlo k nárůstu obratu. Doporučuji začít obsahem, který má široký dosah a s každým dalším slidem trochu zužovat.

Takže určitě bude lepší mít dřív 10% slevu na vše než oblíbené kategorie. A ty bude lepší mít dřív, než promo na konkrétní produkt.

Kasa.cz má například tento slide jako 9. (!) v pořadí.

2. Tlačítko lepší než textový odkaz

Na slidu budete mít určitě fotku, nadpis, popis a pak odkaz. A je dobré ten odkaz mít spíš jako tlačítko, na které se lépe trefuje, než textový link.

Tady zdařilý příklad Feedo.cz.

3. Grafika na míru a odlišnost od reklamních bannerů

Doporučuji si dát záležet na grafice slidů. Ideální vlastní fotka a grafika, které respektuje brand. Barevností, typografií, prvky i tónem komunikace. Taky je dobré se vyvarovat použití běžných velikostí bannerové reklamy, abyste trochu zmenšili pocit, že je to další otravná reklama.

4. Alternativní cesty ke stejnému obsahu

Obsah slidu by neměla být jediná cesta, jak se dostat k danému obsahu na webu. Hlavně kvůli tomu, že na to 99 % lidí neklikne.

5. Maximum slidů je 5

Upřímně mi přijde mít 2 slidy jako hloupé.

Slider na skoda-auto

Má to například Škodovka, která ještě ke všemu ty dva slidy rotuje dokola. Což zase z pohledy fyzikálního světa nedává smysl. Protože si představte slide jako filmový pás, který je otočený kolem sebe. U dvou slidů dává větší smysl tím šoupat pravo levo.

A naopak mít 9 slidů je taky hloupé. Ideální počet slidů je 3-4.

6. Navigační prvky

Je důležité lidem ukázat na jakém slidů se nachází.

Tečky

A ne, tečky dole nejsou dostatečné. Jednak často nejsou nad konkrétním slidem vidět, protože jsou nad částí se stejnou barvou. Jednak se na ně špatně kliká, protože jsou často malé. A na touch zařízením by měla mít minimální klikatelná oblast velikost 7 krát 7 mm.

Tady nevhodné umístění teček na 4home.cz

Záložky a náhledy

Za mě určitě lepší možnost. Ze dvou důvodů:

  1. Vím, co je obsah každého slidu, aniž se tím musím proklikávat.
  2. Lépe se na to kliká nebo ťupe prstem.

Hezky to má například lekarna.cz – i když by mi přišlo lepší mít pozadí slidu stejné, jako pozadí aktivní záložky. Aby se to víc vizuálně propojilo.

Slider se záložkami na lékarna.cz

Obecně nejsem moc zastáncem náhledů, protože často splývají s aktuálním slidem. Nebo jsou naopak jak pěst na oko. Posuďte sami:

Slider s náhledy na Nábytek-Aldo.cz

Náhledy ostatních slidů v karuselu

Šipky pravo levo

Musíte mít na každém slidu viditelně šipky pro posouvání sliderem dopředu a dozadu. Jak jsem říkal, tečky jsou nedostatečné a záložky všem lidem nedojdou. Pozor na to, aby byly:

  • dostatečně vidět na světlém i tmavém pozadí,
  • aby byla dostatečně velká celá oblast pro posouvání. Ideálně 10% šířky celého slidu.

Hodně e-shopů šipky nemá vůbec a snižuje si tak možnou interakci s obsahem.

7. Rychlost animace na desktopu

Většina sliderů si mění rychleji, než by měla. Jako dobré pravidlo je na slide 5-7 sekund. A pokud je na slidu více textu, tak 10. A doporučuji si vydupat, abyste mohli mít různý čas pro různé slidy. Brian Massey doporučuje místo animace posouvání prolínačku, protože je méně agresivní. Ale pak tam nedávají zas moc logiku ty šipky.

8. Pauza na hover a interakci

Není nic horšího, než když vám slide odjede, zatímco si ho prohlížíte. Jako nutnost je – pokud nad slidem mám kurzor myši – tak zastavit animaci. To samé platí i v případě jakékoliv další interakce se sliderem, ať už je to kliknutí na šipky, záložky nebo tečky.

Takže zastavit, když:

  • mám nad sliderem kurzor myši,
  • na cokoliv na slideru kliknu.

Jako fajn mi přijde i to, že pokud kliknu na tlačítko na slidu – a dostanu se na další stránku, tak pokud se vrátím zpět na homepage, tak na mě bude ten samý slide „čekat“.

9. Odlišná grafika pro mobil

Ať vás ani nenapadne použít stejný slide pro mobil. Upřímně, ideální je na mobilu slider nemít vůbec.

Protože:

  • budete nutit uživatelé stahovat zbytečně velký obrázek,
  • pravděpodobně nepůjde text na slidu přečíst,
  • potřebujete jiný formát stran (na výšku).

Tady nešikovný příklad 4home.cz

Nejen, že je soubor 3krát větší, než by měl být. Ale zmenšením ztrácíte rozeznatelnost log a čitelnost šedého textu taky není nic moc.

11. Na mobilu neanimujte

Lidi – hlavně na mobilu – nesnáší animované slidery. Takže pokud už tam slider mít musíte, tak ukažte jen 1 slide, a interakci nechte na uživateli. Hlavně kvůli tomu, že na mobilu neexistuje hover efekt.

12. Podporujte swipe prsty

Na mobilu se lidi naučili swipovat – posouvat obsah přetažením prstem. Takže jim to nekažte. A nechte tuhle funkci i na desktopu – pro ty z nás, co mají dotykový notebook. Uděláte nám radost.

Animace swipovaní

Alternativy slideru

Nic

Upřímně, v polovině případů slider nepotřebujete. Zkuste i variantu, kdy prostě slider mít na homepage nebudete. Já vím, pro hodně z vás nepředstavitelné :).

Statický obrázek či obrázky

Zkuste slider nahradit statický obrázkem nebo obrázky.

Tady příklad mall.cz. Už jsem ho chtěl pochválit, ať si z něj jen nedělám srandu. Ale musím – co ten pičoklík vpravo nahoře?!

Mall homepage

A příklad vícero upoutávek na rohlik.cz.

Rohlik statické bannery

Adam Fendrych k tomu na twitteru dodává:

Video

Je to samozřejmě trochu nereálné, ale pokud na to máte peníze a chcete ukázat hodně informací, tak video/3d animace je dobrá volba. Tady koncept pro CarLens od NetGuru.

Carlens video místo slideru

Někdy se ale ukáže, že slider je opravdu lepší než statický obrázek

Tady příklad A/B testu z Conversion Sciences, kde tenhle statický obrázek překonal v A/B testu slider.

Statický slide je lepší než karusel

Aby v dalším A/B testu prohrál se sliderem, kde byl tenhle obrázek jako první slide. A to o 61 %.

Slider lepší než statika

Your Rotating Headers Don’t Have to Kill Your Conversion Rate

Tady je případovka s 10 testy sliderů. A já bych si na ně úplně nevsadil.

Takže suma sumárum: Použít slider? Spíše ne. A pokud ano, tak správně.

 

P.S.: A ať vás ani nenapadne dávat do jednotlivých slidů animaci nebo video na pozadí!

Související články

Ritz-joshie

Proč nadšení zákazníci nejsou loajální

Artworks-1ruuhssrsxqwnlbk-8ecejw-t500x500

Rozhovor o podnikání v UX pro WebTop100

Knihy

10 knih, které mě nejvíc ovlivnily

Levi-jeans-abandoned-cart-email

Přesvědčivost na e-shopu (s příklady)

Smysluplná debata

  • Vít Rabiňák
    Vít Rabiňák

    Super článek. Přesně to s těmi odděleními ve firmě znám. Je to někdy peklo. Nikdo si však neuvědomuje, že nakonec tratí pravděpodobně všichni.

    Špatný příklad https://www.wayfair.com/ a jeho druhého slidu (s trpaslíkem) je výborný, když jsem to viděl málem jsem si pošpinil klávesnici snídaní.

    • Ondřej Ilinčev
      Ondřej Ilinčev

      No a to jste neviděl ten mezislide s animovanými koberci. To bylo teprve maso.

  • Drobná chybka – v roce 2016 používalo carousel 32 %. Zmiňovaných 52 % bylo v roce 2013.
    https://baymard.com/blog/homepage-carousel

    • Ondřej Ilinčev
      Ondřej Ilinčev

      Opraveno, díky.

  • Bohumil Jahoda
    Bohumil Jahoda

    To zpomalení kvůli datové velikosti jde a je dobré řešit stahováním dalších obrázků, až když se na ně má kolotoč posunout. Potom to, co se týče rychlosti, takový problém není.

    Jinak ještě je dobré, když kolotoč při načítání neposkakuje. Některé JS řešení tímto problémem trpí.

    Ohledně zastavování mi přijde fajn, když se přehrávání pozastaví i při odrolování mimo obrazovku / deaktivování okna. Jednak obrázek na uživatele počká, ale často to také sníží zatížení HW uživatele, protože některé prohlížeče může dost zatěžovat i animování neviditelného obsahu.

    • Ondřej Ilinčev
      Ondřej Ilinčev

      Dobré postřehy, díky Bohumile.

  • Mě by zajímalo jaký máš názor na slider, který chce vedení cpát i jinde než na homepage, protože ním chcou ,,něco důležitého říkat´´.

    • Ondřej Ilinčev
      Ondřej Ilinčev

      Hmňo. Na homepage ještě se skřípáním zubů ano, jinde bych ho nedával. Značí to často to, že designér neumí udělat hierarchii informací.

  • Petr Opletal
    Petr Opletal

    Já nevím – fakt jsou lidé, kteří tupě zírají na přeblikávající nesmysly? A dají se zblbnout tak, že na něco v tom kliknou? Asi záleží na cílovce, ale dle mého názoru stačí jediný argument – pokud na web přišel někdo, kdo nic nepotřebuje a jenom zabíjí čas, tak z něho nejspíš stejně zákazník nebude. Pokud je to někdo, kdo je potenciálním zákazníkem, tak potřebuje dostat tu informaci, že našel toho správného partnera – odezvu na své očekávání (potřebu / rezonanci). A do „prohlížečky“ v principu nemá smysl dávat nic jiného než „obrázky“ (byť s nějakým jedním dvěma slovy). Což k zaujetí toho člověka, který se chce „dozvědět“, jestli je vlastník webu relevatní, může fungovat jen ve velmi omezeném počtu případů.
    Ale asi dělám chybu, že „podle sebe soudím tebe“.
    Zajímaly by mne skutečně důsledné / věrohodné / reprezentativní analýzy chování. Dle mého názoru by měla většina návštěvníků karusel přeskakovat. Teď jsem byl na webu, kde bylo na prvním snímku nějaké povídání, které jsem nestihnul přečíst, na druhém CTA, které nedávalo smysl. A to byl web copywritera. Neměl jsem ani sílu to přeskočit, hned jsem to zavřel. Vsadím poslední spoďáry na to, že na Alze 90% návštěv ten slider vůbec nevnímá.