Waarom zou je micro-animaties gebruiken in je ontwerp?

Also available in:English

Animaties bestaan al erg lang. Maar door steeds betere browsers en mobiele processoren wordt het nu ook steeds belangrijker om in interfaces aandacht aan animaties te besteden. Deze kunnen de interactie verrijken en interfaces verhelderen. Maar wat zijn micro-animaties eigenlijk, en waar moeten we aan denken als we ze gebruiken?

Micro-animaties zijn kleine, liefst functionele animaties die de gebruiker ondersteunen. Door visuele feedback te geven en veranderingen duidelijker zichtbaar te maken kun je een hoop duidelijker maken zonder een woord uitleg te hoeven geven.

Intuïtieve interfaces

Door middel van micro-animaties kun je de gebruiker duidelijk maken waar elementen te vinden zijn door context te bieden. De gebruiker kan er mee ondersteund worden in het begrijpen van hiërarchie en daarmee kun je de focus bepalen. De gebruiker krijgt het gevoel van directe manipulatie doordat deze direct ziet dat er iets gebeurt of kan gebeuren.

Verhelder verandering & context

Met name bij kleine schermen en flat design interfaces is het een kunst om alle informatie te tonen die nodig is. Hierdoor laten we soms elementen achterwege. Om toch duidelijk te maken hoe je hier doorheen kunt navigeren kunnen micro-animaties een handige oplossing zijn.

hamburger static vs animated

Neem bijvoorbeeld een hamburger-menu. Als deze zonder animatie uitklapt, is het veel minder duidelijk waar deze zich bevindt. Deze animatie biedt context, waardoor de gebruiker niet verdwaald.

hamburger icon to arrow back icon loop

Als ditzelfde menu-icoon tegelijkertijd verandert van vorm, geeft deze gelijk duidelijk aan wat voor actie er komt als je er nogmaals op klikt.

Reageer button verandert in reageer formulier als je klikt

Het kan ook groter. Een ‘reageer’-button bijvoorbeeld, die verandert in een formulier. Context wordt geboden door het in- of uitschuiven van een element.

Voortgang verduidelijken door middel van animatie kan zeer goed vragen beantwoorden als: “Heb ik nou geklikt?” of “Is mijn upload nou bezig?”. Een gewone progressbar geeft ook aan of je voortgang boekt, maar een geanimeerde kan meer beloning aan de gebruiker geven. De nadruk wordt gelegd op de vooruitgang. Dit kan vooral in formulieren prettig zijn.

Hiërarchie & Focus

Het creëren van focus is een belangrijke reden om micro-animaties te gebruiken. Wat beweegt trekt de aandacht, dus kun je aandacht vragen voor een bepaald element. Dit kan vooral handig zijn bij een onboarding-moment. Laat een button bewegen waarmee de gebruiker kan beginnen met een actie op de pagina. Gebruik je te veel animatie, dan vlak je de hiërarchie af. Dit zorgt ervoor dat je de boodschap afzwakt die je wilt overbrengen.

Zoals Sophie Paxton in haar post Your UI isn’t a Disney movie heel goed zegt:

“Je zou niet van iedere zin in een document een kop maken. Hetzelfde principe geldt voor animatie. Beschouw ieder geanimeerd element in je UI als een equivalent van een kop in een geschreven document. Het zou gebruikt moeten worden om de belangrijkheid van een element aan te geven.”

Door verder te denken en te voorspellen wat je gebruiker gaat doen, kun je je interface verbeteren. Een menu item dat interessant is voor een bepaalde context, kan zich subtiel kenbaar maken op het moment dat de gebruiker deze waarschijnlijk gebruiken wil.
Of als de gebruiker een onderdeel sluit, dan kun je door middel van animatie duidelijk maken waar dit terug te vinden is.

Als voorbeeld nemen we een share-optie. Voordat je bedenkt dat je een artikel wilt delen maakt het je misschien nog niet uit of je ‘m via Twitter, Facebook of LinkedIn deelt. Maar zodra je op ‘Deel’ klikt wil je wel besluiten wáár je dit deelt.

share menu drops klappen uit op klik

Ook in formulieren kun je een gebruiker verder helpen door gebruik te maken van animaties. Heeft een gebruiker een optie aangeklikt, scroll dan naar de volgende of maak duidelijk dat ze meer of minder in hoeven te vullen. Bijvoorbeeld door vragen in of uit te laten klappen.

Directe manipulatie

Door middel van animaties kun je het gevoel van directe manipulatie versterken. Als er direct een gevolg op je actie zichtbaar is, weet je dat je invloed hebt. Denk bijvoorbeeld aan het swipen of slepen van elementen in een interface, maar ook pulserende buttons en andere hover states.

Touch

Touch-devices hebben geen hover states. Toch is het ook bij touch-devices handig om animaties te gebruiken. Zo kun je feedback geven over acties die zijn afgerond, en duidelijk maken wat de gevolgen hiervan zijn.

glow button

Ook kun je bedenken dat je vinger misschien wel afdekt wat je klikt. Misschien is het voor je ontwerp nodig om hier feedback op te geven tijdens dit druk-moment.

Beloning

Ook om een gebruiker te belonen kun je kleine animaties inzetten. Geef bijvoorbeeld een kleine animatie nadat een gebruiker een formulier heeft ingevuld. Denk hierbij niet een cartoon, maar een micro-animatie zoals het voorbeeld hieronder:

submit button turns into checkmark

Merkbeleving

Animatie kan ook een middel zijn om je brand experience te versterken. Door je beeldtaal door te zetten in animaties creëer je karakter. 

Een mooi voorbeeld zijn bijvoorbeeld de bolletjes die bij het nieuwe Google-logo horen. De spraak herkenning-tool communiceert door middel van deze 4 bolletjes verschillende statussen: wachten, luisteren, verwerken, antwoorden.

Meer voorbeelden

listview smoothly morphs into detail view

In bovenstaande animatie door Nikki Clark zie je de overgang van de list-view naar een detail-view extra duidelijk gemaakt met micro-animaties. Het is helder dat je inzoomt op een item uit de lijst. Door de timing wordt de hiërarchie duidelijk. Het sluit-icoon verschijnt pas op het laatst, waardoor deze opvalt en het oog van de gebruiker trekt.

labels float from placeholder space to title space in form

Formulieren willen we graag zo klein mogelijk houden om de gebruiker niet af te schrikken met een hoop informatie waar veel tijd in gaat zitten. Het liefst zouden we de titels van de velden weghalen om een clean formulier te krijgen. Maar als we de titels in een placeholder verwerken kan er onduidelijkheid ontstaan over wat er ingevuld moeten worden, zodra de placeholder-tekst verdwijnt.

In bovenstaand voorbeeld, door Matt D. Smith, zie je een goede geanimeerde oplossing: Float labels. De titels verplaatsen en schalen van hun positie in het placeholder-gebied, naar een kleine variant boven het veld. Het is duidelijk waar de tekst vandaan komt en ook waar deze betrekking op heeft. Terwijl je op het eerste gezicht je het idee van een klein, clean formulier behoudt.

Onderaan deze post vind je links naar meer inspiratie.

Conclusie

Animaties versterken en verrijken je interface. En met de steeds betere mobiele processoren en browsers wordt het belangrijker om goed over animatie na te denken.

Als je micro-animaties gebruikt kunnen ze een interface versterken en intuïtiever in het gebruik maken. Je kunt ze gebruiken om feedback te geven, focus en hiërarchie te creëren, maar ook om de merkbeleving te versterken en meer karakter te geven.

Waar zou jij micro-animatie toepassen? Laat hieronder je reactie achter.

 

Meer inspiratie