WP Brothers

vraag een offerte aan

- of -

bel 030 737 09 02

Wat zijn micro-interactions en micro-animations?

Als je de wereld van het webdesign induikt, zul je de termen micro-interaction en micro-animation tegen komen. Door er gebruik van te maken verbeter je de gebruikerservaring van je website. Maar wat zijn nu precies micro-interactions? Hoe helpen ze de gebruiker van je website? En zijn micro-interactions precies hetzelfde als micro-animations?
micro-interaction, micro-animation

Wat is een micro-interaction?

Micro-interactions zijn kleine momenten van interactie die ingebouwd zijn in websites en apps. Denk aan het drukken op de playknop bij een YouTube-video of de mededeling ‘Transactie wordt verwerkt’ op de website van je bank. Elke micro-interaction richt zich op slechts één taak. Het kan gaan om een call-to-action, maar ook om feedback over data-input (‘E-mailadres is een verplicht veld’) of feedback over de status van het systeem (‘Upload 95% complete’). 

 

Wat is een micro-animation?

Een micro-animation is een kleine, functionele animatie die de gebruiker helpt, bijvoorbeeld door visuele feedback te geven of veranderingen weer te geven. Denk aan een vinkje in beeld om weer te geven dat een download geslaagd is, of een toggle om aan te geven dat een bepaalde functie aan of uit staat. 

Vaak wordt de term micro-animation gebruikt als een synoniem voor micro-interaction, maar dat is niet helemaal waar. Als je over jouw scherm swipet, is dat een micro-interaction, waar geen animation aan te pas is gekomen. Micro-animations zijn echter wel altijd micro-interactions en ze worden steeds meer gebruikt. Dat komt omdat ze heel veel uit kunnen leggen zonder een woord te gebruiken. Zeker voor mobiele websites waar de schermruimte beperkt is, is dat erg handig.

 

Waarom micro-interactions en micro-animations?

micro-interaction download complete, micro-animation proces

Micro-interactions vormen de brug tussen User Interface (UI) en User Experience (UX). Het is de plek waar design en functionaliteit elkaar ontmoeten. Ze zorgen dat een website comfortabel te gebruiken is en geven de gebruiker de mogelijkheid tot interactie. Je hebt er waarschijnlijk vaak mee gewerkt, maar dit niet altijd gemerkt.

Dit komt doordat goede micro-interactions niet disruptief zijn. Ze maken juist een vloeiende en intuïtieve navigatie over de website mogelijk, bijvoorbeeld door de mogelijkheid om te swipen. Dat is een actie die je uitvoert zonder erbij na te denken. Let wel: een goede micro-animation trekt wel de aandacht, zoals de like-button op sociale media.

Een belangrijk voordeel van micro-interactions en micro-animations is dat ze de gebruiker feedback geven over hun acties. Heb ik op deze knop geklikt? Loopt mijn upload? Is het formulier verzonden? Is deze functie actief? Het zijn allemaal zaken die heel makkelijk met een vinkje bevestigd kunnen worden. Deze feedback visualiseert ook het proces (upload loopt) en de resultaten (upload compleet) van de acties en voorkomt daarmee gebruikersfouten, zoals het dubbel versturen van een formulier.

Daarnaast stimuleren de interacties en animaties ook betrokkenheid van de gebruiker. De gebruiker kan het proces volgen en wordt beloond met feedback. Maar de betrokkenheid gaat verder dan dat. Micro-animations zoals like- en deelknoppen stimuleren ook dat gebruikers op een ander niveau een interactie met de content aangaan.

 

Hoe maak ik een goede micro-animation?

Een micro-animation bestaat uit een trigger, rules en feedback, aangevuld met loops en modes.

De trigger is een signaal dat de micro-animatie in gang zet. Dit kan zowel door een handeling vanuit een gebruiker als door het systeem. Het is voor de gebruikerservaring belangrijk dat animatie duidelijk aangeeft wat er gaat gebeuren. Dat kan door een intuïtief ontwerp dat aansluit bij de verwachtingen van de gebruiker. We herkennen bijvoorbeeld allemaal een play-knop en het zou gek zijn hier een andere animatie voor te gebruiken. Denk ook na over het gebruiksgemak. Een toggle is handig op een touchscreen, maar minder handig op een desktop.

De rules of regels geven aan wat de reactie is op de trigger. “Als de gebruiker op deze knop drukt, wordt hij doorverwezen naar deze pagina.” Dit verwerk je uiteraard in de code, maar bij langere processen is het ook handig om de gebruikers zelf op de hoogte te houden van wat er gebeurt. Denk bijvoorbeeld als een mededeling als “U wordt nu doorverwezen naar de site van uw bank” tijdens een betalingsproces.

Met de feedback laat je vervolgens weten wat er gebeurd is. Is het formulier verzonden? Is de inschrijving compleet? 

De loop bepaalt de lengte van de interactie, de eventuele herhaling en eventuele verandering na verloop van tijd. Denk bij herhaling bijvoorbeeld aan het afspelen van een geluid als een bericht na een uur nog niet gelezen is en bij verandering aan het aanpassen van de locatie van een app die de weersvoorspelling doorgeeft.

 

Meer weten over micro-interactions?

Ben je benieuwd hoe je met micro-interactions en micro-animations de UX van je website kan verbeteren? Neem contact op met WP Brothers! We denken graag met je mee.

Wil je meer weten over webdesign? Lees dan ook de andere blogs op WP Brothers. In dit blog over paper prototyping kom je bijvoorbeeld te weten hoe je op een snelle manier op ideeën voor een functioneel ontwerp voor je website komt, die ook direct kan verbeteren.

sjors, werknemer, wordpress brothers

Sjors

lekker snel whatsapp-en
altijd bereikbaar via
van 9.00 tot 17.30

Whitepaper

Hoe maak je een goede website?

Download whitepaper

He Marketeer,

Waar dien je rekening mee houden als je een nieuwe website gaat realiseren? Wij helpen je graag. 

Groeten WP Brothers

Cookies op WP Brothers
Wij en derden gebruiken cookies op onze website. We gebruiken cookies voor statistische, voorkeur en marketing doeleinden. Google Analytics cookies zijn geanonimiseerd. Je kan je voorkeuren wijzigen door op ‘Verander opties’ te klikken. Door op ‘Accepteren’ te klikken accepteer je het gebruik van alle cookies zoals beschreven in onze privacy-statement.
Noodzakelijk
Noodzakelijke cookies helpen een website bruikbaarder te maken, door basisfuncties als paginanavigatie en toegang tot beveiligde gedeelten van de website mogelijk te maken. Zonder deze cookies kan de website niet naar behoren werken.
Voorkeur
Voorkeurscookies zorgen ervoor dat een website informatie kan onthouden die van invloed is op het gedrag en de vormgeving van de website, zoals de taal van uw voorkeur of de regio waar u woont.
Statische
Statistische cookies helpen eigenaren van websites begrijpen hoe bezoekers hun website gebruiken, door anoniem gegevens te verzamelen en te rapporteren.
Marketing
Marketingcookies worden gebruikt om bezoekers te volgen wanneer ze verschillende websites bezoeken. Hun doel is advertenties weergeven die zijn toegesneden op en relevant zijn voor de individuele gebruiker. Deze advertenties worden zo waardevoller voor uitgevers en externe adverteerders.
Verander opties