webbplats carousel sliders: varför, hur och när man ska använda dem (inklusive 13 exempel)

Låt oss prata om webbplats karuseller, aka sliders, aka bildspel, aka gallerier.

det verkar som om hela internet har sin egen variation, men kollektivt menar vi alla att designelementet med det rörliga innehållet och ofta visar tre små prickar på botten.

när det gäller karuseller, är du antingen på Team eller team. Det första laget innehåller vanligtvis kunderna, det andra laget webbdesigners.

här på Ycode är vi Schweiz. Vi tror att karuseller kan vara mittpunkterna som gör din webbdesign mer tilltalande, men att de också har potential att dra ner webbplatsens användbarhet.

i den här artikeln ska vi titta på karusell bästa praxis (och vad man ska undvika). Eftersom karuseller kan användas vid många tillfällen visar vi dig olika exempel på skjutreglage som görs bra.

bästa praxis för Karuselldesign (eller mestadels vad man inte ska göra)

även om de används på många webbplatser kan karuselldesigner lätt missa märket. Det finns några bra skäl till varför. Låt oss börja med några saker att undvika innan vi berättar om vilka karusell bästa praxis du bör använda.

det är inte nödvändigt att undvika att göra ett misstag i en karusell

1. innehåll: när en karusell vill göra för mycket på för kort tid kan det få webbplatsbesökarnas ögon att snurra. Text kan inte läsas ordentligt, information saknas och besökare tappar intresset.

2. Design: om ett skjutreglage är dåligt utformat och inte smälter in i din webbdesign kan det misstas som en annons. Som ett resultat rullar folk rätt förbi innehållet. Det kallas bannerblindhet, ett webbdesignfenomen där människor ignorerar innehåll som liknar en annons—medvetet eller omedvetet.

3. SEO: från ett SEO-perspektiv, undvik flera H1-rubriker om du använder skjutreglage som det första på sidan. Varje webbsida ska ha en H1 i sin HTML-kod. Om du använder flera H1s på grund av de olika bilderna kan Google vara förvirrad över vilka nyckelord som är de viktigaste för den webbsidan. Webbplatsens struktur kanske inte är tydlig. Båda faktorerna kan påverka din ranking negativt.

4. mobil: för Mobila enheter är det bäst att gå till manuella reglage. Se till att gester stöds (t.ex. mobilanvändare som sveper för att visa nästa bild) och att pilarna visas tydligt och är tillräckligt stora för att trycka. Om dina bilder innehåller text, kontrollera om den är läsbar på mobila skärmar.

5. Rotation: Med vår begränsade uppmärksamhet span dessa dagar, det är svårt att hålla användarens intresse längre än några sekunder. Eftersom vi alla har platser att vara, håll skjutreglaget lågt (mindre än fem) och ge besökarna möjlighet att styra karusellen genom att visa skjutreglage. Detta gör att människor inte behöver sitta och vänta på nästa bild.

👍 Do ‘ s: bästa praxis för karusell

1. håll varje bild enkel så att informationen kan smälta inom några sekunder.

2. låt designen smälta in med resten av din webbplats.

3. låt människor styra rotationen med tydliga pilar.

4. har tillräckligt med tid mellan bilderna (5-10 sekunder), eller ännu bättre, dike autoplay helt och hållet.

5. mindre är mer (både i design och mängd bilder).

6. innan du sätter in en karusell, fråga: kommer detta att lägga till mer värde än statiskt innehåll?

har andra tankar?

när du är osäker, testa båda alternativen och se vilket alternativ som genererar en högre omvandlingsfrekvens. Ofta ber kunder om bildspel eftersom de inte är tydliga på meddelandet de vill marknadsföra först och främst. Varför inte visa allt? De tror.

om så är fallet är arbetet med att skapa ett mer fokuserat meddelande—inte med en skjutreglage. Eller välj den viktiga USP (Unique Selling Point) och nämna de andra längre ner på sidan. Människor är mer benägna att bläddra än att bläddra igenom dina bilder.

om du bestämmer dig för att det är ett helvete Ja, välj varje bild avsiktligt. Lägg inte bara till alla dina nya bloggar eller produkter, men välj noggrant det viktigaste innehållet som kan generera mest interaktivitet från användare.

13 webbplats karusell exempel

nu när du vet vad du inte ska göra, låt oss titta på karusellexempel som spikar det. Här är 13 webbplats karusell exempel, från hemsida till produkt och bild bildspel.

Startsidekaruseller

om du trodde att lägren redan var delade nog har du inte träffat startsidereglage. Vissa rot för att placera dem direkt högst upp (ofta sett i bloggmallar), medan andra inte vill se dem implementeras någonstans ovanför vecket.

anledningen till att människor undviker att placera en hemsida karusell direkt på toppen är att de tror att detta utrymme bör reserveras för ett tydligt budskap som lockar läsaren att rulla ner och lära sig mer. Med karuseller är det svårt att förmedla ett starkt budskap. Dessutom är du inte säker på om folk ser Alla bilder eller rullar förbi.

men det finns också gott om människor som älskar hälsning besökare med en hemsida karusell att omedelbart visa presenterade berättelser eller produkter.

exempel 1: Nicole Gibbons Studio

hemsidan karusellen från Nicole Gibbons Studio fungerar riktigt bra! Det är bra för ett par skäl.

• den har bra funktionalitet och lägger till värde. Designer Nicole visar snabbt olika interiörexempel direkt när människor går in på hennes webbplats

• bilderna är manuella, så användaren bestämmer om och i vilken takt de vill bläddra igenom

• det finns ingen textöverlappning att ta bort från bilderna

exempel 2: Urban Skin RX

vi älskar denna kompakta karusell från Urban Skin RX, eftersom den har stor tillgänglighet.

den innehåller två bilder, båda vackert utformade i samma stil som resten av webbplatsen. Rotationstiden är inställd tillräckligt länge för att läsa texten. De stora teckensnitten och tydliga uppmaningsknapparna (CTA) gör det enkelt att smälta vad bilden handlar om.

Obs: Om du bläddrar igenom varumärkets hemsida ser du att den är skräddarsydd för personer som redan är bekanta med Urban Skin RX. Fokus ligger på att visa upp produkter, utan att förklara varför någon behöver dem i första hand. Det är därför en produktreglage passar sidan—de behöver inte rubrikutrymmet för att visa ett tydligt meddelande som motiverar besökare att upptäcka mer.

exempel 3: Mejuri

vad vi älskar om denna karusell från smycken butik Mejuri är att det visar två olika saker på en gång, utan att känna överväldigande.

hela karusellen innehåller tre bilder, varav var och en har två alternativ—se kampanjen eller handla smycken. Progressionslinjerna visas subtilt längst ner, även om du kanske behöver örnögon för att upptäcka detta. Detta kan vara en punkt för optimering.

exempel 4: Fresh Brothers Pizza

Vem säger att en skjutreglage måste spänna över hela bredden på en sida? Du kan också dela upp sektioner i galler och använda mindre reglage, som på hemsidan för Fresh Brothers Pizza.

beviljas, med denna webbdesignlayout kan saker bli lite mycket. Även om reglagen visar besökarnas information dras ögat till den stora bilden till vänster. Inte alla kommer att se skjutreglaget. I alla fall, eftersom informationen handlar om COVID-åtgärder och nya pizzor som människor ändå kommer att se när de beställer, detta är inte en stor sak.

produktkaruseller

produktkaruseller är där för att visuellt locka människor till att lära sig mer om produkten, och förhoppningsvis köpa den!

dessa typer av karuseller placeras vanligtvis på en av två platser på e-handelssajter: hemsidan eller produktsidan. Skjutreglaget kan visa olika produkter eller en produkt på olika sätt (visar dess funktioner).

exempel 5: Keys Soulcare

på denna Keys Soulcare-produktsida används en karusell för att visa varje objekt som ingår i Harmony ritual-paketet. En skjutreglage passar webbdesignen perfekt, eftersom den låter besökare se all relevant information utan att behöva bläddra.

exempel 6: KeepCup

denna produktkarusell från KeepCup placeras mitt på e-handelsplatsen och låter dig enkelt bläddra igenom varumärkets mest populära to-go-koppar. Notera hur Namn, Pris, köpknapp och pilar placeras—supersnygg (rekvisita till grafiska formgivare).

exempel 7: hemlängtan

Candle company hemlängtan använder en mängd olika reglaget element på deras e-handel webbplats, att visa upp sina ljus samt recensioner och citat från varumärken.

halvvägs ner på hemsidan finns det detta bildspel-ett rörligt galleri av deras bästsäljande ljus (vi älskar doftkonceptet!). När du håller muspekaren över en bildreglage stannar den och en något annorlunda bild visas (till exempel visar att ljuset tänds).

exempel 8: Milk Bar

Milk bars produktsidor är en glädje att bläddra igenom, och inte bara för att bilderna är läckra. Ta Cheerleader-webbsidan nedan, med skjutreglaget till vänster och alla produktdetaljer till höger, besökare ser allt vid första anblicken.

men när du bläddrar ner ser du interaktiva banners och mer produktinformation som leverans, ingredienser, liknande godis och en annan karusell som visar kundrecensioner.

innehållskaruseller

om du vill lägga till en innehållskarusell på din webbplats, kom ihåg att det mest värdefulla innehållet måste vara i den första bilden. Den första bilden kommer alltid att få mest exponering, och visningar minskar efter varje ytterligare bild.

exempel 9: Art of Tea

på webbplatsen nedan från Art of Tea ser du många olika saker i en fullskärmsreglage.

öppningsreglaget är en CTA för att gå med i deras affiliateprogram. Nästa upp är bilder som visar nya te burkar, påsar, buntar och shakers. En bild är också dedikerad till att gå med i deras månatliga teklubb.

vad denna karusell webbdesign gör bra är att bilderna visar vad varje bild handlar om, och den stödjande texten hålls till ett minimum. En sak att förbättra är knapparna. När du väljer knappar som bara har en kontur är det svårt att se dem tydligt på bilden.

exempel 10: Canva Design School

Design School-sidan från Canva är ett bra exempel på en instans där en karusell är effektivare än något annat Webbplatselement.

eftersom det finns mycket innehåll som ska visas på målsidan, hjälper en karusell att visa de olika kurserna mer kompakt. Till exempel tar handledningsavsnittet nedan mycket mer utrymme jämfört med bildspelet.

Bloggkaruseller

många gånger kommer WordPress-mallar för Bloggar med ett interaktivt reglageelement som automatiskt visar de senaste artiklarna.

även om detta är en bra funktion, Håll dig medveten om vilka artiklar som visas. Vissa kanske inte är lika klickvärda men visas först i din startsida eftersom de senast publicerats. I det här fallet är det bättre att manuellt välja de bloggar du tror kommer att locka besökare att klicka.

exempel 11: COCOCOZY

Inredningsbloggaren Colette Shelton öppnar sin blogg med en skjutreglage som visar ett urval av hennes bloggar. När du håller muspekaren över visas titeln på bloggen. På mobilen visas bilden med titeln under den.

Bildkaruseller

Bildkaruseller ses ofta på portföljliknande webbplatser, där den används för att visa bitar av konstnärens arbete. Se till att dina bilder är högkvalitativa och talar för sig själva utan att behöva ytterligare text.

exempel 12: Mix Design Collective

Mix Design Collective är ett designföretag. Eftersom deras arbete är mycket visuellt är det vettigt att öppna webbplatsen med navigeringen och en bildreglage direkt nedan.

bildspelet har en blandning av bilder, från kök till badrum och vardagsrum, så besökarna får en uppfattning om kollektivets designstil och tjänster.

jämförelse karuseller

reglagen fungerar bra när användarna behöver för att snabbt skanna igenom en mängd olika innehåll eller produkter. Detta är exakt fallet när människor jämför objekt. Låt oss ta en titt på några exempel.

exempel 13: Amazon

förmodligen kommer det mest kända jämförelseexemplet från Amazon. På varje produktsida hittar du en karusell med alla relaterade produkter du kan köpa också. I det här fallet är en skjutreglage effektivare än statiska bilder, eftersom det gör det möjligt för användare att snabbt bläddra igenom många liknande produkter.

Vad är din ta på webbplatsen karuseller?

som du har läst kan webbreglage vara ett ja tack eller ett tack nej. Allt beror på hur elementet används i din webbdesign och hur användarvänligt skjutreglaget är att navigera. Se till att varje bild tjänar ett tydligt syfte och den övergripande användarupplevelsen är stor. Om du med säkerhet kan säga att en skjutreglage är det bästa elementet för att visa innehållet, är du bra att gå.