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

Effectief overtuigen met sociale bewijskracht

Effectief overtuigen met sociale bewijskracht

Door Jasmijn op 16 juli 2019

Als consument krijgen we veel keuzes voorgeschoteld. We weten eigenlijk niet wat we precies willen. Wat is nu het beste? Wat doen we? Dat wat anderen ook kopen, want dan zal het toch wel goed zijn? Vooral online maken we graag gebruik van sociale bewijskracht. Het is één van de krachtigste beïnvloedingswapens. Ik leg deze typische vorm van consumentengedrag voor je onder de loep en laat je zien hoe je er zelf gebruik van kunt maken.

Lees de blog

Dag van de hamburger

Dag van de hamburger

Door Jasmijn op 28 mei 2019

Hoera, het is vandaag de Dag van de Hamburger! En wij vieren mee. Het hamburgermenu is een veelbesproken onderwerp bij Holiday Media. En dan hebben we het over die drie horizontale streepjes die als menu navigatie dienen in een website.

Lees de blog

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