Jan Štráfelda - Průvodce online -projektem
Praha/Mělník  |  776 678 044  |  jan@strafelda.cz  |  Pošlete mi poptávku

Karusel

Carousel (v angličtině kolotoč) nebo v Čechách někdy také slider (v angličtině šoupátko) je prvek webové stránky, který postupně zobrazuje obrázky v podobě automatické slideshow. To znamená, že návštěvník po načtení stránky vidí první obrázek, po chvíli se mu vymění za druhý, pak za další atd. Karusel však nemusí zobrazovat jen obrázky, ale také HTML obsah (například texty, koláže obrázků, animace, videa apod.).

Proč zadavatelé karusel na webu chtějí

Jednak proto, že je to dnes určitá móda. Hlavně ale proto, že umožňuje zobrazit mnoho informací na malém prostoru. Právě proto ho tvůrci webů obvykle umisťují na úvodní stránku do horní části (nad ohybem). Toto místo je dobře viditelné, často navštěvované a proto velmi cenné.

Karusel na webu České spořitelny

Ukázka typického karuselu na webu Kooperativy. Neužitečný obsah prvního snímku, špatně ovladatelná tečková navigace, šipky umožňující listovat mezi obrázky zcela chybí. Všimněte si naopak křížku vpravo nahoře, který celý karusel schová (Proč? Že by kompromisní výsledek korporátní diskuze, zda karusel na homepage opravdu potřebují?).

Podle mých zkušeností karusel obvykle přijde na řadu ve chvíli, kdy do tvorby webu mluví za zadavatele více lidí a nemohou se dohodnout. Například pánové z marketingu chtějí na úvodní stránce fotku odvozenou z probíhající TV reklamy, obchodníci nejprodávanější produkty a ředitel fotku šťastného zaměstnaneckého týmu. Karusel toto dilema elegantně vyřeší a všichni jsou spokojení. Všichni, až na návštěvníky.

Proč karusel nepoužívat

Především proto, že lidé karusely ignorují. Už v roce 2013 studie ukázala, že ze tří milionů návštěv na slider na úvodní stránce kliklo jen jedno procento. Vy očekáváte, že si lidé proklikají postupně všechny obrázky, ale to se nestane. V lepším případě uvidí jen první obrázek, v horším karusel kompletně ignorují. Je paradoxní, že slider je obvykle nejvýraznější objekt na úvodní stránce, a lidé ho přesto vůbec nevidí.

Podílí se na tom bannerová slepota – vše, co jen trochu vypadá jako banner, lidský mozek odstíní a návštěvník to vůbec nezaregistruje. Dalším důvodem je fakt, že karusel málokdy obsahuje informace, které by byly pro návštěvníka užitečné. A pokud už je obsahuje, pak se to návštěvník nedozví (protože další obrázky vidí reprezentované malými tečkami). Takže i když si karuselu všimne, raději ho přeskočí.

A třetí důvod: úvodní stránka funguje jako rozcestník. To znamená, že návštěvník rychle proskenuje obsah, vybere si odkaz, který nejvíce odpovídá úkolu, který plní (např. zjistit, kolik stojí nová lednička), klikne a jde dál. Rozhodně nečeká, až se mu karusel postupně přehraje.

Pokud na použití karuselu na úvodní stránce webu přesto trváte, zkuste si změřit počty prokliků z jednotlivých obrázků. Uvidíte, že dostanete poměr podobný tomuto: 93 : 3 : 2 : 1 : 1 (ve prospěch prvního slidu). Z těch lidí, kteří na karusel vůbec klikli. To znamená, že ty další obrázky jsou tam naprosto zbytečné. Zkuste tedy karusel nahradit grafickým rozcestníkem a udělejte si A/B test, co funguje lépe.

Kreativně řešený karusel

Ukázka kreativně řešeného karuselu. Plusové body za to, že nevypadá jako banner, což eliminuje bannerovou slepotu. Horší je, že zvyšuje kognitivní zátěž uživatele (zahlcuje ho rámečky, šipkami, vyčnívajícími bezobsažnými obrázky).Prostor na samotné sdělení (lákavý obrázek útulného interiéru) je pak malý.

Karusel na mobilních zařízeních

V responzivním designu platí pravidlo, že mobilní web by měl zachovat všechny funkce dostupné na desktopu. To znamená, že pokud karusel použijeme na desktopové verzi, nemůžeme ho jednoduše na chytrém telefonu vynechat.

To způsobuje čtyři zásadní problémy:

  1. Prvním je datová náročnost. I když optimalizujeme velikost obrázků, tj. pro různá zařízení načítáme různé obrázky dle velikosti obrazovky (což podle mých zkušeností řeší málokdo), karusel znamená javascriptovou knihovnu, CSS knihovnu a třeba pět obrázků. Načtení stránky se tak významně zpomalí. Zkuste si takový web načít na EDGE připojení s rychlostí 130kbit/s, které je stále jako jediné dostupné na spoustě míst v ČR. Počkáte si klidně v řádu minut.

  2. Druhou komplikací je nečitelnost textů. Pokud snímek na desktopu obsahuje textový slogan a při zobrazení na mobilním telefonu ho zmenšíme 10×, zmenší se pochopitelně i text. Toto se dá vyřešit různými formáty obrázků pro různá rozlišení zařízení, ale to zase představuje vyšší režii s přípravou podkladů.

  3. Třetím problémem responzivních sliderů je ovládání. Jestliže tečkovou navigaci špatně ovládáme myší, tlustými zpocenými prsty v přehřáté tramvaji to nepůjde vůbec. Pokud se posouvací šipky zobrazují až po najetí myši (aby návštěvníka nerušily), na tabletu či telefonu je neuvidíme nikdy (protože tablet myš prostě nemá).

  4. Čtvrtým problémem je fakt, že provoz karuselu je výpočetně náročný. Na novějším tabletu asi nebude mít návštěvník žádné potíže, ale lidé stále používají spousty starých telefonů, na kterých se může karusel sekat nebo dokonce znemožnit používání stránky.

Někdy se responzivní karusely ovládají pomocí tzv. swipe gesta (smýknutí prstem do strany). To se zdá jako skvělé řešení, dokud nezjistíte, že některé mobilní prohlížeče si toto gesto rezervují pro jiné účely. Platí to zejména pro karusely, které začínají hned od kraje displeje. Například uživatel mobilního prohlížeče Chrome se tak po smýknutí může dostat na další záložku prohlížeče (tzv. edge swipe). 

Jiný příklad kreativní karuselu

Jiný příklad kreativní karuselu. Všimněte si tlačítka „More“, které funguje jako proklik na související stránku. A stejných tlačítek „More“ vpravo, která přepínají karuselu na daný obrázek.

Kdy se přesto karusel může hodit

V internet marketingu platí „nikdy neříkej nikdy“. Existují určité výjimky, kdy karusel může dávat smysl. Například jsem ho doporučil na začátku jednostránkového webu hotelu, karusel zde plní úlohu galerie. Návštěvník se tak může hned na začátku v rychlosti seznámit s interiérem hotelu, karusel zde přenáší žádoucí emoce. Plná galerie v klasické podobě se pak nachází níže na stránce.

Další výjimkou může být, pokud karusel vypráví nějaký příběh. A hned z úvodního snímku je to patrné. Umím si to představit třeba na webu některé neziskovky. Pak by se však karusel neměl spouštět automaticky a z posledního snímku by nemělo jít prokliknout na první.

Třetím příkladem může být e-shop, který má dobře vyřešenou personalizaci obsahu. Tj. sleduje, co si prohlížíte a karusel pak může skvělé místo, kde zákazníka dorazit. Soudím, že třeba Amazon má na webu karusel z tohoto důvodu. Vždy se vyplatí testovat.

Jak se dá karusel měřit

Chcete-li vědět, jak vám karusel na webu funguje, mrkněte do Google Analytics do záložky Události (Events). Pokud zde nevidíte žádné události týkající se karuselu, pak zřejmě webový analytik či web developer nenastavili jejich měření. Požádejte je, aby to udělali. Jsou to užitečná čísla, zejména jde-li o karusel na úvodní stránce webu.

Jiný příklad kreativní karuselu

Příklad lepšího karuselu z dílny Adapticu umístěného na úvodní stránce e-shopu. Místo obdélníkového obrázku, který lidé ignorují, je zde jasně rozpoznatelná fotografie produktu. Textový seznam snímků jasně říká, co jednotlivé slidy nabízí. Všimněte si také tlačítka „Koupit nyní“, které zvyšuje míru prokliku.

Jak na použitelný karusel

Jestliže přes všechny výše uvedené důvody musíte karusel použít, protože jinak vás šéf vyhodí, dejte si pozor na následující:

  1. Zvolte rozumný počet snímků

    Karusel by měl obsahovat 3 až 5 obrázků. U většího množství už se lidé ztrácí a nepamatují si, co už viděli.

  2. Obrázky musí být klikací

    Je to častá chyba. Snímek třeba ukazuje parádní boty, které chci. Ale nejde prokliknout a dostat se tak na detail produktu, kde bych nakoupil. Nebo je klikací jen tlačítko a ne celá plocha snímku. Všechny velké grafické prvky na webu by měly fungovat jako proklik na další informace vedoucí návštěvníka k dokončení konverze.

  3. Časování

    Zvažte rychlost, s jakou se snímky v karuselu posouvají. Bude-li moc vysoká, návštěvník nestačí obsah snímku vstřebat. Bude-li nízká, bude dlouho trvat, než se celý karusel přehraje.

  4. Ukažte počet snímků

    Pokud chcete k ukázání počtu snímků použít tečkovou navigaci, pak je třeba tečku reprezentující aktuální snímek zvýraznit. Zajistěte také, že i když samotná tečka bude malá, kolem ní bude dostatečně velký klikatelný prostor, takže se uživatel nemusí trefovat přesně.

  5. Ukažte obsah dalších snímků

    Lepší varianta než tečková navigace, je zobrazit malé náhledy snímků, případně textové popisky, které snímky reprezentují. Lidé se tedy hned na první pohled dozvědí, co jim ještě může karusel přinést.

  6. Další častá chyba. Pokud ovládací šipky, tečky nebo náhledy obrázků umístíte mimo rámeček karuselu, lidé si jich nemusí všimnout, případně si je se karuselem nespojí.

  7. Zachovejte návrhový vzor

    Karusel obvykle funguje tak, že kliknutí na pravou část snímku nás posune o jeden slide dál. Na levou část o jeden slide zpět. Lidé jsou tak zvyklí a nedává smysl vymýšlet jiná řešení.

Jiný příklad kreativní karuselu

Karusel na webu České pojišťovny roluje shora dolů, ovládací šipky jsou tedy vycentrované a umístěné na horní a spodní části snímku. Kolik uživatelů je čeká vpravo / vlevo?

Zaujal jsem vás? Přihlašte se do mailingu a mé další texty už vám neuniknou:

 

Zprávy posílám cca 8 × ročně. Odhlásit se můžete kdykoliv. Více informací.



Nezávazná poptávka

  (volitelné)