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.

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.

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ší.

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

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.

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.

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:

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:

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

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.

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.

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.

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

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.

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.

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.

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

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.

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

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

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

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.

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

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:

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

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.

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ž:

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“.

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:

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.

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.

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.

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é :).

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

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

Adam Fendrych k tomu na twitteru dodává:

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.

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

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

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
https://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/