Inhoud:
1. Micro-interacties.
2. Wanneer gebruik je micro-interacties?
3. De opbouw van een micro-interactie.
4. Soorten micro-interacties.
5. Opdracht Studievragen.
6. Opdracht micro-interacties.

Richard Slakhorst

---

1. Micro-interacties

Micro-interacties zie je overal. Je doet een lamp aan of uit door de schakelaar om te zetten, de TV zet je aan of uit door een druk op de knop, en je verwarmt je oven op zijn beurt weer door aan een knop te draaien. In dit voorbeeld is de input (schakelaar omzetten) eenvoudig de feedback van je actie is direct zichtbaar. Het licht gaat aan.

Niet alle interactie is het zo duidelijk. Je kunt op afstand de thermostaat thuis regelen en je ‘Wake Up Light’ via je mobiel bedienen. Om interactie duidelijk te maken kun je micro-interacties gebruiken.

Een micro-interactie is een moment van interactie tussen de gebruiker en een klein enkelvoudig taakgericht onderdeel van bijvoorbeeld een website, app of softwareprogramma. Het zijn dus kleine acties die maar één taak volbrengen.

Waarom zijn Micro-interacties belangrijk voor user experience

---

2. Wanneer gebruik je micro-interacties?

Soms bestaat een hele app uit één micro-interactie. Denk aan het weer, het kompas, de notities of de kiosk. Meestal zijn micro-interacties kleine visuele gebeurtenis na een actie van de gebruiker.

Met micro-interacties kun je het proces een stuk verduidelijken. Een interactie die je duidelijke feedback geeft of een proces helder visualiseert, kan heel prettig zijn.

Micro-interacties zijn geschikt voor:
1. Het verrichten van een specifieke taak
2. Het interacteren met een specifiek stukje data, bijvoorbeeld de temperatuur,
aandelenkoers of tijd
3. Het controleren van een doorgaand proces, zoals volume, lichtsterkte of temperatuur
4. Het aanpassen van een setting het bekijken of creëren van een kleine hoeveelheid content, zoals een status update

Kortom, micro-interacties kunnen je site een stuk leuker en gebruiksvriendelijker maken.
Ze maken vaak het verschil tussen websites die we gewoon tolereren en websites die we geweldig vinden.

---

3. De opbouw van een micro-interactie

Trigger
Een micro-interactie begint door een trigger, een event. De trigger is bijvoorbeeld een handeling van een gebruiker omdat hij het geluid aanzet. Het systeem kan de trigger activeren wanneer bijvoorbeeld een bepaalde waarde behaald is. Denk aan aandelen die onder of boven een bepaalde waarde komen.

Regels
De regels bepalen waarop de micro-interactie op is gebaseerd. Bijvoorbeeld: Hoe hoog moeten de aandelen stijgen voordat de interactie start?

Feedback
Wat er gebeurt moet de handeling duidelijk maken door:
A. Alles wat je ziet (een zandloper met de tekst “gegevens laden” wanneer je een nieuwsfeed omlaag trekt)
B. Alles wat je hoort (het zoef-geluid wanneer je een e-mail verstuurt)
C. Alles wat je voelt (de trilling bij het omzetten van het aanzetten van het geluid)

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

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?

Let op ! denk aan de mental models
Gebruikers gebruiken ‘mental models’ bij het begrijpen van taken en het gebruiken van een digitaal product. Een mental model wil zeggen hoe iemand denkt dat iets werkt op basis van ervaring. Daarom werkt het goed wanneer je kijkt naar de fysieke wereld. Notities zijn ook vormgegeven als een kladblok, 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.

---

4. Soorten micro-interacties

a.Microcopy
Microcopy is de term voor kleine stukjes content die het gebruik van een website een stuk persoonlijker maken. Door het woord ‘Zoek’ te veranderen in ‘Vind’ of ‘404’ aan te passen naar ‘Helaas, er is geen pagina gevonden met deze link. Klik hier om de website te herstellen’, spreek je de bezoeker persoonlijker aan. Het is content die twijfel bij je bezoekers wegneemt, maar er ook voor kan zorgen dat jouw bezoekers/klanten overgaan tot actie.

b. Micro-animatie
Micro-animaties zijn kleine stukjes animatie die de ‘verplaatsing’ van informatie net iets duidelijker maken. Met de verplaatsing van informatie bedoel ik bijvoorbeeld een swipemenu, waarmee je, je bezoeker laat zien dat er meer informatie is dan hij in eerste instantie ziet. Je geeft de gebruiker de illusie dat de informatie buiten het scherm is geplaatst. Ook het kort eenmalig accentueren van het zoekveld wanneer je website wordt geladen, is een vorm van micro-animatie. Zo trek je de aandacht naar de eerste interactie op het scherm en wijs je je bezoeker de weg.

Zes redenen om animatie te gebruiken:

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. Animatie versimpelt complexe informatie.

2. 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 of altijd zichtbaar moeten zijn. Ze kunnen ook getimed worden, zodat ze zichtbaar worden op het moment dat de gebruiker ze wil zien.

3. 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.

4. Animaties hebben minder pixelruimte nodig.
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.

5. Met animaties begeleid je de gebruiker.
Een goede user interface beperkt zich niet tot tekst, icoontjes of opvallende kleuren om aan te geven hoe je de website moet gebruiken. Met animatie kun je net zo goed 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.

6.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 een hele nieuwe pagina te laden. Je kunt dat realiseren door de submit-button 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.

– Animaties trekken je aandacht naar de juiste elementen in een webpagina en zorgen hiermee voor een bepaalde focus. Een bewegend element trekt eerder de aandacht dan een stilstaand element. 

– Animaties kun je ook gebruiken om de onderliggende relaties tussen bepaalde elementen duidelijk te maken. Dat betekent dat de bezoeker begrijpt dat de pop-up die opende, bij het icoontje hoort waar hij of zij op klikte.

– Animaties in een website geven dus : een positieve indruk, meer focus en begrip van relaties (en context) in de website. Dit maakt een website gebruikersvriendelijk, intuïtief en innovatief.

c. Micro-interactie
Subtiele interacties gekoppeld aan een veld, knop of een ander interactie-element, worden micro-interacties genoemd. In tegenstelling tot micro-animaties zijn micro-interacties volledig gericht op communicatie op basis van input vanuit de gebruiker. Niet als er iets gebeurd is, maar op het moment dat er iets gebeurt, bijvoorbeeld een wachtwoord kiezen of ‘liken’. Het ‘opslokken’ van een e-mail wanneer deze wordt verwijderd, is een voorbeeld van micro-interactie.

d. Micro-content
Micro-content is een klein stukje tekst die een langere tekst aankondigt. Het doel ervan is dat je lezers erop klikken. Denk bijvoorbeeld aan een preview van een nieuwsbericht of zoekresultaat. Microcontent wordt nogal eens verward met een teaser. Het verschil met teasers, korte stukjes tekst op bijvoorbeeld de cover van een tijdschrift, is dat microcontent gericht is op het informeren van een lezer en een teaser als doel heeft de lezer te prikkelen.

Voorbeelden:

Microcopy: Het hamburgericoon verandert in een tekst “hoofdmenu”.
Micro-animatie: Het hamburgericoon verandert in een min als het menu uitschuift.
Micro-interactie: Het hamburgericoon vergroot op het moment dat de knop is ingedrukt.
Microcopy: Het naamveld heeft een label, “Mijn naam is”.
Micro-animatie: Het naamveld toont drie geanimeerde puntjes (…).
Micro-interactie: Het naamveld blijft geen rechthoek maar wordt een streep als je typt.

Tips micro-interacties
Micro-interacties: vergeet ze niet! Micro-interacties bepalen een belangrijk deel van “experience”. Het juiste gebruik leidt tot hoge AppStore ratings, veel downloads en hoge conversie.

• 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 te verkopen dat er dan nog net zo veel tijd kan gaan zitten in het verfijnen en het optimaliseren van alle micro-interacties.
  
• 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.
  
• 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.
  
• Bekijk een interactieve product eens als een verzameling micro-interacties.

---

6. Opdracht Micro-interacties

De opdracht: Micro-interacties

We gaan we nu aan de slag met micro-interacties. In interactieve producten zoals websites of apps zie je vaak allerlei soorten kleine animaties. micro-interacties.
Dit zijn vaak reacties op acties van de gebruiker. Je beweegt de muiscursor over een knop en de knop verandert van kleur, je klikt op de knop en er verschijnt een submenu of bijvoorbeeld een mooi ontworpen slideshow die mooi is geïntegreerd in de website. Je moet weten dat goede micro-interacties (animaties) zorgen voor een betere user experience.

Goede en doordachte micro-interacties verhogen het “wow gevoel” en de bezoeker blijft langer geïnteresseerd op de app-website. Micro-interacties geven een plezierige user experience.
Je kunt met een creative zelf bedachte micro-interactie grote indruk maken bij je doelgroep en je opdrachtgever. Je gaat nu eens zonder technische beperkingen totaal out of the box aan de slag met het bedenken van micro-interactie.

Stap 1
Voordat je helemaal los gaat, laat je jezelf eerst eens inspireren. Daarvoor doe je een heel klein onderzoekje op awwwards.com.
Awwwards is een website-wedstrijd waar de beste website design professionals van de wereld hun kunsten inzenden en zo meedingen voor de beste Awards.
Bekijk eerst een paar zeer speciale websites en bestudeer de bijzondere interacties
https://www.awwwards.com/websites/interaction-design/
Maak een document PDF met daarin 3 bijzonder gevonden micro-interacties.
Beschrijf het en voeg er een plaatje toe.

Stap 2
Schets en ontwerp.
Bedenk, schets en ontwerp zelf 2 creative bijzonder zelf bedachte micro-interacties en maak er een schets van met een beschrijving van de interactie.

Stap 3
Werk 1 schets uit in illustrator In minimaal 3 stappen. (storyboard) (begin en eind van de interactie)

TIP:
SCHETSEN: ZIJN VAAK KLEINE SNELLE SCHETSEN, DIE MEESTAL
ZONDER ENIGE CORRECTIE WORDEN GETEKEND, MET ALS DOEL OM
MEERDERE IDEEËN VAN INTERACTIE TE ONDERZOEKEN. JE KAN HET
OOK MET EEN STUKJE TEKST TOELICHTEN WAT JE BEDOELD.

---

---