User Experience

Interacties die de User Experience van je website verbeteren

Gebruikerservaring, ook wel User Experience of afgekort UX genoemd, is iets waar wij rekening mee houden bij het ontwerpen en bouwen van websites. Websites moeten, naast mooi, ook gewoon heel goed bruikbaar zijn. Ze moeten een goede indruk achterlaten bij de doelgroep. Door gebruik te maken van animaties (micro-interacties) verbeteren wij de UX van websites.

User Experience

Hieronder staan een aantal voorbeelden van deze micro-interacties:

  1. Menu
    Het menu is een heel belangrijk onderdeel van een website. Het moet daarom een gebruiksvriendelijk en een duidelijke structuur hebben. Animaties kunnen hierbij helpen. Denk bijvoorbeeld aan een hover. Dit is de reactie die je krijgt wanneer je met je muis over een object heen gaat. Zie hieronder.UX Menu animatie
  2. Button
    Buttons zijn ook erg belangrijk voor een website. Ze vallen op en moeten de klant uitdagen om er op te klikken. Het is daarom belangrijk dat het voor de klant duidelijk is waar de knop naartoe leidt. Door middel van een animatie kun je duidelijker maken dat de button klikbaar is.UX button animatie
  3. Linkjes
    Om linkjes op te laten vallen in een tekst is het belangrijk om deze een contrasterende kleur te geven. Ook met animaties kun je linkjes op laten vallen. Als de gebruiker met de muis over een linkje gaat, kan deze van kleur veranderen en daardoor feedback geven.
    UX link animatie
  4. Hover boxes
    Bij het bekijken van een website zijn hovers constant aanwezig. Hovers wekken interesse, omdat er een reactie is op de input van de gebruiker. Zie bijvoorbeeld onderstaand voorbeeld waar je kunt klikken op een case.UX hover box animatie
  5. Mobiele animaties
    Deze animaties komen minder vaak voor, maar nu 52% van alle websites worden bezocht via de mobiel, worden ze steeds belangrijker. Een voorbeeld van een mobiele animatie is het openen van een mobiel menu.UX mobiel menu animatie
  6. Inladen van Elementen
    Het inladen van elementen gebeurt op elke website. Wanneer hier een animatie aan wordt gebonden, valt dit extra op en dat geeft de bezoeker interesse in het element. Dit kan bijvoorbeeld zoals in onderstaand voorbeeld, waar je voorbij scrollt en de stappen verschijnen.UX loading animatie
  7. Toggles
    Soms heb je op een pagina een te groot stuk tekst, waardoor de tekst niet overzichtelijk is en het niet mooi oogt om deze meteen te tonen. Een toggle kan hierbij helpen. Een toggle is een soort button die uitklapt en waar tekst onder verborgen zit. Het effect wat een toggle heeft, is ook een micro-interactie.

    UX toggle animatie
  8. Formulieren
    Bij formulieren geldt hetzelfde als bij de toggles. Soms kunnen formulieren heel groot zijn en is het handig om de velden op te splitsen in meerdere delen van het formulier. Dit zorgt ervoor dat de gebruiker stapsgewijs door het formulier wordt geleid.UX formulier animatie

Micro-interacties geven websites de finishing touch en verbeteren de User Experience. Daarnaast zijn micro-interacties ook elementen op een website die je onderscheidt van je concurrent en je website uniek maakt.

Wil je meer informatie over hoe wij jouw website zouden verbeteren met interacties? Laten we hierover brainstormen! Neem vrijblijvend contact met ons op.

Sam van den Houten.

Sam is developer bij Cherry communicatie. Begonnen als stagiair en nu volledig onderdeel van het team. Sam komt iedere dag met de trein vanuit het verre Nijkerk naar Amsterdam Noord om Cherry communicatie te versterken. Veel reizen dus. Gelukkig zijn verre reizen niks nieuws voor Sam, hij heeft in zowel 2018 en 2019 Midden-Amerika opgezocht met zijn veel te grote backpack. Buiten het beklimmen van vulkanen en lange vluchten om, vindt hij het ook leuk om te fotograferen en eindeloos series te kijken.
Circle bg