In ‘t kort: Micro-animaties zijn korte animaties die worden toegevoegd aan onderdelen van een user interface om deze duidelijker of visueel aantrekkelijker te maken om zo de algehele gebruikservaring te verbeteren.

Ik ga nog wel eens met vrienden naar de kroeg. Soms, hoewel ik natuurlijk vooral druk ben met design, stel ik dat ik naar de kroeg ga en er staat een TV aan, dan kijk ik. Het is niet dat ik mijn vrienden saai vind, maar bewegend beeld trekt toch altijd je aandacht. Of het nou voetbal is of het weer – je ogen worden aangetrokken door beweging.

Dat is ook één van de voordelen die micro-animaties in een ontwerp hebben. Als webdesigner wil je de ogen van je gebruiker over de pagina's of door de app heen leiden. Om dat te doen heb je heel wat wapens in je arsenaal, zoals opvallende kleuren, grote knoppen en: beweging!

Met micro-animaties maak je op een slimme manier gebruik van de menselijke eigenschap om altijd te focussen op beweging. Stel je bijvoorbeeld voor dat je een website maakt voor een fotograaf. Er is een grote kans dat zij met een schermvullende foto wil beginnen. Tegelijkertijd is het belangrijk dat mensen wel snappen dat ze nog verder moeten scrollen. Een mogelijke oplossing? Laat een pijltje naar beneden wijzen en deze, na een paar seconden, subtiel op en neer bewegen.

Dit is maar één van de werkelijk ontelbare mogelijkheden die micro-animaties bieden. Als je werkt als user interface-designer zijn ze onmisbaar in je toolbox en je doet er goed aan om je regelmatig te laten inspireren op websites zoals Dribbble.

Om je op weg te helpen hier een aantal voorbeelden hoe micro-animaties jouw product verbeteren:

  • Geef feedback, zoals een knop die rood oplicht als er iets mis is

  • Invoer verifiëren, zoals een vinkje dat in beeld komt als de input correct is

  • Navigatie verbeteren, zoals een uitschuivende zoekbalk die weinig plek in beslag neemt als hij niet wordt gebruikt

  • Verwarring verminderen, zoals een wachtwoordveld dat schudt als de input verkeerd is

Micro-animaties zijn een effectieve manier om websites en applicaties interactiever en aantrekkelijker te maken. Gebruik ze om de gebruikerservaring van je klanten te verbeteren, je ontwerpen tot leven te brengen en je klanten te laten zien wat jij allemaal in je mars hebt.

Figma Starter Design System

Een mini Design System voor Figma om je design project mee te starten. Met grids, kleuren, iconen, design tokens en meer!

Figma Starter Design System image

Figma Starter Design System

Een mini Design System voor Figma om je design project mee te starten. Met grids, kleuren, iconen, design tokens en meer!

Figma Starter Design System image

Figma Starter Design System

Een mini Design System voor Figma om je design project mee te starten. Met grids, kleuren, iconen, design tokens en meer!

Figma Starter Design System image