Web animaties

Deze kleine animaties op een website zorgen ervoor dat de gebruiker zich prettig voelt met de taak die hij uitvoert.

Bekijk hieronder de case

Animatie

Micro-interacties
Deze kleine animaties op een website zorgen ervoor dat de gebruiker zich prettig voelt met de taak die hij uitvoert. 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 kun je de website of webshop uniek maken. Ontworpen micro interacties ondersteunen dus de behoeften en doelen van de gebruiker.

INFORMATIEVE TEGELS

Als gebruiker wil je gerichte informatie zien die voor jouw van toepassing is. Met behulp van deze animatie kan de gebruiker eerst een keuze maken uit de hoofdonderwerpen. Met een hover verschijnt vervolgens de overige informatie over dat specifieke onderwerp.

FOTOSLIDERS

Aan geanimeerde fotoslider waarbij in eerste instantie vijf foto's direct zichtbaar zijn. Door de speelse opstelling ziet de gebruiker dat er meer content aanwezig is en gaat via de navigatiepijlen naar de volgende fotoreeksen toen. De eerste vijf foto's sliden uit beeld en de volgende reeks slide in beeld.

FLOATBUTTON

Om de gebruiker te ontlasten zijn niet alle actiebuttons direct zichtbaar binnen de applicatie maar onder een float button geplaatst. Deze wordt geopend middels een klik op de cirkel. Vervolgens begint de animatie. De animatie is zo opgebouwd dat de volgende actiebutton pas te voorschijn komt wanneer zijn voorganger op de juiste plaats staat.

GEEN GEBRUIKERS

Deze micro-animatie is ontworpen om de gebruiker er op te wijzen dat er geen gebruikers aanwezig zijn binnen het systeem. Dit kan hij oplossen 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 graphic geeft hierbij ondersteuning. De vraagtekens vergroten en verkleinen en de wolken bewegen om meer dementie mee te geven.

404 ERROR PAGINA

Als de gebruiker op een pagina komt die niet binnen de website of webshop bestaat dan krijgt hij een 404 error pagina te zien. In dit geval is de gebruiker in staat om terug te keren naar de homepage. Om een vrolijke noot aan de error pagina mee te geven is er gekozen voor een character animatie in combinatie met lopende tekst.