9

Animaties kunnen net dat verschil maken tussen een goede gebruikerservaring en een geweldige gebruikerservaring. Door middel van animatie maak je de acties die een gebruiker op jouw website of app moet ondernemen duidelijker, vloeiender en intuïtiever. Ook is animatie een hele mooie manier om jouw merkidentiteit kracht bij te zetten. Achter elke beweging schuilt een persoonlijkheid. Ben je klaar om de volgende stap te zetten in jouw user experience? Lees dan snel verder!

Animatie en gebruikerservaring

De toegevoegde waarde van animatie voor de gebruikerservaring is iets dat nog vaak wordt onderschat. Wij merken dat het regelmatig wordt gezien als een leuk extraatje en niet als iets dat echt wezenlijk verschil maakt. Daarom wordt er binnen de ontwikkeling van een app of website meestal weinig tijd en budget voor vrijgemaakt. Dat is jammer, want het op de juiste manier inzetten van animaties voorkomt verwarring, frustratie en onzekerheid, waardoor de gebruiker jouw website of app met veel meer plezier zal gebruiken.

De plaats van functies aangeven

Het gebruik van websites en apps op mobiele apparaten stijgt al jaren explosief en dat heeft grote gevolgen gehad voor webdesign. Doordat de schermen veel kleiner zijn dan die van de desktop moet er anders omgesprongen worden met de beschikbare ruimte. Daarom worden elementen vaak verborgen tot de gebruiker ze daadwerkelijk nodig heeft. Het nadeel hiervan is echter dat verborgen elementen soms lastig te vinden zijn. Door animatie op de juiste manier in te zetten maak jij duidelijk waar bepaalde elementen te vinden zijn.

Een goed voorbeeld is de app van Casts, een app voor podcasts. Links zie je de oude versie, rechts versie na een redesign. In het linker voorbeeld zien we het scherm van onder verschijnen en vervolgens verdwijnen in het niets. In het rechter voorbeeld zien we een veel logischere vorm, het menu verschijnt van onder en schuift weer terug naar zijn plek. Zo is het veel duidelijker op welke manier de gebruiker dit menu weer terug tevoorschijn kan toveren.

marketplace

Bron: Prototypr.io 

Een proces verduidelijken

Vaak heeft de gebruiker wat aanwijzingen nodig voor hij helemaal lekker met jouw website of app overweg kan. Met animaties kun jij op een hele subtiele manier suggesties doen. Vaak heb je niet eens tekst nodig, maar is een kleine beweging al genoeg om duidelijk te maken dat er iets gaat gebeuren wanneer je ergens op klikt. Zoals in onderstaand voorbeeld. Je aandacht gaat direct naar de dag van vandaag, de informatie die de meeste gebruikers willen zien.

ezgif-3330020064

Bron: capptivate.co

En nog een goed voorbeeld. Hier zorgt de animatie er voor dat de aandacht direct naar de belangrijkste functie gaat, het creëren van een nieuwe taak.

asana_guide_relaunch

Bron: Dribbble.com

Bevestiging geven

Als je een actie uitvoert dan wil je als gebruiker zien dat dit resultaat heeft gehad. In onderstaand voorbeeld zie je hoe het toevoegen van een nieuw item extra wordt benadrukt door middel van animatie. Zo hoeft de gebruiker niet eerst te zoeken naar waar het toegevoegde item heen is gegaan. Natuurlijk had deze het nieuwe item uiteindelijk ook zonder de animatie gevonden, maar het voorkomt dat kleine moment van onzekerheid. Het werkt ook de andere kant op. Doet de gebruiker iets dat niet mogelijk is of wordt er een verkeerd wachtwoord ingetypt? Door het element kort van links naar rechts te schudden (we kennen dit gebaar van het nee-schudden) laat je direct weten dat er iets niet goed gaat, zodat de gebruiker het niet blijft proberen.

ezgif-3828287433

Bron: capptivate.co

De gebruiker afleiden van vertraging

We willen het zoveel mogelijk vermijden, maar soms kun je er nu eenmaal niet omheen. Soms moet iets even laden en ontstaat er wat vertraging. Dit kan voor veel irritatie zorgen bij de gebruiker. Niemand vindt het leuk om te wachten en zeker niet als je niet weet waarop. Deze irritatie neem je (deels) weg door in plaats van een saai, draaiend tandwieltje te kiezen voor een leuke animatie. In onderstaand voorbeeld wordt verteld waar je op moet wachten (er worden foto’s geanalyseerd) en het proces wordt op een leuke manier inzichtelijk gemaakt. Zo voorkom je het gevoel van ‘waar zit ik nu weer op te wachten’.

ezgif-3628041323

Bron: capptivate.co

Zo moet het niet: animatie overkill

Maar het kan ook iets too much worden. Zoals te zien is in onderstaand voorbeeld. Het is een leuke visuele plaat, maar er gebeurt zo veel tegelijkertijd dat het moeilijk wordt om te volgen wat er allemaal gaande is. Je ogen schieten alle kanten op, waardoor de animatie eerder voor verwarring zorgt dan voor een betere gebruikerservaring.

Animaties kunnen er leuk uitzien, maar vergeet niet dat een gebruiker die animatie wellicht 1000 keer gaat zien en dat deze prachtige overgang ineens vervelend en irritant wordt. Het is dus heel belangrijk om hier een goede balans in te vinden.

1-z3wbdo5oivzrcvlssrnupa

Bron: Medium.com

Animatie en merkbeleving

Animaties hoeven niet alleen praktisch te zijn, ze kunnen ook net dat beetje extra geven als het gaat om je merkbeleving. Zoals dat ook bij mensen het geval is, geeft beweging karakter aan je merk. Beweging kan van alles uitstralen, kracht of elegantie bijvoorbeeld. Het is daarom goed om na te denken over wat jij met je merk wilt uitstralen en welke manier van bewegen daarbij hoort. Zo geef je een extra dimensie aan jouw merkidentiteit. Ook kun je door middel van animaties gemakkelijker een verhaal vertellen dan met stilstaand beeld.

Persoonlijkheid laten zien

Deze animatie voor advocatenkantoor Van Diepen Van der Kroef moest zakelijkheid en professionaliteit uitstralen. We hebben doorom gekozen voor dynamische lijnen en vloeiende bewegingen.

main-comp-var-6-axel2

Een verhaal vertellen

Animatie geeft leven aan de karakters die je gebruikt in je website of binnen je app. Ze helpen je een verhaal te vertellen, zoals bij deze animaties voor kinderopvangorganisatie Solidoe.

solidoe_vegrootglas_concept_2

Een ander mooi voorbeeld van een niet direct praktische animatie, die wel toegevoegde waarde biedt aan de beleving van een gebruiker. Het maakt het ‘game over’ gaan (wat nooit echt leuk is natuurlijk) iets minder zwaar door een leuke animatie toe te voegen.

toybox-large

Bron: Dribbble.com

Motion language

Om te zorgen dat er geen wirwar aan animaties ontstaat, kan het ontwikkelen van een motion language erg nuttig zijn. Dit is een aanvulling op het bekende huisstijlhandboek, maar focust zich meer op de geanimeerde toepassingen. Deze kan apps en websites omvatten, maar bijvoorbeeld ook logo-animaties en video promo’s. Wil je echt serieus aan de slag met motion design? Dan is dit eigenlijk een must.

Wil jij eens met ons sparren over hoe zo’n motion language er voor jou uit zou zien of ben jij er klaar voor om jouw online experience naar een hoger niveau te tillen met animatie? We bespreken het graag onder het genot van een lekker kopje koffie.

Van gedachten wisselen over een nieuw idee of een offerteaanvraag?