Web interacties



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

    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.

  • Fotoslider

    Fotoslider
    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.

  • Micro interactie float button

    Float button
    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.

  • Micro interactie geen gebruikers om weer te geven

    Geen gebruikers beschikbaar
    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 dimentie mee te geven.

  • Micro interactie spinner

    Spinner
    Als de gebruiker even moet wachten op bijvoorbeeld een download dan ziet hij al snel een laad animatie. Deze laadanimatie is zo opgebouwd dat hij langzaam start en steeds een stukje

  • 404 page error

    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.

  • Animated School Dashboard

    Geanimeerd school dashboard
    Door het corona virus en het thuis werken en leren heb ik een concept uitgedacht om het thuis leren voor kinderen leuker te maken. Kinderen worden getriggerd door animaties. Aangezien ik zelf het programma Principle aan het leren ben heb ik een dashboard ontworpen met daarin animaties. Het dashboard bestaat uit de verschillende schoolvakken. Met een hover wordt de animatie geactiveerd.







Unieke ontwerpen

Nieuwsgierig naar mijn unieke ontwerpen?
Bekijk ze hiernaast, door te klikken op één van deze vier ontwerpen kom je direct bij de projecten.
Veel plezier!