Gebruikerservaring verbeteren met micro animaties

Gebruikerservaring verbeteren met micro animaties

Zoals wij in ons eerdere blog over de meest gemaakte fouten in webdesign al hebben verteld, is het niet voldoende om een mooie of creatieve website te hebben. Een ‘goede’ website is een krachtige mix van goed doordachte gebruikerservaring, visuals die indruk maken en goede content. De gebruikerservaring en de content van jouw website kunnen verrijkt worden door middel van micro-animaties. Maar wat zijn micro-animaties?

Ben je toe aan: 

Meer klanten, meer omzet én meer rust?

Met de 3M Formule van Free 2 Play helpen wij jouw onderneming groeien. Wij zorgen voor meer klanten, meer omzet én meer rust in je bovenkamer. 

Wat zijn micro animaties?

In onze blog over animaties in webdesign hebben wij toegelicht wat animaties en de bijbehorende voordelen voor jouw website zijn. Micro-animaties zijn onopvallende bewegingen die het User Interface Design en de User Experience sturen op de aandacht van de bezoeker. Deze animaties zorgen ervoor dat de aandacht van de bezoeker naar het onderdeel gaat waar de designer (of jij) het graag wil. De focus zal ervoor zorgen dat de bezoeker weet wat er uiteindelijk moet worden uitgevoerd.  

Animaties zorgen voor focus

Goede animaties zorgen voor focus bij de bezoeker. Door middel van een juiste balans in kleur en eventuele transparantie kan de belangstelling van de bezoeker gegrepen worden. Animaties vallen echter niet altijd goed. Een micro-animatie kan de gebruikerservaring verbeteren, maar bij onnodig of slecht gebruik zorgt het alleen voor afleiding. 

Goede animaties vallen niet op

Een kleine beweging – zoals het bewegen van de muis – kan al voor meer duidelijkheid zorgen bij bezoekers. Micro-animaties zijn een nuttige aanvulling op de inhoud en spelen daarmee vooral een secundaire rol bij het prettiger maken van UX.

Bij een ‘goede’ website zijn de functionaliteit, lay-out en navigatie van de website afgestemd op een optimale bruikbaarheid. De animaties spelen slechts een bijrol. Goede animaties vallen daarmee dus bijna niet op. Een bezoeker zou eigenlijk niet eens moeten merken dat ze naar een animatie kijken. Houd rekening met de volgende aandachtspunten om dit te bereiken.

Laadtijd

De laadtijd van jouw website is ontzettend belangrijk. Een vertraging van slechts één seconde kan al resulteren in minder conversies. De laadtijd van jouw animatie speelt een grote rol in de website snelheid. Denk bij het ontwerpen van animaties dus in milliseconden en niet eens meer in seconden. 

Uit onderzoek is gebleken dat de optimale snelheid voor een animatie tussen 200 en 500 ms zit. Deze cijfers zijn gebaseerd op bepaalde kwaliteiten van het brein. Een animatie die korter duurt dan 100 ms wordt helemaal niet opgemerkt. Daarentegen zorgen animaties die langer dan 1 seconde duren ervoor dat de bezoeker verveelt raakt.

gebruikerservaring verbeteren micro animaties
Bron Quora.com

Stuur de bezoeker

Veel websites staan nog steeds bomvol met informatie. Door middel van animaties krijg je minder volle pagina’s en wordt jouw website voor bezoekers een stuk overzichtelijker. Je kunt animaties zelfs zodanig timen dat ze na elkaar zichtbaar worden in plaats van tegelijk. Bezoekers krijgen hierdoor niet een bomvol scherm te zien maar worden door jou bij de hand genomen. Op deze manier stuur je bezoekers door animaties handig op elkaar in te laten spelen.

Let bij animaties die direct na elkaar worden afgespeeld wel op de tijd die er tussen de animaties zit. Het verschijnen van elke nieuwe animatie moet 20 tot 25 ms duren. Als het langer duurt kan de bezoeker zich hieraan irriteren.

gebruikerservaring verbeteren micro animaties
Bron Quora.com

Het inzetten van micro animaties

Micro-animaties kunnen op drie manieren worden ingezet als het gaat om de optimalisatie van de gebruikers ervaring.

Focus verleggen

Met een bewegend element kun je uitstekend aandacht trekken. Leg de focus op het bewegende gedeelte als je wilt dat de bezoeker iets ziet. Pas dit bijvoorbeeld toe bij een CTA-knop. Op de meeste websites hebben deze knoppen al een opvallende kleur zodat bezoekers de knop direct opmerken. Met micro-animaties kun je deze knop nog meer laten opvallen.

gebruikerservaring verbeteren micro animaties

Feedback vragen

Micro-animaties zijn ook een ideale manier om feedback te vragen aan de bezoekers. Met micro-animaties kun jij de feedback functie op een subtiele manier laten opvallen en aangeven dat de bezoeker de gegevens goed heeft ingevuld.

Voortgang controleren

Het is ook mogelijk om voortgang processen te laten zien aan de hand van micro-animaties. Bijvoorbeeld bij het uploaden van een bestand. De bezoeker kan door middel van de micro-animatie duidelijk zien dat het bestand aan het uploaden is en hoe lang het uploaden nog duurt.

Hulp nodig bij het verbeteren van de gebruiksvriendelijkheid van jouw website?

Onze webdesigners hebben ontzettend veel ervaring op het gebied van micro-animaties en weten als geen ander hoe zij dit kunnen inzetten om ook jouw website gebruiksvriendelijker te maken. Ben jij benieuwd wat wij voor jou kunnen betekenen? Neem contact met ons op voor een gratis en vrijblijvend gesprek.