De Kracht van Emotie door Motion

De Kracht van Emotie door Motion

Motion: Een Feedbackmechanisme

Denk eens aan de laatste keer dat je een wachtwoord verkeerd invoerde. Hoe wist je dat het wachtwoord was afgewezen? Trilde het scherm? Veranderde de kleur van een van de knoppen? Waren er visuele veranderingen in de tekstvelden? Als je op een van deze vragen ‘ja’ hebt geantwoord, dan heb je al kennisgemaakt met een van de belangrijkste toepassingen van motion design: het geven van feedback aan de gebruiker. Deze feedback is enorm belangrijk, omdat het gebruikers laat zien welke elementen van een site functioneel zijn en helpt voorspellen wat die elementen waarschijnlijk zullen doen. We bereiken deze feedback door kleine en subtiele visuele veranderingen toe te voegen aan elementen van een website die reageren op de actie van de gebruiker, ook wel micro-interactions genoemd. Hoe klein ze ook zijn, je moet de kracht van deze interacties niet onderschatten. Ervaren motion designers kunnen deze kleine signalen (vaak zo eenvoudig als een verandering in kleur, grootte, positie of rotatie) gebruiken om een naadloze en zeer gebruiksvriendelijke site te creëren die bezoekers moeiteloos kunnen navigeren.

Aandacht Grijpen, de Gebruiker Leiden

Motion designers streven ernaar een website te voorzien van subtiele, visuele wegwijzers die een gebruiker door de website leiden en hun aandacht richten op specifieke elementen die de ontwerper wil benadrukken. Soms verschijnen deze wegwijzers in de vorm van de micro-interactions die we tot nu toe hebben besproken. Maar dit zijn niet de enige manieren om een website met motion te verbeteren. Motion designers gebruiken ook decoratieve bewegende elementen en animaties om de aandacht van de gebruiker op een specifiek object te richten. Stel je bijvoorbeeld voor dat het onderstaande diagram een set knoppen is waarmee een gebruiker kan navigeren.

Stel verder dat je weet dat een bepaalde gebruiker een specifiek gedeelte van je site moet bereiken. Door iets eenvoudigs te doen als het toevoegen van een paar pixels aan beweging aan het element waarmee je wilt dat de gebruiker interacteert, kun je zowel de aandacht van de gebruiker op een natuurlijke manier trekken (het oog kan beweging immers niet weerstaan) als hun aandacht naadloos richten op de informatie die ze nodig hebben.

Het richten en sturen van de aandacht van de gebruiker is bijzonder cruciaal, omdat websites vaak een grote hoeveelheid informatie, content en functionaliteit bevatten. Hoewel we vaak niet kunnen ontsnappen aan de noodzaak om websites met zoveel ‘inhoud’ te vullen, kunnen we ook niet ontkennen dat gebruikers hun beslissing om klant te worden baseren op de eerste 3-5 seconden die ze op een pagina doorbrengen. Motion design dat snel de aandacht van de gebruiker grijpt en stuurt, is daarom van vitaal belang voor een succesvolle moderne website.

Afleiding Verminderen

Een andere manier waarop motion designers proberen de aandacht van gebruikers te grijpen en vast te houden, is door het tegengestelde te voorkomen: afleiding van de gebruiker. Deze taak wordt in zekere zin al vervuld door een website die effectief is voorzien van visuele wegwijzers. Websites met veel content en functionaliteit hebben echter vaak enige tijd nodig om te laden en gebruiksklaar te worden. Hoewel deze laadtijden relatief kort zijn, weten we dat gebruikers beslissingen nemen op basis van slechts secondenlange interacties met de UX van een site. Om de afleiding die gepaard gaat met het wachten op het laden van een site te vermijden (en het risico dat een gebruiker de site verlaat voordat deze klaar is), gebruiken motion designers vaak animaties om deze laadtijden te maskeren en gebruikers voor te bereiden op hun ervaring met een website. Zo gebruiken we bijvoorbeeld voor onze eigen website een loading animation die zowel de aandacht van de gebruiker stuurt als een voorproefje geeft van het werk dat we doen bij Studio Vi.

Dit concept kan net zo goed worden toegepast op overgangen tussen twee pagina’s op de site die laadtijd vereisen. In beide gevallen zorgen animaties ervoor dat de aandacht van de gebruiker behouden blijft terwijl relevante informatie en content voor hen wordt voorbereid.

Hoewel animaties een effectief hulpmiddel kunnen zijn om gebruikersafleiding te verminderen, is het belangrijk om te benadrukken dat motion designers hierbij een dunne lijn bewandelen. Een beetje motion gaat vaak al ver; te veel kan gebruikers juist de tegenovergestelde richting opsturen (weg van je pagina!). Mensen zijn van nature gevoelig voor beweging, waardoor motion design subtiel en beheerst moet worden toegepast. Anders wordt animatie al snel afleidend en overheerst het de aandacht van de gebruiker. Wanneer we bijvoorbeeld een visuele cue ontwerpen voor een knop die naar de checkout-pagina leidt, willen we dat gebruikers zich bewust zijn van de locatie van die knop. Wat we níét willen, is dat gebruikers zó afgeleid raken door de animatie dat ze helemaal vergeten hun aankoop af te ronden! Kortom: als het gaat om motion design, is subtiliteit de sleutel.

Verhaal en Storytelling

Tot nu toe hebben we besproken hoe motion design kan worden gebruikt om de ‘roadmap’ te versterken die gebruikers hanteren om door een website te navigeren (voor andere manieren om deze roadmap te tekenen, zie onze bespreking van Information Architecture). Maar dit is niet de enige manier waarop motion design kan worden ingezet om gebruikers te helpen een website te begrijpen.

Motion kan ook dienen als een storytelling-instrument dat helpt de website samen te brengen tot een compleet verhaal, in lijn met het verhaal dat een merk wil vertellen. Laten we als voorbeeld een website nemen die Studio Vi onlangs heeft afgerond en waarin motion design centraal staat. Kennermerduin Duincampings is een organisatie die drie campings runt in de Nederlandse duinen. Samen met Kennermerduin heeft Studio Vi een interactieve ‘kerstkaart’ ontwikkeld die met behulp van motion alles laat zien wat de organisatie te bieden heeft.

De website neemt je mee op een reis door de Kennermerduin-campings, alsof je in de bus zit die over de pagina rijdt terwijl je door de site navigeert. Alle grafische elementen die de site vullen, zijn geanimeerd in Adobe After Effects en vervolgens geëxporteerd met Lottie. Om een 3D-effect te creëren, gebruikte Studio Vi lagen van animaties die met verschillende snelheden bewegen terwijl je scrollt. Al deze inspanningen kwamen samen in een pagina waar motion-effecten een meeslepende, verhalende ervaring voor de gebruiker creëerden. Deze immersiviteit is op zichzelf al een krachtig marketinginstrument – volgens onze eigen interne data bezocht meer dan 25% van de gebruikers die de Kennermerduin-site bekeken later een van de drie campings die op de website worden uitgelicht.

Mood, Persoonlijkheid en Brand Affinity

Motion kan ook worden gebruikt om een website in lijn te brengen met de persoonlijkheid van een merk. Animations, zelfs in hun eenvoudigste vorm, kunnen emoties effectief overbrengen – variërend van vreugde tot verdriet, van angst tot blijdschap en van vrees tot moed. Het vermogen van motion om emotie toe te voegen stelt ontwerpers in staat websites te bouwen die eruitzien, aanvoelen en functioneren op manieren die gevoelens oproepen bij hun gebruikers. Motion kan zo de psychologische eigenschappen versterken waarmee een merk zich het liefst wil identificeren. Een website die op zo’n fundamenteel niveau affiniteit heeft met een merk maakt de site zowel uniek als plezieriger om te gebruiken.

Om nog een voorbeeld uit ons portfolio te nemen: we hebben onlangs een project afgerond voor de European Academy of Allergy & Clinical Immunology (EAACI), waarbij we hun gehele online aanwezigheid opnieuw hebben ontworpen. Omdat EAACI een organisatie is die zich toelegt op het bestrijden van allergieën door het delen van onderzoek, kozen we voor een animatie van verbonden cirkels die het steeds groter wordende netwerk van wetenschappelijk onderzoek vertegenwoordigen dat EAACI inzet om allergiebehandelingen te verbeteren. Zoals ons werk met EAACI laat zien, kan motion effectief worden ingezet om brand affinity te creëren en te versterken, terwijl tegelijkertijd de gebruikerservaring wordt verbeterd en daarmee ook de prestatiecijfers van een specifieke site.

Case Study: Zandbeek

Als laatste voorbeeld van de kracht van motion design bekijken we een van de recente projecten van Studio Vi. Zandbeek is een contentmarketingbureau dat samenwerkt met diverse merken en hen helpt hun verhaal te vertellen via uiteenlopende contentproductiestrategieën. Omdat Zandbeek hun online aanwezigheid wilde rebranden, kwamen ze naar Studio Vi en gingen ze met ons de samenwerking aan om een passende website te creëren. Een belangrijk onderdeel van hun rebranding was een verandering in hun communicatiestijl, die versterkt moest worden in de visuele aspecten van hun website. Zandbeek streeft ernaar beknopt te zijn in hun communicatie en beeldgebruik en baseert hun contentproductie op het motto: “show, don’t tell”.

Om dit te versterken, integreerden we vloeiende scrolling door de hele website en voegden we motion toe aan de beelden die de site vullen. Daarnaast hebben we de richting van het scrollen van de website aangepast en zo een cinematisch effect gecreëerd waarmee gebruikers soepel en naadloos door de site kunnen navigeren. Door motion toe te voegen aan hun website konden we zowel de gebruikerservaring verbeteren als deze in lijn brengen met de identiteit die Zandbeek het liefst wilde communiceren.

Conclusie

Motion speelt een essentiële rol in het verbeteren van de user experience. Het vermogen om feedback te geven die de manier stuurt waarop gebruikers door een site navigeren, is een cruciaal hulpmiddel in de toolkit van een UX-designer. Bovendien stellen animations motion designers in staat om websites tot leven te brengen op een manier die ze zowel uniek maakt als de brand affinity vergroot. Tot slot, en zeker niet minder belangrijk, biedt motion ontwerpers een krachtig visueel storytelling-instrument dat ze kunnen gebruiken om de merkpersoonlijkheid verder te ondersteunen en de aandacht van de gebruiker te sturen.

Natuurlijk moet motion met mate worden toegepast. Subtiliteit is van vitaal belang, want te veel kan contraproductief werken en gebruikers afschrikken. Deze kanttekening mag je er echter niet van weerhouden motion op je site te gebruiken. Doordacht en vakkundig toegepast motion design is een UX/UI-designstrategie met exponentiële voordelen – een strategie waarvan elke website gebruik zou moeten maken.