Image Carousels în Web Design - Beneficii și cele mai bune practici

Nu este lipsă de carusel prezintă prezentări de diapozitive pe internet. De fapt, această tendință nu a făcut altceva decât cresc în ultimii 5-10 ani cu mai mult suport pentru browser acum decât oricând. Dar carusele de imagine merită cu adevărat efortul? Ce fel de beneficii produc și cum ar trebui să fie utilizate productiv într-un aspect?

Aș vrea să împărtășesc câteva tendințe comune, exemple live și idei pentru web designeri interesați de carusele de imagine. Aceste glisiere dinamice sunt foarte dezbătute, dar cred că ele adaugă valoare atunci când sunt create în contextul potrivit.

Caruseluri de produse pentru comerț electronic

Lumea comerțului electronic este plină de caruseluri rotative pe paginile de pornire și pe paginile de produse. Scopul este acela de a menține o densitate clară a informațiilor cu fotografii și text spuneți o poveste unică dar valoroasă pentru a ajuta la vânzarea produselor.

Sunt două destinații de plasare primare pentru un slider de produs pentru comerțul electronic:

1. În pagina de pornire a unui magazin
2. Pe o pagină de produs

Ambele lucreaza diferit, dar servesc aceluiași scop - să vândă produsele într-o manieră vizuală.

Exemplul 1: Au Lit Fine Linens - pagina de pornire

Uită-te la pagina de start pentru Au Lit Fine Linens, asta utilizează un carusel cu rotire automată pe tot ecranul pentru a arăta diferite produse, cum ar fi perne, perne și capace de pat.

Imaginile prelua toată lățimea de pe pagina de pornire, și ei apar bine deasupra ori. De fapt, acest cursor ar trebui să fie primul lucru care vă atrage atenția când aterizați pentru prima dată pe pagină. Fiecare diapozitiv duce la o altă pagină de pe site ghidează clienții prin experiența de cumpărături.

Acest cursor poate fi intimidant atunci când prima aterizare pe pagină, dar cu buton și text suprapus aceasta poate fi, de asemenea, foarte încurajatoare pentru vizitatorii care doresc doar să se scufunde în și magazin.

Exemplul 2: Eden case de telefon - pagina de produs

Puteți vedea un exemplu mai specific pe pagina produsului Eden pentru cartele telefonice. Folosește un rotitor auto-rotativ pentru a afișa imagini ale produsului.

Mi se pare că sunt puțin “prea mult” în lumea comerțului electronic. Când privesc un produs, vreau să fiu în controlul comutării între imagini.

O alegere mai bună este să faci o galerie de imagini cu control dat vizitatorului. De exemplu, pagina Design by Humans folosește miniaturi pentru fiecare fotografie care este mult mai încurajator și acordă mai mult control utilizatorului.

Caruseluri de portofoliu web

Portofoliul site-urilor online este un pic diferit deoarece aceste diapozitive nu faceți întotdeauna clic pe altă pagină. Este adevărat că unii vor conduce la un studiu de caz sau vor scrie despre un proiect, dar multe caruseluri pe site-urile de portofoliu sunt doar menite să demonstrați munca vizuală.

Exemplul 1: Biboun - pagina de pornire

Artistul francez care lucrează sub numele de Biboun are a caruselul glisant pe pagina de pornire cu fragmente de artă. Diapozitivele individuale duc la pagini interne din portofoliu care acoperă un întreg proiect cu mai multe fotografii.

Probabil asta este cel mai bun mod de a face un cursor pe un site web al portofoliului. Doar prezentarea unei liste aleatoare a muncii este inutilă, cu excepția cazului în care aceste lucrări specifice au un motiv de prezentare.

Toate piesele sunt rafinat în glisorul lui Biboun, și asta nu ocupă mult loc fie. Deși știu că unii oameni urăsc slideshow-urile auto-rotative pentru un motiv întemeiat, pe un astfel de aspect minimalist am un moment dificil de plâns despre această caracteristică de design.

Exemplul 2: Site-ul Aaron Blaise - pagina de pornire

Îmi place cu adevărat exemplul găsit pe site-ul lui Aaron Blaise pentru că el își prezintă munca ca portofoliu, dar utilizează cea mai mare parte acest site web să vândă videoclipurile sale de artă. Aaron Blaise a lucrat la Disney timp de câteva decenii și are setul de competențe pentru a dovedi acest lucru.

În timp ce glisorul de pe pagina de pornire a site-ului său se rotește automat, nu-l găsesc incredibil de enervant sau de loc. Fiecare diapozitiv are un pic de conținut relevant pentru imagine, și îl ajută pe Aaron atrage atenția asupra ultimelor sale lecții video care îi învață pe tinerii artiști cum să stăpânească abilități specifice.

Un carusel de portofoliu excelent se concentrează pe vizuale, și duce vizitatorii în continuare în site-ul web. Dacă puteți obține aceste două lucruri, atunci nu aș fi împotriva unei caracteristici ca aceasta într-un site web de portofoliu personal.

Tendințe comune de design

Dacă vă uitați la exemplele de mai sus veți observa că în general există două tipuri diferite de glisoare: ecran complet și lățime fixă.

Aceste alegeri stilistice de multe ori se referă la aspect și la cât de mult poate avea conținut. Dacă un aspect se întinde pe întreaga lățime a paginii, atunci are sens să se extindă și sliderul. Dar și asta te forțează găsiți imagini de înaltă calitate care încă arată bine pe ecran complet pe monitoarele de rezoluție mare.

Personal prefer stilul cu lățimea fixă, așa cum veți vedea în cele două exemple de portofoliu de artă. Acestea sunt mult mai ușor de controlat, și ele sunt deseori nu la fel de înalt - ceea ce face mai ușor pentru vizitatori pur și simplu să le ignorați dacă doresc.

De asemenea, luați în considerare valoarea diapozitivelor care avansează automat și cât de greu poate fi pentru ca utilizatorii să capteze acest conținut. Există un mare studiu de caz al grupului Nielsen Norman, care arată că este mai bine să nu aveți glisoare cu avans automat.

Sunt la bord cu această abordare în sensul că este mai puțin intens pe memorie cu mai puține animații și mișcări în browser, iar majoritatea oamenilor nu-i plac carusele auto-rotative - și ar trebui întotdeauna răspunde la audiență.

Cu toate acestea, nu pot spune că niciodată nu merită să adăugați un cursor de avansare automată, mai ales că cu dispozitivele grafice statice nu obțineți cât mai multe puncte de vedere, și trebuie, de asemenea faceți primul dvs. diapozitiv cel mai important deoarece mulți utilizatori nu vor trece la următorul diapozitiv. Deciderea dacă să faceți un cursor automat sau nu este, din păcate, una zona de încercare și eroare.

Ce trebuie evitat cu orice preț

Iată un lucru important pe care eu îl cred personal cade sub “evitați cu orice preț”. Priviți sau faceți clic pe imaginea de mai jos și încercați să ghiciți ce ar putea fi.

Site-ul web al cafenelei Yozenn utilizează un cursor de ansamblu complet al ecranului. Nu se rotește automat ceea ce este grozav, cu toate acestea și diapozitivele nu servesc altui scop decât decorarea.

Imaginile nu legătura nicăieri, și ei prezintă o mână mică de produse. Toți ar putea fi toți adăugat la fundalul paginii de pornire fără slider pentru a salva confuzia și kilobytes suplimentare de JavaScript.

Aș susține că această caracteristică de alunecare a fundalului nu adaugă multă valoare unui site web deja înghesuit. Dacă imaginile aveau linkuri sau text de însoțire, acestea ar fi cel puțin relevante.

Simțiți-vă liber să utilizați imaginile din secțiunea antet care prelucrează întreaga pagină, totuși dacă acestea nu conectați oriunde și nu oferiți informații veridice atunci nu le transformi într-un carusel.

Funcții interactive

Modul în care utilizatorii navighează pe un carusel afectează designul în sine. Există a varietate de stiluri de navigare, dar acestea sunt cele mai populare:

• Navigare pe bază de date
• Arrow navigare
• Thumbnail navigation
• Listează linkuri sau elemente de titlu

Cea mai comună este dot navigație pe care le veți găsi pe sute de site-uri web moderne.

Exemplul 1: Chic la domiciliu - pagina de pornire

Chic la domiciliu este un exemplu minunat trei puncte mici sub cursor pentru a denumi navigația. Fiecare imagine se rotește automat, iar punctul din seria respectivă se umple cu negru. Celelalte două puncte goale desemnează diapozitive potențiale pentru ca utilizatorii să navigheze.

Acesta este un model popular de design pe care mulți utilizatori o recunosc deja. Se încadrează în aceeași categorie ca meniul de hamburger pe care mulți designeri nu-l plac, dar utilizatorii îl recunosc deja, și instinctiv știu cum să o folosească.

Exemplul 2: Cicluri pure - pagina de pornire

Pagina de pornire a Pure Cycles utilizează a combinație de navigare cu puncte și săgeți. În acest fel, utilizatorii au navigarea înapoi și înapoi, dar vedeți și “per total” navigare prin link-uri punct în partea de jos.

De fapt, găsesc legăturile punct în acest exemplu greu de văzut. Dificultatea cu diapozitivele vizuale este că multe elemente nu sunt ușor de distins, astfel încât săgețile și punctele pot ușor de amestec în fundal.

Exemplul 3: Pagina principală IGN

Pe pagina de pornire a IGN veți găsi o altă pagină carusel rotativ auto care folosește link-uri de titlu pentru navigare. Acest lucru este foarte frecvent pentru editorii care doresc vindeți titluri mai degrabă decât produsele. Fiecare legătură duce la diapozitivul individual care în cele din urmă duce la pagina articolului.

Aceste legături ar putea fi înlocuit cu miniaturi, sau chiar să includă miniaturi din fiecare poveste - cu toate acestea aspectul vizual este prezentat în carusel, astfel că omiterea miniaturii economisește spațiu.

Site-urile diferite folosesc diferite stiluri de navigare din diferite motive. Luați în considerare scopul (obiectivele) vizitatorilor dvs., și design pentru cea mai bună experiență a utilizatorului.

Intrebari cheie

Ar trebui să te gândești să producă o valoare reală sau informații suplimentare cu un carusel. Aceasta poate fi o informație pe care vizitatorul nu a mai avut-o înainte sau poate duce la pagini pe care vizitatorul nu le-ar fi putut găsi altfel.

Încearcă să eviți carusele cu rotație automată și utilizați-le numai pe paginile de destinație majore (prima pagină fiind un exemplu). Atâta timp cât caruselul are un scop, și nu arată ca un anunț, designul dvs. ar trebui să facă bine.

Dacă doriți mai multe informații despre carusele web, consultați câteva dintre următoarele postări:

• Caruseluri de Brad Frost
• 8 cerințe UX pentru proiectarea unui carusel de primă pagină ușor de utilizat
• Utilizabilitatea caruselului: Proiectarea unui interfață utilizator eficientă pentru site-urile web cu conținut suprasolicitat