5 redenen waarom micro-interacies de UX verbeteren

UX times

5 redenen waarom micro-interacies de UX verbeteren

Door Lotte Bijl, Lead UX developer @onlinedept

Een goede user interface beperkt zich niet tot tekst, icoontjes of opvallende kleuren om aan te geven hoe je de website of app gebruikt. Met micro-interactie kun je net extra aandacht vragen van de gebruiker. Een micro-interactie is een subtiele animatie die feedback geeft aan de gebruiker.

Al op vroege leeftijd ben ik begonnen met het maken van animaties. Dat begon met een ‘marquee’ en ‘blink’ en groeide uit tot ‘header carousels’ en ‘accordeons’. In de jaren als front-end developer bij Online Department ben ik steeds meer de zin en onzin van animaties leren begrijpen.

Goed design heeft persoonlijkheid: de interacties voelen menselijk en intuïtief aan. Met subtiele micro-interacties bespaar je niet alleen veel ruimte op het scherm, het draagt ook bij aan deze menselijke ervaring en laat je website of software applicatie écht tot leven komen. Het zorgt ervoor dat mensen je product graag en langer willen gebruiken. Hier onder vijf redenen hoe micro-interacies bij kunnen dragen aan de beleving van je website.

1. ANIMATIE MAAKT VAN EEN WEBSITE EEN BELEVING

Een website zonder animaties is zoals een auto zonder stuurbekrachtiging. Je kunt prima rijden en inparkeren, maar echt prettig is het niet. Je houdt de gebruiker als het ware tegen om soepel en probleemloos door een website te gaan. En dat is toch waar je uiteindelijk naartoe wilt om de bezoeker datgene te laten doen waarvoor je de webpagina hebt ontworpen.

 

2. ANIMATIES HEBBEN MINDER PIXELRUIMTE NODIG

Als ontwerper wil je dat informatie voor de gebruiker duidelijk is zonder dat je daar veel stilistische elementen voor moet inzetten. Onthoud dat functionele elementen niet altijd een vaste positie hoeven te hebben en altijd zichtbaar moeten zijn. Ze kunnen ook getimed worden, zodat ze zichtbaar worden op het moment dat de gebruiker het wilt zien.

Door elementen alleen op het juiste moment zichtbaar te maken, versimpel je de interface. Een onderliggend element wordt bijvoorbeeld geïntroduceerd als de gebruiker er met zijn muis overheen gaat. Dan maak je gelijk duidelijk waar een element voor staat en weten gebruikers waar ze bijvoorbeeld een menu kunnen vinden. Door het element op één plek te laten transformeren, hoeft de gebruiker minder informatie te verwerken.

 

3. ANIMATIE VERSIMPELT COMPLEXE INFORMATIE

Naast dat je complexe informatie kunt versimpelen, neemt een animatie ook minder ruimte in beslag op de website. Die ruimte ontstaat doordat alle relevante informatie op één plek verschijnt. Denk bijvoorbeeld aan animerende infographic of screencast. De animatie vervangt de zware how-to-video’s, waarvoor de gebruiker ook nog een extra handeling moet verrichten, namelijk het aanklikken van de ‘play’ button. Met een gifje wordt wel de informatie getoond, maar houd je je website licht.

 

4. MET ANIMATIES BEGELEID JE DE GEBRUIKER

Met animatie kun je de aandacht vragen van de gebruiker. Ga af op intuïtie, een subtiele bounce kan als seintje al voldoende zijn om de gebruiker te laten weten dat hij iets met het element kan doen.

 

5. MET ANIMATIES GEEF JE FEEDBACK AAN DE GEBRUIKER

Met de juiste bewegingen en timing kun je de gebruiker feedback geven dat hij een actie goed heeft uitgevoerd zonder naar een hele nieuwe pagina te laden. Je kunt dat realiseren door de submitbutton dynamisch te laten veranderen in een vinkje. Het is een simpel icoontje, maar de gebruiker weet precies wat je bedoelt en wordt bevestigd in zijn handeling.

Het is onze missie om een menselijke ervaring te creëren. Dat gaat verder dan alleen een klikbare, digitale versie van het opgezette ontwerp. Het toepassen van deze micro-interacties is geen afterthought meer, het zit embedded in de workflow.

Animaties maken een website of -shop fijner om naar te kijken en te gebruiken. Het zijn de details die een ervaring van een 7 naar een 9+ trekken. Je maakt het voor jezelf ook een stuk aantrekkelijker: je website wordt lichter, je kunt gebruikers meer sturen naar de gewenste handeling en het is in sommige gevallen zelfs award winning. Dat vraagt nu wellicht wat extra van je budget en tijd, maar uiteindelijk betaalt het zich allemaal terug.

Met subtiele micro-animaties kun je een website of software applicatie écht tot leven laten komen

Lotte Bijl Lead UX developer — Online Department

Meld je aan voor onze (onregelmatig verschijnende) nieuwsbrief vol UX goodies!

Jouw gegevens worden niet gedeeld met derden en alleen gebruikt voor onze mailinglist.

Lees ook

Machiel Oskam

Machiel Oskam

UX Expert — E-Health

UX spreekuur

Maak een afspraak met mij om te sparren over jouw UX uitdagingen. Ik ben gespecialiseerd in digitale strategie voor de lange termijn waarbij een meer klantgerichte transitie in gang worden gezet. Ik word enthousiast van alles omtrent Human capital, e-learning en Saas software. Ik stuur je een email om een tijdstip in te plannen.

Contact

Haal meer uit je software en digitale business.

Neem contact met ons op over:

Beschikbaarheid UX expert teamUX design projectUX expert reviewIncompany training of workshop

Bedankt, je bericht is verstuurd!

Tamara neemt contact met je op.

Tamara

Algemene informatie


info@onlinedepartment.nl

Worskhops & Masterclasses


events@onlinedepartment.nl

MAASHAVEN ZUIDZIJDE 2

3081 AE ROTTERDAM

010 - 8911051 Plan Je Route

Algemene informatie


info@onlinedepartment.nl

Worskhops & Masterclasses


events@onlinedepartment.nl