Slider na webu: Ano, nebo ne?

Slider. Jeden z největších trendů webdesignu minulé dekády se dnes stává tématem ohnivých diskuzí mezi designery a klienty. S nástupem UX, kdy se nad weby začalo přemýšlet komplexněji, se upouští od vytváření stránek pouze za účelem líbivé prezentace. Důraz se klade na to, aby web splňoval svůj cíl. Tedy prodával, nabízel služby, případně budoval branding. Konkurence totiž nikdy nespí. Je tedy použití slideru na webu dobrý nápad, nebo krok zpět? 

• Co je to slider? 
• Výhody slideru: Kdy jej můžete použít? 
• Nevýhody slideru 
• Alternativy slideru a ukázky řešení 
• Co by měl obsahovat slider na hlavní stránce
  • Obsahové řešení slideru
  • Grafika slideru

Co je to slider? 

Slider neboli carousel je série obrázků, textů nebo bannerů, zobrazující se nejčastěji v úvodní části hlavní stránky. Ty se mění za pomocí automatické animace, případně manuálně (po kliknutí na šipku / tečku). V minulé dekádě se se slidery doslova roztrhl pytel a jejich použití bylo považováno za automatické. O tomto roztomilém interaktivním prvku se však s nástupem UX začalo polemizovat. Je jeho použití na webu opravdu přínosem? 

Výhody slideru: Kdy jej můžete použít? 

Nad použitím slideru doporučuji popřemýšlet v těchto případech: 

• Potřebujete prezentovat fotky či obrázky, například portfolio prací nebo fotografie prostor vaší prodejny. 

Ukázka použití slideru jako galerie obrázků (v červeném rámečku) na stránkách našeho klienta Datahelp. Další naše reference najdete zde.

• Hledáte kompaktní způsob, jak zobrazit reference vašich klientů. V těchto případech můžete sáhnout po tzv. textovém nebo obrázkovém carouselu s logy klientů. 
• Máte různá oddělení ve firmě, která chcete prezentovat v úvodu stránky interaktivním způsobem. V tomto případě může slider vaše dilema rozlousknout. 

Carousel s odděleními firmy jsme využili na naší domovské stránce. 

• Chcete na nejdůležitějším místě na webu, tedy hned v úvodu hlavní stránky, zobrazit více než jeden obsah kompaktním způsobem. V tom případě sice můžete slider využít, ovšem existují i další alternativy, které si vysvětlíme níže. 
• Rádi byste zobrazili seznam produktů, případě případové studie ve formě obrázku, doplněného o jednoduchý text a konverzní tlačítko. Tento způsob se hojně využívá na e-shopech nebo ve firemních prezentacích. 

Ukázka použití carouselu v seznamu produktů na e-shopu. Zdroj obrázku

Nevýhody slideru 

Odborníci na UI a UX design doporučují být s použitím slideru opatrný, ideálně se jeho umístění zcela vyvarovat. Lidský mozek je už totiž na reklamu na webu navyklý natolik, že si slidery podvědomě asociuje s reklamou, a proto má tendenci slider ignorovat. Studie z univerzity v Notre Dame ukazuje, že ze 3,7 milionu návštěv hlavní stránky kliklo na slider pouhé jedno procento uživatelů. Z toho téměř 90 % konverzí bylo na prvním slidu. O tom, že proklikávat se položkami slideru není zrovna příjemná záležitost, dobře vypovídá tato stránka.

Výsledky studie univerzity v Notre Dame. Zdroj obrázku

Další nevýhodou použití slideru na webu je jeho vliv na rychlost webové stránky. Používání sliderů může vzhledem k velikosti obrázků a animací web zásadně zpomalit. Jak podotýká UX specialista Ilinčev, více než polovina uživatelů očekává, že se jim stránka načte do 2 sekund. Každou sekundou navíc se tedy připravujete o potenciální klienty. 

• Mohlo by vás také zajímat: Page experience aneb Na uživatelském dojmu záleží

Záludným může být také nepraktické využití slideru na mobilních zařízeních. Text slideru nemusí být na mobilu čitelný a animace mezi obrázky nepříjemná. Obecně se tedy použití slideru na mobilu nedoporučuje. A vzhledem k zachování konzistentního vizuálu pro všechna rozlišení jej rovnou můžete vynechat i na desktopu. O typografických pravidlech na webových stránkách jsme napsali zde. 

Jak jsem zmiňovala ve článku o nejčastějších chybách v UX řešení webů, mělo by být na první pohled jasné, o čem webová stránka je. Použití slideru může uživatele zmást (například když do slideru umístíte narozeninový dort k výročí firmy, uživatel si může myslet, že se jedná o web cukrárny, i když ve skutečnosti prodáváte auta). Pokud tedy slider chcete na webu použít, je potřeba jeho vizuální řešení pořádně promyslet, ideálně obrátit se na odborníka. 

S tvorbou a správou webových stránek máme hodně zkušeností. Podívejte se na naše reference! 

Alternativy slideru a ukázky řešení 

Z hlediska UX analýz vyplývá, že je výhodnější umístit hlavní konverzní položky vedle sebe než do slideru. Konverze položek v případě statického umístění vykazují mnohem lepší výsledky. Laicky vysvětleno, mít všechny možnosti vedle sebe je pohodlnější než zběsile míhající se obrázky s texty, které nemáte čas přečíst. Kromě jednoho statického obrázku můžete použít i několik možností vedle sebe. 

Dobrým příkladem je například e-shop Mall.cz, který využil obě možnosti (v hlavičce nabízí jeden statický obrázek s konverzí a níže čtyři bannery vedle sebe s konverzními prvky). Jednoduché a účelné. Zajímavé řešení zvolil web módní značky H&M, který umístil jednotlivé položky slideru pod sebe. Od použití slideru upouští i další známé značky, jak vypovídá e-shop Rohlík.cz nebo Avon. 

Řešení e-shopu Mall.cz je ukázkovým příkladem alternativ slideru. V hlavičce stránky použití statického obrázku s konverzí, níže čtyři statické konverzní bannery. 

O tom, že slider není nutné na webu použít, vypovídají i weby, které jsme zrealizovali pro naše klienty. Patří mezi ně například nový projekt pro městskou část Praha 17, francouzský e-shop s přírodní kosmetikou Asabio nebo pojišťovací společnost Respect. 

Potřebujete vylepšit váš stávající web? Obraťte se na nás! Nabízíme možnost UX analýzy webu s konkrétními návrhy řešení. Naši experti napříč obory vám rádi zajistí následnou realizaci. Pro více informací nás neváhejte kontaktovat. 

Co by měl obsahovat slider na hlavní stránce

Obsahové řešení slideru

Klíčem úspěšného slideru je zvolit hodnotný obsah. V opačném případě carousel jen zbytečně zabírá prostor na webu. Nejdůležitější informaci je vhodné umístit do prvního slidu a pokračovat těmi méně podstatnými. Ideální počet položek slideru by měl být 3-5. Více slidů považuji za zbytečné, stejně jako pouze 2 položky, které můžete umístit rovnou staticky vedle sebe. 

Pozor, obsah ve slideru zobrazujte i jinde na webu (viz studie univerzity z Notre Dame, o které jsme si říkali v úvodu). Stejně tak konverzní tlačítka ve slideru by neměla být jediným zdrojem odkazu na danou stránku. Slider na homepage by měl kromě konverze dále obsahovat obrázek a nadpis, případně i krátký popisný text. 

• Čtěte také: Nejoblíbenější chyby při tvorbě webu, které určitě nedělejte

Grafika slideru

Na vizuálním řešení jednotlivých sliderů si dejte záležet. Mělo by být v souladu s jednotným vizuálním stylem a nemělo by připomínat reklamu. Doporučuje se nepoužívat klasické bannerové formáty, aby položky vynikly a odlišily se od reklamních sdělení. V případě profesionálního zhotovení grafiky může slider posloužit jako příjemný doplněk firemního brandingu, v opačném případě však nadělá víc škody než užitku. A jaké jsou trendy v grafickém designu pro tento rok? 

Nový webdesign nebo rovnou korporátní identita? Pro nás žádný problém! Více informací najdete v naší galerii grafiky. 

Slider našeho klienta Vestavěnky.cz jsme realizovali v souladu s vizuálním stylem společnosti. Web se tak krásně sjednotil a podtrhl firemní branding.

Promyslete si také vizuální řešení šipek pro posun jednotlivých obrázků. Měly by být dostatečně čitelné a velké, aby na ně šlo pohodlně kliknout. Zajímavé řešení nabízí například řešení e-shopu Alza.cz, který vsadil na zobrazování slidů pomocí tzv. záložek. Důležité je i správné načasování animačních přechodů. Uživatel by měl mít pro pohodlné přečtení každého obrázku slideru alespoň 5-7 sekund.  

Zobrazení řešení slideru e-shopu Alza.cz prostřednictvím záložek