Web animaties

Kleine animaties binnen een website, webshop of applicatie zorgen ervoor dat de gebruiker geholpen wordt met het uitvoeren van zijn taak.

Animatie

Micro-interacties

Micro interacties werken omdat deze aantrekkelijk zijn voor de natuurlijke behoefte aan erkenning van de gebruiker. De gebruiker weet namelijk direct dat de actie is geaccepteerd en word hierbij visueel beloond. Daarnaast kunnen micro interacties gebruikers laten zien hoe het systeem werkt en ze kunnen de website, webshop of webapplicatie uniek maken. Ontworpen micro interacties ondersteunen dus de behoeften en doelen van de gebruiker.

HORTIZONTALE SLIDER

Het doel van deze slider is om de gebruiker meerdere landen te laten selecteren waar hij interesse in heeft. Dit wordt gedaan met behulp van een horizontale slider. De geselecteerde landen worden omcirkeld en het badge-nummer wordt verhoogd.

INFORMATIEVE TEGELS

Als gebruiker wil je gerichte informatie zien die voor jou van toepassing is. Hierdoor blijft de user interface overzichtelijk. Met behulp van een micro-animatie kan er meer informatie worden getoond. De gebruiker activeert dit door over het blok te hoveren.

FOTOSLIDERS

De fotoslider is bedoeld om meerdere afbeeldingen tegelijkertijd te tonen. Dit wordt bereikt door de eerste vijf foto's weer te geven. Dankzij de speelse opstelling ziet de gebruiker dat er meerdere afbeeldingen beschikbaar zijn en kan hij via de navigatiepijlen naar de volgende reeks foto's gaan. De eerste vijf foto's schuiven uit beeld terwijl de volgende reeks in beeld schuift.

FLOATBUTTON

Als gebruiker wil je informatie en acties op het moment wanneer ze relevant zijn, en dit geldt ook binnen een applicatie. In dit geval zijn de acties onder een float button geplaatst. Deze wordt geopend door te klikken op de call-to-action button. Vervolgens start de animatie. De animatie is zo opgebouwd dat de volgende actiebutton pas tevoorschijn komt wanneer zijn voorganger op de juiste plaats staat.

FAQ Parking

Alle informatie die nodig is om gemakkelijk te parkeren en een nieuwe stad te bezoeken, komt samen in dit component op één plek. De knoppen bevatten een micro-animatie die fungeert als trigger om de gebruiker verder op weg te helpen.

Kleine photo slider

Deze micro-interactie is geïntegreerd in de knoppen van de slider. De pijlen vertonen een animatie wanneer erover wordt gehoverd.

GEEN GEBRUIKERS

Deze micro-animatie is ontworpen om de gebruiker erop te wijzen dat er geen gebruikers aanwezig zijn binnen het systeem. Dit kan worden opgelost door naar de admin-omgeving te gaan en daar gebruikers aan te maken. De animatie is zo opgebouwd dat de gebruiker direct de juiste boodschap en oplossing krijgt. De grafische elementen bieden hierbij ondersteuning. De vraagtekens worden vergroot en verkleind, terwijl de wolken bewegen om meer dynamiek toe te voegen.