Website carrousel sliders: waarom, hoe en wanneer ze te gebruiken (inclusief 13 voorbeelden)

laten we het hebben over website carrousels, aka sliders, aka slideshows, aka galeries.

het lijkt alsof het hele internet zijn eigen variatie heeft, maar gezamenlijk bedoelen we allemaal dat het ontwerpelement met de bewegende inhoud en vaak, drie kleine puntjes op de bodem toont.

als het om carrousels gaat, zit je in team 👏 of team 🙅. Het eerste team omvat meestal de klanten, het tweede team de webdesigners.

hier bij Ycode zijn we Zwitserland. Wij geloven dat carrousels de centerpieces kunnen zijn die uw webdesign aantrekkelijker maken, maar dat ze ook het potentieel hebben om de bruikbaarheid van uw website naar beneden te slepen.

In dit artikel zullen we kijken naar carousel best practices (en wat te vermijden). Omdat carrousels voor vele gelegenheden kunnen worden gebruikt, laten we u verschillende voorbeelden zien van sliders goed gedaan.

Carousel design best practices (or mostly, what not to do)

hoewel ze op veel websites worden gebruikt, kunnen carousel designs gemakkelijk het doel missen. Er zijn een paar goede redenen voor. Laten we beginnen met een aantal dingen te vermijden voordat we u vertellen over wat carrousel best practices die u moet gebruiken.

👎 niet doen: te vermijden Carrouselfouten

1. inhoud: wanneer een carrousel te veel wil doen in te weinig tijd, kan het de ogen van websitebezoekers doen draaien. Tekst kan niet goed worden gelezen, informatie wordt gemist en bezoekers verliezen interesse.

2. ontwerp: als een slider slecht is ontworpen en niet zal opgaan in uw website ontwerp, kan het worden verward als een advertentie. Als gevolg hiervan, mensen scrollen rechts langs de inhoud. Het heet banner blindheid, een webdesign fenomeen waar mensen negeren inhoud die lijkt op een advertentie—bewust of onbewust.

3. SEO: vanuit een SEO perspectief, vermijd meerdere H1 headers als u sliders gebruiken als het eerste ding op de pagina. Elke webpagina zou één H1 in zijn HTML-code moeten hebben. Als u meerdere H1S gebruikt vanwege de verschillende dia ‘ s, kan Google verward zijn over welke zoekwoorden de belangrijkste zijn voor die webpagina. Ook is de structuur van de website mogelijk niet duidelijk. Beide factoren kunnen een negatieve invloed hebben op uw ranking.

4. Mobiel: voor mobiele apparaten is het het beste om te gaan voor handmatige schuifregelaars. Zorg ervoor dat gebaren worden ondersteund (bijvoorbeeld mobiele gebruikers vegen om de volgende dia te tonen) en dat de pijlen duidelijk worden weergegeven en groot genoeg zijn om in te drukken. Als uw dia ‘ s tekst bevatten, controleer dan of deze leesbaar is op mobiele schermen.

5. rotatie: Met onze beperkte aandachtsspanne deze dagen, is het moeilijk om de interesse van de gebruiker langer dan een paar seconden te houden. Aangezien we allemaal plaatsen hebben om te zijn, houd de slider-bedrag laag (minder dan vijf) en geef bezoekers de mogelijkheid om de carrousel te controleren door het tonen van slider controles. Dit zorgt ervoor dat mensen niet hoeven te zitten en te wachten op de volgende dia.

👍 Do’ s: Carrousel best practices

1. houd elke dia eenvoudig, zodat de informatie binnen enkele seconden kan worden verteerd.

2. Maak het ontwerp mengen in met de rest van uw website.

3. laat mensen de rotatie controleren met duidelijke pijlen.

4. hebben genoeg tijd tussen de dia ‘ s (5-10 seconden), of nog beter, sloot autoplay helemaal.

5. minder is meer (zowel qua ontwerp als qua hoeveelheid dia ‘ s).

6. vraag voordat u een carrousel invoegt: zal dit meer waarde toevoegen dan statische inhoud?

heb je twijfels?

test bij twijfel beide opties en zie welke optie een hogere conversieratio genereert. Vaak vragen klanten om slideshows omdat ze niet duidelijk zijn over de boodschap die ze in de eerste plaats willen promoten. Waarom niet alles laten zien? Ze denken.

als dat het geval is, is het werk in het maken van een meer gericht bericht—niet met behulp van een slider. Of, kies de belangrijke USP (Unieke Selling Point) en vermeld de andere verder op de pagina. Mensen hebben meer kans om te scrollen dan om te bladeren door uw dia ‘ s.

als je beslist dat het een hell ja is, kies dan met opzet elke dia. Voeg niet alleen al je nieuwe blogs of producten toe, maar kies zorgvuldig de belangrijkste inhoud die de meeste interactiviteit van gebruikers kan genereren.

13 voorbeelden van carrousels voor websites

Nu u weet wat u niet moet doen, laten we eens kijken naar voorbeelden van carrousels die het nagelen. Hier zijn 13 website carrousel voorbeelden, van homepage naar product en afbeelding slideshows.

Homepage carrousels

als je dacht dat de kampen al genoeg verdeeld waren, heb je de homepage sliders nog niet ontmoet. Sommige root voor het plaatsen van hen direct aan de top (vaak te zien in blog templates), terwijl anderen niet willen dat ze ergens boven de vouw geïmplementeerd.

de reden waarom mensen vermijden om een homepage carrousel direct bovenaan te plaatsen is omdat ze vinden dat deze ruimte gereserveerd moet worden voor een duidelijke boodschap die de lezer verleidt om naar beneden te scrollen en meer te leren. Met carrousels is het moeilijk om één sterke boodschap over te brengen. Plus, je bent niet zeker of mensen zien alle dia ‘ s of scrollen recht langs.

er zijn echter ook veel mensen die graag bezoekers begroeten met een homepage carrousel om direct Uitgelichte verhalen of producten te tonen.

Voorbeeld 1: Nicole Gibbons Studio

de homepage carrousel van Nicole Gibbons Studio werkt echt goed! Dat is goed om een paar redenen.

• het heeft een goede functionaliteit en voegt waarde toe. Ontwerper Nicole toont snel verschillende interieurvoorbeelden direct wanneer mensen haar website betreden

• de dia ‘ s zijn handmatig, dus de gebruiker beslist of en in welk tempo ze willen doorbladeren

• er is geen overlapping van tekst om weg te nemen van de beelden

Voorbeeld 2: Urban Skin RX

deze compacte carrousel van Urban Skin RX is zeer toegankelijk.

het bevat twee dia’ s, beide aantrekkelijk ontworpen in dezelfde stijl als de rest van de website. De rotatietijd is lang genoeg ingesteld om de tekst te lezen. De grote lettertypen en duidelijke call to action (CTA) knoppen maken het gemakkelijk om te verteren waar de dia over gaat.

Opmerking: Als u door de homepage van het merk scrolt, zult u zien dat het is afgestemd op mensen die al bekend zijn met Urban Skin RX. De focus ligt op het presenteren van producten, zonder uit te leggen waarom iemand ze in de eerste plaats nodig heeft. Dat is de reden waarom een Product slider past op de pagina—ze hebben niet de header ruimte nodig om een duidelijke boodschap te laten zien die bezoekers motiveert om meer te ontdekken.

Voorbeeld 3: Mejuri

wat we zo leuk vinden aan deze carrousel van juwelierszaak Mejuri is dat het twee verschillende dingen tegelijk toont, zonder overweldigend te voelen.

de gehele carrousel bevat drie dia ‘ s, waarvan elk twee opties heeft—zie de campagne of winkel de sieraden. De progressielijnen zijn subtiel weergegeven aan de onderkant, hoewel je eagle eyes nodig hebt om dit te zien. Dit kan een punt voor optimalisatie zijn.

Voorbeeld 4: Fresh Brothers Pizza

wie zegt dat een slider de volledige breedte van een pagina moet overspannen? U kunt ook delen in roosters opsplitsen en kleinere sliders gebruiken, zoals op de homepage van Fresh Brothers Pizza.

toegegeven, met deze webdesign lay-out kunnen dingen een beetje veel worden. Hoewel de schuifregelaars bezoekers informatie laten zien, wordt het oog getrokken naar de grote afbeelding aan de linkerkant. Niet iedereen zal de slider informatie te zien. Echter, aangezien de informatie gaat over COVID maatregelen en nieuwe pizza ‘ s die mensen hoe dan ook zullen zien bij het maken van hun bestelling, Dit is niet een big deal.

Productcarrousels

Productcarrousels zijn er om mensen visueel aan te trekken om meer over het product te leren, en goed, hopelijk kopen!

dit soort carrousels worden gewoonlijk op een van de twee plaatsen op e-commerce sites geplaatst: de homepage of de productpagina. De slider kan verschillende producten of een product op verschillende manieren tonen (met zijn functies).

Voorbeeld 5: toetsen Soulcare

op deze Keys Soulcare productpagina wordt een carrousel gebruikt om elk item weer te geven dat is opgenomen in het Harmony ritual pakket. Een slider past perfect bij het ontwerp van de website, omdat het bezoekers alle relevante informatie laat zien zonder te hoeven scrollen.

Voorbeeld 6: KeepCup

dit product carrousel van KeepCup is geplaatst in het midden van de e-commerce site en kunt u gemakkelijk bladeren door de meest populaire to-go cups van het merk. Let op hoe de naam, Prijs, Kopen knop en pijlen worden geplaatst-super slanke (rekwisieten aan de grafische ontwerpers).

Voorbeeld 7: Homesick

Candle company homesick gebruikt een verscheidenheid aan schuifelementen op hun e-commerce website, om hun kaarsen en reviews en citaten van merken te presenteren.

halverwege de homepage is er deze slideshow—een ontroerende galerij van hun best verkopende kaarsen (we houden van het geur concept!). Zodra u met de muis over een afbeelding slider, het stopt en een iets ander beeld wordt weergegeven (bijvoorbeeld, het tonen van de kaars krijgen ontstoken).

Voorbeeld 8: Milk Bar

de productpagina ‘s van Milk Bar zijn een genot om door te bladeren, en niet alleen omdat de foto’ s watertanden. Neem de Cheerleader web pagina hieronder, met de slider element aan de linkerkant en alle productdetails aan de rechterkant, bezoekers zien alles op het eerste gezicht.

echter, wanneer u naar beneden scrolt, ziet u interactieve banners en meer productinformatie zoals levering, ingrediënten, soortgelijke traktaties en een andere carrousel met klantbeoordelingen.

inhoud carrousels

Als u een inhoud carrousel aan uw website wilt toevoegen, moet u er rekening mee houden dat het meest waardevolle stuk inhoud in de eerste dia moet staan. De eerste dia zal altijd de meeste blootstelling krijgen, en de indrukken verminderen na elke extra dia.

Voorbeeld 9: Art Of Tea

op de onderstaande website van Art Of Tea, zie je veel verschillende dingen in één volledig scherm slider.

de opening slider is een CTA om deel te nemen aan hun affiliate programma. De volgende zijn dia ‘ s met nieuwe theeblikken, zakken, bundels en shakers. Een slide is ook gewijd aan de toetreding tot hun maandelijkse Tea club.

wat dit carrousel webdesign goed doet, is dat de afbeelding laat zien waar elke dia over gaat en dat de ondersteunende tekst tot een minimum wordt beperkt. Een ding om te verbeteren zijn de knoppen. Wanneer u knoppen kiest die alleen een omtrek hebben, is het moeilijk om ze duidelijk te zien op de afbeelding.

voorbeeld 10: Canva Design School

De Design School pagina van Canva is een goed voorbeeld van een instantie waar een carrousel effectiever is dan enig ander website-element.

omdat er veel inhoud op de landingspagina te zien is, helpt een carrousel om de verschillende cursussen compacter weer te geven. Bijvoorbeeld, de tutorial sectie hieronder neemt veel meer ruimte in vergelijking met de diavoorstelling.

Blog carousels

vele malen WordPress sjablonen voor blogs worden geleverd met een interactief schuifelement dat automatisch de nieuwste artikelen toont.

hoewel dit een geweldige functie is, moet u zich bewust zijn van welke artikelen worden getoond. Sommige zijn misschien niet zo click-worthy, maar eerst getoond in uw homepage slider, omdat ze het meest recent gepubliceerd. In dit geval is het beter om handmatig de blogs te selecteren waarvan je denkt dat ze bezoekers zullen verleiden om te klikken.

voorbeeld 11: Cococozy

Interieurarchitectuurblogger Colette Shelton opent haar blog met een slider met een selectie van haar blogs. Zodra u de muisaanwijzer over, de titel van de blog wordt weergegeven. Op mobiel wordt de foto getoond met de titel eronder.

Image carousels

Image carousels zijn vaak te zien in portfolio-achtige websites, waar het wordt gebruikt om stukken van het werk van de kunstenaar weer te geven. Zorg ervoor dat uw afbeeldingen van hoge kwaliteit zijn en voor zichzelf spreken, zonder dat er extra tekst nodig is.

voorbeeld 12: Mix Design Collective

Mix Design Collective is een ontwerpbedrijf. Omdat hun werk is zeer visueel, is het zinvol om de website te openen met de navigatie en een foto slider direct onder.

de diavoorstelling heeft een mix van afbeeldingen, van keukens tot badkamers en woonkamers, zodat bezoekers een idee krijgen van de ontwerpstijl en de diensten van het collectief.

Vergelijkingscarrousels

Sliders werken goed wanneer gebruikers snel een verscheidenheid aan inhoud of producten moeten scannen. Dit is precies het geval wanneer mensen items vergelijken. Laten we eens kijken naar enkele voorbeelden.

voorbeeld 13: Amazon

het meest bekende vergelijkingsvoorbeeld komt van Amazon. Op elk product pagina, vindt u een carrousel met alle gerelateerde producten die u ook zou kunnen kopen. In dit geval is een slider effectiever dan statische afbeeldingen, omdat het gebruikers in staat stelt om snel door veel soortgelijke producten te bladeren.

Wat vindt u van websitecarousels?

zoals u hebt gelezen, kunnen websliders ja of nee zijn. Het hangt allemaal af van hoe het element wordt gebruikt in uw webdesign en hoe gebruiksvriendelijk de slider is om te navigeren. Zorg ervoor dat elke dia een duidelijk doel dient en de algehele gebruikerservaring is geweldig. Als je vol vertrouwen kunt zeggen dat een slider het beste element is om de inhoud weer te geven, ben je klaar om te gaan.