Grote impact door middel van kleine (micro) interacties.

Micro interacties zijn eigenlijk niet zo ‘klein’ als de naam doet vermoeden. Integendeel, ze kunnen een groots effect hebben op de gebruikservaring van je product. In dit artikel willen we verder uitwijden over wat micro interacties zijn en hoe ze de gebruikservaring van jouw website naar een hoger niveau tillen.

Wat zijn micro interacties?

Micro interacties zijn kleine interactieve animaties of visuele feedback die gebruikers zien wanneer ze een bepaalde actie uitvoeren. Micro interacties worden niet alleen toegepast op websites of de apps op je smartphone maar zie je ook terug op het display van je wasmachine of de parkeerautomaat in de straat. In principe leent alles wat een scherm heeft en waar een gebruiker interactie mee kan hebben zich goed voor het gebruik van micro interacties.

Micro interacties lijken, juist wellicht omdat ze zo klein zijn, weinig impact te hebben, maar het tegendeel is waar: micro interacties kunnen enorm veel impact hebben op de psyche van een gebruiker. Ze zijn er om het leven van de gebruiker makkelijker te maken, zijn/haar ervaring te verbeteren of simpelweg om de gebruiker zich even ‘goed’ te laten voelen. Door middel van het gebruik van micro interacties zou je zelfs je product, of dit nou een website, app of iets ander is, meer menselijk en persoonlijk kunnen laten aanvoelen.

Micro interacties zijn overal om ons heen en de meeste voeren we ook uit zonder dat we dit door hebben. Denk maar eens aan hoe je je telefoon van de vergrendeling af haalt. Of dit nu een iPhone of andere telefoon is: elk heeft een eigen micro interactie om de telefoon van vergrendeling af te halen. (swipen van links naar rechts, een bepaald figuur tekenen etc.)

Een goede micro interactie zou voor de volgende doeleinden kunnen dienen:

• Een status of feedback communiceren
• Een object direct kunnen manipuleren
• Een resultaat tonen als gevolg van een actie

Hoe zet je micro interacties in?

Maar hoe zet je zo’n micro interactie dan daadwerkelijk in? Een micro interactie kun je eigenlijk in vier elementen onderverdelen. Deze onderdelen zijn niet perse zichtbaar voor de gebruiker, pas wanneer één van deze elementen ontbreekt zal de gebruiker het gevoel hebben dat er iets niet klopt aan de micro interactie.

1. Signaal

Om een micro interactie te starten moet er een ‘signaal’ zijn voor de gebruiker om de actie te initiëren. Dit kan in diverse vormen komen zoals: klikken, tappen, swipen etc. Maar ook het voltooien van een andere actie kan een signaal zijn voor de micro interactie om te starten.

Concreet voorbeeld: Het klikken op een ‘download’ button.

2. Regels

Daarnaast kunnen er bepaalde regels hangen aan een micro interactie die bepalen wat er wel of niet mag gebeuren. De gebruiker ziet deze regels niet direct, maar kan uit feedback wel opmaken of hij de regel succesvol heeft uitgevoerd.

Concreet voorbeeld: Bij drukken op de ‘thuisknop’ van je telefoon ontgrendel je de telefoon d.m.v. vingerafdruk herkenning.

3. Feedback

Door feedback terug te geven aan de gebruiker zorgen we dat hij weet dat de actie die hij heeft uitgevoerd succesvol is.

Concreet voorbeeld: Een telefoon die je op ‘stille modus’ zet en die even trilt om aan te geven dat de telefoon nu op ‘stil’ staat.

4. Loops & Modes

Hierbij wordt bepaald wat er na de interactie wordt gedaan. Het gebruik van ‘modes’ zou je spaarzaam moeten inzetten en alleen wanneer dit een overduidelijk gevolg is van de handeling. Bijvoorbeeld een ingelogde status versus een niet ingelogde status. ‘Loops’ geeft aan wat er moet gebeuren na de uitgevoerde actie: waar gaat de gebruiker heen?

Toepassingen

Hoe worden micro interacties nou concreet toegepast op het web? We helpen je graag met vijf pijlers om je design mee te verrijken.

Beperk de inspanning tot een minimum

Met micro interacties kun je de inspanning van een gebruiker tot een minimum beperken. Maak het de gebruiker makkelijker om te zoeken en toon bijvoorbeeld een auto-completion bij het zoekveld, dit zijn resultaten die de zoekfunctionaliteit alvast voor je invult op basis van de ingevoerde tekens.

De aandacht beter sturen

Je kunt door een kleine micro interactie (bijvoorbeeld een animatie) toe te passen perfect nadruk op iets leggen wat extra aandacht vereist. Bijvoorbeeld bij de website van Van Iperen hebben we het zoekicoon door middel van een kleine animatie laten transformeren naar het zoekveld, wat extra focus op de actie geeft.

Beter omgaan met foutmeldingen

Niets is zo vervelend als een formulier invullen en pas op het einde, wanneer je het formulier verzendt, erachter komen dat je een gedeelte van het formulier verkeerd hebt ingevuld. Door direct feedback te tonen bij het invullen van het formulier kan deze grote ergernis worden voorkomen. Dit passen wij zelf in diverse formulieren toe, onder andere het donatieformulier van Cordaid.nl

Informeer de gebruiker

Het is belangrijk dat je gebruikers altijd informeert over de status van een bepaalde actie die hij heeft uitgevoerd. Een goed voorbeeld hiervan is een ‘laad’ icoon om te geven dat de actie bezig is met informatie laden. (of uploaden)

Geef feedback

Je kunt een micro animatie goed gebruiken om aan de gebruiker aan te tonen dat hij een taak succesvol heeft uitgevoerd. Wanneer iemand op de ‘verstuur’ knop van een formulier klikt is het belangrijk dat hij feedback terug krijgt dat het formulier ook daadwerkelijk verstuurd is.

Waarom zijn wij fan van micro interacties?

Micro interacties zijn zowel een goede tool om een bepaalde actie duidelijk te maken, als dat ze bijdragen aan het amusement van de gebruiker doordat ze net even een glimlach op het gezicht toveren. Wanneer je alle micro interacties samen neemt, dragen ze ook bij aan de persoonlijkheid van je product. Een voorbeeld hiervan is dat Mailchimp bijvoorbeeld je een virtuele ‘high five’ geeft wanneer je een campagne verstuurt. Functioneel gezien is het niet nodig om deze boodschap te communiceren, maar het geeft wel net dat beetje ‘extra’ in hun product wat een versterking is voor waar het merk Mailchimp voor staat.

Wij houden van de kleine details!

Ben je benieuwd hoe je jouw website kunt optimaliseren met micro interacties? We denken graag met je mee. Neem contact op met 010-8429259 of stuur een mailtje naar mail@level-level.com