webové karuselové posuvníky: proč, jak a kdy je použít (včetně příkladů 13)

pojďme mluvit o karuselech webových stránek, aka posuvnících, aka prezentacích, aka galeriích.

vypadá to, že celý internet má svou vlastní variaci, ale společně všichni myslíme, že designový prvek s pohyblivým obsahem a často zobrazuje tři malé tečky na dně.

pokud jde o kolotoče, jste buď v týmu 👏 nebo týmu 🙅. První tým obvykle zahrnuje klienty, druhý tým webové designéry.

tady v Ycode jsme Švýcarsko. Věříme, že kolotoče mohou být středobodem, díky kterému je váš webový design přitažlivější,ale že mají také potenciál přetáhnout použitelnost vašeho webu dolů.

v tomto článku se podíváme na osvědčené postupy kolotoče(a čeho se vyvarovat). Vzhledem k tomu, že kolotoče lze použít při mnoha příležitostech, ukážeme vám různé příklady jezdců, které byly dobře provedeny.

Carousel design best practices (nebo většinou, co nedělat)

ačkoli jsou používány na mnoha webových stránkách, karuselové vzory mohou snadno minout značku. Existuje několik dobrých důvodů, proč. Začněme s některými věcmi, kterým je třeba se vyhnout, než vám řekneme, jaké osvědčené postupy kolotoče byste měli použít.

Don nedělat: kolotočové chyby, kterým je třeba se vyhnout

1. Content: když chce kolotoč udělat příliš mnoho za příliš málo času, může to způsobit, že se oči návštěvníků webových stránek otočí. Text nelze správně číst, informace chybí a návštěvníci ztrácejí zájem.

2. Design: pokud je posuvník špatně navržen a nebude se mísit s designem vašeho webu, může se mýlit jako reklama. Jako výsledek, lidé posouvají přímo kolem obsahu. Říká se tomu banner blindness, fenomén webového designu, kde lidé ignorují obsah, který se podobá reklamě—vědomě nebo nevědomě.

3. SEO: z pohledu SEO se vyhněte více hlavičkám H1, pokud používáte posuvníky jako první věc na stránce. Každá webová stránka by měla mít ve svém HTML kódu jeden H1. Pokud používáte několik H1 kvůli různým snímkům, může být Google zmaten, která klíčová slova jsou pro tuto webovou stránku nejdůležitější. Struktura webových stránek také nemusí být jasná. Oba faktory by mohly negativně ovlivnit vaše hodnocení.

4. mobilní: pro mobilní zařízení je nejlepší jít na ruční posuvníky. Ujistěte se, že gesta jsou podporovány (např. mobilní uživatelé bít ukázat další snímek) a že šipky jsou jasně zobrazeny a dostatečně velké, aby stiskněte. Pokud vaše snímky obsahují text, zkontrolujte, zda je čitelný na mobilních obrazovkách.

5. rotace: S naším omezeným rozsahem pozornosti v těchto dnech je těžké udržet zájem uživatele déle než několik sekund. Vzhledem k tomu, že všichni máme místa, která mají být, udržujte posuvník-částka nízká (méně než pět) a dát návštěvníkům možnost ovládat kolotoč zobrazením posuvných ovládacích prvků. Díky tomu lidé nemusí sedět a čekat na další snímek.

👍 co dělat: osvědčené postupy kolotoče

1. Udržujte každý snímek jednoduchý, takže informace mohou být stráveny během několika sekund.

2. nechte design splynout se zbytkem vašeho webu.

3. nechte lidi ovládat rotaci jasnými šipkami.

4. mít dostatek času mezi snímky (5-10 sekund), nebo ještě lépe, příkop automatické přehrávání úplně.

5. méně je více (jak v designu, tak v množství snímků).

6. před vložením karuselu se zeptejte: přidá to větší hodnotu než statický obsah?

máte pochybnosti?

v případě pochybností Otestujte obě možnosti a zjistěte, která volba generuje vyšší míru konverze. Klienti často žádají o prezentace, protože nemají jasno ve zprávě, kterou chtějí propagovat v první řadě. Proč neukázat všechno? Myslí si.

Pokud tomu tak je, práce spočívá v tvorbě cílenější zprávy-bez použití posuvníku. Nebo vyberte důležité USP (unikátní prodejní místo)a zmínit ty ostatní dále na stránce. Lidé se s větší pravděpodobností posouvají, než aby listovali vašimi snímky.

pokud se rozhodnete, že je to peklo Ano, vyberte každý snímek úmyslně. Nepoužívejte jen přidat všechny své nové blogy nebo produkty, ale pečlivě vybrat nejdůležitější obsah, který by mohl generovat nejvíce interaktivitu od uživatelů.

13 příklady kolotoče webových stránek

Nyní, když víte, co nedělat, podívejme se na příklady kolotočů, které jej přibijí. Tady jsou 13 příklady kolotoče webových stránek, od domovské stránky po prezentace produktů a obrázků.

úvodní kolotoče

pokud jste si mysleli, že tábory jsou již dostatečně rozděleny, nesetkali jste se s posuvníky domovské stránky. Někteří kořen pro jejich umístění přímo na vrchol (často vidět v šablonách blogů), zatímco jiní nechtějí vidět je implementován kdekoliv nad záhyb.

důvodem, proč se lidé vyhýbají umístění domovského kolotoče přímo nahoře, je to, že věří, že tento prostor by měl být vyhrazen pro jasnou zprávu, která láká čtenáře, aby se posunul dolů a dozvěděl se více. S kolotočem je těžké sdělit jednu silnou zprávu. Navíc si nejste jisti, zda lidé vidí všechny snímky nebo posouvají přímo kolem.

Existuje však také spousta lidí, kteří milují pozdrav návštěvníků s domovským kolotočem, aby okamžitě zobrazili doporučené příběhy nebo produkty.

Příklad 1: Nicole Gibbons Studio

domovský kolotoč od Nicole Gibbons Studio funguje opravdu dobře! To je dobré z několika důvodů.

• má dobrou funkčnost a přidává hodnotu. Designérka Nicole rychle ukazuje různé příklady interiérů přímo, když lidé vstoupí na její web

• snímky jsou manuální, takže se uživatel rozhodne, zda a jakým tempem chce listovat

• neexistuje žádné překrývání textu, které by bylo možné odebrat ze snímků

příklad 2: Urban Skin RX

Milujeme tento kompaktní kolotoč od Urban Skin RX, protože má skvělou dostupnost.

obsahuje dva snímky, oba atraktivně navržené ve stejném stylu jako zbytek webu. Doba otáčení je nastavena dostatečně dlouho na čtení textu. Velká písma a tlačítka clear call to action (CTA) usnadňují trávení toho, o čem je snímek.

Poznámka: pokud procházíte domovskou stránku značky, uvidíte, že je přizpůsobena lidem, kteří již znají Urban Skin RX. Důraz je kladen na představení produktů, aniž by bylo vysvětleno, proč je někdo potřebuje. To je důvod, proč se na stránku hodí posuvník produktu—nepotřebují prostor záhlaví, aby zobrazili jednu jasnou zprávu, která motivuje návštěvníky k objevování více.

příklad 3: Mejuri

co se nám na tomto kolotoči z klenotnictví Mejuri líbí, je to, že ukazuje dvě různé věci najednou, aniž by se cítil ohromující.

celý kolotoč obsahuje tři snímky, z nichž každý má dvě možnosti-viz kampaň nebo nakupujte šperky. Postupové čáry jsou jemně zobrazeny ve spodní části, i když možná budete potřebovat orlí oči, abyste to zjistili. To by mohl být bod pro optimalizaci.

příklad 4: Fresh Brothers Pizza

kdo říká, že posuvník potřebuje překlenout celou šířku stránky? Můžete také rozdělit sekce na mřížky a použít menší posuvníky, jako na domovské stránce Fresh Brothers Pizza.

je pravda, že s tímto rozvržením webového designu se věci mohou dostat trochu moc. Ačkoli posuvníky ukazují návštěvníkům informace, oko je přitahováno k velkému obrázku vlevo. Ne každý uvidí informace o posuvníku. Nicméně, protože informace jsou o opatřeních COVID a nových pizzách, které lidé stejně uvidí při objednávce, to není velký problém.

karusely produktu

karusely produktu jsou k dispozici, aby vizuálně lákaly lidi, aby se dozvěděli více o produktu, a doufejme, že ho koupí!

tyto typy karuselů jsou obvykle umístěny na jednom ze dvou míst na webech elektronického obchodování: na domovské stránce nebo na stránce produktu. Posuvník může zobrazit různé produkty nebo jeden produkt různými způsoby (ukazuje jeho vlastnosti).

příklad 5: Keys Soulcare

na této stránce produktu keys Soulcare se karusel používá k zobrazení každé položky, která je součástí balíčku Harmony ritual. Posuvník dokonale zapadá do designu webových stránek, protože umožňuje návštěvníkům vidět všechny relevantní informace, aniž by museli posouvat.

příklad 6: KeepCup

tento produktový kolotoč od KeepCup je umístěn uprostřed webu elektronického obchodování a umožňuje vám snadno procházet nejoblíbenější poháry značky. Vezměte na vědomí, jak jsou umístěny název, cena, tlačítko Koupit a šipky-super elegantní (rekvizity grafickým designérům).

příklad 7: stesk po domově

svíčka společnost homesick používá řadu posuvných prvků na svých internetových stránkách e-commerce, předvést své svíčky, stejně jako recenze a citace od značek.

uprostřed domovské stránky je tato prezentace-pohyblivá Galerie jejich nejprodávanějších svíček (milujeme koncept vůně!). Jakmile umístíte kurzor myši na posuvník obrázku, zastaví se a zobrazí se mírně odlišný obrázek(například ukazuje, že svíčka svítí).

příklad 8: Mléčný Bar

stránky produktů mléčného baru jsou radostí procházet, a to nejen proto, že obrázky zalévají ústa. Vezměte webovou stránku roztleskávačky níže, s posuvným prvkem vlevo a všemi detaily produktu vpravo, návštěvníci vidí vše na první pohled.

když však přejdete dolů, uvidíte interaktivní bannery a další informace o produktech, jako je doručení, přísady, podobné pochoutky a další kolotoč zobrazující recenze zákazníků.

kolotoč obsahu

pokud chcete na svůj web přidat kolotoč obsahu, mějte na paměti, že nejcennější část obsahu musí být v prvním snímku. Počáteční snímek vždy získá největší expozici a dojmy se po každém dalším snímku snižují.

příklad 9: Art Of Tea

na webových stránkách níže od Art Of Tea, uvidíte mnoho různých věcí v jednom celoobrazovkovém posuvníku.

Otevírací posuvník je CTA pro připojení k jejich přidruženému programu. Další jsou snímky ukazující nové čajové plechovky, tašky, svazky a třepačky. Jeden snímek je také věnován vstupu do jejich měsíčního čajového klubu.

co tento karuselový webový design dělá dobře, je to, že snímky ukazují, o čem je každý snímek, a podpůrný text je omezen na minimum. Jedna věc, kterou je třeba zlepšit, jsou tlačítka. Když vyberete tlačítka, která mají pouze obrys, je těžké je na obrázku jasně vidět.

příklad 10: Canva Design School

stránka Design School Od Canva je dobrým příkladem instance, kde je karusel účinnější než jakýkoli jiný prvek webu.

vzhledem k tomu, že na vstupní stránce je spousta obsahu, pomáhá kolotoč kompaktněji zobrazit různé kurzy. Například níže uvedená část tutoriálu zabírá mnohem více místa ve srovnání s prezentací.

Blog carousels

mnohokrát šablony WordPress pro blogy přicházejí s interaktivním posuvným prvkem, který automaticky zobrazuje nejnovější články.

i když je to skvělá funkce, mějte na paměti, které články jsou zobrazeny. Některé nemusí být jako click-hodné, ale zobrazí se jako první na domovské stránce posuvníku, protože jsou naposledy publikovány. V tomto případě je lepší ručně vybrat blogy, o kterých si myslíte, že lákají návštěvníky ke kliknutí.

příklad 11: COCOCOZY

interiérový design blogger Colette Shelton otevírá svůj blog posuvníkem zobrazujícím výběr jejích blogů. Jakmile umístíte kurzor myši, zobrazí se název blogu. Na mobilu je obrázek zobrazen s názvem pod ním.

obrazové kolotoče

obrazové kolotoče jsou často vidět na portfóliových webech, kde se používají k zobrazení díla umělce. Ujistěte se, že vaše obrázky jsou vysoce kvalitní a mluví samy za sebe, aniž byste potřebovali další text.

příklad 12: Mix Design Collective

Mix Design Collective je designová společnost. Vzhledem k tomu, že jejich práce je vysoce vizuální, má smysl otevřít web pomocí navigace a posuvníku fotografií přímo níže.

prezentace obsahuje kombinaci obrázků, od kuchyní po koupelny a obývací pokoje, takže návštěvníci získají představu o stylu a službách kolektivu.

porovnání karuselů

posuvníky fungují dobře, když uživatelé potřebují rychle skenovat různé obsahy nebo produkty. To je přesně ten případ, kdy lidé porovnávají položky. Podívejme se na některé příklady.

příklad 13: Amazon

pravděpodobně nejznámější srovnávací příklad pochází z Amazonu. Na každé stránce produktu najdete kolotoč se všemi souvisejícími produkty, které si můžete také koupit. V tomto případě je posuvník účinnější než statické obrázky, protože umožňuje uživatelům rychle procházet mnoho podobných produktů.

jaký je váš názor na webové stránky kolotoče?

jak jste si přečetli, webové posuvníky mohou být ano prosím nebo prosím ne. Vše záleží na tom, jak se prvek používá ve vašem webdesignu a jak uživatelsky přívětivý je posuvník pro navigaci. Ujistěte se, že každý snímek slouží jasnému účelu a celkový uživatelský dojem je skvělý. Pokud můžete s jistotou říci, že posuvník je nejlepším prvkem pro zobrazení obsahu,je dobré jít.