hjemmeside karrusel skydere: hvorfor, hvordan og hvornår man skal bruge dem (herunder 13 eksempler)

lad os tale om hjemmeside karruseller, aka skydere, aka dias, aka gallerier.

det ser ud til, at hele internettet har sin egen variation, men samlet mener vi alle, at designelementet med det bevægelige indhold og ofte viser tre små prikker i bunden.

når det kommer til karruseller, er du enten på teamkrus eller teamkurs. Det første hold inkluderer typisk klienterne, det andet hold internetdesignerne.

her på Ycode er vi Danmark. Vi mener, at karruseller kan være de centerpieces, der gør dit internetdesign mere tiltalende, men at de også har potentialet til at trække din hjemmesides brugervenlighed ned.

i denne artikel vil vi se på karrusel bedste praksis (og hvad man skal undgå). Da karruseller kan bruges til mange lejligheder, viser vi dig forskellige eksempler på skydere, der er gjort godt.

karrusel design bedste praksis (eller for det meste, hvad man ikke skal gøre)

selvom de bruges på mange hjemmesider, kan karrusel design nemt gå glip af mærket. Der er et par gode grunde til. Lad os starte med nogle ting, du skal undgå, før vi fortæller dig, hvilken karrusel bedste praksis du skal bruge.

don ‘ ts: karrusel fejl at undgå

1. indhold: når en karrusel ønsker at gøre for meget på for lidt tid, kan det få besøgende til at spinde. Tekst kan ikke læses korrekt, information går glip af, og besøgende mister interessen.

2. Design: hvis en skyder er dårligt designet og ikke vil blande ind i din hjemmeside design, kan det blive forvekslet som en annonce. Som et resultat ruller folk lige forbi indholdet. Det kaldes banner blindness, et internetdesign fænomen, hvor folk ignorerer indhold, der ligner en annonce—bevidst eller ubevidst.

3. SEO: fra et SEO-perspektiv skal du undgå flere H1-overskrifter, hvis du bruger skydere som den første ting på siden. Hver hjemmeside skal have en H1 i sin HTML-kode. Hvis du bruger flere H1 ‘ er på grund af de forskellige dias, kan Google være forvirret over, hvilke søgeord der er de vigtigste for den pågældende hjemmeside. Også, hjemmesiden struktur kan ikke være klar. Begge faktorer kan påvirke din placering negativt.

4. mobil: for mobile enheder er det bedst at gå til manuelle skydere. Sørg for, at bevægelser understøttes (f.eks. mobilbrugere, der stryger for at vise det næste dias), og at pilene er tydeligt vist og store nok til at trykke på. Hvis dine slides indeholder tekst, skal du kontrollere, om den kan læses på mobilskærme.

5. Rotation: Med vores begrænsede opmærksomhedsspænd i disse dage er det svært at holde brugerens interesse i længere tid end et par sekunder. Da vi alle har steder at være, skal du holde skyderbeløbet lavt (mindre end fem) og give besøgende mulighed for at kontrollere karrusellen ved at vise skyderkontroller. Dette sikrer, at folk ikke behøver at sidde og vente på det næste dias.

👍 Do ‘ s: karrusel bedste praksis

1. hold hvert dias enkelt, så oplysningerne kan fordøjes inden for få sekunder.

2. få designet til at blande sig med resten af din hjemmeside.

3. Lad folk styre rotationen med klare pile.

4. har tid nok mellem dias (5-10 sekunder), eller endnu bedre, grøft autoplay helt.

5. mindre er mere (både i design og mængde dias).

6. før du indsætter en karrusel, spørg: vil dette tilføje mere værdi end statisk indhold?

har du andre tanker?

når du er i tvivl, skal du teste begge muligheder og se, hvilken mulighed der genererer en højere konverteringsfrekvens. Ofte, klienter beder om lysbilleder, fordi de ikke er klare over det budskab, de først og fremmest ønsker at promovere. Hvorfor ikke vise alt? De tænker.

hvis det er tilfældet, er arbejdet med at skabe en mere fokuseret besked—ikke ved hjælp af en skyder. Eller vælg den vigtige USP (unikke salgsargument) og nævne de andre længere nede på siden. Folk er mere tilbøjelige til at rulle end at bladre gennem dine dias.

hvis du beslutter, at det er et helvede ja, skal du vælge hvert dias med vilje. Tilføj ikke bare alle dine nye blogs eller produkter, men vælg omhyggeligt det vigtigste indhold, der kan generere mest interaktivitet fra brugerne.

13 hjemmeside karrusel eksempler

nu hvor du ved hvad du ikke skal gøre, lad os se på karrusel eksempler, der sømmer det. Her er 13 eksempler på hjemmeside karrusel, fra hjemmeside til produkt-og billedudstillinger.

Homepage karruseller

hvis du troede, at lejrene allerede var opdelt nok, har du ikke mødt homepage-skydere. Nogle rod til at placere dem direkte øverst (ofte set i blogskabeloner), mens andre ikke ønsker at se dem implementeret overalt over folden.

grunden til, at folk undgår at placere en startside karrusel direkte øverst, er fordi de mener, at dette rum skal reserveres til en klar besked, der lokker læseren til at rulle ned og lære mere. Med karruseller er det svært at formidle et stærkt budskab. Plus, du er ikke sikker på, om folk ser alle dias eller ruller lige forbi.

der er dog også masser af mennesker, der elsker at hilse besøgende med en startside-karrusel for øjeblikkeligt at vise fremhævede historier eller produkter.

eksempel 1: Nicole Gibbons Studio

hjemmesiden karrusel fra Nicole Gibbons Studio fungerer rigtig godt! Det er godt af et par grunde.

• det har god funktionalitet og tilføjer værdi. Designer Nicole viser hurtigt forskellige interiøreksempler direkte, når folk kommer ind på hendes hjemmeside

• diasene er manuelle, så brugeren beslutter, om og i hvilket tempo de vil bladre igennem

• der er ingen tekst overlapning at tage væk fra billedet

eksempel 2: Urban Skin r

vi elsker denne kompakte karrusel fra Urban Skin r, da den har stor tilgængelighed.

den indeholder to dias, begge smukt designet i samme stil som resten af hjemmesiden. Rotationstiden er indstillet længe nok til at læse teksten. De store skrifttyper og klare call to action (CTA) knapper gør det nemt at fordøje, hvad diaset handler om.

Bemærk: Hvis du ruller gennem brandets hjemmeside, vil du se, at det er skræddersyet til folk, der allerede er bekendt med Urban Skin rks. Fokus er på fremvisning af produkter, uden at forklare, hvorfor nogen har brug for dem i første omgang. Derfor passer en produktskyder til siden-de har ikke brug for overskriftspladsen for at vise en klar besked, der motiverer besøgende til at opdage mere.

eksempel 3: Mejuri

det vi elsker ved denne karrusel fra smykkebutik Mejuri er, at den viser to forskellige ting på en gang uden at føle sig overvældende.

hele karrusellen indeholder tre dias, hvoraf hver har to muligheder—se kampagnen eller køb smykkerne. Progressionslinjerne vises subtilt i bunden, selvom du muligvis har brug for ørneøjne for at få øje på dette. Dette kan være et punkt for optimering.

eksempel 4: friske brødre

Hvem siger, at en skyder skal spænde over en sides fulde bredde? Du kan også opdele sektioner i gitre og bruge mindre skydere, som på hjemmesiden til Fresh Brothers.

indrømmet, med denne hjemmeside design layout, tingene kan få lidt meget. Selvom skyderne viser besøgende oplysninger, er øjet trukket til det store billede til venstre. Ikke alle vil se skyderen oplysninger. Imidlertid, da oplysningerne handler om COVID-foranstaltninger og nye billeder, som folk alligevel vil se, når de bestiller, dette er ikke en big deal.

Produktkarruseller

Produktkarruseller er der for visuelt at lokke folk til at lære mere om produktet, og godt, forhåbentlig at købe det!

disse typer karruseller placeres normalt på et af to steder på e-handelssider: hjemmesiden eller produktsiden. Skyderen kan vise forskellige produkter eller et produkt på forskellige måder (viser dets funktioner).

eksempel 5: Keys Soulcare

på denne keys Soulcare-produktside bruges en karrusel til at vise hvert element, der er inkluderet i Harmony ritual-pakken. En skyder passer perfekt til hjemmesidedesignet, da det giver besøgende mulighed for at se alle relevante oplysninger uden at skulle rulle.

eksempel 6: KeepCup

dette produkt karrusel fra KeepCup er placeret i midten af e-handel site og lader dig nemt gennemse mærkets mest populære to-go kopper. Vær opmærksom på, hvordan Navn, Pris, købsknap og pile er placeret—super slank (rekvisitter til de grafiske designere).

eksempel 7: hjemve

Candle company homesick bruger en række skyderen elementer på deres e-handel hjemmeside, at fremvise deres stearinlys samt anmeldelser og citater fra mærker.

midtvejs ned på hjemmesiden er der dette dias—et bevægende galleri med deres bedst sælgende stearinlys (vi elsker duftkonceptet!). Når du holder musepekeren over en billedskyder, stopper den, og der vises et lidt andet billede (for eksempel viser lyset at blive tændt).

Eksempel 8: Milk Bar

Milk Bar ‘ s produktsider er en glæde at rulle igennem, og ikke kun fordi billederne er lækre. Tag Cheerleader hjemmeside nedenfor, med skyderen element til venstre og alle produktoplysninger til højre, besøgende se alt ved første øjekast.

men når du ruller ned, vil du se interaktive bannere og flere produktoplysninger som levering, ingredienser, lignende godbidder og en anden karrusel, der viser kundeanmeldelser.

Content carousels

hvis du vil tilføje en content carousel til din hjemmeside, skal du huske, at det mest værdifulde indhold skal være i det første dias. Det oprindelige dias får altid mest eksponering, og eksponeringerne falder efter hvert ekstra dias.

eksempel 9: Art Of Tea

på hjemmesiden nedenfor fra Art Of Tea kan du se mange forskellige ting i en fullscreen slider.

åbningsskyderen er en CTA til at deltage i deres tilknyttede program. Næste op er dias viser nye te dåser, poser, bundter og shakers. One slide er også dedikeret til at deltage i deres månedlige tea club.

hvad dette karruseldesign gør godt er, at billedet viser, hvad hvert dias handler om, og den understøttende tekst holdes på et minimum. En ting at forbedre er knapperne. Når du vælger knapper, der kun har en oversigt, er det svært at se dem tydeligt på billedet.

eksempel 10: Canva Designskole

Designskolesiden fra Canva er et godt eksempel på et tilfælde, hvor en karrusel er mere effektiv end noget andet hjemmesideelement.

da der er meget indhold, der skal vises på destinationssiden, hjælper en karrusel med at vise de forskellige kurser mere kompakt. For eksempel tager tutorialafsnittet nedenfor meget mere plads sammenlignet med diasvisningen.

Blogkarruseller

mange gange kommer skabeloner til blogs med et interaktivt skyderelement, der automatisk viser de nyeste artikler.

selvom dette er en fantastisk funktion, skal du være opmærksom på, hvilke artikler der vises. Nogle er muligvis ikke så klikværdige, men vises først i skyderen til din startside, fordi de senest er offentliggjort. I dette tilfælde er det bedre at manuelt vælge de blogs, du tror vil lokke besøgende til at klikke.

eksempel 11: 8404>

Indretningsblogger Colette Shelton åbner sin blog med en skyder, der viser et udvalg af sine blogs. Når du holder musepekeren over, vises titlen på bloggen. På mobilen vises billedet med titlen under det.

Billedkarruseller

Billedkaruseller ses ofte på porteføljelignende hjemmesider, hvor det bruges til at vise stykker af kunstnerens arbejde. Sørg for, at dine billeder er af høj kvalitet og taler for sig selv uden behov for yderligere tekst.

eksempel 12: Bland Design Collective

bland Design Collective er en designvirksomhed. Da deres arbejde er meget visuelt, giver det mening at åbne hjemmesiden med navigationen og en billedskyder direkte nedenfor.

Udstillingen har en blanding af billeder, fra køkkener til badeværelser og stuer, så besøgende får en ide om kollektivets designstil og service.

sammenligning karruseller

glidere fungerer godt, når brugerne hurtigt skal scanne gennem en række indhold eller produkter. Dette er nøjagtigt tilfældet, når folk sammenligner varer. Lad os se på nogle eksempler.

eksempel 13: amason

formentlig det mest kendte sammenligningseksempel kommer fra amason. På hver produktside finder du en karrusel med alle de relaterede produkter, du også kan købe. I dette tilfælde er en skyder mere effektiv end statiske billeder, da det giver brugerne mulighed for hurtigt at gennemse mange lignende produkter.

Hvad er din tage på hjemmesiden karruseller?

som du har læst, kan skydere være et ja tak eller et venligst Nej. Det hele afhænger af, hvordan elementet bruges i dit internetdesign, og hvor brugervenlig skyderen er at navigere. Sørg for, at hvert dias tjener et klart formål, og at den samlede brugeroplevelse er stor. Hvis du med sikkerhed kan sige, at en skyder er det bedste element til at vise indholdet, er du god til at gå.