Het is zomer! Een goede gelegenheid om te kijken hoe je de gebruikerservaring van jouw website, interface of app kunt verbeteren. Micro-animaties kunnen die ervaring naar een hoger niveau tillen. Tijdens deze les van onze Summer Academy-reeks maak je kennis met micro-animaties en zie je aan de hand van 3 voorbeelden hoe zulke animaties de gebruikerservaring kunnen verbeteren.

Een beter design begint bij een goede gebruikerservaring

Gebruikerservaringen zijn dus belangrijk. Maar doordat websites, interfaces en apps zoveel verschillende mogelijkheden hebben, is de kans groter dat gebruikers verdwalen. Door de hoeveelheid aan informatie kan het voor hen moeilijk zijn om te achterhalen waar ze moeten beginnen, wat ze precies moeten doen, en waar ze zich bevinden. Of ze zetten vraagtekens bij bepaalde onderdelen en/of elementen.

Hoe kunnen gebruikers hun weg wél vinden? Het antwoord is: met micro-animaties. Voordat ik je meer ga vertellen over deze soort animaties, leg ik je uit waarin ze verschillen met ‘gewone’ animaties.

Wat zijn animaties?

Een animatie is een serie van beelden die razendsnel wordt afgespeeld, waardoor het lijkt alsof die serie beweegt. Die bewegende beelden worden ook wel frames genoemd. Een goed voorbeeld van animaties zijn tekenfilms en de bekende 3D-films van Pixar Studios.

Tip: Bekijk de presentatie ‘UI-animaties: meer dan puntjes op de ‘i” als je meer wilt weten over animaties.

Wat zijn micro-animaties?

Micro-animaties zijn korte, subtiele animaties die bijvoorbeeld een stuk tekst, een icoon of een knop laten bewegen.

Eén van de belangrijkste punten van micro-animaties is timing. Dit komt doordat ze zowel psychische als emotionele waarde met zich meedragen. Wanneer je de animaties op het juiste moment inzet, zal dit bijdragen aan het juiste gevoel en de juiste waarneming bij gebruikers. En de gebruikerservaring zal dus verbeteren.

Wanneer je micro-animaties maakt, moet je met name letten op de flow, de snelheid, en de reactie na een interactie. Als een animatie namelijk stroef loopt, kan het ogen als een bug. Hierdoor verliest een website, interface of mobiele app meteen zijn aantrekkelijkheid en professionaliteit.

Welke soorten micro-animaties zijn er?

Er bestaan 2 soorten micro-animaties, namelijk statische en dynamische. Ik leg beiden kort aan je uit.

Statische micro-animaties

Statische micro-animaties zijn over het algemeen makkelijk te maken. Denk aan een gif die automatisch afspeelt of een video die een korte uitleg geeft over bijvoorbeeld een product of dienst.

Dynamische micro-animaties

Dynamische micro-animaties vind je bij positieveranderingen van elementen op basis van hovers en scrolling. Wanneer je met je muis of je vinger over een icoontje gaat, zorgt de dynamiek ervoor dat het icoontje beweegt.

Bij ‘scrollen’ helpen timing en positie een element bewegen. Scrollen wordt vaak gebruikt om belangrijke content uit te lichten, omdat dit een goede manier is om aandacht van bezoekers te trekken. Maar ook om producten en diensten aantrekkelijk aan te bieden.

3 voorbeelden van micro-animaties die de gebruikerservaring optimaliseren

Wanneer je micro-animaties in een design gebruikt, kun je de gebruikerservaring verbeteren. Zo’n animatie kan er namelijk voor zorgen dat focus ontstaat, voortgang wordt weergegeven en sprake is van duidelijkere feedback. Zorg er dan wel voor dat je ze goed inzet.

Voorbeeld 1: focus

Een element dat beweegt, trekt de aandacht van iemand. Hierdoor geef je jouw website, interface of app focus.

Webshops gebruiken vaak call-to-actions (CTA). Ze geven een pagina focus en zorgen ervoor dat bezoekers een product of dienst sneller kopen. Een voorbeeld van een CTA is een bestelknop (‘Koop nu’ of ‘Bestel’). Ze hebben vaak een opvallende kleur om de aandacht te trekken. Met micro-animaties kun je er echter voor zorgen dat gebuikers de bestelknop nog sneller opmerken.

Andere voorbeelden van focus zijn prijsstickers bij een product, eenvoudige notificaties of koppen in een webshop voor extra informatie over een bestelling.

CTA animatie

Voorbeeld 2: voortgang

Ook voortgangsprocessen kun je met micro-animaties weergeven. Denk maar eens aan de statusupdate tijdens het uploaden van een bestand. Uploaden kost tijd en vraagt geduld. Via een statusupdate kun je aan gebruikers aangeven hoelang het uploaden nog duurt en dat het proces niet vastloopt. Zo weten je gebruikers precies hoe lang het uploaden gaat duren.

Voortgang animatie

Voorbeeld 3: feedback

Ten slotte kun je met micro-animaties feedback beter in beeld brengen. Bijvoorbeeld wanneer je bij je mailaccount inlogt. Je voert je gebruikersnaam en wachtwoord in, en klikt vervolgens op bijvoorbeeld ‘Ok’. De animatie geeft op een subtiele manier aan dat je jouw gegevens correct hebt ingevuld.

Feedback animatie

Zorg dat het geen tekenfilm wordt

De keuze voor het gebruiken van micro-animaties heeft dezelfde aandacht en inspanning nodig als elk ander aspect van design. Ze zien er leuk uit, maar ze moeten wel de gebruikerservaring ondersteunen, verbeteren en verrijken. Mijn tip: Ga zorgvuldig om met het gebruik van animaties, zodat je website, interface of app geen tekenfilm wordt. Zet animaties alleen in waar ze relevant zijn.

Delen
Reacties

Er zijn nog geen reacties.

Reageer

Praat mee over dit onderwerp

  • Laat hier jouw reactie achter.
  • Jouw naam is verplicht.
  • Vul jouw e-mailadres in.

Met het plaatsen van mijn reactie ga ik ermee akkoord dat Hostnet Academy (indien van toepassing) een afbeelding van https://en.gravatar.com/ toont die gekoppeld is aan het door mij opgegeven e-mailadres. Ook ben ik mij bewust van de gedragscode van Hostnet Academy.