Impactvolle animaties in display-advertenties

Banners, wie merkt die nog op? Display-advertenties lijken soms een gepasseerd station, maar dat is niet zo. Met goed gekozen animaties trek je de aandacht op een manier die bij je merk past en die interacties genereert.

Van subtiele button mouse-overs tot vloeiende slide-in-animaties: wie bekend is met het  ontwikkelen van banners voor display, weet dat animatie een enorme bijdrage kan leveren aan de gebruikerservaring en de zichtbaarheid van je advertentie. Animatie en interactie kunnen  namelijk enorm helpen om de zogenoemde banner-blindness tegen te gaan, oftewel: dat mensen banners eigenlijk niet eens meer echt opmerken. Maar hoe haal  je nou het meeste uit animatie in je display-advertentie?

Eerst het waarom

Allereerst is het goed om na te gaan wat je met de animatie wilt bereiken. Bij een mouse-over-animatie is het waarschijnlijk je intentie om te laten weten dat je met de knop een interactie kunt aangaan. Een ander argument kan zijn dat je aandacht naar je display-advertentie wilt trekken, of dat bewegende elementen simpelweg bij je brand passen.

Kortom, stel jezelf de vraag waarom je gebruikt wilt maken van animatie en zorg dat dit argument aansluit bij hetgeen je wilt vertellen met je advertentie. Dat klinkt misschien nog wat abstract. Ik laat het je zien aan de hand van een wat voorbeelden.

Wees speels

Bij de ontwikkeling van een homepage-takeover en banner set voor het blad Autoweek werd  stilgestaan bij wat animatie kan bijdragen. Een veel gebruikt argument voor het gebruik van animatie is dat het speels is. Voorwaarde is wel dat dit speelse moet aansluiten bij je verhaal of merk. In het geval van Autoweek, dat draait om verhalen rondom het rijden van de meest  uiteenlopende vierwielers, kunnen we aannemen dat dit voor de doelgroep de definitie van speelsheid en plezier is.

Vervolgens is de vertaalslag naar een animatie gemaakt. Hoe vertaal je ‘speelsheid’ naar een  banner die de aandacht trekt én de juiste boodschap verkondigt? Antwoord in dit geval: onder andere met behulp van  interactie. Wanneer een gebruiker interactie heeft, is de kans namelijk groter dat de boodschap ontvangen wordt. De HPTO bestaat uit een sportieve auto met aan de rechterkant een  toerenteller. Wanneer je met de muis over de HPTO beweegt, begint de auto te rijden en loopt de toerenteller op!

Betrek er een animator bij  

Zoals je ziet zijn de mogelijkheden van code-based animatie best breed. Maar hoewel er veel mogelijk is, zijn code-based animaties (nog) niet zo geavanceerd als de motion-technieken binnen animatieprogramma’s als Adobe After Effects, althans niet in dezelfde tijdspanne.

Het aantrekken van een animator kan je helpen om banneranimaties naar een hoger niveau te tillen. Plugins als LotteFiles maken het bijvoorbeeld mogelijk om After Effects-animaties om te zetten naar JSON-code. Deze code kunnen developers vervolgens weer toepassen in hun scripts. Op deze manier kun je toch heel geavanceerde webanimaties ontwikkelen binnen een redelijke tijd.

Interactie op basis van platform

Wanneer je gebruik maakt van interactie, moet dit ook aansluiten op het platform waarop je de  banner uitserveert. Mouse-overs zijn voor desktopgebruikers effectief, maar voor telefoon- en tabletgebruikers natuurlijk niet, omdat de muis daar ontbreekt. Andersom kun je door touch input bij mobiele telefoons en tablets leuke dingen doen met animatie.

Hier is een voorbeeld van de mobile skin van Naïf, waarbij we de animatie laten afspelen op basis van scroll input. Scroll je naar beneden, dan speelt dan animatie vooruit, scroll je naar boven  dan spoelt de animatie weer terug. De gebruiker heeft dus altijd interactie met de display-advertentie, waardoor de kans groot is dat de boodschap doorkomt.

Resultaten meten

Nadat de animators en ontwerpers los zijn gegaan op het bannerontwerp, is het aan de marketeers om de creatie live te zetten in de juiste omgeving en de resultaten te monitoren. Is je banner  gericht op engagement? Staar je dan niet blind op de CTR metric. Bij engagement staan vooral branding en advertentieherkenning centraal. Het is daarom verstandig om events van de interactie te meten. Door dit te doen brengt je duidelijk in kaart hoe aantrekkelijk het is om interactie met de banner aan te gaan. Daarnaast is het ook meteen een goede tussenstap om te meten tussen volume enerzijds en CTR anderzijds.

Animatie kan dus een enorme waarde hebben voor display-adverteren wanneer je buiten de kaders van je huidige workflow denkt. Het maakt advertenties niet alleen leuker voor de gebruiker, maar ook zeker voor jou als ontwerper of programmeur.

Over de auteur: Santos Adel Sayed is Designer / Animator bij Pünktlich.

Op de hoogte blijven van het laatste nieuws binnen je vakgebied? Volg Emerce dan ook op social: LinkedIn, Twitter en Facebook.