Heb jij een carrousel op je website? Check of je ‘m goed hebt ingezet

Vraag een groep designers of een carrousel op je website een goed idee is en er ontstaan sowieso twee kampen. Maar wat zijn de argumenten van die fanatieke tegenstanders én voorstanders eigenlijk?

Wat is een carrousel?

Een carrousel is een manier om tekst, illustraties, afbeeldingen of video’s op een interactieve manier te bundelen. Je kent ze vast wel van productfoto’s als je online iets wil bestellen, of als je je vergaapt aan een mooi huis op Funda.

Carrousels kun je op veel verschillende manieren vormgeven. Een van de belangrijkste verschillen (voor de gebruiker) is of de carrousel automatisch beweegt of dat de gebruiker zelf bepaalt wanneer een andere slide zichtbaar wordt. We komen later in dit artikel terug op de invloed van deze keuze.

Waarom een carrousel niet handig is

Wat noemen de tegenstanders van carrousels als argumenten? We noemen drie redenen waarom een carrousel niet handig is:

  1. Carrousels zorgen voor banner blindness
  2. Carrousels voegen (te veel) complexiteit toe aan je website
  3. Relevante informatie verdwijnt uit het zicht

1. Banner blindness

Alleereerst de banner blindness. Dit heeft te maken met het feit dat gebruikers geen interesse hebben in advertenties, die filteren ze ‘automatisch’ weg. Uit eyetracking onderzoek blijkt bijvoorbeeld dat als er vaak advertenties boven in beeld staan, gebruikers simpelweg niet meer die kant op kijken. Ook niet als er een prachtige carrousel staat. Carrousels worden sowieso vaak genegeerd, omdat ze lijken op advertenties.

Een specifiek kenmerk van een carrousel dat tot banner blindness kan leiden is als de carrousel automatisch langs de slides beweegt. Gebruikers willen zelf de controle houden over wat zij zien. Een automatische carrousel leidt daardoor vaker tot een negatieve gebruikerservaring of tot het compleet negeren van de carrousel.

2. Meer complexiteit

Carrousels kunnen onnodige complexiteit toevoegen aan je website. Zowel voor de gebruiker als voor degene die de website onderhoudt. Zo kan voor de gebruikers de navigatie verwarrend zijn, de tekst te klein, de afbeeldingen onduidelijk of de snelheid te hoog (bij automatische carrousels).

Maar ook een prachtige, goed opgebouwde carrousel kan de gebruiker verwarren. Als die prachtige carrousel er (te veel) uitspringt, is de gebruiker afgeleid en onderbreekt dit de natuurlijke flow van de gebruikerservaring.

Daarnaast voegt een carrousel ook complexiteit toe bij het onderhouden van een website. Afhankelijk van de vormgeving heb je bijvoorbeeld (meerdere) foto’s nodig van hoge kwaliteit. Dit betekent dat je voldoende professionele foto’s beschikbaar moet hebben en dat je dit niet gemakkelijk zelf aanvult met een eigen foto. Wanneer je geen carrousel hebt, kun je een banner bijvoorbeeld vullen met één professionele foto.

3. Informatie verdwijnt

Dit is misschien wel het allergrootste probleem van een carrousel; informatie verdwijnt als de gebruiker niet klikt. Als er op slide 2, 3 of 4 belangrijke of relevante informatie staat, dan ontstaat er een probleem als de gebruiker niet klikt. Waarom zou je dan een carrousel willen gebruiken, als er toch geen belangrijke informatie in mag staan? Hou nog even vol, daar komen we nu op.

Situaties waarin een carrousel wel mag

Als er alleen maar nadelen aan carrousels zouden zitten, dan is het gek dat je ze nog op zoveel plekken tegen komt. Er zijn dan ook situaties te bedenken waarin een carrousel wel voordelen biedt. We noemen er drie:

  1. Als je de aandacht wil trekken door specifieke content te accentueren.
  2. Als je de onderlinge relatie tussen verschillende soorten content zichtbaar wil maken.
  3. Als je de gebruiker wil helpen bij het navigeren.

1. Specifieke content accentueren

Een carrousel helpt je om specifieke content te benadrukken, zoals reviews of testimonials. Schermbrede carrousels met professionele foto’s, trekken de aandacht en kunnen adembenemend mooi zijn. Handig als je bijvoorbeeld fotograaf bent.

2. Onderlinge relatie zichtbaar maken

Een carrousel is een interessante optie als je de relatie tussen bepaalde content duidelijk wil maken. Die relatie is namelijk meteen zichtbaar. Dit zie je bijvoorbeeld bij carrousels met ‘gerelateerde producten’, ‘onze laatste projecten’ of ‘dit zijn onze klanten’. Maar ook bij productpagina’s waar verschillende (detail) foto’s van een product aan elkaar verbonden zijn. Op deze manier weet je zeker dat je nog naar hetzelfde product kijkt.

3. Hulp bij navigeren

Als je de carrousel nauwkeurig ontwerpt, kan het de gebruiker helpen bij het navigeren op een website. Je bundelt immers informatie, waardoor het gemakkelijker is om te scannen wat er op de pagina staat. Bovendien houd je ruimte over voor relevante informatie die niet in de carrousel thuishoort.

Om de navigatie te verbeteren is het wel een voorwaarde dat de UI elementen van de carrousel intuïtief en overduidelijk zijn. Een andere voorwaarde is dat de gebruiker de controle houdt; geen automatische slides dus. Daarnaast helpt het als het duidelijk is waarom er uberhaupt een carrousel is, wat daarin te zien is en hoeveel slides er nog komen.

Zo maak je een carrousel gebruiksvriendelijk

Bezoekers kijken niet zo gek lang op een pagina, gemiddeld net iets minder dan een minuut. In die tijd jagen ze de pagina er doorheen en lezen ze ongeveer een kwart van wat daarop staat. Als je wil dat ze deze kostbare tijd besteden aan interactie met jouw carrousel, dan moet je ervoor zorgen dat mensen ook zien dat het een carrousel is. Er zijn een aantal basisonderdelen waaraan je dit kan zien:

  • Container: dit is de plek in de lay-out waar de carrousel is geplaatst.
  • Slides: dit zijn de verschillende content onderdelen, zoals foto’s, video’s, teksten, etc.
  • Navigatie: dit zijn de UI elementen die het mogelijk maken om van de ene slide naar de andere te navigeren. Denk aan: knoppen met tekst, pijlen, stippen, of andere symbolen.
  • Animatie: veel carrousels bevatten een soort effect of animatie om het bewegen van de ene naar de andere slide zichtbaar te maken.

Als je wilt dat de gebruiker interactie heeft met jouw carrousel, dan is het belangrijk dat de navigatie duidelijk en intuïtief is. Het helpt ook als je zichtbaar maakt hoeveel slides er nog zijn. Daarbij geldt: hoe minder slides, hoe groter de kans dat ze bekeken worden.

Desktop of mobiel: maakt dat nog verschil?

Responsiveness is in alle gevallen belangrijk, dus ook bij een carrousel. Maar bij een carroussel is het nog net iets lastiger om het goed te laten werken op alle apparaten. Een belangrijk punt hierbij is de navigatie. Is die swipefriendly? Wanneer je voor kleine bolletjes hebt gekozen en je deze ‘mee laat schalen’, wordt het op mobiel namelijk wel erg priegelig om te navigeren. Maar ook de leesbaarheid van de slides is relevant en in hoeverre je nog het overzicht hebt op de rest van de website (en je dus niet alleen maar een carrousel ziet). Het is belangrijk om hier in je ontwerp al rekening mee te houden én om dit uitvoerig te testen.

Soms nuttig, vaak overbodig

Na het lezen van alle voor- en nadelen is onze conclusie dat carrousels soms erg nuttig zijn. Denk aan een carroussel met logo’s van klanten, productfoto’s in een webshop, of de portfolio van een fotograaf. Maar de eerlijkheid gebied te zeggen dat bij de meeste andere onderdelen van een website, een carrousel weinig toevoegt. En daardoor soms zelfs meer kwaad doet dan goed.

Mocht je besluiten dat jouw website wél echt een carrousel nodig heeft, vergeet dan niet om het nauwkeurig te ontwerpen, te analyseren en te implementeren. We helpen je graag met een eerlijk advies en bij het toepassen van de best practices.

Deel dit blogbericht via