Website conversie verhogen met animatie Bijna iedereen kent de tijd in de begin jaren 2000 waar Flash en gif animatie werd gebruikt in websites om het “cool” gehalte te verhogen. Erg gebruiksvriendelijk waren de animaties niet en meestal wel erg irritant. Die tijden zijn gelukkig verleden tijd en de meeste webspecialisten weten nu wel beter.
Wanneer je animatie goed gebruikt kan dit bijdragen voor een betere gebruikerservaring en wij weten dat een betere gebruikerservaring bijdraagt aan een betere conversie.

Maar hoe zet je animatie doeltreffend in? En wanneer gebruik je het? Met een paar voorbeelden laat ik zien hoe animatie kan worden gebruikt voor een betere gebruikerservaring voor een hogere conversie.

Hoe gebruik je animatie?

Met de laatste webtechnieken (HTML5 CSS3 en Javascript) is het een stuk eenvoudiger om animatie te integreren in je website. De webstandaarden zijn de laatste jaren aanzienlijk verbeterd en daarom zie je animatie steeds meer terug op moderne websites. Maar wanneer gebruik je nou animatie effectief voor de gebruikerservaring? En waar moet je opletten?

door Nick Frost for PixelBuddha

door Nick Frost for PixelBuddha

Gebruikers aandacht/ focus

Met een korte animatie kun je net even de aandacht van de gebruiker vragen van een specifiek element op je website. Denk hierbij aan het laden van een onderdeel van de pagina. Of het oplichten van een web element die de aandacht vraagt. Wees wel voorzichtig met dit soort animaties want als je dit misbruikt kan dit irritatie/onduidelijkheid wekken bij de gebruiker. Gebruik niet meerdere animaties tegelijkertijd, dan is het doel van de animatie verloren.

Relaties tussen objecten aangeven

Sommige objecten in een website zijn gerelateerd aan elkaar maar staan niet gegroepeerd bij elkaar. Met animatie kun je ervoor zorgen dat die verschillende elementen met elkaar verbonden zijn. Denk hierbij aan een product en winkelwagen van een webshop. De winkelwagen staat in de header en het product in het content gedeelte. Als de gebruiker het product toevoegt.

meo-add-to-cart-v2

Relaties tussen objecten d.m.v. animatie

Een aantal basisvoorwaarden voor website animatie zijn:

  • Begeleid en leert de gebruiker hoe om te gaan met de webinterface
  • Geeft feedback aan de gebruiker over de status van de webinterface
  • Consistent en duidelijk naar de gebruiker
  • Snel en vloeiend

Conclusie

Animatie kan voor meer conversie zorgen mits daar goed gebruik van wordt gemaakt. Het doel is om altijd te kijken wat de animatie toevoegt voor de gebruikerservaring. Kijk goed wat de webstandaarden zijn van grote partijen als Google of Apple zo weet je dat het onder de meeste gebruikers geaccepteerd en niet verwarrend werkt. Met een A/B test zou je kunnen achterhalen of de animatie meer goed doet dan fout.