Hoe animaties jouw website prestaties kunnen verbeteren

Het ontwerpen van een geweldige website of app is veel meer dan alleen het toepassen van de laatste designtrends. Het is een krachtige mix van visuals (zoals animaties) die indruk maken, een goed doordachte gebruikerservaring, en natuurlijk puike content. Het creëren van een goede UX (user experience) is niets anders dan het continu leren, observeren, bedenken, testen en aanpassen. Het doel? De ultieme gebruikservaring.

Tegenwoordig is het echter niet zo makkelijk om nog indruk te maken of zelfs ook maar te verrassen met een website. Een van de manieren die steeds vaker wordt toegepast in webdesign is het inzetten van animaties. Wij vertellen je daarom graag meer over hoe je de website prestatie verbetert door animatie in UX design toe te passen.

Gebruikservaring tot leven brengen

Weinig dingen zijn leuker op een website dan het bekijken van animaties. Ze bezorgen een glimlach, maar helpen bezoekers ook om de content beter te begrijpen. Met mooie animaties wordt er dus een poging gedaan om voor het wow-effect te zorgen. Belangrijk daarbij te beseffen is dat dit niet het hoofddoel is. De animaties moeten namelijk even mooi als functioneel zijn.

Wanneer we het hebben over functionele animatie, dan hebben we het over een subtiele animatie met een duidelijk en logisch doel. Animaties hebben als doel de cognitieve belasting te verlagen en voor meer duidelijkheid te zorgen. Of op een eenvoudige manier gezegd: een functionele animatie brengt de gebruikerservaring tot leven.

Waarom goede animatie belangrijk is

Animaties kunnen de bezoekerservaring verbeteren, en zorgen daardoor voor meer engagement, meer conversies en uiteindelijk dus meer omzet. Het is niet voor niets dat grote bedrijven complete UX design teams inhouse hebben, die constant bezig zijn met de user flow en micro-animaties. In het algemeen zijn er 4 types animaties die je kan gebruiken:

• Animaties die een bezoeker leidt naar de call-to-action. Bijvoorbeeld een button die lichtjes animeert en daarmee de aandacht trekt.
• Animaties die het laden en wachten prettiger maken. Een klassiek voorbeeld is een ‘loading indicator’ die aangeeft hoe lang het nog duurt.
• Animaties die de bezoeker feedback geeft op zijn interactie. Bijvoorbeeld een winkelmand die elke keer animeert, wanneer je een product toevoegt.
• Animaties die aantonen hoe ver je bent. Bijvoorbeeld een progress bar, die aantoont hoever je bent tijdens een checkout proces.

Goede animatie is onzichtbaar

Opmerkelijk daarbij is hoe een ogenschijnlijk kleine actie, zoals het bewegen van de muis, al voor meer duidelijkheid kan zorgen bij de bezoeker. Een animatie is een nuttige aanvulling op de inhoud en het speelt daarmee vooral een secundaire rol bij het prettiger maken van UX. De functionaliteit, lay-out en navigatie van een site zijn het primaire doel.

Goede animatie is daarmee zo goed als onzichtbaar. Je zou eigenlijk niet eens moeten merken dat je naar animatie kijkt. Dat bereik je door onder meer rekening te houden met de volgende aandachtspunten:

• Let op de laadtijd: slechts een vertraging van één seconde in de sitesnelheid kan resulteren in een vermindering van het aantal conversies en daardoor is de laadtijd cruciaal voor het succes van jouw website. Denk daarom bij het ontwerpen van jouw animatie, aan een licht bestand die je website slechts milliseconden vertraagd.
• Afleidende animaties: Sommige animaties zijn goed bedoeld, maar leiden alleen maar af van het doel. Een ‘back to top’ button, kan handig zijn. Maar als deze al direct verschijnt bij het lezen van de pagina, dan leidt deze af van de content. Toon de ‘back to top’ button dus alleen aan het einde van de pagina.

Conclusie

Het is bewezen dat animaties jouw conversiepercentage kunnen verbeteren. Bedenk dus bij elke stap in de user flow of een animatie de ervaring prettiger kan maken.

Wil je weten wat we bij Whello voor je user experience kunnen betekenen? Je mag ons het hemd van het lijf vragen! Bel of mail ons even voor een afspraak, dan vertellen we je er alles over.