Karusel

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

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.

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

Karusel a SEO

Napadlo by vás, že zdánlivě neškodná komponenta, jako je karusel, může souviset také s optimalizací pro vyhledávače? A přece může Karusel totiž bývá největším prvkem, který se při načítání stránky zobrazuje ve viewportu nad ohybem stránky. A je-li špatně navržený a nakódovaný, zhoršuje metriku Largest Contentful Paint, která je součástí Core Web Vitals a jako taková se počítá do hodnocení stránky, podle kterých Google řadí výsledky vyhledávání.

A aby toho nebylo málo, používá-li karusel nevhodný způsob animace, může ovlivnit také sesterskou metriku Cumulative Layout Shift. A tím stránka opět přijde o pár bodů v hodnocení vyhledávačem. Platí to především pro tzv. nekomponované animace.

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.

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 nikoliv 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. Navigační prvky uvnitř prostoru karuselu

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