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. Acties verschijnen zodra je op je scherm tikt of het scherm omlaag trekt. Gebruikers hebben deze interacties geleerd en ervaren ze nu als vanzelfsprekend, eenvoudig.

Er is erg goed nagedacht over hoe dit soort interacties, zogenaamde micro-interacties, geïntroduceerd moeten worden, hoe het de gebruiker duidelijk gemaakt moet worden 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; die zorgen voor hoge conversie, veel downloads of veel gebruik.

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 je actie is direct zichtbaar. Maar acties worden alleen maar abstracter. Op afstand de thermostaat thuis regelen, je ‘Wake Up Light’ via je mobiel bedienen of TV kijken op je 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 je wekker zetten, een wachtwoord kiezen, inloggen, iets favoriet maken of ‘liken’. Micro-interacties vind je overal om je heen. In je smartphone, op je desktop, de thermostaat, lichtknoppen etc. Veel apps zijn volledig gebouwd rondom één micro-interactie, zoals veel vaste apps op je smartphone. Denk aan 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.

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 je ‘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 jouw 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 je app terugkeren. Daarom is het zo belangrijk dat een app zichzelf uitlegt. En daarvoor kun je 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 heb je het meestal niet door, maar de slimmigheidjes of details in applicaties, zoals het openen en opslokken van een e-mail wanneer je deze verwijdert, ‘s nachts geen pushberichten versturen of het fantastische plusje of klokje dat met je feed meeloopt van Path, maken dat je een applicatie graag gebruikt of snel weer verwijdert.

Features (macro-interacties) vs. micro-interacties

Micro- en macro-interacties verschillen van elkaar door de complexiteit en focus die het vereist om ze 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 je tegenkomt (hoe dat moet, lees je verderop in dit artikel). Pas bij deze manier op dat je 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 omheen, 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 een trigger, regels, feedback en tot slot; loops & procedures.

1. Trigger

Een micro-interactie begint door een trigger. Een trigger wordt geïnitieerd door de gebruiker of door het systeem. Een gebruikersactie kan bijvoorbeeld een persoon zijn die de mute switch (geluid uitzetten) aanzet. 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 je in de bioscoop zit en de film start (op basis van je locatie en bijvoorbeeld Passbook) of wanneer een vergadering begint (op basis van je agenda).

2. Regels

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

3. Feedback

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

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 je de boodschap kunt doorstrepen, je digitale boeken of magazines staan in iBooks (Apple) in een boekenkast en pagina’s hebben oortjes om te laten zien dat je ze daar kan omslaan.

Gebruikers gebruiken ‘mental models’ bij het begrijpen van taken, het oplossen van problemen en dus het gebruiken van jouw product. Een mental model wil zeggen hoe iemand denkt dat iets werkt op basis van hoe het in de fysieke wereld werkt. Zo kun je 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.

4. Loops & procedures

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

Een voorbeeld van een micro-interactie waarbij 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 je 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.

Micro-interacties, vergeet ze niet!

Behandel dus elk stukje functionaliteit en het hele product als een set van micro-interacties tijdens je ontwerpproces. Zorg wel voor een goede samenhang. Gebruik dezelfde interacties voor gelijksoortige doelen. Delete je een item door middel van swipe, pas dat dan overal toe.

Plaats je eerst contentitems naast elkaar, die bereikbaar zijn door middel van horizontale swipe (zoals je in de NOS-app ziet en wat nog extra uitgelegd wordt met de bolletjes onderin en highlight die aangeeft waar je je 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 jouw product, maar ook tussen soortgelijke producten. Kennen ze een interactie van een veelgebruikte app, dan zullen ze het zeker op jouw 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 app 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 en het optimaliseren van alle micro-interacties. Toch is dat absoluut de moeite waard. De micro-interacties zorgen voor de optimale gebruikerservaring. En die leidt weer tot hoge AppStore ratings, veel downloads en hoge conversie.

Wil je meer weten over dit onderwerp? Lees dan het boek ‘Microinteractions – Designing with details van Dan Saffer, O’Reilly‘ dat in juni uitkomt.