Image Carousels i Web Design - Fordeler og beste praksis
Det er ingen mangel på karusell har lysbildefremvisninger på internett. Faktisk har denne trenden ikke gjort noe annet enn vokse i de siste 5-10 årene med mer nettleser støtte nå enn noensinne. Men er bildet karuseller virkelig verdt innsatsen? Hvilke slags fordeler produserer de, og hvordan skal de brukes produktivt i et layout?
Jeg vil gjerne dele noen vanlige trender, levende eksempler og ideer for webdesignere interessert i bilkaruseller. Disse dynamiske skyveknappene blir tungt debattert, men jeg tror de legger til verdi når de er laget i riktig sammenheng.
Produktkaruseller for e-handel
E-handelens verden er full av roterende karuseller på hjemmesider og produktsider. Målet er å opprettholde en klar informasjonstetthet med bilder og tekst som fortell en unik, men likevel verdifull historie for å hjelpe selge produkter.
Det er to primære plasseringer for en e-handelsproduktregulator:
- På butikkens hjemmeside
- På en produktside
De jobber begge forskjellig, men tjene det samme målet - å selge produkter på en visuell måte.
Eksempel 1: Au Lit Fine Linens - Hjemmeside
Ta en titt på hjemmesiden for Au Lit Fine Linens, det bruker en fullskjerm automatisk roterende karusell å vise frem forskjellige produkter, for eksempel dyner, puter og sengedeksler.
Bildene ta opp hele bredden av hjemmesiden, og de vises godt over brettet. Faktisk, denne skyveknappen bør være den aller første tingen å fange oppmerksomheten din når du lander først på siden. Hvert lysbilde fører til en annen side på nettstedet til veilede kunder gjennom shoppingopplevelsen.
Denne skyveknappen kan være litt skremmende når du lander først på siden, men med knappelink og overleggstekst Det kan også være veldig oppmuntrende for besøkende som bare vil dykke inn og handle.
Eksempel 2: Eden telefonveske - produktside
Du kan se et mer spesifikt eksempel på produktsiden for Eden-telefonsaken. Den bruker en automatisk roterende skyveknapp å vise bilder av produktet.
Jeg finner disse å være litt “for mye” i e-handelens verden. Når jeg ser på et produkt jeg vil være i kontroll av bytte mellom bilder.
Det bedre valget er å lage et galleri med bilder med kontroll gitt til den besøkende. For eksempel bruker Design by Humans-siden miniatyrbilder for hvert bilde som er mye mer oppmuntrende, og gir mer kontroll til brukeren.
Webportefølje karuseller
Nettstedets porteføljer er litt annerledes fordi disse lysbildene Klikk ikke alltid på en annen side. Det er sant at noen vil føre til en case-studie eller skrive opp om et prosjekt, men mange karuseller på porteføljesider er bare ment å vise visuelt arbeid.
Eksempel 1: Biboun - Hjemmeside
Den franske kunstneren som arbeider under navnet Biboun, har en karusell glidebryter på hjemmesiden med utdrag av kunstverk. De enkelte lysbildene fører til interne sider i porteføljen som dekke et helt prosjekt med flere bilder.
Dette er trolig den beste måten å gjøre en glidebryter på på en porteføljeside. Bare å vise en tilfeldig liste med arbeid er meningsløs, med mindre de spesifikke verkene har en grunn til å bli fremvist.
Alle delene er utsøkt i Bibouns skyveknapp, og det tar ikke opp mye plass enten. Selv om jeg vet at noen hater de automatisk roterende lysbildefremvisninger med god grunn, på en så minimalistisk layout har jeg en vanskelig tid å klage på denne designfunksjonen.
Eksempel 2: Aaron Blaises nettsted - hjemmesiden
Jeg liker virkelig eksempelet på Aaron Blaises nettsted fordi han viser sitt arbeid som en portefølje, men bruker hovedsakelig denne nettsiden til selg hans kunstvideoer. Aaron Blaise jobbet på Disney i et par tiår, og han har ferdigheter til å bevise det.
Mens glidebryteren på hjemmesiden roterer automatisk, finner jeg det ikke veldig irriterende eller ikke på plass. Hvert lysbilde har litt innhold som er relevant for bildet, og det hjelper Aaron trekke oppmerksomhet til hans nyeste video leksjoner som lærer unge kunstnere hvordan man skal mestre spesifikke ferdigheter.
En flott portefølje karusell fokuserer på bilder, og fører besøkende videre inn på nettsiden. Hvis du kan få disse to tingene, ville jeg ikke være imot en funksjon som dette på en personlig porteføljeside.
Vanlige designtrender
Hvis du ser på noen av mine eksempler ovenfor, vil du legge merke til at det vanligvis finnes to forskjellige typer skyveknapper: full skjerm og fast bredde.
Disse stilistiske valgene ofte relaterer seg til oppsettet og til hvor mye innhold det kan holde. Hvis et oppsett spenner over hele bredden på siden, er det fornuftig å utvide glidebryteren også. Men dette tvinger deg også til finne bilder av høy kvalitet som fortsatt ser bra ut på full skjerm på store oppløsning skjermer.
Jeg personlig foretrekker den faste bredden stilen som du vil se i de to kunstporteføljen eksemplene. Disse er mye lettere å kontrollere, og de er ofte ikke så høyt - gjør det enklere for besøkende å bare ignorere dem hvis de ønsker det.
Vurder også verdien av automatisk fremrykkende lysbilder, og hvor vanskelig det kan være for brukere å fange dette innholdet. Det er en god case-studie av Nielsen Norman-gruppen som viser at det er bedre For ikke å ha automatisk skyvekontrollere.
Jeg er ombord med denne tilnærmingen i den forstand at det er mindre intensiv på minnet med mindre animasjoner og bevegelser i nettleseren, og de fleste liker ikke automatisk roterende karuseller heller - og du bør alltid imøtekomme til publikum.
Men jeg kan ikke si at det aldri er verdt å legge til en automatisk skyvekontroll, spesielt siden med statisk skyve du ikke få så mange visninger, og du må også gjør ditt første lysbilde det viktigste så mange brukere vil ikke gå videre til neste lysbilde. Å bestemme om å lage en glidebryter automatisk roterende eller ikke, er dessverre en område med prøve-og-feil.
Hva å unngå for enhver pris
Her er en viktig ting som jeg personlig tror faller under “unngå for enhver pris”. Ta en titt på eller klikk på skjermbildet nedenfor, og prøv å gjette hva det kan være.
Yozenn cafe nettsted bruker en fullskjerm header skyveknappen. Det roterer ikke automatisk, noe som er flott, men lysbildene også tjene ingen annen hensikt enn dekorasjon.
Bildene Ikke koble hvor som helst, og de viser en liten håndfull produkter. De kunne alle bare være lagt til på hjemmesiden bakgrunn uten skyveknappen for å lagre forvirring og ekstra kilobytes av JavaScript.
Jeg vil hevde at denne bakgrunnen skyvefunksjonen ikke legger til mye verdi på et allerede trangt nettsted. Hvis bildene hadde koblinger eller tilhørende tekst, ville de i det minste være mer relevante.
Ta gjerne bilder i overskriften som tar opp hele siden, men hvis de Ikke koble hvor som helst eller gi noen ekte informasjon Ikke snu dem til karusell.
Interaktive funksjoner
Måten brukerne navigerer på på en karusell, påvirker selve designet. Det er en forskjellige navigasjonsstiler, men disse er de mest populære:
- Dot-basert navigasjon
- Pil navigasjon
- Miniatyrnavigasjon
- Liste lenker eller overskrift elementer
Den vanligste er punktnavigering som du finner på hundrevis av moderne nettsteder.
Eksempel 1: Flott hjemme - hjemmesiden
Chic at Home er et godt eksempel å bruke tre små prikker under glidebryteren å betegne navigasjon. Hvert bilde roterer automatisk, og tilhørende prikk i serien blir fylt med svart. De to andre tomme prikkene betegne potensielle lysbilder for brukere å bla gjennom.
Dette er en populært designmønster som mange brukere allerede gjenkjenner. Det faller inn i samme kategori som hamburgermenyen som mange designere ikke liker, men Brukerne gjenkjenner det allerede, og vet instinktivt hvordan man bruker den.
Eksempel 2: Rene sykluser - hjemmesiden
Hjemmesiden til rene sykler bruker en kombinasjon av punkt og pil navigasjon. På denne måten har brukerne frem og tilbake navigasjon, men se også “alt i alt” navigasjon gjennom punktlinker i bunnen.
Jeg finner faktisk punktlenkene i dette eksemplet tøft å se. Sværheten med visuelle lysbilder er at mange elementer ikke er enkle å skille, så piler og prikker kan lett blande seg inn i bakgrunnen.
Eksempel 3: IGN - startside
På hjemmesiden til IGN finner du en annen automatisk roterende karusell som bruker tittelkoblinger for navigasjonen. Dette er svært vanlig for utgivere som vil selge overskrifter heller enn produkter. Hver lenke går til det individuelle lysbildet som til slutt fører til artikkelsiden.
Disse koblingene kan erstattes med miniatyrbilder, eller til og med ta med miniatyrbilder fra hver historie - men visuelt aspekt er vist i karusellen, så utelatelse av miniatyrbilden sparer faktisk plass.
Ulike nettsteder bruker forskjellige navigasjonsstiler av forskjellige grunner. Vurder målene til dine besøkende, og design for den beste brukeropplevelsen.
Nøkkelferier
Du bør sikte på produsere ekte verdi, eller ekstra informasjon med en karusell. Dette kan være informasjon besøkende ikke hadde før, eller det kan føre til sider som den besøkende kanskje ikke har funnet ellers.
Prøv å unngå automatisk roterende karuseller, og bare bruk dem på større destinasjonssider (hjemmesiden er et eksempel). Så lenge karusellen har en hensikt, og Ser ikke ut som en annonse, ditt design burde gjøre det bra.
Hvis du leter etter mer info på webkaruseller, sjekk ut noen av følgende innlegg:
- Karuseller av Brad Frost
- 8 UX Krav til å designe en brukervennlig Hjemmeside karusell
- Karusellbrukbarhet: Utforming av et effektivt brukergrensesnitt for nettsteder med overbelastning av innhold
