Skip to contentSkip to footer

Soms heb je van die dagen waar niets lijkt te lukken. Je wordt constant afgeleid door anderen, springt de hele tijd van hak op tak zonder iets af te ronden, en aan het einde van de dag zit je met een onvoldaan, gefrustreerd gevoel. Even iets op het internet opzoeken werkt soms op een vergelijkbare manier. Het lukt maar niet om datgene te vinden wat je wilt. Hoe komt dit? 

Voor beide ervaringen gelden dezelfde achterliggende mechanismen. Ook zijn er heel wat mogelijkheden om dit proces in goede banen te leiden. Hoe bezorg je bezoekers van jouw website een prettige ervaring? En vooral, hoe zorg je ervoor dat zij makkelijk en moeiteloos datgene kunnen vinden waar ze naar op zoek zijn? 

Een visuele taal als basis

Om bij het begin te beginnen, het eerste dat duidelijk moet worden is wat er gecommuniceerd moet worden op de website. De vragen die hieraan ten grondslag zitten maken deel uit van het ontwerpproces: 

  • Wie is de doelgroep? 
  • Wat voor informatie zoekt die doelgroep? 
  • Wat is de meest effectieve manier om met de doelgroep te communiceren?

Wanneer het ontwerp op orde is, is ook het fundament gelegd. Dan is er als het ware een gereedschapskist beschikbaar gesteld. Niet elke nieuwe pagina of element hoeft dan visueel uitgewerkt te worden. Het is aan de hand van de bestaande ontwerpen vaak al prima voor te stellen hoe dat nieuwe element er ongeveer uit zou moeten zien. 

Uitlichten wat belangrijk is

Met het fundament op zak kan de aandacht verlegd worden naar het verder inkleuren van het geheel. De algemene richting is bekend, nu gaat het erom datgene uit te lichten wat belangrijk is voor de bezoeker. 

Hierbij is het belangrijk om te begrijpen hoe een gebruiker een website “leest”. Wanneer je voor het eerst een nieuwe omgeving bezoekt, ben je vooral bezig met om je heen te kijken. Door je omgeving te scannen begin je een mentale overzichtskaart te vormen en te begrijpen wat waar te vinden is. Dit werkt heel anders, dan bijvoorbeeld, het lezen van een boek. 

In veel opzichten is dit vergelijkbaar met het lezen of begrijpen van een plattegrond. Waar is het treinstation? Hoeveel kilometer tot de bestemming? Welke route volgt de bus? Bij een goed ontworpen plattegrond komt deze complexe informatie rustig over, zonder dat je het echt in de gaten hebt. De buslijn waar het om gaat is makkelijk te herkennen, maar de kaart bevat veel meer informatie dan alleen die ene lijn. 

Beeld: cartoNext.nl

Een effectieve website werkt op een vergelijkbare manier. De gebruiker voelt zich dan op zijn gemak en heeft weinig moeite met het vinden van waar hij naar zocht. Er is een bijna vanzelfsprekende flow. 

Interactie en animatie

Bewegende elementen kunnen dit gevoel van herkenning versterken of juist ontregelen. Dit heeft vooral te maken met context. Zolang alles overeenkomt met de mentale overzichtskaart van de bezoeker is de ervaring dat dingen kloppen. De gebruiker weet dan vanzelf wat waar te vinden is. 

Een voorbeeld van een storende interactie is een pop-up die op een min of meer willekeurig moment tevoorschijn springt, bijvoorbeeld een uitnodiging om je in te schrijven voor een nieuwsbrief. Datgene waar je als gebruiker mee bezig was, wordt plots onderbroken en er wordt afgedwongen dat er een interactie plaatsvindt met iets waar je niet naar op zoek was. De context is zoek. 

Een voorbeeld van een behulpzame interactie is de autosuggest functie van Google. Voordat deze werd geïntroduceerd moest je eerst zoektermen intypen, op een submit knop drukken, en de resultaten afwachten. Telkens een kleine onderbreking van de flow. Met autosuggest heb je de resultaten meteen paraat. Als gebruiker geeft je dit het gevoel dat er wordt geanticipeerd op wat je aan het doen bent.  

Soepele overgangen helpen ook bij het behouden van context. Een voorbeeld is hieronder te vinden. De informatie waar het om gaat, is makkelijk te herkennen, wordt stapsgewijs gepresenteerd én behoudt vooral een logische context. De gebruikte animaties ondersteunen dit proces op een bijna onzichtbare manier. Objecten veranderen vloeiend van vorm in nieuwe objecten en de gebruiker begrijpt altijd wat er aan het gebeuren is en wat hij moet doen. 

Codepen by Sarah Drasner

Animatie van Sarah Drasner - https://codepen.io/sdras/pen/qOdwdB

Tevreden gebruikers

Net als bij het lezen van een kaart gaat het er bij een gebruik van een website om dat de gebruiker makkelijk de weg kan vinden. Dit is niet vanzelfsprekend, maar het is wel iets wat zonder meer te beïnvloeden valt. Een ontwerp wat goed aansluit op de doelgroep én slim gebruik van animaties kan dan het verschil maken tussen een frustrerende of een prettige ervaring. Daarvoor zullen de bezoekers van jouw website je dankbaar zijn. 

Heeft jouw website de juiste balans in ontwerp en animatie? Of merk je dat bezoekers slecht kunnen vinden waar ze naar zoeken en direct jouw website weer verlaten? Ik kijk graag samen naar hoe we jouw website kunnen optimaliseren voor bezoekers. 

Vragen over het ontwerp van jouw website?

Ik help je graag!

Bart Hendrix

Front end Developer