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.
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.
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.
Bron: capptivate.co
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.
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’.
Bron: capptivate.co
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.
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.
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.