Slika vrtiljakov v spletnem oblikovanju - koristi in najboljše prakse

Ni pomanjkanja vrtiljak z diaprojekcijo na spletu. Pravzaprav ta trend ni naredil nič drugega kot rast v zadnjih 5-10 letih s podporo za več brskalnikov kot kdajkoli prej. Toda ali so slikovni vrtiljaki res vredni truda? Kakšne vrste koristi prinašajo in kako jih je treba produktivno uporabljati v postavitvi?

Rad bi delil nekaj skupne trende, žive primere in ideje za spletne oblikovalce, ki jih zanimajo slikovni vrtiljaki. O teh dinamičnih drsnikih se močno razpravlja, vendar mislim, da dodajajo vrednost, kadar so oblikovana v pravem kontekstu.

Vrtiljaki za elektronsko poslovanje

Svet e-trgovine je poln vrtljivih vrtiljakov na domačih straneh in straneh z izdelki. Cilj je, da ohranjanje jasne gostote informacij s fotografijami in besedilom povejte edinstveno, a dragoceno zgodbo pomoč pri prodaji izdelkov.

Obstajajo dve primarni umestitvi za drsnik z e-trgovino:

1. Na domači strani trgovine
2. Na strani izdelka

Oba delata drugače, vendar služijo istemu cilju - prodati izdelke na vizualen način.

Primer 1: Au Lit Fine Linens - domača stran

Oglejte si domačo stran za Au Lit Fine Linens, to uporablja celozaslonski vrtljivi vrtiljak za razstavljanje različnih izdelkov, kot so prešite odeje, blazine in prevleke za postelje.

Slike zavzamejo polno širino domače strani se zdijo precej nad krakom. Pravzaprav bi moral biti ta drsnik prva stvar, ki bo pritegnila vašo pozornost, ko boste prvič pristali na strani. Vsak diapozitiv vodi na drugo stran na spletnem mestu vodijo stranke skozi nakupovalno izkušnjo.

Ta drsnik je lahko prestrašljiv, ko prvič pristane na strani, vendar z gumb za povezavo in prekrivno besedilo lahko je tudi zelo spodbudno za obiskovalce, ki se želijo potopiti in kupovati.

Primer 2: Primer telefona Eden - stran izdelka

Natančen primer si lahko ogledate na strani izdelka Eden za telefon. Uporablja samodejno vrtenje drsnika za prikaz slik izdelka.

Mislim, da je to malo “preveč” v svetu e-trgovine. Ko gledam izdelek, ki ga želim biti pri nadzoru preklapljanja med slikami.

Boljša izbira je, da naredite galerijo slik z nadzorom, ki ga ima obiskovalec. Na primer, stran Design by Humans uporablja sličice za vsako fotografijo ki je veliko bolj spodbudna in daje uporabniku več nadzora.

Vrtiljaki spletnega portala

Spletni portfelji spletnih strani so nekoliko drugačni, ker so ti diapozitivi ne vedno kliknite na drugo stran. Res je, da bodo nekateri vodili k študiji primera ali pisanju o projektu, vendar je veliko vrtiljakov na spletnih straneh portfeljev namenjenih le temu pokazati vizualno delo.

Primer 1: Biboun - domača stran

Francoski umetnik, ki dela pod imenom Biboun, ima a vrtiljak na domači strani s posnetki umetniških del. Posamezni diapozitivi vodijo do internih strani v portfelju, ki celoten projekt z več fotografijami.

To je verjetno najboljši način, da naredite drsnik na spletni strani portfelja. Samo prikazovanje naključnega seznama dela je nesmiselno, razen če imajo ta posebna dela razlog, da se prikažejo.

Vsi deli so izvrstno v Bibounovem drsniku in to ne vzame veliko prostora prav tako. Čeprav vem, da nekateri ljudje sovražijo diaprojekcije, ki se samodejno vrti, zaradi tako minimalistične postavitve se težko pritožujem nad to funkcijo oblikovanja.

Primer 2: Aaron Blaiseova spletna stran - domača stran

Zelo mi je všeč primer, ki ga najdem na Aaron Blaiseovi spletni strani, ker je on svoje delo predstavlja kot portfelj, vendar večinoma uporablja to spletno stran za prodal svoje umetniške posnetke. Aaron Blaise je delal v Disneyju nekaj desetletij in ima na razpolago veščine, da to dokaže.

Medtem ko drsnik za domačo stran na svojem spletnem mestu samodejno zavrti, se mi ne zdi neverjetno nadležno ali neprimerno. Vsak diapozitiv ima malo vsebine, ki ustreza sliki, in pomaga Aronu opozoriti na njegove najnovejše video lekcije ki učijo mlade umetnike, kako obvladati določene veščine.

Velik portretni vrtiljak se osredotoča na vizualno podobo, in vodi obiskovalce še naprej na spletno stran. Če lahko dobite ti dve stvari, potem ne bi bil proti funkciji, kot je ta na osebni spletni strani portfelja.

Skupni trendi oblikovanja

Če si ogledate nekaj mojih zgornjih primerov, boste opazili, da na splošno obstajata dve različni vrsti drsnikov: celozaslonski način in fiksna širina.

Te stilistične izbire pogosto nanašajo na postavitev in koliko lahko vsebuje. Če postavitev obsega celotno širino strani, je smiselno tudi razširiti drsnik. Toda to vas tudi prisili poiščite kakovostne slike ki še vedno dobro izgleda na celotnem zaslonu na velikih monitorjih ločljivosti.

Osebno mi je všeč slog fiksne širine, kot ga boste videli v dveh umetniških primerkih. To so veliko lažje nadzorovati, in pogosto so ne tako visok - olajšali obiskovalcem preprosto jih ignorirajte če želijo.

Upoštevajte tudi vrednost samodejnega napredovanja diapozitivov in kako težko je uporabnikom, da ujamejo to vsebino. Obstaja velika študija primera skupine Nielsen Norman, ki kaže, da je bolje ne boste imeli drsnikov za samodejno napredovanje.

S tem pristopom sem na krovu v smislu, da je to manj spomina z manj animacijami in gibanjem v brskalniku, večina pa jim ni všeč niti vrtiljakov s samodejnim vrtenjem - in vedno morate poskrbi za svoje občinstvo.

Vendar ne morem reči, da nikoli ni vredno dodati drsnik za samodejno napredovanje, še posebej, ker imate statične drsnike ne dobite toliko ogledov, in morate tudi naredite svoj prvi diapozitiv najpomembnejši toliko uporabnikov ne bo šlo na naslednji diapozitiv. Odločanje o tem, ali bo drsnik samodejno zavrtel ali ne, je žal področju poskusov in napak.

Kaj naj se izognemo za vsako ceno

Tukaj je pomembna stvar, ki jo osebno mislim pade pod “izogibajte se za vsako ceno”. Oglejte si ali kliknite spodnji posnetek zaslona in poskusite ugotoviti, kaj je.

Spletna stran kavarne Yozenn uporablja drsnik za celoten zaslon. To ni samodejno vrtenje, ki je super, pa tudi diapozitivi ne služijo nobenemu drugemu namenu, kot je okras.

Slike nikjer ne povežite, in pokažejo majhno paleto izdelkov. Vsi bi lahko bili dodano v ozadje domače strani brez drsnika za shranjevanje zmede in dodatnih kilobajtov JavaScripta.

Jaz bi trdil, da ta funkcija drsenja ozadja ne dodaja veliko vrednosti že utesnjeni spletni strani. Če so slike imele povezave ali spremljajoče besedilo, bi bile vsaj pomembnejše.

Uporabite lahko slike v razdelku glave, ki zavzamejo celotno stran, če pa so nikjer ne povežite in ne nudite nobenih pristnih informacij potem jih ne spreminjajte v vrtiljak.

Interaktivne funkcije

Način, kako uporabniki navigirajo v vrtiljaku, vpliva na sam model. Obstaja a različnih stilov navigacije, vendar so ti najbolj priljubljeni:

• Navigacija na osnovi točk
• Navigacija s puščico
• Krmarjenje po sličicah
• Seznam povezav ali naslovov

Najpogostejši je dot navigacija ki jih boste našli na stotinah sodobnih spletnih mest.

Primer 1: Chic at Home - domača stran

Chic at Home je odličen primer uporabe tri drobne pike pod drsnikom za označevanje navigacije. Vsaka slika se samodejno vrti in pripadajoča pika v seriji se napolni s črno. Druga dva prazna pika označujejo potencialne diapozitive za brskanje uporabnikov.

To je a priljubljena oblika vzorca ki jih mnogi uporabniki že prepoznajo. Spada v isto kategorijo kot meni z hamburgerjem, ki ga številnim oblikovalcem ni všeč, vendar uporabniki ga že prepoznajo, in instinktivno vem, kako ga uporabljati.

Primer 2: Pure Cycles - domača stran

Domača stran Pure Cycles uporablja a kombinacija navigacije s pikami in puščicami. Tako imajo uporabniki navigacijo naprej in nazaj, vendar glej tudi “na splošno” navigacijo skozi piko na dnu.

Pravzaprav najdem piko na tem primeru težko videti. Težava z vizualnimi diapozitivi je, da je veliko elementov težko razlikovati, zato lahko puščice in pike enostavno se zlijejo v ozadje.

Primer 3: IGN - domača stran

Na domači strani IGN boste našli drugo avtomatski vrtljivi vrtiljak uporablja naslovne povezave za navigacijo. To je zelo pogosto za založnike, ki to želijo prodati naslove namesto izdelkov. Vsaka povezava se sčasoma prenese na posamezno diapozitiv vodi do strani članka.

Te povezave lahko zamenjate s sličicami, ali celo vključite sličice iz vsake zgodbe - ne glede na to vidni vidik je prikazan v vrtiljaku, tako izpustitev sličice dejansko prihrani prostor.

Različne spletne strani uporabljajo različne sloge navigacije iz različnih razlogov. Upoštevajte cilje obiskovalcev, in oblikovanje za najboljšo uporabniško izkušnjo.

Ključni prevzemi

Morali bi si prizadevati izdelati resnično vrednost ali dodatne informacije z vrtiljakom. To so lahko informacije, ki jih obiskovalec prej ni imel, ali pa lahko pride do strani, ki jih obiskovalec morda ni našel drugače.

Poskusite se izogniti avtomatskim vrtenjem vrtiljakov in uporabite jih le na večjih ciljnih straneh (kot primer je domača stran). Dokler vrtiljak ima namen, in ne izgleda kot oglas, vaša zasnova mora dobro delovati.

Če iščete več informacij o spletnih vrtiljakih, si oglejte nekatere od naslednjih objav:

• Vrtiljaki Brad Frost
• 8 Zahteve UX za oblikovanje uporabniku prijazne spletne vrtiljaka
• Uporabnost vrtiljaka: Oblikovanje učinkovitega uporabniškega vmesnika za spletne strani s preobremenitvijo vsebine