Image Carousels u web dizajnu - prednosti i najbolje prakse

Nema manjka značajka dijaprojekcije na internetu. Zapravo, ovaj trend nije učinio ništa drugo nego rastu u posljednjih 5-10 godina s više podrške za preglednike nego ikada prije. No, jesu li slika vrtuljaka zaista vrijedna truda? Kakve koristi oni proizvode i kako ih treba produktivno koristiti u rasporedu?

Želio bih podijeliti s drugima zajednički trendovi, primjeri uživo i ideje za web dizajnere koji su zainteresirani za karuselove za slike. O ovim dinamičkim klizačima često se raspravlja, ali mislim da oni dodaju vrijednost kada su izrađeni u pravom kontekstu.

Proizvodni karuseli za e-trgovinu

Svijet e-trgovine prepun je rotirajućih vrtuljaka na početnim stranicama i stranicama proizvoda. Cilj je da održavati jasnu gustoću informacija s fotografijama i tekstom ispričajte jedinstvenu, ali vrijednu priču pomoći u prodaji proizvoda.

Tamo su dva primarna položaja za klizač proizvoda e-trgovine:

1. Na početnoj stranici trgovine
2. Na stranici proizvoda

Oboje rade drugačije, ali služe istom cilju - prodavati proizvode na vizualan način.

Primjer 1: Au Lit Fine posteljina - početna stranica

Pogledajte početnu stranicu za Au Lit Fine Linens, to koristi automatski rotirajući vrtuljak preko cijelog zaslona za prikazivanje različitih proizvoda, kao što su poplune, jastuci i pokrivači za krevet.

Slike zauzeti punu širinu početne stranice, i oni pojavljuju se mnogo iznad nabora. Zapravo, ovaj klizač bi trebao biti prva stvar koja će privući vašu pažnju prilikom prvog slijetanja na stranicu. Svaki slajd vodi do druge stranice na kojoj se nalazi voditi klijente kroz iskustvo kupovine.

Ovaj klizač može biti tad zastrašujući kada se prvi put spusti na stranicu, ali s link gumba i tekst za prekrivanje to također može biti vrlo ohrabrujuće za posjetitelje koji samo žele zaroniti i kupovati.

Primjer 2: Eden case case - stranica proizvoda

Specifičniji primjer možete vidjeti na stranici proizvoda Eden za telefon. Koristi se automatsko okretanje klizača za prikaz slika proizvoda.

Mislim da je ovo malo “previše” u svijetu e-trgovine. Kada gledam proizvod koji želim biti u kontroli prebacivanja između slika.

Bolji je izbor napraviti galeriju slika s kontrolom koja se daje posjetitelju. Na primjer, stranica "Dizajn od ljudi" koristi sličice za svaku fotografiju što je mnogo više ohrabrujuće i daje više kontrole korisniku.

Vrtuljak web portala

Online portfelji web stranica su malo drugačiji zbog ovih slajdova nemojte uvijek kliknuti na drugu stranicu. Istina je da će neki dovesti do studije slučaja ili pisati o projektu, ali mnogi karuseli na web-stranicama portfelja samo su namijenjeni pokažite vizualni rad.

Primjer 1: Biboun - početna stranica

Francuski umjetnik koji radi pod imenom Biboun ima a kliznik s vrtuljkom na početnoj stranici s isječcima umjetničkih djela. Pojedinačni slajdovi vode do internih stranica u portfelju koje pokriti cijeli projekt s više fotografija.

Ovo je vjerojatno najbolji način da napravite klizač na web stranici portfelja. Samo je prikazivanje slučajnog popisa radova besmisleno osim ako ti specifični radovi nemaju razloga za prikazivanje.

Svi dijelovi su fin u Bibounovom klizaču, i to ne zauzima puno mjesta ili. Iako znam da neki ljudi mrze automatsko rotiranje dijaprojekcija s dobrim razlogom, na tako minimalističkom izgledu teško se žalim na ovu značajku dizajna.

Primjer 2: Web stranica Arona Blaisea - početna stranica

Stvarno mi se sviđa primjer pronađen na Aaron Blaiseovoj web stranici jer je on svoj rad prikazuje kao portfelj, ali uglavnom koristi ovu web-lokaciju prodati svoje umjetničke videozapise. Aaron Blaise radio je u Disneyu nekoliko desetljeća, i on ima vještinu da to dokaže.

Dok se klizač početne stranice na njegovoj web-lokaciji automatski okreće, ne nalazim ga nevjerojatno dosadnim ili neumjesnim. Svaki slajd ima malo sadržaja relevantnog za sliku, i pomaže Aaronu skrenuti pozornost na njegove najnovije video lekcije koji uče mlade umjetnike kako ovladati određenim vještinama.

Izvrstan vrtuljak portfelja fokusira se na slike, i vodi posjetitelje dalje na web-mjesto. Ako možete dobiti ove dvije stvari onda ne bih bio protiv značajka kao što je ovaj u osobnom portfelju web stranice.

Uobičajeni trendovi u dizajnu

Ako pogledate neke od mojih gornjih primjera, primijetit ćete da postoje dvije različite vrste klizača: puni zaslon i fiksna širina.

Ti stilski izbori često odnose se na izgled i koliko sadržaja može sadržavati. Ako raspored obuhvaća cijelu širinu stranice onda ima smisla proširiti i klizač. Ali to vas također prisiljava pronađite slike visoke kvalitete koje još uvijek izgledaju dobro na cijelom zaslonu na monitorima velike rezolucije.

Ja osobno preferiram stil fiksne širine kao što ćete vidjeti u dva primjera umjetničkog portfelja. Ovi su mnogo lakše kontrolirati, i često su nije tako visoka - olakšavaju posjetiteljima jednostavno ih ignorirajte ako žele.

Također uzmite u obzir vrijednost automatskog napredovanja slajdova i kako teško može biti da korisnici uhvate ovaj sadržaj. Postoji velika studija slučaja grupe Nielsen Norman koja pokazuje da je bolje nema klizača za automatsko napredovanje.

Ja sam s ovim pristupom u smislu da je to manje memorije s manje animacija i pokreta u pregledniku, a većina ljudi ne voli niti rotirajuće vrtuljke - i uvijek biste trebali opskrbiti svoju publiku.

Međutim, ne mogu reći da nikad ne vrijedi dodavati klizač za automatsko napredovanje, pogotovo zato što ste sa statičkim klizačima ne dobivajte onoliko pogleda, i također trebate učinite svoj prvi slajd najvažnijim što više korisnika neće prijeći na sljedeći slajd. Odluka o tome hoće li klizač automatski rotirati ili ne, nažalost je područje pokušaja i pogrešaka.

Što izbjegavati pod svaku cijenu

Ovo je važna stvar koju ja osobno mislim potpada pod “izbjegavajte po svaku cijenu”. Pogledajte ili kliknite na donju sliku zaslona i pokušajte pogoditi što bi to moglo biti.

Web-mjesto kafića Yozenn koristi klizač za zaglavlje cijelog zaslona. To se ne auto-rotirati što je super, međutim slajdova također ne služe nikakvoj svrsi osim ukrasu.

Slike ne povezuj nigdje, i oni pokazuju malo pregršt proizvoda. Svi bi mogli biti dodan u pozadinu početne stranice bez klizača za uštedu konfuzije i dodatnih kilobajta JavaScripta.

Ja bih tvrditi ovu pozadinu klizna značajka ne dodati mnogo vrijednosti za već skučeno web stranice. Ako su slike imale veze ili prateći tekst, barem bi bile relevantnije.

Slobodno upotrijebite slike u zaglavlju koje zauzimaju cijelu stranicu, ali ako su ne povezujte bilo gdje i ne nudite nikakve izvorne informacije onda ih nemojte pretvoriti u vrtuljak.

Interaktivne značajke

Način na koji korisnici upravljaju vrtuljkom utječe na sam dizajn. Tamo su raznolikost stilova navigacije, ali to su najpopularnije:

• Navigacija temeljena na točkama
• Navigacija strelicama
• Navigacija minijatura
• Popis veza ili stavki naslova

Najčešći je dot navigacija koje ćete naći na stotinama modernih web-lokacija.

Primjer 1: Chic at Home - početna stranica

Chic at Home je izvrstan primjer tri male točkice ispod klizača za označavanje navigacije. Svaka se slika automatski okreće, a dotična točka u nizu postaje ispunjen crnom bojom. Druga dva prazna točkice označavaju potencijalne slajdove za pregledavanje korisnika.

Ovo je popularni uzorak dizajna koje mnogi korisnici već prepoznaju. Ona spada u istu kategoriju kao i izbornik hamburgera koji mnogi dizajneri ne vole, ali korisnici je već prepoznaju, i instinktivno znaju kako ga koristiti.

Primjer 2: Čisti ciklusi - početna stranica

Početna stranica Pure Cyclesa koristi a kombinacija navigacije točkama i strelicama. Na taj način korisnici imaju navigaciju prema naprijed i natrag, ali također pogledajte “Cjelokupni” navigacija kroz točkaste veze na dnu.

Ja zapravo nalazim točke veze u ovom primjeru teško vidjeti. Poteškoća s vizualnim slajdovima je što mnogi elementi nisu lako razlikovati, tako da strelice i točkice mogu lako se stapaju s pozadinom.

Primjer 3: IGN - početna stranica

Na početnoj stranici IGN pronaći ćete drugu automatski rotirajući vrtuljak koji koristi naslovne veze za navigaciju. To je vrlo uobičajeno za izdavače koji to žele prodavati naslove radije nego proizvode. Svaki link ide na pojedinačni slajd koji na kraju vodi do stranice članka.

Ove veze može se zamijeniti minijaturama, ili čak uključiti sličice iz svake priče - međutim vizualni aspekt prikazan je u vrtuljku, tako da izostavljanje sličice zapravo štedi prostor.

Različite web-lokacije koriste različite stilove navigacije iz različitih razloga. Razmotrite cilj (eve) svojih posjetitelja, i dizajn za najbolje korisničko iskustvo.

Ključni za poneti

Trebali biste se truditi proizvesti pravu vrijednost ili dodatne informacije s vrtuljkom. To mogu biti informacije koje posjetitelj nije imao prije, ili mogu dovesti do stranica koje posjetitelj možda nije pronašao drugačije.

Pokušajte izbjegavati automatske rotirajuće vrtuljke i koristiti ih samo na glavnim odredišnim stranicama (primjer jedne početne stranice). Sve dok je vrtuljak ima svrhu, i ne izgleda kao oglas, Vaš dizajn bi trebao biti dobar.

Ako tražite više informacija o web-vrtuljcima, pogledajte neke od sljedećih postova:

• Vrtuljke Brada Frosta
• 8 Zahtjevi UX-a za osmišljavanje vrtuljka prilagođenog korisniku
• Upotreba vrtuljka: Izrada učinkovitog korisničkog sučelja za web-lokacije s preopterećenjem sadržaja