Website carousel sliders: Hvorfor, hvordan og når du skal bruke dem (inkludert 13 eksempler)

La oss snakke om nettstedet karuseller, aka sliders, aka lysbildeserier, aka gallerier.

Det virker som hele internett har sin egen variasjon, men samlet mener vi alle at designelementet med det bevegelige innholdet og ofte viser tre små prikker på bunnen.

når det gjelder karuseller, er du enten på lag 👏 eller team 🙅 Det første laget inkluderer vanligvis klientene, det andre laget webdesignerne.

Her På Ycode er Vi Sveits. Vi tror karuseller kan være centerpieces som gjør webdesign mer tiltalende, men at de også har potensial til å dra nettstedets brukervennlighet ned.

I denne artikkelen ser vi på beste praksis for karusell (og hva du bør unngå). Siden karuseller kan brukes til mange anledninger, vil vi vise deg ulike eksempler på glidere gjort godt.

Beste Praksis For Karuselldesign (eller for det meste hva du ikke bør gjøre)

selv om de brukes på mange nettsteder, kan karuselldesign lett gå glipp av merket. Det er noen gode grunner til hvorfor. La oss starte med noen ting du bør unngå før vi forteller deg om hva karusell beste praksis du bør bruke.

👎 Don ‘ ts: Karusell feil å unngå

1. Content: når en karusell ønsker å gjøre for mye på for lite tid, kan det føre til at øynene til besøkende snurrer. Tekst kan ikke leses riktig, informasjon blir savnet og besøkende mister interessen.

2. Design: Hvis en glidebryter er dårlig utformet og ikke vil gli inn i webdesign, kan det bli feil som en annonse. Som et resultat ruller folk rett forbi innholdet. Det kalles banner blindhet, et webdesign fenomen der folk ignorerer innhold som ligner en annonse—bevisst eller ubevisst.

3. SEO: fra ET SEO-perspektiv, unngå flere H1-overskrifter hvis du bruker glidebrytere som det første på siden. Hver nettside skal ha en H1 I SIN HTML-kode. Hvis Du bruker Flere H1s på grunn Av de forskjellige lysbildene, Kan Google være forvirret om hvilke søkeord som er de viktigste for den nettsiden. Også, nettstedet strukturen kan ikke være klart. Begge faktorene kan påvirke rangeringen din negativt.

4. Mobil: for mobile enheter er det best å gå for manuelle skyveknapper. Pass på at bevegelser støttes (f.eks. mobilbrukere sveiper for å vise neste lysbilde) og at pilene er tydelig vist og store nok til å trykke. Hvis lysbildene inneholder tekst, kontrollerer du om den er lesbar på mobilskjermbilder.

5. Rotasjon: Med vår begrensede oppmerksomhetsspenn i disse dager, er det vanskelig å holde brukerens interesse i mer enn noen få sekunder. Siden vi alle har steder å være, hold glidebryteren lav (mindre enn fem) og gi besøkende muligheten til å kontrollere karusellen ved å vise skyvekontroller. Dette gjør at folk ikke trenger å sitte og vente på neste lysbilde.

👍 Do ‘ s: Carousel beste praksis

1. Hold hvert lysbilde enkelt slik at informasjonen kan fordøyes i løpet av sekunder.

2. Gjør design blande inn med resten av nettstedet ditt.

3. La folk styre rotasjonen med klare piler.

4. Har nok tid mellom lysbilder (5-10 sekunder), eller enda bedre, ditch autoplay helt.

5. Mindre er mer (både i design og antall lysbilder).

6. før du setter inn en karusell, spør: vil dette legge til mer verdi enn statisk innhold?

har andre tanker?

når du er i tvil, test begge alternativene og se hvilket alternativ som genererer en høyere konverteringsfrekvens. Ofte, kunder be om lysbildeserier fordi de ikke er klart på meldingen de ønsker å fremme først og fremst. Hvorfor ikke vise alt? De tenker.

hvis det er tilfelle, er arbeidet i å lage en mer fokusert melding-ikke bruk en glidebryter. Eller velg det viktige USP (Unique Selling Point) og nevn de andre lenger ned på siden. Folk er mer sannsynlig å bla enn å bla gjennom lysbildene.

hvis du bestemmer deg for at det er et helvete ja, velg hvert lysbilde med vilje. Ikke bare legg til alle dine nye blogger eller produkter, men velg nøye det viktigste innholdet som kan generere mest interaktivitet fra brukere.

13 website carousel examples

nå som du vet hva du ikke skal gjøre, la oss se på carousel eksempler som spikrer det. Her er 13 nettsted carousel eksempler, fra hjemmeside til produkt og bilde lysbildeserier.

homepage carousels

hvis du trodde leirene var allerede delt nok, du har ikke møtt hjemmeside glidere. Noen rot for å plassere dem direkte øverst (ofte sett i bloggmaler), mens andre ikke vil se dem implementert hvor som helst over brettet.

grunnen til at folk unngår å plassere en hjemmeside karusell direkte øverst, er fordi de mener at dette rommet bør reserveres for en klar melding som lokker leseren til å bla ned og lære mer. Med karuseller er det vanskelig å formidle en sterk melding. I tillegg er du ikke sikker på om folk ser alle lysbildene eller ruller rett forbi.

det Er imidlertid også mange mennesker som elsker å hilse på besøkende med en hjemmeside karusell for å øyeblikkelig vise kjente historier eller produkter.

Eksempel 1: Nicole Gibbons Studio

hjemmesiden karusellen Fra Nicole Gibbons Studio fungerer veldig bra! Det er bra for et par grunner.

• den har god funksjonalitet og tilfører verdi. Designer Nicole viser raskt forskjellige interiøreksempler direkte når folk går inn på nettstedet hennes

• lysbildene er manuelle, slik at brukeren bestemmer om og i hvilket tempo de vil bla gjennom

• det er ingen tekst overlapping å ta bort fra bildene

Eksempel 2: Urban Skin RX

Vi elsker Denne kompakte karusellen Fra Urban Skin RX, da Den har stor tilgjengelighet.

den inneholder to lysbilder, begge attraktivt designet i samme stil som resten av nettstedet. Rotasjonstiden er satt lenge nok til å lese teksten. De store skrifttypene og klare cta-knappene gjør det enkelt å fordøye hva lysbildet handler om.

Merk: hvis du blar gjennom merkets hjemmeside, vil du se at det er skreddersydd for folk som allerede er kjent Med Urban Skin RX. Fokuset er på å vise frem produkter, uten å forklare hvorfor noen trenger dem i utgangspunktet. Det er derfor en produktskyver passer til siden-de trenger ikke topptekstområdet for å vise en klar melding som motiverer besøkende til å oppdage mer.

Eksempel 3: Mejuri

Det vi elsker om denne karusellen fra smykker butikk Mejuri er at den viser to forskjellige ting på en gang, uten å føle overveldende.

hele karusellen inneholder tre lysbilder, hvorav hver har to alternativer-se kampanjen eller kjøp smykker. Progresjonslinjene er subtilt vist nederst, selv om du kanskje trenger eagle eyes for å få øye på dette. Dette kan være et poeng for optimalisering.

Eksempel 4: Fresh Brothers Pizza

hvem sier at en glidebryter må strekke seg over hele bredden på en side? Du kan også bryte opp seksjoner i rister og bruke mindre skyveknapper, som på Hjemmesiden Til Fresh Brothers Pizza.

Gitt, med dette webdesignoppsettet, kan ting bli litt mye. Selv om glidebryterne viser besøkende informasjon, er øyet trukket til det store bildet til venstre. Ikke alle vil se glidebryteren informasjon. Men siden informasjonen handler OM COVID-tiltak og nye pizzaer som folk uansett vil se når de bestiller, er dette ikke en stor avtale.

Produktkaruseller

produktkaruseller er der for å visuelt lokke folk til å lære mer om produktet, og vel, forhåpentligvis kjøpe det!

disse karusellene er vanligvis plassert på en av to steder på e-handelsnettsteder: hjemmesiden eller produktsiden. Glidebryteren kan vise forskjellige produkter eller ett produkt på forskjellige måter(viser funksjonene).

Eksempel 5: Keys Soulcare

på Denne Keys Soulcare produktsiden brukes en karusell for å vise hvert element som er inkludert I Harmony ritual-pakken. En glidebryter passer perfekt til webdesign, da det lar besøkende se all relevant informasjon uten å måtte bla.

Eksempel 6: KeepCup

denne produktkarusellen Fra KeepCup er plassert midt på e-handelssiden, og lar deg enkelt bla gjennom merkets mest populære to-go-kopper. Legg merke til hvordan navn, pris, kjøp knapp og piler er plassert-super slank—rekvisitter til grafiske designere).

Eksempel 7: Hjemlengsel

Candle company hjemlengsel bruker en rekke glidebryterelementer på deres e-handel nettsted, for å vise frem sine lys samt anmeldelser og sitater fra merker.

Midt på hjemmesiden er det denne lysbildeserien – et bevegelig galleri av deres bestselgende lys (vi elsker duftkonseptet!). Når du holder musepekeren over en glidebryter, stopper den og et litt annet bilde vises(for eksempel viser at lyset blir tent).

Eksempel 8: Milk Bar

Milk Bars produktsider er en glede å bla gjennom, og ikke bare fordi bildene er vannvannende. Ta Cheerleader nettsiden nedenfor, med glidebryteren element til venstre og alle produktdetaljer til høyre, besøkende se alt ved første øyekast.

men når du ruller ned, ser du interaktive bannere og mer produktinformasjon som levering, ingredienser, lignende godbiter og en annen karusell som viser kundeanmeldelser.

Innholdskaruseller

hvis du vil legge til en innholdskarusell på nettstedet ditt, må du huske på at det mest verdifulle innholdet må være i det første lysbildet. Det første lysbildet vil alltid få mest mulig eksponering, og visningene reduseres etter hvert ekstra lysbilde.

Eksempel 9: Art Of Tea

på nettsiden nedenfor Fra Art Of Tea, vil du se mange forskjellige ting i en fullskjerm skyveknapp.

åpningen glidebryteren er EN CTA å delta i sitt agentprogram. Neste opp er lysbilder som viser nye teformer, poser, bunter og shakers. One slide er også dedikert til å bli med i sin månedlige te klubb.

hva dette karusell webdesign gjør det bra er at bildene viser hva hvert lysbilde handler om, og støtteteksten holdes på et minimum. En ting å forbedre er knappene. Når du velger knapper som bare har en oversikt, er det vanskelig å se dem tydelig på bildet.

Eksempel 10: Canva Design School

Design School-siden Fra Canva er et godt eksempel på en forekomst der en karusell er mer effektiv enn noe annet nettstedselement.

siden det er mye innhold som skal vises på destinasjonssiden, bidrar en karusell til å vise de forskjellige kursene mer kompakt. For eksempel tar opplæringsdelen nedenfor opp mye mer plass i forhold til lysbildeserien.

Blog carousels

Mange Ganger Kommer WordPress-maler for blogger med et interaktivt skyveelement som automatisk viser de nyeste artiklene.

selv om dette er en flott funksjon, vær oppmerksom på hvilke artikler som vises. Noen er kanskje ikke like klikkverdige, men vises først i glidebryteren for startside fordi de er sist publisert. I dette tilfellet er det bedre å manuelt velge bloggene du tror vil lokke besøkende til å klikke.

Eksempel 11: COCOCOZY

Interiørbloggeren Colette Shelton åpner bloggen sin med en glidebryter som viser et utvalg av bloggene hennes. Når du svinger over, vises tittelen på bloggen. På mobil vises bildet med tittelen under det.

Bildekaruseller

bildekaruseller er ofte sett i porteføljelignende nettsteder, der det brukes til å vise deler av kunstnerens arbeid. Pass på at bildene dine er av høy kvalitet og snakker for seg selv, uten behov for ytterligere tekst.

Eksempel 12: Mix Design Collective

Mix Design Collective er et designfirma. Siden deres arbeid er svært visuelt, er det fornuftig å åpne nettstedet med navigasjonen og en fotoskyver rett under.

lysbildeserien har en blanding av bilder, fra kjøkken til bad og stuer, slik at besøkende får en ide om kollektivets designstil og tjenester.

Sammenligningskaruseller

Glidebrytere fungerer bra når brukere raskt må skanne gjennom en rekke innhold eller produkter. Dette er akkurat tilfelle når folk sammenligner elementer. La oss se på noen eksempler.

Eksempel 13: Amazon

Uten Tvil det mest kjente sammenligningseksemplet kommer Fra Amazon. På hver produktside finner du en karusell med alle relaterte produkter du kan kjøpe også. I dette tilfellet er en glidebryter mer effektiv enn statiske bilder, da det lar brukerne raskt bla gjennom mange lignende produkter.

Hva er din ta på nettstedet karuseller?

som du har lest, kan web glidere være et ja takk eller en takk nei. Alt avhenger av hvordan elementet brukes i webdesign og hvor brukervennlig glidebryteren er å navigere. Pass på at hvert lysbilde tjener et klart formål, og den generelle brukeropplevelsen er god. Hvis du trygt kan si at en glidebryter er det beste elementet for å vise innholdet, er du god til å gå.