Thomas, Divipower

Het zal waarschijnlijk best zo zijn dat bij het afgaan van uw mobiel de eerste micro-animaties al voorbij zijn gekomen. Een bewegende wekker heldert uw scherm op. U gaat langs uw social-media feeds en komt van alles tegen. Veel beweegt, oftewel, is geanimeerd.

Nu de wereld van het webdesignen een bruisende wereld is van nieuwe informatie, kennis, mogelijkheden en programma’s, is het belangrijk oog te houden voor de visuele aspecten die hierbij gepaard gaan. Zo wordt het bekende hartje op Instagram rood als het wordt aangeklikt, en beweegt het duimpje als je iets liket. 

Het is een kleine vorm van aandachtstrekkerij. En we doen er zelf aan mee. We willen de aandacht richten op iets wat we voor de gebruiker als belangrijk achten. Deze kleine geanimeerde emoticons geven ons duidelijkheid wat er gebeurt als je iets aanklikt, laten ons zien wat de gebruiker moet doen of bieden gewoon net dat kleine beetje meer leven aan een statische pagina.

Micro-animaties hebben een paar kleine richtlijnen waar ze aan moeten voldoen. Een micro animatie doorloopt een kleine cyclus;

Trigger

De micro animatie wordt geactiveerd. Dit kan zijn door een beweging, hoover van de muis of muisklik.

u

Regels

Wat doet de micro animatie? Wat wordt er voor de gebruiker weergegeven?

i

Feedback

Is er tijdens het uitvoeren van de micro-animatie iets fout gegaan? Dit wordt door het systeem gemeld en een andere actie wordt ingezet.

+

Herhaling

De micro kan zich blijven herhalen als dat vereist wordt. Bijvoorbeeld als de pagina wordt herladen.

Micro-animaties hoeven niet groots aanwezig te zijn. Zo zijn ze vaak meestal alleen te zien als de gebruiker er met zijn muis overheen scrollt.
Bij het contactfomulier op de Divipower contactpagina is te zien dat er bij het selecteren van het tekstveld een oranje verticale indicatie wordt gegeven. Een soort verduidelijking waar de gebruiker zich bevindt. Daarnaast geeft het ook een erg leuke finishing touch.

Natuurlijk zijn er op deze website veel meer micro-animaties te vinden. Zo is de animatie aan de bovenkant van deze pagina natuurlijk al een van de meest opvallende. Daarnaast ook natuurlijk het “Back to Top” knopje rechtonder dat in is komen schuiven, het inschrijf formulier voor de nieuwsbrief dat is omhoog geschoven, en worden de emoticons van het 4-stappen plan van een micro animatie vergroot. Kijk snel nog maar even mocht u die gemist hebben.

Ik hoop dat er dankzij deze kleine tour door micro-animaties wat is bijgeleerd over deze kleine bewegende animaties en hoe deze overal op je beeld verschijnen. Hieronder nog enkele overdreven knoppen met wat geanimeerde effecten.