073 - 627 1240
Betere gebruikerservaring met micro-animaties

Micro animaties en interacties

geven een betere gebruikerservaring

Frans van der Wijst Geschreven door Frans van der Wijst op vrijdag 5 april 2019

Door de immense massa aan content is het gemakkelijk de focus van de bezoeker te verliezen. Het is dan ook essentieel de juiste accenten te leggen op wat echt belangrijk is en oog te houden voor de visuele aspecten die hierbij gepaard gaan. Door gebruik te maken van micro-animaties verwerk je kleine, subtiele animaties in elementen. Zo wordt de aandacht gestuurd naar waar je deze wilt hebben. Deze ervaringen tillen de website naar een hoger niveau. Ik vertel je graag waar je op moet letten bij het inzetten van micro-animaties.

Zoals deze tekst die mooi in beeld schuift.

Voorbeeld van micro animatie

Inspelen op gebruikerservaring

Door de toename aan diverse kanalen en mogelijkheden van informatie verzamelen raakt de bezoeker snel de weg kwijt. Deze kleine bewegingen geeft de bezoeker duidelijkheid wat er gebeurt als je op iets klikt. Het biedt net dat kleine beetje meer sfeer aan een statische pagina. Daarnaast wil je de bezoeker aan de hand meenemen zonder dat ze verdwalen. Dit kan heel gemakkelijk door gebruik van micro-animaties. We schreven er al eerder over in deze blog over design trends.

Wat zijn nu die geniale micro-animaties?

Dit zijn subtiele en korte bewegende onderdelen die bijvoorbeeld een stuk tekst, een afbeelding of een button laten bewegen. Daarbij is het belangrijk om rekening te houden met timing en het soort beweging. Dit draagt namelijk bij aan het gevoel en de waarneming van de bezoeker. Hierbij houd je rekening met de volgende elementen:

  • Flow

    Hoe soepel verloopt deze micro-animatie?

  • Timing

    Wanneer wordt deze micro-animatie getoond?

  • Snelheid

    Is de beweging goed waarneembaar?

Variëteit aan micro-animaties en micro-interacties

Aandachttrekkers

Voorbeeld van een micro animatie: aandachttrekker

Om een micro-animatie te starten moet het voor de bezoeker ook duidelijk zijn dat er een actie nodig is. Zo kun je de aandacht van je bezoeker richten op de juiste plekken, zoals op een aanbieding of contactformulier. Zie het als een soort signaal om dit te initiëren. Denk daarbij aan het klikken, tappen of swipen.

Doorpakkers

Voorbeeld van een micro animatie: doorpakker

Je wilt de bezoeker graag op de hoogte houden van de acties op de achtergrond. Waar veel acties meteen reactie geven is dat niet bij alle situaties mogelijk. Denk daarbij aan het laden van een pagina of het presenteren van zoekresultaten. Zo kun je ze met een micro-animatie de voortgang van deze actie tonen.

Geruststellers

Voorbeeld van een micro animatie: geruststeller

Als een actie is voltooid wil je de bezoeker als het ware geruststellen dat dit naar behoren is gedaan. Een goede manier is door middel van een micro-animatie die dit op een positieve manier brengt en duidelijk maakt.

Denk groot maar houd het klein

Als je alle teksten in capitals schrijft omdat ze zo belangrijk zijn, verlies je de context van het verhaal. Zo werkt het ook bij micro-animaties. Nuance is key. Zorg dat het geen weldaad aan beweging wordt maar leg de focus op bewuste elementen. Ze moeten de gebruikerservaring ondersteunen en versterken.

 

Wil jij de conversie van je website verbeteren met micro-animaties?

Neem dan contact met ons op

Over Frans van der Wijst

Frans is webdesigner bij Holiday Media

Iedere klant verdient iets unieks, dus ook een website die perfect aansluit bij hun wensen.

Lees ook deze blogs

Gebruiksvriendelijke formulieren

Gebruiksvriendelijke formulieren

Door Max op 17 juli 2020

Een lang, onoverzichtelijk en niet bruikbaar formulier kan zorgen voor een hoop afhakers tijdens het boekingsproces. Zonde eigenlijk, want het inzetten van formulieren kan op een hele slimme manier worden toegepast. Als startpunt van interactie met je gast.

Lees de blog

De beste Call-To-Action buttons

De beste Call-To-Action buttons

Door Jasmijn op 3 juli 2020

Naast dat je hordes aan bezoekers wilt op je website is het wel zo fijn als ze bij een bezoek ook meteen actie ondernemen toch? Denk daarbij aan een boeking, contact opnemen of een brochure downloaden. Hierbij zijn 'Call to Action' buttons cruciaal. Dat zo'n button meer is dan een opvallende link met 'lees meer' leg ik je in deze blog graag uit.

Lees de blog

Digitale toegankelijkheid

Digitale toegankelijkheid

Door Jasmijn op 26 juni 2020

Bij het ontwikkelen van een nieuwe website wordt nog vaak uitgegaan van een gemiddelde gebruiker. Alleen bestaat zoiets als een gemiddelde gebruiker helemaal niet en hierdoor wordt de toegankelijk van website voor een behoorlijke grote groep mensen beperkt. Wat kun je doen om je website toegankelijker te maken?

Lees de blog

Positieve communicatie in uitzonderlijke tijden

Positieve communicatie in uitzonderlijke tijden

Door Jasmijn op 23 maart 2020

In een tijd met veel onduidelijkheid en vooral angst, is het altijd goed om te blijven communiceren. Maar hoe ga je daarmee om in tijden van crisis zoals nu met het coronavirus (COVID-19). Dit vraagt om een gedegen aanpak en het betere ‘omdenkwerk’. Op dit moment is het in Nederland alle hens aan dek door het nieuwe Coronavirus. De vele communicatieteams draaien overuren om iedereen van juiste informatie te voorzien. Wij geven tips voor je online communicatie. We doen het tenslotte samen, nietwaar?

Lees de blog