Verbeter de user experience door focus op micro-interacties

Interfaces van apps, sites en producten zijn altijd aan verandering onderhevig. De werking van applicaties was voorheen zichtbaar door middel van knoppen of beschrijvende teksten. Nu ontwerpen we applicaties met zo min mogelijk knoppen, schrijft Anne-Roos Hassing van Jungleminds.

Acties verschijnen zodra u op uw scherm tikt of het scherm omlaag trekt. Wij hebben deze interacties geleerd en ervaren ze nu als vanzelfsprekend, eenvoudig. Maar over dit soort interacties, micro-interacties, is erg goed nagedacht hoe dit te introduceren, hoe het de gebruiker duidelijk te maken wat er van hem verwacht wordt. Het zijn juist deze micro-interacties, de details, die het product of de service maken of kraken. Of met andere woorden: zorgen voor hoge conversie, veel downloads of veel gebruik.

Tekst: Anne-Roos Hassing

Input ≠ output
We waren gewend dat producten gebruikersacties vereisten waarvan de output helder was. Een schakelaar omzetten zet het licht aan of uit, een verwarmingsknop draaien zet de verwarming warmer of kouder, fysieke toetsen op je laptop of mobieltje tonen letters op het scherm.

In deze voorbeelden is de input eenvoudig aan de output te koppelen. De feedback van uw actie is direct zichtbaar. Maar acties worden alleen maar abstracter. Op afstand de thermostaat thuis regelen, uw ‘Wake Up Light’ via uw mobiel bedienen of TV kijken op uw mobiel. Gebruikersacties zijn niet meer direct te relateren aan het product waar ze invloed op hebben. Daarom zijn de micro-interacties, de kleine interacties die de gebruiker sturen in het uitvoeren van een taak, zo belangrijk geworden.

Wat is een micro-interactie?
Micro-interacties zijn kleine afgebakende productmomenten, ontwikkeld rondom één gebruikerstaak. Bijvoorbeeld uw wekker zetten, een wachtwoord kiezen, inloggen, iets favoriet maken of ‘liken’. Micro-interacties vindt u overal om u heen. In uw smartphone, op uw desktop, de thermostaat, lichtknoppen etc. Veel apps zijn volledig gebouwd rondom één micro-interactie. Vooral de vaste apps op uw iPhone, zoals het weer, het kompas, de notities of de kiosk. Ook veel startende apps zijn gebaseerd op één gebruikerstaak. Gebruikers weten deze eenvoud en focus ook te waarderen. In de top 50 beste apps 2012 zijn de meeste apps qua functionaliteit beperkt tot één gebruikerstaak:
- Pocket: teksten overnemen vanuit veel verschillende applicaties om later offline rustig te kunnen lezen.
- Clear: to do’s bijhouden (op een erg mooie manier).
- NOS: het laatste nieuws lezen.

Apps die op één gebruikerstaak focussen, worden door gebruikers hoog gewaardeerd (Pocket – Clear – NOS)

Omdat deze apps op één taak focussen, is het voor een gebruiker eenvoudig te begrijpen wat hij van de app kan verwachten. Hoe goed en uitgebreid uw ‘getting started’ ook is, gebruikers lezen het toch niet. Dit is één van de voornaamste redenen waarom micro-interactie goed en intuïtief ontworpen dient te worden. Een gebruiker opent uw app en gaat aan de slag met het lege scherm of de startpagina. Als het hem niet snel duidelijk wordt wat hij moet en kan doen, zal hij het zeer snel opgeven en niet meer naar uw app terugkeren. Daarom is het zo belangrijk dat een app zichzelf uitlegt. Hierbij kunt u dankbaar gebruik maken van micro-interacties.

De details zijn het design
De reden dat gebruikers zo enthousiast zijn over een bepaalde toepassing zit vaak in de verfijning van de micro-interacties. Als gebruiker heeft u het meestal niet door. Maar de slimmigheidjes of details in applicaties, zoals het openen en opslokken van een e-mail wanneer u deze verwijdert, ‘s nachts geen pushberichten versturen of het fantastische plusje of klokje dat met uw feed mee loopt van Path, maken dat u een applicatie graag gebruikt of snel weer verwijdert.

Micro-interacties – deleten van een email en bij Path het plusje en meelopende klokje

Micro-interacties zijn de details van een product. En de details zijn het design.

Features (macro interacties) versus micro-interacties
Micro en macro interacties verschillen van elkaar door de complexiteit en focus die het vereist om uit te voeren. Macro interacties bestaan uit meerdere use cases. Hierdoor zijn ze automatisch complexer. Een macro interactie kan uit meerdere micro-interacties opgebouwd zijn.

In veel ontwerptrajecten worden micro-interacties pas op het einde ontworpen en ontwikkeld, waardoor ze soms zelfs vergeten worden. Zonde, een site of app kan nog zo’n goede feature (macro interactie) hebben, als de kleine interacties niet op orde zijn, voelt de applicatie gewoon niet goed. De micro-interacties zijn de ‘feel’ in look & feel.

Er zijn 2 manieren om te werken met micro-interacties.
1. Behandel ze op een case–by-case basis.
Ontwerp elke micro-interactie die u tegen komt (hoe dit te doen, leest u verderop in dit artikel). Pas bij deze manier op dat u niet te gek gaat met het ontwerpen van een micro-interactie. Laat het geen feature op zich worden, maar houd het minimaal: less is more!

2. Trek alle micro-interacties uit elkaar en plaats ze in individuele producten.
Dus trek alle gebruikerstaken uit elkaar en bouw er bijvoorbeeld losse apps van die één ding extreem goed doen. Elk individueel product is terug gebracht tot zijn essentie.

Waar bestaat een goede micro-interactie uit?
Micro-interacties zijn geschikt voor:
- het verrichten van een specifieke taak
- het interacteren met een specifiek stukje data, bijvoorbeeld de temperatuur, aandelenkoers of tijd
- het controleren van een doorgaand proces, zoals volume, lichtsterkte of temperatuur
- het aanpassen van een setting
- het bekijken of creëren van een kleine hoeveelheid content, zoals een status update
- het aan- of uitzetten van een feature of functie.

Een micro-interactie is effectief door zijn beperkte omvang, maar ook door de vorm. Een goede micro-interactie bestaat uit:

Trigger
Een micro-interactie begint door een trigger. Een trigger wordt geïnitieerd door de gebruiker of door het systeem. Een gebruikersactie kan een persoon zijn die de mute switch aan zet. Een systeem kan de trigger activeren wanneer een bepaalde waarde behaald is. Denk aan aandelen die onder of boven een bepaalde waarde komen. Het begint dus met het begrijpen van een gebruikersbehoefte. Wat wil de gebruiker bereiken, wanneer wil hij het en hoe vaak heeft hij hier behoefte aan.

Het combineren van triggers en applicaties zal in de toekomst onze applicaties nog slimmer maken. Mute wordt automatisch ingeschakeld wanneer u in de bioscoop zit en de film start (op basis van uw locatie en bijvoorbeeld passbook) of wanneer een vergadering begint (op basis van uw agenda).

Regels
Erg handig dat uw smartphone voor u denkt, maar u moet wel begrijpen waarop dit gedrag gebaseerd is. Enerzijds zodat u als gebruiker erop kan vertrouwen (gaat mijn wekker nog wel af wanneer ik mijn telefoon op stil of nachtstand zet?) en omdat hij moet weten hoe het te omzeilen is, indien gewenst. Met andere woorden: wat zijn de regels van deze micro-interactie?

Feedback
Onder feedback verstaan we alle metaforen die gebruikt worden met als doel het laten begrijpen van een micro-interactie. Alles wat u ziet (een zandloper met de tekst ‘gegevens laden’ wanneer u een nieuwsfeed omlaag trekt), hoort (het zoef geluid wanneer u een e-mail verstuurt) of voelt (de trilling bij het omzetten van de mute switch) om de micro-interactie te ondersteunen.

Feedback bij een micro-interactie: trilling en mute icoon bij het omzetten van de mute switch en een zandloper om te tonen dat de applicatie zich aan het verversen is.

Kies de feedbackvorm die het beste bij de actie past: visueel, geluid, vibratie, animatie of overgangseffect.

Relaties met de fysieke wereld werken hier vaak goed. Notities zijn ook vormgegeven als een kladblok, boodschappenlijsten zijn kladblokken waar u de boodschap kunt doorstrepen, uw digitale boeken of magazines staan in iBooks in een boekenkast en pagina’s hebben oortjes om te laten zien dat u ze daar kan omslaan.

Gebruikers gebruiken ‘mental models’ bij het begrijpen van taken, het oplossen van problemen en dus het gebruiken van uw product. Een mental model is hoe iemand denkt dat iets werkt op basis van hoe het in de fysieke wereld werkt. Zo kunt u in een applicatie al een klein stukje van het volgende onderdeel aan de zijkant van het scherm laten zien. Doordat een gebruiker vanuit de fysieke wereld weet dat als hij een stukje ziet, de rest hoogstwaarschijnlijk erachter volgt, snapt hij dat hij moet swipen om die content te ontsluiten.

Veel apps gebruiken metaforen uit de fysieke wereld om micro-interacties uit te leggen

Loops & procedures
Wat gebeurt er met een micro-interactie wanneer deze onderbroken wordt of na verloop van tijd? Blijven de interacties actief totdat de gebruiker dit weer handmatig uitzet of verloopt het na verloop van tijd? Wat gebeurt er als condities veranderen?

Een voorbeeld van een micro-interactie waar goed over procedures is nagedacht is de ‘niet storen’-functie van de iPhone. Deze blokkeert alle geluiden en lichtsignalen van berichten, inkomende oproepen en andere pushberichten. Maar als u de telefoon gebruikt terwijl deze functie ingeschakeld is, komen telefoongesprekken en berichten wel op hun normale wijze binnen. Een zeer gebruiksvriendelijke manier om met het omzeilen van vaste procedures om te gaan.

Behandel dus elk stukje functionaliteit en het hele product als een set van micro-interacties tijdens uw ontwerpproces. Zorg wel voor een goede samenhang. Gebruik dezelfde interacties voor gelijksoortige doelen. Delete u een item door middel van swipe, pas dat dan overal toe. Plaatst u eerste contentitems naast elkaar die bereikbaar zijn door middel van horizontale swipe (zoals u in de NOS-app ziet en wat nog extra uitgelegd wordt met de bolletjes onderin en highlight waar u zich bevindt), behoud deze interactie dan consistent door het gehele product. Gebruikers leren bij de eerste actie die ze doen en verwachten consistentie. Niet alleen binnen uw product, maar ook tussen soortgelijke producten. Kennen ze een interactie vanuit een veelgebruikte app, dan zullen ze het zeker op uw app uitproberen.

In de waan van de dag, de snelheid van projecten bij bureaus, is het nog wel een uitdaging om genoeg tijd te vinden voor het detailleren van micro-interacties. Bij het ontwerpen van een applicatie is men vaak geneigd om op het grote plaatje, de macro interacties, te focussen. Als deze eenmaal staan, is het lastig verkopen dat er dan nog net zo veel tijd kan gaan zitten in het verfijnen, het optimaliseren, van alle micro-interacties. Meer over dit onderwerp leest u in het boek 'Microinteractions – Designing with details' van Dan Saffer, O’Reilly dat in juni uitkomt.

De micro-interacties zorgen voor de optimale gebruikerservaring. En die leidt weer tot hoge Appstore ratings, veel downloads en hoge conversie.

Anne-Roos Hassing is senior user experience designer bij JungleMinds. Dit artikel verscheen eerder op de site van het adviesbureau.