Obrázek Karusely v Web Design - Výhody & Best Practices

Není tam žádný nedostatek prezentace karuselu na webu. Ve skutečnosti tento trend neudělal nic jiného rostou v posledních 5-10 letech s více podporou prohlížeče než kdy předtím. Ale stojí za to úsilí obrazové karusely? Jaké druhy výhod produkují a jak by měly být produktivně využívány v rozvržení?

Chtěl bych se o ně podělit společné trendy, živé příklady a nápady pro webové designéry zajímající se o obrazové karusely. Tyto dynamické posuvníky jsou silně diskutovány, ale myslím si, že přidávají hodnotu, když jsou vytvořeny ve správném kontextu.

Produktové karusely pro elektronický obchod

Svět e-commerce je plný rotujících karuselů na domovských stránkách a produktových stránkách. Cílem je udržovat jasnou hustotu informací s fotografiemi a textem, které vyprávět jedinečný, ale cenný příběh pomoci prodávat produkty.

Existují dvě základní umístění pro posuvník produktu e-commerce:

1. Na domovské stránce obchodu
2. Na stránce produktu

Oba pracují jinak, ale sloužit stejnému cíli - prodávat výrobky vizuálně.

Příklad 1: Au Lit Fine Linens - domovská stránka

Podívejte se na domovskou stránku Au Lit Fine Linens, to používá celoobrazovkový automatický otočný karusel předvést různé produkty, jako jsou přikrývky, polštáře a pokrývky na postele.

Obrazy zabírají celou šířku domovské stránky nad záhybem. Ve skutečnosti by tento posuvník měl být první věc, která vás zaujme při prvním přistání na stránce. Každý snímek vede na jinou stránku na webu průvodce prostřednictvím nakupování.

Tento posuvník může být tad zastrašující, když první přistání na stránce, ale s odkaz na tlačítko a překryvný text to může být také velmi povzbudivé pro návštěvníky, kteří se chtějí jen potápět a nakupovat.

Příklad 2: Pouzdro telefonu Eden - produktová stránka

Konkrétnější příklad můžete vidět na stránce produktu Eden telefon. Používá auto-točit jezdce zobrazovat obrázky produktu.

Považuji to za málo “příliš mnoho” ve světě elektronického obchodu. Když se dívám na produkt, který chci být ovládání přepínání mezi obrázky.

Lepší možností je udělat galerii obrázků s kontrolou danou návštěvníkovi. Stránka Design by Humans například používá miniatury pro každou fotografii což je mnohem povzbudivější a poskytuje uživateli větší kontrolu.

Karusely webového portfolia

Online portfolia webových stránek jsou trochu jiné, protože tyto snímky ne vždy klikněte na jinou stránku. Je pravda, že některé z nich povedou k případové studii nebo o projektu, ale mnoho karuselů na webových stránkách portfolia je právě zamýšleno předvést vizuální práci.

Příklad 1: Biboun - domovská stránka

Francouzský umělec pracující pod názvem Biboun má a kolotoč posuvník na domovské stránce představovat úryvky uměleckých děl. Jednotlivé snímky vedou na interní stránky v portfoliu, které pokrývají celý projekt s více fotografiemi.

To je pravděpodobně nejlepší způsob, jak udělat posuvník na internetových stránkách portfolia. Jen ukázat náhodný seznam prací je zbytečné, pokud tyto konkrétní práce nemají důvod být předvedeny.

Všechny kusy jsou vynikající v Bibounově jezdci, a to nezabírá mnoho místa buď. I když vím, že někteří lidé nenávidí auto-rotující promítání z dobrého důvodu, na takovém minimalistickém uspořádání jsem těžko si stěžují na tento design funkce.

Příklad 2: Domovská stránka Aaron Blaise

Moc se mi líbí příklad na stránkách Aaron Blaise, protože on prezentuje svou práci jako portfolio, ale většinou používá tyto webové stránky prodávat jeho umělecká videa. Aaron Blaise pracoval v Disney několik desetiletí, a dokázal to.

Zatímco domovská stránka jezdce na jeho stránkách se auto-rotovat, nemyslím, že to neuvěřitelně otravné nebo z místa. Každý snímek má trochu obsahu relevantního pro obraz, a pomáhá Aaronovi upozornit na jeho nejnovější video lekce učí mladé umělce, jak zvládnout specifické dovednosti.

Velký portfolio karuselu zaměřuje se na vizuální efekty, a dále vede návštěvníky na webové stránky. Pokud se můžete dostat tyto dvě věci, pak bych se proti rysu, jako je tento v osobní portfolio webové stránky.

Společné trendy designu

Podíváte-li se na některé z mých výše uvedených příkladů, všimnete si, že obvykle existují dva různé typy posuvníků: celá obrazovka a pevná šířka.

Tyto stylistické volby často vztahují k rozvržení a kolik obsahu můľe uchovávat. Pokud rozložení pokrývá celou šířku stránky, má smysl rozšířit i posuvník. Ale to vás také nutí najít kvalitní snímky na monitorech s velkým rozlišením stále dobře vypadají.

Já osobně dávám přednost stylu pevné šířky, jak uvidíte ve dvou příkladech portfolia umění. Tyto jsou mnohem snadnější ovládání, a jsou často není tak vysoký - usnadnit návštěvníkům prostě je ignorujte pokud si to přejí.

Zvažte také hodnotu automatického posunu snímků a jak těžké to může být pro uživatele, aby tento obsah zachytili. Nielsen Norman Group ukazuje velkou případovou studii, která ukazuje, že je to lepší nemít auto-postupující jezdce.

Jsem na palubě s tímto přístupem v tom smyslu, že je to méně intenzivní na paměť s méně animací a pohybem v prohlížeči, a většina lidí nemá rád auto-rotující kolotoče buď - a vy byste měli vždy uspokojit vaše publikum.

Nicméně nemohu říci, že nikdy nestojí za přidávání auto-postupujícího jezdce, zejména proto, že se statickými posuvníky nemají tolik názorů, a také potřebujete Udělej si svůj první snímek nejdůležitější tolik uživatelů nebude pokračovat na další snímek. Rozhodování o tom, zda se má jezdce automaticky otáčet nebo ne, je bohužel oblasti pokusů a omylů.

Co se vyhnout za každou cenu

Tady je důležitá věc, kterou si osobně myslím spadá pod “vyhnout se za každou cenu”. Podívejte se na obrázek níže a pokuste se hádat, co to může být.

Internetová stránka kavárny Yozenn používá posuvník záhlaví celé obrazovky. To není auto-točit, což je skvělé, ale snímky také neslouží jinému účelu než dekoraci.

Obrazy nikde nespojujte, a předvádějí malou hrstku produktů. Všichni mohli být na pozadí domovské stránky bez posuvníku ušetřit zmatek a extra kilobyty JavaScriptu.

Argumentoval bych, že tato funkce posuvného pozadí nepřidává na již stísněnou stránku velkou hodnotu. Pokud obrázky měly odkazy nebo doprovodný text, byly by alespoň relevantnější.

Použijte obrázky v sekci záhlaví, které zabírají celou stránku, pokud však ano nikde nespojujte ani nenabízejte žádné skutečné informace pak je nezměňte na karusel.

Interaktivní funkce

Způsob, jakým uživatelé procházejí karuselem, ovlivňuje samotný design. Existují různých stylů navigace, ale ty jsou nejoblíbenější:

• Bodová navigace
• Navigace šipkami
• Navigace miniatur
• Seznam odkazů nebo položek nadpisu

Nejběžnější je navigace tečkami které najdete na stovkách moderních webových stránek.

Příklad 1: Chic na domovské stránce

Chic at Home je skvělým příkladem použití tři malé tečky pod posuvníkem pro označení navigace. Každý snímek se otáčí automaticky a příslušná tečka v sérii se naplní černou. Další dvě prázdné tečky označují potenciální sklíčka pro prohlížení uživatelů.

Toto je populární design vzor mnoho uživatelů již rozpozná. To spadá do stejné kategorie jako menu hamburger, že mnoho designérů nelíbí, ale uživatelé ji již rozpoznají, a instinktivně vědí, jak ji používat.

Příklad 2: Čisté cykly - domovská stránka

Domovská stránka Pure Cycles používá a kombinace navigace tečkami a šipkami. Tímto způsobem mají uživatelé navigaci vpřed a zpět, ale viz také “celkově” navigace přes bodové odkazy ve spodní části.

Vlastně jsem našel dot odkazy v tomto příkladu těžké vidět. Obtížnost s vizuálními diapozitivy spočívá v tom, že mnoho prvků není snadné rozeznat, takže šipky a tečky mohou snadno prolnout do pozadí.

Příklad 3: IGN - domovská stránka

Na domovské stránce IGN najdete další auto-rotující karusel používá odkazy na navigaci. To je velmi běžné pro vydavatele, kteří chtějí prodávat titulky než produkty. Každý odkaz jde na jednotlivé snímky, které nakonec vede na stránku článku.

Tyto odkazy mohou být nahrazeny miniaturami, nebo dokonce zahrnovat miniatury od každého příběhu - nicméně vizuální aspekt je zobrazen v karuselu, takže vynechání miniatury skutečně šetří místo.

Různé webové stránky používají různé navigační styly z různých důvodů. Zvažte cíl (y) svých návštěvníků, a design pro nejlepší uživatelský zážitek.

Key takeaways

Měli byste se snažit skutečnou hodnotu nebo další informace s karuselem. To mohou být informace, které návštěvník předtím neměl, nebo to může vést k stránkám, které návštěvník možná nenalezl.

Snažte se vyhnout auto-rotující karusely, a používat je pouze na hlavních vstupních stránkách (domovskou stránkou je jeden příklad). Tak dlouho, dokud kolotoč má smysl, a nevypadá jako reklama, Váš návrh by měl dobře fungovat.

Pokud hledáte více informací o webových karuselech, podívejte se na některá z následujících příspěvků:

• Kolotoče Brad Frost
• 8 Požadavky na UX pro návrh uživatelsky přívětivé domovské kolotoče
• Použitelnost kolotoče: Návrh efektivního uživatelského rozhraní pro webové stránky s přetížením obsahu