UX, Micro Interacties & Animaties: details in beweging

Luc Franken, IUXDa, 0918340, lhpgfran@avans.nl

Abstract

Micro interacties zijn kleine functionele elementen die zorgen voor verheldering van een interface. Een micro interactie bestaat uit een trigger, rules, feedback, loops & modes. In deze paper komt het feedback gedeelte aan bod. We gaan het hebben over visuele animaties als feedback. Animaties worden gebruikt om de gebruiker te sturen of te vertellen wat er met de interface of het systeem gebeurt. Ze zijn ten alle tijden bedoelt om de interface net wat meer begrijpelijk te maken of om de gebruiker vertrouwen te geven in de interface, het systeem of het product. Tijdens het define - develop gedeelte van het ontwerpproces begin je met nadenken over micro interacties en bijbehorende animaties. Een animatie is goed wanneer het iets communiceert naar een gebruiker. Waar de gebruiker moet kijken of wat er achter de schermen gebeurt. Daarnaast kan het doel ook zijn het wekken van vertrouwen bij de gebruiker.

Keywords

Micro interacties, interactie design, UX, UI, animaties, interface design,

Introductie

Eerst is het belangrijk om te weten wat een micro interactie is en waarvoor we ze gebruiken. Een micro interactie bestaat uit vier onderdelen; Een trigger (deze initieert de interactie), rules (set regels die het gedrag bepalen van de micro interactie.), feedback (laat aan de gebruiker merken wat de regels zijn van de micro interactie), loops & modes (Wat als ik hem de tweede of tiende keer activeer?). Er zijn vier fases tijdens een agile experience design proces. Ze luiden als volgt: Discovery - define - develop - deliver. Het nadenken over Micro interacties begint in het define - develop gedeelte van het ontwerpproces. Het is belangrijk om tijdens de conceptuele fase (define) over functies na te denken en aangezien micro interacties (aspecten van) functies zijn of gebruikt worden om functies te verhelderen, vallen micro interacties in het define - develop gedeelte.

Hierbij is het belangrijk om in te zien dat het bedenken van functies in het define gedeelte valt. Welke micro interacties hiervoor nodig zijn valt ook in het define gedeelte. Het designen van de micro interacties valt echter in het develop gedeelte. Micro interacties krijgen steeds meer aandacht in het designproces. Het is van belang voor een UX designer om micro interacties mee te nemen in een designproces, omdat deze kleine interacties interfaces verhelderen en de gebruiker sturen. In deze paper ga ik het met name hebben over animaties en waar je op moet letten tijdens het ontwerpen van micro interacties die animaties bevatten.

De Design Methode

I. Waarom

Animaties binnen micro-interacties hebben een aantal voordelen die belangrijk zijn en die een designer niet dient te vergeten. Animaties maken je interface makkelijker om te begrijpen en helpen de gebruiker om de weg te vinden binnen je interface. Deze kleine details geven hints en tips over hoe de interface gebruikt dient te worden. Daarnaast zijn ze in staat een gebruiker te betrekken bij het product.

Best practice is om tijdens de concepting fase te beginnen met nadenken over de core-functies en bijbehorende micro interacties. Tijdens de realisatie kan er nagedacht worden over hoe de animaties vorm krijgen.

II. Hoe

Een designer zal altijd eerst de (micro) interactie vast moeten stellen voor er een animatie aan gekoppeld kan worden. Een micro interactie bestaat uit 4 delen; de trigger, rules, feedback, loops & modes. Animaties vallen onder feedback. De feedback is bedoelt om de regels of het gedrag (rules) van de app uit te leggen aan de gebruiker. Ze leren ons wat de regels zijn van een interactie. 
Als designer moet je hiervoor duidelijk in scope hebben wat de regels zijn van een micro interactie. De animatie geeft namelijk aan wat er achter de schermen gebeurt. Vervolgens is het belangrijk om een aantal zaken in de gaten te houden. Een animatie mag een activiteit eigenlijk nooit vertragen, tenzij de vertraging een hoger doel heeft. De animatie moet natuurlijk zijn en zich houden aan natuurwetten. Wanneer een animatie zich aan andere wetten houdt snapt een gebruiker het minder snel en het kan in het ergste geval verwarring scheppen binnen een interface. Daarnaast is het belangrijk om binnen een product consistentie te houden tussen de verschillende animaties. Animaties zorgen voor veel betrokkenheid op visueel gebied bij de gebruiker. Daarom is het belangrijk dat er ook vanuit een visual-design oogpunt gekeken wordt naar de animaties.

De uitwerking hangt erg af van waar de animatie voor dient. Een demo van een animatie kan in Adobe After Effects gemaakt worden. Ook kan After Effects (of een andere animeer tool) gebruikt worden om een gif te maken van een animatie. Bijvoorbeeld bij een “Hamburger menu icoon” die tranformeert naar een “close button”. In een interface worden de meeste animaties echter in code geschreven en meestal in javascript.

Bij een animatie gebeurt vaak enorm veel, ook al lijkt dit niet altijd zo. Vaak bewegen er veel componenten van een interface of veranderen ze. Daarnaast kan het zijn dat er componenten verdwijnen en plaats maken voor nieuwe componenten. Om een goede animatie te bedenken zul je bij elk van deze stappen na moeten denken. Met Adobe After Effects kom je ver wanneer je een demo wilt maken. Je zult altijd meerdere opties moeten uitwerken en iteraties moeten maken, want je maakt een animatie nooit in één keer zoals je het in je hoofd voor je zag.

III. Wat

Een goede animatie bezit een aantal belangrijke eigenschappen. Ten eerste zorgen ze altijd voor verduidelijking van een interactie of de staat van een component. Daarnaast stuurt een animatie de gebruiker en vertelt ze welke gebieden van de interface interessant zijn om naar te kijken.

“The best animations communicate something to the user: about the structure of the microinteraction, what to look at, what process is happening, etc.” (Dan Saffer, 2013, p. 99)
Gif 1: deleting photo

Wanneer de animatie iets communiceert aan de gebruiker, zich natuurlijk gedraagt en de activiteit van de gebruiker niet vertraagd is de animatie functioneel goed. Er valt natuurlijk altijd te twisten over het feit of een animatie esthetisch goed is. Daarnaast is het niet altijd zo dat het de gebruiker niet mag vertragen. Dit komt verderop in de discussie nog aan bod. Het hoogste doel van een animatie is niet per se het verhelderen van een interface. Een animatie kan ook gebruikt worden om de gebruiker bijvoorbeeld vertrouwen te geven in de interface of het product. In de gif hierboven (Gif 1: deleting photo) is te zien hoe de klep van de prullenbak even omhoog gaat, daarnaast krijgt de foto een rode overlay. Het is voor de gebruiker nu duidelijk dat de foto verwijderd gaat worden. Door de klep omhoog te laten gaan is het duidelijk dat de foto ook daadwerkelijk in de prullenbak zal gaan. Door de foto kleiner te scalen wordt dit nog eens benadrukt.

Het eindresultaat van een animatie kan in de interface verwerkt worden. Er zal een trigger aan gebonden moeten worden en de regelset moet in de techniek bepaald worden. Een developer, die met voorkeur goed overweg kan met javascript, kan de demo verwezenlijken in het eindproduct. Een demo hoeft in deze niet per se bewegend beeld te zijn. Een animatie kan ook gemaakt worden met behulp van een storyboard waarin de belangrijkste stages van de animatie te zien zijn

Voor inspiratie kun je natuurlijk altijd op dribbble terecht. Je moet hierbij op passen, aangezien er op dribbble veel gifjes staan waar bij de animatie er esthetisch mooi uitziet, maar verder weinig tot geen functionele waarde heeft met betrekking tot de interface. Een betere bron is Google’s material design guidelines pagina. Hier beschrijven ze op het gebied van animaties de best practices. Voor developers sluit AngularJS material hier goed op aan.

Discussie

Volgens Chest Haase en Romain Guy (Android ontwikkelaars bij Google) mag een animatie de activiteit niet vertragen. Ik ben het hier niet helemaal mee eens. In de meeste gevallen is dat zo, maar er zijn situaties te bedenken waarin het vertragen van een actie juist duidelijkheid over een interface schept of het vertrouwen van een gebruiker in het product vergroot.

Bij het verzenden van een formulier zou je in de “send” knop een vertraging kunnen inbouwen. Wanneer er geklikt wordt zou de knop kunnen transformeren naar een laad-indicator. Deze zou vol kunnen lopen en een vinkje tonen wanneer het formulier verzonden is. Zo maak je duidelijk aan de gebruiker dat het formulier daadwerkelijk verwerkt en verzonden is, ook al heeft het systeem het formulier al eerder verzonden. Zo wek je de suggestie dat het systeem goed met je formulier om gaat.

Je zou ook kunnen nadenken over vertraging in een micro interactie bij het overmaken van geld. Wanneer er een groot geldbedrag wordt overgemaakt zou een vertraging voor meer vertrouwen en zekerheid kunnen zorgen. Hierbij wordt weer de suggestie gewekt dat het systeem zorgvuldig omgaat met informatie of bezit van de gebruiker, in dit geval met het geld. Bij deze voorbeelden zou een vertraging de activiteit vertragen, maar daarentegen zorgen voor zekerheid en vertrouwen in het systeem, het product en de interface. Wanneer deze waarden een belangrijk deel van je concept uitmaken kun je de overweging maken om een vertraging in te bouwen.

Conclusie

Animaties hebben de kracht om een aantal zaken te verbeteren aan interfaces. Ze geven tips en hints over hoe de interface gebruikt dient te worden, maar ze kunnen ook vertrouwen genereren in een interface. Animaties kunnen echter ook een valkuil zijn. Wanneer je animaties ontwerpt is het belangrijk dat elke animatie iets communiceert naar de gebruiker over de interface en het er niet alleen mooi uitziet. Dit kan namelijk verwarring scheppen en zorgen voor frustratie bij de gebruiker. Als animaties zonder een doel bij het concept horen of de identiteit van de service weergeven moet je er als designer voor zorgen dat ze niet de taak van de gebruiker belemmeren.

Referenties

Saffer, D. (2013). Microinteractions: Designing with Details. Sebastopol: O’Reilly Media, Inc.

Ferreira, J., Noble, J., & Biddle, R. (2007). Agile Development Iterations and UI Design. Washington, DC: IEEE.

Saffer, D. (2008). Designing Gestural Interfaces: Touchscreens and Interactive Devices. Sebastopol: O’Reilly Media, Inc.

Saffer, D. (2010). Designing for Interaction: Creating Innovative Applications and Devices. Berkeley: New Riders.