Obrazové karusely v webovom dizajne - Výhody a najlepšie postupy

Nie je tu žiadny nedostatok kolotoč prezentuje prezentácie na webe. V skutočnosti tento trend urobil len nič rastú v posledných 5-10 rokoch s podporou prehliadača viac ako kedykoľvek predtým. Ale sú obrazové kolotoče naozaj stojí za námahu? Aký druh výhod prináša a ako by mali byť použité produktívne v usporiadaní?

Chcem sa podeliť o niečo spoločné trendy, živé príklady a nápady pre návrhárov webových stránok, ktorí sa zaujímajú o image kolotoče. Tieto dynamické posuvníky sú silne diskutované, ale myslím si, že pridávajú hodnotu, keď sú vytvorené v správnom kontexte.

Výrobný karusel pre elektronický obchod

Svet e-commerce je plný rotujúcich kolotočov na domovských stránkach a stránkach produktov. Cieľom je zachovať jasnú informačnú hustotu s fotografiami a textom povedzte unikátny, ale cenný príbeh pomôcť predávať produkty.

Existujú dve primárne umiestnenia pre jazdca produktu e-commerce:

1. Na domovskej stránke obchodu
2. Na stránke produktu

Obaja pracujú inak, ale slúžia rovnakému cieľu - predaj výrobkov vizuálnym spôsobom.

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

Pozrite sa na domovskú stránku pre "Au Lit Fine Linens" používa celoobrazovkový automatický rotačný kolotoč na prezentáciu rôznych produktov, ako sú napríklad peky, vankúše a pokrývky postelí.

Obrázky zaberajte celú šírku domovskej stránky a oni vyzerajú dobre nad záhybom. Tento posuvník by mal byť prvou vecou, ​​ktorá vás upúta pozornosť pri prvom pristátí na stránke. Každý snímok vedie na inú stránku na stránke sprievodca zákazníkmi prostredníctvom nakupovania.

Tento posuvník môže byť trochu zastrašujúci pri pristátí na stránke, ale s tlačidlo prepojenia a prekrývajúci text môže to byť tiež veľmi povzbudivé pre návštevníkov, ktorí sa chcú potápať a nakupovať.

Príklad 2: Eden phone case - produktová stránka

Môžete vidieť konkrétnejší príklad na stránke produktu Eden na telefóne. Používa automatické otáčanie posúvača na zobrazenie obrázkov produktu.

Zdá sa mi, že sú to málo “príliš veľa” vo svete elektronického obchodovania. Pri pohľade na produkt chcem byť pri ovládaní prepínania medzi obrázkami.

Lepšia voľba je urobiť galériu obrázkov s kontrolou návštevníka. Napríklad stránka Design by Humans používa miniatúry pre každú fotografiu čo je oveľa viac povzbudzujúce a poskytuje užívateľovi väčšiu kontrolu.

Webové portfólio kolotoče

Online portfóliá webových stránok sú trochu iné, pretože tieto snímky nie vždy prejdete na inú stránku. Je pravda, že niektoré budú viesť k prípadovej štúdii alebo napísať o projekte, ale veľa kolotočov na portfóliových webových stránkach má len na mysli prezentovať vizuálnu prácu.

Príklad 1: Biboun - domovská stránka

Francúzsky umelec pracujúci pod menom Biboun má a posúvač karuselu na domovskej stránke s úryvky umeleckých diel. Jednotlivé snímky vedú k interným stránkam v portfóliu, ktoré pokryť celý projekt s viacerými fotografiami.

To je pravdepodobne najlepší spôsob, ako urobiť posúvač na webovej stránke portfólia. Jednoduchá prezentácia náhodného zoznamu práce je zbytočná, pokiaľ tieto konkrétne diela nemajú dôvod byť prezentované.

Všetky kusy sú znamenitý v Biboun je jazdca, a to neberie veľa priestoru a to buď. Aj keď viem, že niektorí ľudia nenávidia auto-rotujúce prezentácie z dobrého dôvodu, na takom minimalistickom usporiadaní mám ťažký čas sťažovať sa na tento dizajnový prvok.

Príklad 2: Webová stránka spoločnosti Aaron Blaise - domovská stránka

Veľmi sa mi páči príklad nájdený na webových stránkach Aarona Blaise, pretože on prezentuje svoju prácu ako portfólio, ale väčšinou používa túto webovú stránku predať svoje umelecké videá. Aaron Blaise pracoval v spoločnosti Disney už niekoľko desaťročí a má skúsenosti, aby to dokázal.

Zatiaľ čo slider domovskej stránky na svojich stránkach sa auto-otáčať, nenašiel som to neuveriteľne nepríjemné alebo na mieste. Každá snímka má malý obsah relevantný pre obrázok, a pomáha Aaronovi upozorniť na jeho najnovšie video lekcie ktoré učia mladých umelcov, ako zvládnuť špecifické zručnosti.

Veľký portrojný kolotoč zameriava sa na vizuálne prvky, a vedie návštevníkov ďalej na webovej stránke. Ak môžete získať tieto dve veci, potom by som nebol proti takejto funkcii na osobnom portfóliu.

Spoločné trendy v návrhu

Ak sa pozriete na niektoré z mojich vyššie uvedených príkladov, všimnete si, že všeobecne existujú dva rôzne typy posuvníkov: celá obrazovka a pevná šírka.

Tieto štylistické možnosti často sa týkajú usporiadania a koľko obsahu môže obsahovať. Ak rozloženie presahuje celú šírku stránky, má zmysel rozšíriť posúvač. Ale to vás tiež núti nájsť obrázky s vysokou kvalitou ktoré stále dobre vyzerajú na celej obrazovke na monitorech s veľkým rozlíšením.

Ja osobne uprednostňujem štýl s pevnou šírkou, ako uvidíte v dvoch príkladoch portfólia umenia. Toto sú oveľa jednoduchšie ovládanie, a oni sú často nie tak vysoko - čo uľahčuje návštevníkom jednoducho ich ignorujte ak si to želajú.

Takisto zvážte hodnotu automatických posúvaní diapozitívov a ako ťažké to môže byť aby mohli používatelia zachytiť tento obsah. Existuje veľká prípadová štúdia skupiny Nielsen Norman Group, ktorá ukazuje, že je to lepšie nemajú automatické posúvače.

Som na palube s týmto prístupom v tom zmysle, že je to menej intenzívne v pamäti s menšou animáciou a pohybom v prehliadači a väčšina ľudí nemá rád auto-rotujúce kolotoč - a mali by ste vždy uspokojiť svoje publikum.

Nemôžem však povedať, že nikdy nestojí za to, aby ste pridali automatický posuvný ovládač, a to najmä preto, že ste so statickými jazdcami nezískajte toľko názorov, a tiež musíte aby bol váš prvý snímok najdôležitejší pretože mnoho používateľov nebude pokračovať v ďalšom posúvaní. Rozhodnutie, či sa posúvač automaticky otáča alebo nie, je bohužiaľ oblasť pokusov a omylov.

Čo sa vyhnúť za každú cenu

Tu je dôležitá vec, ktorú osobne myslím spadá pod “vyhnúť sa za každú cenu”. Prezrite si alebo kliknite na nižšie uvedený snímok obrazovky a pokúste sa odhadnúť, čo to môže byť.

Webová stránka kaviarne Yozenn používa posuvník hlavičky celej obrazovky. Nezahŕňa auto, čo je skvelé, ale aj diapozitívy slúži inému účelu ako dekorácii.

Obrázky nikde nikam neodkazujte, a prejavujú malú škálu produktov. Mohli by to byť všetci pridané na pozadí domovskej stránky bez jazdca ušetriť zmätok a extra kilobajty jazyka JavaScript.

Tvrdil by som, že toto pozadie posuvné funkcie nepridáva veľa hodnoty na už stratené webové stránky. Ak by obrázky mali odkazy alebo sprevádzajúci text, mali by byť prinajmenšom relevantnejšie.

Neváhajte používať obrázky vo vašej hlavičke, ktoré zaberajú celú stránku, ak však nepripájajte nikde alebo neposkytujte žiadne skutočné informácie potom ich nezmeníte do kolotoča.

Interaktívne funkcie

Spôsob, akým používatelia navigujú na kolotoči, ovplyvňuje samotný dizajn. Tam sú rôznych štýlov navigácie, ale tieto sú najobľúbenejšie:

• Navigácia na základe bodov
• Navigácia so šípkami
• Navigácia v miniatúrach
• Zoznamu odkazov alebo nadpisov

Najčastejšie je bodová navigácia ktoré nájdete na stovkách moderných webových stránok.

Príklad 1: Chic na domácej stránke - domovská stránka

Chic at Home je skvelým príkladom tri malé bodky pod jazdcom na označenie navigácie. Každý obrázok sa automaticky otáča a súvisiaci bod v sérii sa naplní čiernym. Ďalšie dve prázdne bodky označujú potenciálne snímky pre užívateľov na prehliadanie.

Toto je populárny vzor dizajnu ktoré už mnohí používatelia rozpoznávajú. Patrí do rovnakej kategórie ako ponuka hamburgerov, ktorú mnohí dizajnéri nepáči, ale používatelia ju už uznávajú, a inštinktívne vedieť, ako ju používať.

Príklad 2: Pure Cycles - domovská stránka

Domovská stránka Pure Cycles používa a kombinácia navigácie bodkami a šípkami. Takto používatelia majú navigáciu dopredu a dozadu, ale tiež vidieť “celkovo” navigácia prostredníctvom dotových odkazov v dolnej časti.

Vlastne som v tomto príklade nájsť dotykové odkazy ťažké vidieť. Problém s vizuálnymi snímkami je, že mnohé prvky nie sú ľahko rozlíšiteľné, takže šípky a bodky môžu ľahko premiešať na pozadí.

Príklad 3: Domovská stránka IGN

Na domovskej stránke IGN nájdete ďalšie auto-rotujúci kolotoč ktoré používa odkazy na titul pre navigáciu. To je veľmi časté pre vydavateľov, ktorí chcú predať titulky skôr než výrobky. Každý odkaz sa vzťahuje na jednotlivé snímky, ktoré nakoniec vedie na stránku článku.

Tieto odkazy mohli byť nahradené miniatúrami, alebo dokonca obsahovať miniatúry z každého príbehu - však vizuálny aspekt je zobrazený v karuseli, takže vynechanie miniatúry skutočne šetrí miesto.

Rôzne webové stránky používajú rôzne štýly navigácie z rôznych dôvodov. Zvážte ciele svojich návštevníkov, a dizajn pre najlepšie používateľské prostredie.

Kľúčové kroky

Mali by ste sa snažiť produkovať skutočnú hodnotu alebo dodatočné informácie s kolotočom. Môže to byť informácia, ktorú návštevník predtým nemal, alebo môže viesť k stránkam, ktoré návštevník pravdepodobne nenašiel inak.

Pokúste sa vyhnúť automatickému otáčaniu kolotočov a používať ich iba na hlavných vstupných stránkach (domovská stránka je jedným príkladom). Tak dlho ako kolotoč má účel, a nevyzerá ako reklama, váš návrh by mal dobre.

Ak hľadáte viac informácií o webových kolotočoch, pozrite si niektoré z nasledujúcich príspevkov:

• Karusely od Brad Frost
• 8 UX Požiadavky na navrhovanie užívateľsky prívetivého domovského kolotoča
• Carousel Usability: Navrhovanie efektívneho používateľského rozhrania pre webové stránky s preťažením obsahu