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

Betere gebruikerservaring met micro-animaties

Betere gebruikerservaring met micro-animaties

Door Frans op 5 april 2019

Gebruik subtiele animaties in je design om nadruk te leggen op bepaalde onderdelen die op dat moment belangrijk zijn.

Lees de blog

Teksten schrijven voor je website

Teksten schrijven voor je website

Door Jasmijn op 12 februari 2019

“Ik heb alleen inspiratie nodig dan lukt het wel”. Soms is inspiratie bij het schrijven van een webtekst niet voldoende. Het is belangrijk dat je rekening houdt met de lezer. Zoals de manier waarop hij of zij leest en klikt, maar ook overtuigd wil worden.

Lees de blog

Haal alles uit je SocialCMS, 10 slimme tips!

Haal alles uit je SocialCMS, 10 slimme tips!

Door Jasmijn op 11 januari 2019

Met meer dan 150 tevreden gebruikers werken wij al 10 jaar met het SocialCMS. Naast de doorlopende ontwikkelingen in techniek en het uiterlijk van websites is het goed om met regelmaat weer in de materie te duiken om zo het optimale resultaat te behalen. Samen met deze 10 tips ga je fris en fruitig het nieuwe jaar in met je website.

Lees de blog

Emoji's gebruiken in communicatie met klanten

Emoji's gebruiken in communicatie met klanten

Door Jasmijn op 17 augustus 2018

Even een berichtje naar een vriendin sarcastisch afsluiten met een 😉 of een blozend poppetje als je wederom vergeten bent om het thuisfront in te lichten dat je niet mee-eet. Ze worden landelijk gedoogd in allerlei communicatiekanalen (er is zelfs een world emoji day) maar hoe zit het nu in zakelijke communicatie? Is het dan al snel te amicaal of misschien juist lekker laagdrempelig? Wij zoeken het voor je uit!

Lees de blog