Make choices, grow,
build your brand!

User Interface animatie: irriteren of converteren?


User interface animatie is een hot topic in front end design. Sommigen vinden het nutteloos en een te zware belasting voor websites. Volgens anderen is het een grote meerwaarde voor de gebruiker. De waarheid? Die zit, as usual, in het midden. Correct gebruikt zijn animaties onmisbaar voor een goede user experience. En overdaad? Dat zorgt voor irritatie.

Leestijd

5 minuten

Categorie

Design

Datum

25-11-2019
Schrijf je in en ontvang maandelijks een update van de belangrijkste ontwikkelingen
Enkele gegevens ontbreken of zijn onjuist

Het formulier kan nog niet worden verzonden omdat het nog niet helemaal (correct) is ingevuld.

Wat zijn animaties?

Afzonderlijke beelden die je zo combineert dat ze vloeiend lijken te bewegen: dat zijn animaties. Het aantal beelden (of frames) dat per seconde te zien is, noemt men framesnelheid of frames per second (FPS). Vanaf 24 FPS bewegen beelden vloeiend.

Waarom heb je user interface animatie nodig?

Simpel: mensen zijn visueel ingesteld. Een beeld zegt echt meer dan duizend woorden. En animaties versterken dit. Met de snelle groei van mobiele apparaten, steeg ook de vraag naar user interface animatie. Waarom? Het is een flexibel en multifunctioneel hulpmiddel. Het helpt op een eenvoudige manier de user experience te verhogen.

Verschillende soorten

Bij front end design gebruik je diverse soorten animaties. Hoewel developers vaak kiezen om een animatie verschillende functies te geven, zijn ze toch ruwweg in te delen.

Voortgang

Een user interface animatie die we zo normaal vinden dat hij niet meer opvalt – behalve als hij ontbreekt. Hij geeft de voortgang van een app of website weer. Ook een pull-to-refresh-animatie valt hieronder. Wees eerlijk: wachten zonder deze animatie is nog veel vervelender.

Jaguar Car Assistant App Concept by Alex Kalinichenko 

Micro-interactie

Ook eentje die we niet meer kunnen missen. Hij informeert je over de actie die je uitvoert: een knop die je indrukt, een menu dat je opent of sluit, een bestand dat je upload, … Het lijkt misschien banaal, maar hoe nerveus word jij wanneer je op een ‘Betalen’-knop drukt en er gebeurt niets?

CRED 2.0 | Assisted Best Actions Framework — Payments by Nandini Gangal for CRED

Navigatie

Zoals de naam al zegt, helpen deze animaties je bij het navigeren door de interface. Ze geven aanwijzingen over aanklikbare, veegbare of opvouwbare elementen. Deze animatie maakt navigeren veel gebruiksvriendelijker.

Drag & Drop upload (html, css version) by Aaron Iker

Uitleg

Een uitleg-animatie vind je onder andere bij tutorials en tooltips. Met beweging trekt de animatie de aandacht van gebruikers en geeft hij snelle, simpele – maar effectieve – aanwijzingen.

Music-interaction-animation-origami by JIANGGM for UIGREAT

Scroll

Geef toe: je spendeert veel werktijd aan scrollen. Dan is het een fijne afwisseling om speciale effecten of animaties tegen te komen, toch? Omdat het zowel horizontaal als verticaal toepasbaar is, zijn er heel veel mogelijkheden.

Anthony Goodwin — 001 by Aristide Benoist

Tom Ford Interactions by Nathan Riley for green chameleon

Transitie

Animaties in overgangen komen we veel tegen. Ze maken een website of app opvallender. Bovendien laten deze animaties vaak iets ‘echt’ lijken: kaarten die worden getrokken zoals in het echt of pagina’s die omslaan zoals in een boek. Ze maken een website of app niet alleen levendiger en aantrekkelijker, ze zorgen er ook voor dat mensen langer blijven hangen (goed voor je SEO!).

A+WQ / Young Lab Story Inner Page Scroll Animation by Zhenya Rynzhuk for Sochnik

Branding

Ook bij branding gebruikt men steeds vaker user interface animatie. Logo-animaties (guilty ;) ) creëren bijvoorbeeld extra sfeer en trekken de aandacht van je websitebezoeker. 

Si™ Weeklies — Interaction Design 001. by Shaban Iddrisu™ for NICE 100

Voordelen User Interface animaties

Je wil een verhoogde user experience? User interface animatie is the answer. Animaties maken navigatie makkelijker en versnellen processen. Bovendien creëer je met animaties een unieke website, eentje die interessant is om te bezoeken. Wil je een bepaald stuk extra laten opvallen? Daar is animatie uitermate geschikt voor. Bezoekers blijven langer hangen én maken meer gebruik van de mogelijkheden. Verwacht dus meer inschrijvingen op je nieuwsbrief en een e-book dat bezoekers vaker downloaden. 

Nadelen user interface animaties

De nadelen van user interface animatie ontstaan vooral door overkill. Te zware of te veel animaties vertragen een website. En lange laadtijden, die moet je natuurlijk voorkomen: een online bezoeker is ongeduldig. Let ook op met puur decoratieve animaties. Aandachttrekkers zijn goed, afleiders moet je vermijden. Je doel is – meestal - toch conversie. Houd ook altijd rekening met mobiel. Als je slechts één versie van een animatie maakt voor alle devices, kies dan voor mobile-first. Hier maak je Google ook gelukkig mee!

Conclusie

Correct gebruikte user interface animaties zijn een grote meerwaarde voor je website. Ze zorgen voor blije bezoekers en een hogere conversie. Maar een goede animatie leidt de gebruiker niet af van het doel. Zorg er ook voor dat ze licht genoeg zijn, je wilt geen wachtende (=geïrriteerde) bezoeker.

Ben jij ook klaar voor animaties op je website? Kom een keer praten met een van onze front end designers! Zij hebben de beste tips om jouw website te laten scoren.


Schrijf je in en ontvang maandelijks een update van de belangrijkste ontwikkelingen
Enkele gegevens ontbreken of zijn onjuist

Het formulier kan nog niet worden verzonden omdat het nog niet helemaal (correct) is ingevuld.