Micro interacties: Het geheim voor een geweldig app ontwerp

De beste producten zijn goed in twee dingen: features en details. Features zorgen ervoor dat mensen aangetrokken worden tot jouw product. De details houden de klant bij je en zorgen ervoor dat jouw app tussen de competitie uitspringt.

Micro interacties is, voor de User Interface (UI), een goede toevoeging als je het hebt over details.

Een fout die veel ontwerpers maken, is het zien van micro interacties als ‘secundair’ of ‘accessoire’. Het tegenovergestelde is waar: ze creëren een gevoel van vertrouwdheid. Een bevestiging van een voltooide taak.

Als ontwerper is het de kunst om de onzichtbare micro interacties te kunnen herkennen én om deze te kunnen ontwerpen. Ze moeten aanwezig zijn, bevestiging geven, maar ook menselijk aanvoelen en onopvallend zijn.

Wat zijn micro interacties?

Micro interacties zijn inhoudelijke product momenten die een kleine taak hebben.

Deze micro interacties zijn als eerste omschreven in het boek ‘Microinteractions’ door Dan Saffer. In het algemeen hebben micro interacties de volgende essentiële functies:

• Communicatie van feedback of het resultaat van een bepaalde actie.
• Voltooien van een individuele taak.
• Vergroten van het gevoel van directe manipulatie.
• Helpen gebruikers om de resultaten van hun acties te visualiseren en bij het vermijden van errors.

Een aantal voorbeelden van specifieke micro interacties zijn:

• De vibrerende notificatie in combinatie met het stilte modus logo op het display wanneer je een iPhone in de mute stand zet.
• Interface animatie die aangeeft of je ergens op kan klikken (denk aan een knop die van kleur verandert wanneer je er overheen gaat).

Waarom micro interacties werken

Micro interacties werken omdat deze aantrekkelijk zijn voor de natuurlijke behoefte aan erkenning van de gebruiker. De gebruiker weet namelijk direct dat de actie is geaccepteerd en word hierbij visueel beloond. Daarnaast kunnen micro interacties gebruikers laten zien hoe het systeem werkt.

Identificeren van kansen

Het mooie van micro interacties is dat deze op verschillende plekken kunnen worden toegevoegd rondom elke potentiële actie. In het algemeen komen micro interacties in de volgende gebieden naar voren:

Systeem status

Houd jouw gebruikers op de hoogte van wat er gebeurt. Dit is de eerste usability heuristic principle van Jakob Nielsen. Gebruikers verwachten dat ze direct een respons krijgen over wat er gebeurt. Er zijn situaties wanneer een app tijd nodig heeft voordat een bepaalde actie is uitgevoerd.

De interface moet in deze gevallen de gebruiker laten zien wat er op dat moment aan de hand is.

Of waar de gebruiker zich bevindt.

Tip: Zorg ervoor dat de gebruiker zich niet gaat vervelen. Houd de gebruiker dus op de hoogte en laat zien wat de progressie is. (Een laadbalk heeft bijvoorbeeld interactie met de gebruiker en voorkomt zo verwarring)

Markeer veranderingen

In sommige gevallen moet er gebruik worden gemaakt van notificaties om ervoor te zorgen dat de gebruiker deze daadwerkelijk ziet. Animaties kunnen hierbij helpen. Deze zorgen voor aandacht van de gebruiker en dat ze niet over het hoofd zien wat jij denkt dat belangrijk is.

Tip: In veel gevallen wordt er gebruik gemaakt van animatie effecten om de aandacht van de gebruiker te trekken naar belangrijke details. Hierbij kan je gebruik maken van het KISS principe. Micro interacties moeten namelijk klein en simpel zijn.

Behoud context

Maak gebruik van motion om gebruikers op een vloeiende manier tussen context te laten navigeren. Leg hierbij uit wat de veranderingen zijn van de inrichting van de elementen op het scherm. Dit geldt met name voor mobiele toestellen en smart watches. Hierbij is het onmogelijk om veel informatie kwijt te kunnen op een scherm.

Tip: Zorg voor een duidelijke navigatie tussen verschillende pagina’s. Op deze manier begrijpt de gebruiker waar iets vandaan is gekomen. De transitie tussen twee visuele aspecten moet vloeiend verlopen. Maak gebruik van een verbindende thema om alle interacties aan elkaar te koppelen.

Visualiseer input

Data input is een van de meest belangrijke elementen van elke applicatie. Micro interacties helpen om van dit proces iets speciaals te maken. Je kunt gebruik maken van bestaande elementen om feedback te leveren.

Tip: Micro interacties helpen om informatie te weergeven en helpt de gebruiker zijn doel te bereiken.

Call to action

Micro interacties hebben de kracht om gebruikers aan te moedigen om interactie te hebben. Ze kunnen zorgen voor empathie bij de User Experience (UX). Zorg er wel voor dat de visuele signalen en animaties geschikt zijn voor jouw gebruikers. Houd hierbij in gedachten of de micro interactie na 100 keer nog steeds leuk is en juist niet vervelend wordt.

Tips: Richt de focus op gebruikers emoties omdat deze een grote rol spelen hoe gebruikers interactie hebben. Maak gebruik van context & gebruikers onderzoek in combinatie van een goed ontwerp voor herhaaldelijk gebruik.

Om te onthouden

• Micro interacties helpen bij interacties door middel van: feedback, instructies en notificaties.
• Micro interacties moeten tijd besparen door direct informatie te geven op zo een manier dat de gebruiker niet wordt afgeleid of verveeld raakt. Ze moeten de aandacht van de gebruiker weten te bemachtigen zoals een kleine knipoog.
• Weten wie jouw gebruikers zijn en de context achter de micro interacties helpt om ze effectiever en preciezer te maken.
• Micro interacties moeten werken op de lange termijn. Wat er op het eerste gezicht leuk uitziet wordt misschien na de honderdste keer erg vervelend.
• Zorg voor een menselijk element bij micro interacties en richt op visuele harmonie. De beweging moet vloeiend aanvoelen zodat de micro interactie tot leven kan komen.

Conclusie

Besteed aandacht aan het ontwerp. Denk na hoe mensen omgaan met hun toestellen en kopieer veel voorkomende patronen wanneer je deze kleine stukjes ontwerpt. Door goed na te denken over elk kleine detail is de sleutel tot succes om menselijke computer interactie makkelijk te laten verlopen. Voor een fantastisch ontwerp moet je er 100% voor gaan. Van het functionele gedeelte tot aan de micro interacties toe.

---