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

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.

Meoskop

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.cz a Bonami.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.

Banner blindness

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.

Stejně máte větší šanci, že přežijete havárii letadla, než že kliknete na banner.

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

4home slide

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

4home mobilní slide

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í!

Zdroje:
https://www.nngroup.com/articles/designing-effective-carousels/
https://www.nngroup.com/articles/mobile-carousels/
https://uxplanet.org/designing-a-user-friendly-homepage-carousel-f664c9f2b50e
http://bradfrost.com/blog/post/carousels/
https://uxplanet.org/the-usability-of-carousel-design-4e3930a10b29
https://www.impactbnd.com/blog/why-homepage-carousels-are-bad
https://baymard.com/blog/homepage-carousel
https://conversionxl.com/blog/dont-use-automatic-image-sliders-or-carousels/
https://www.peckadesign.cz/blog/ux-a-webdesign-pri-tvorbe-a-optimalizaci-e-shopu
https://www.nngroup.com/articles/auto-forwarding/
https://erikrunyon.com/2013/07/carousel-interaction-stats/
https://www.orbitmedia.com/blog/rotating-sliders-hurt-website/

, ,

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

  1. Profilový obrázek
    Vít Rabiňák 19. červenec 2019 at 10:23:09 #

    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 21. červenec 2019 at 22:33:49 #

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

  2. Profilový obrázek
    Jarek V 19. červenec 2019 at 12:33:37 #

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

  3. Profilový obrázek
    Bohumil Jahoda 6. srpen 2019 at 10:16:27 #

    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.

Napsat komentář

Powered by WordPress. Designed by WooThemes