Draaien in de carrousel

Een carrousel, die kennen we allemaal nog van vroeger toen we er in de kermis een paar rondjes in mochten zitten. Je koos zelf waar je op wilde; een mooi versierd paard of een auto met een los stuurtje. Zo maakte je de rondjes met een suikerspin in je hand. Omstanders zagen kinderen glimlachend voorbij komen. Alle ouders en grootouders genoten van zoveel enthousiasme en plezier.

Als buitenstaander of toeschouwer hoef je alleen maar te kijken naar alles wat in de carrousel aan je voorbij trekt. Het werkt precies zoals de carrousels op het web. Ook met de carrousels op het web trekken producten op deze manier aan je voorbij, de afbeeldingen, de herhaling.

Ontwerpers passen steeds vaker digitale carrousels toe om producten te promoten. Net als in de echte wereld heeft de digitale carrousel een hoog entertainment gehalte. Door de visuele weergave en bewegende overgang eist het alle aandacht op. Denk maar aan een TV die in de woonkamer aan staat. Het is dan knap lastig om er niet naar te kijken en ondanks alles aandacht aan je vrienden of partner te geven.

Het is oppassen met een digitaal carroussel omdat je de aandacht afleidt van de overige content op de webpagina, buiten de carrousel. Een carrousel is dominant en een krachtig middel om hapklare informatie aan je bezoekers voor te leggen. Voorzichtigheid bij het ontwerpen is geboden.

Een onmiskenbaar voordeel van de carrousel is dat je een groot aantal call-to-actions met visuele ondersteuning op een klein oppervlak kan aanbieden. Daarnaast kost het voor de bezoeker weinig inspanning, hij hoeft niet eens zijn ogen te bewegen. Hij kan zijn locus (locatie van focus) simpel­weg bevriezen.

Deze blog gaat er over hoe je zo’n carrousel gebruiksvriendelijker kan maken.

Plaats knoppen aaneensluitend

Vaak zie je vorige en volgende als knop ver uit elkaar staan. Door de knop ‘vorig’ links en de knop ‘volgend’ rechts te zetten maak je de manier van navigeren in een carrousel intuïtief.

Nou geven de pijltjes in de knoppen op zich al voldoende informatie over de functie. Zet daarom de knop ‘vorig’ links en de knop ‘volgend’ van een carrousel gewoon dicht tegen elkaar, naast of onder elkaar. Het is juist extra fijn om zo min mogelijk met de muis te hoeven bewegen, net zoals bij de knoppen van je webbrowser en de scroll­knoppen in Mac OS X. Een bij­komend voordeel is minder oogbewegingen, minder ‘visueel zoeken’ naar de knoppen.

Laat zien dat er meer is

Er zijn een aantal subtiele trucs om visueel de bezoekers te instrueren hoe zo’n carrousel werkt en dat er meer is. Bijvoorbeeld door de vorige en de volgende dia gedeeltelijk aan de linker en respectievelijk aan de rechter kant te laten zien. Een andere oplossing hiervoor is de dia’s heel kort tijdens het laden, te laten bewegen. Net alsof ze in beeld komen schuiven.

Pijltjes zijn voldoende

Ik adviseer altijd om labels bij iconen te gebruiken. Gebruikers begrijpen vaak iconen niet of niet goed. Ervaring, cultuur en achter­grond bepalen namelijk of je de iconen herkent en begrijpt. Iconen zijn nooit bedoeld voor beginners, maar voor experts omdat experts ze op de juiste manier weten te herkennen. Experts kunnen daardoor visueel de user interface afscannen.

Voor pijltjes bestaat de uitzondering. Iedereen is vertrouwd met de werking van pijltjes op knoppen. Je weet zeker dat al je bezoekers experts zijn op het gebied van deze iconen, ze gebruiken immers ook de back en forward knop van de webbrowser. Daarom zijn labels voor dit soort knoppen overbodig en adviseer ik om hier, juist de labels achterwege te laten.

Markeer ‘einde’ en ‘begin’

Soms scroll ik door een lange carrousel om te kijken of er iets interessants tussen zit. Zeker met lange carrousels waarin de verschi­llende dia’s op elkaar lijken (e.g. producten uit dezelfde product­categorie) is het lastig om op te merken dat je de hele carrousel rond bent geweest en je een keuze moet maken. De carrousel herhaalt zich natuurlijk oneindig.

Een oplossing hiervoor is dat je in de carrousel een subtiele scheiding aangeeft tussen de laatste en eerste dia; een consistent herken­nings­punt. De gebruiker hoeft niet meer bij te houden welke hij al gezien heeft. Je verwijdert een extra cognitieve belasting en laat de gebruiker op zijn doel focussen.

Stop automatisch scrollen tijdens hover en focus

Je kunt een carrousel automatisch laten scrollen zodat je zeker weet dat de gebruiker meer ziet dan alleen de eerste dia. Echter zodra de gebruiker met de muis boven de carrousel beweegt mag de carrousel niet verder gaan. De muis geeft vaak aan waar gebruikers op dat moment mee bezig zijn en op focussen. Het is heel vervelend voor je als klant, als een product waar je beter naar wilt kijken, verdwijnt.

Knoppen vormgeven

Voor meer over het ontwerpen van knoppen van een carrousel verwijs ik je naar twee van mijn eerdere blogs: Knoppen en Knopstanden; en Hiërarchie van Knoppen.

Bart van de Biezen

Bart van de Biezen

Als cognitief ergonoom bij Aan Zee Communicatie, onderzoek, ontwerp, spreek en schrijf ik over user interfaces en usability. M'n achtergrond: Industrieel Ontwerpen en daarna Psychologie aan de Universiteit Twente, afgestudeerd bij Philips op midair pointing voor een nieuwe generatie TV's, Apple Design Award voor CSSEdit, usability onderzoeker bij MetrixLab en blogger.