Interactieve HTML5 banners laten maken

Trigger je doelgroep om interactief aan de slag te gaan met je product of merk waardoor je nog langer top of mind blijft terwijl het resultaat van de campagne ook nog eens verbeterd wordt!

Wat zijn Interactieve HTML5 banners?

Interactieve banners zijn online advertenties die door middel van HTML5 technieken zoals Javascript interactief zijn gemaakt. Interactie kan zo simpel zijn als een muis beweging, maar zo ingewikkeld worden als advergame (mini game) met video animaties. Interactieve banners zijn Rich Media en daardoor niet via ieder advertentie platform in te zetten. Wij ontwikkelen het liefst interactieve HTML5 banners via het Weborama systeem, omdat zij ons veel vrijheid geven om jou een impactvolle campagne te laten draaien.

Interactieve banners zijn er vele vormen en maten. Wij als creative studio kunnen ze allemaal voor je maken. In theorie ligt de limiet bij wat de gewenste advertentie systemen toestaan op het gebied van interactie en niet op wat wij kunnen ontwikkelen. We zijn grote voorstanders van interactieve HTML5 banners, omdat je de doelgroep kan triggeren tot het daadwerkelijk kennis maken met je product zonder dat ze deze bijvoorbeeld gekocht hebben. Als je puur op CTR (Click Through Rate naar een landingspagina) gebied kijkt werken interactieve banners “slecht”, want kijkers klikken binnen de banner en gaan niet meteen naar de landingspagina. Echter de traffic die uiteindelijk door klikt naar je website zijn van hoge kwaliteit waarbij de kans op conversatie uitermate hoog ligt. Tevens heeft interactie al jaren haar kracht bewezen doordat een moment van “doen” door 90% van de mensen wordt onthouden en blijft daardoor veel beter in het geheugen hangen. Interessant? Bekijk onze interactieve HTML5 banner voorbeelden hieronder:

Doelstelling van Interactive banners

Wil je maximale engagement wil tussen je merk en je doelgroep? Ga dan voor interactieve HTML5 banners waardoor je boodschap, product of service extra lang bij de doelgroep blijft hangen. Doordat dit Rich Media banners zijn, zijn de specifcaties vaak wat ruimer waardoor we hier ook visueel een knaller campagne van kunnen maken wat weer zorgt voor een hoge awareness waarde.

80/100
Awareness & branding
60/100
Traffic & conversie
100/100
Interactie & engagement

Interactieve banner voorbeelden en mogelijkheden

Interactie kan heel kleinschalig zijn, maar ook heel uitgebreid en interactie kan zowel in de banner content zitten, maar ook een ad unit kan al een interactief template zijn wat eenvoudig kan worden ingevuld. Wij gaan als creatie partij vooral in op de interactieve content in een banner. Hieronder vindt je diverse voorbeelden voor interactie op verschillende devices, maar weet dat wij nagenoeg alles kunnen ontwikkelen mits de ad specificaties het maar toe laten.

Conversation banner (techniek)

We hebben onze eigen conversation techniek gebouwd waarmee we in HTML5 banners, waar interactie in is toegestaan, een conversatie- of chatbot in kunnen bouwen. Laat je doelgroep zelf keuzes maken waarop het verhaal in de banners zich aanpast. Zo kun je je doelgroep naar een specifieke call to action of eindkaart leiden die het beste bij hen zal passen waardoor de kans op kwalitatieve traffic erg hoog is. Naast tekst en buttons kunnen we ook andere elementen inbouwen zoals afbeeldingen, video en audio.
Daarnaast kunnen we in de meeste gevallen de keuzes van de doelgroep meten, waardoor jij veel van je doelgroep en zijn/haar interesses kunt leren. Zeer breed inzetbaar, van keuzehulp tot vacaturezoeker tot stap voor stap spel uitleg.

Content slider of carrousel ad

Of je nu op zoek bent naar een image viewer, een product carrousel of een stappenplan slider. We kunnen alle soorten sliders in een HTML5 banner ontwikkelen. Dit kan zo eenvoudig als verschillende afbeeldingen na elkaar in beeld faden, maar we kunnen ook per content container uitgebreide animaties maken om het geheel écht tot leven te laten komen. Met de pijlknoppen kan de kijker altijd handmatig door de content heen bladeren, maar ook wanneer deze geen interactie heeft uitgevoerd kunnen we de content automatisch laten rouleren om de kijker uit te dagen. Door de doelgroep zelf te laten bladeren zijn ze doelbewust bezig met je campagne/merk en kunnen ze alles op hun eigen tempo bekijken.

Interactieve video banners

Video wordt steeds belangrijker in de advertentiewereld, maar veel partijen zien video als alleen awareness terwijl er met interactie veel meer resultaat behaald kan worden! Zo maken we van een standaard video een interactieve video banner, door bijvoorbeeld op een cliffhanger moment te pauzeren en de kijker te vragen om te klikken/drukken om verder te gaan. Vanaf dat moment is er user interaction en mag ook het geluid automatisch aan worden gezet. Op deze manier komt de boodschap nog beter over en is de kijker echt actief bezig met je campagne boodschap en zal deze beter onthouden worden.
Een ander voorbeeld van interactieve video is in een catalogus video touchpoints te tonen bij producten die je in de video ziet. Ga je hier met je muis overheen dan pauzeert de video en krijg je in de banner meer informatie over het product.

Interactive Page takeover

De Page Takeover is al een impactvol formaat, maar wanneer we deze ook nog eens interactief maken krijg je écht een top of the line campagne. Naast dat je campagne boodschap op spectaculaire wijze kan worden vertoond gaan we met interactieve elementen voor maximale engagement met jouw merk of product.

Een Interactieve Page Takeover blijft dus extra goed hangen in het hoofd van de kijker, de kans is groter dat deze een actie onderneemt in de banner én de conversie wordt hoger op je landingspagina.

Interactieve keuze banners

Geef de kijker een keuze die de verhaallijn in je banner kan beïnvloeden om direct te zorgen voor meer engagement met jouw product of merk. Terwijl de kijker denkt dat deze zelf een keuze maakt kunnen jullie natuurlijk alle keuzes zo buigen dat deze altijd in het voordeel zijn van jullie product of merk. Deze keuze kan in allerlei vormen getoond worden, denk aan animatie maar ook aan verschillende video’s.

Leuk weetje: dit is ook mogelijk in een interactieve Pre-roll (VPAID)!

Laat de kijker kiezen welke advertentie content deze te zien krijgt voor maximaal resultaat.

HTML5 Advergame banners

Leg je product uit aan de kijker door er een interactieve mini game (ook wel Advergame of Playable Ad genoemd) van te maken of toon in een banner een kleine demo van je echte videogame om kijkers nieuwsgierig te maken. Ook hier is enorm veel mogelijk, maar moeten we altijd rekening houden met de grenzen van HTML5, de specs van de publishers en de (device)hardware van de kijker.

Met technieken als mouse follow, slepen of drag en drop kunnen we al veel basic game mechanics maken die voor een kijker erg leuk kunnen zijn om mee te spelen. Onthoud dat het ontwikkelen van spelelementen extra productietijd (en kosten) met zich mee kan brengen.

Divide & slide vergelijkings banners

Ook wel slide compare of slider banner genoemd; deze interactieve banner technologie laat de kijker de perfecte vergelijking maken tussen twee items door een schuif in het midden met de muis of met de vinger (op mobiel). Enkele voorbeelden zijn het laten zien van een gezicht met of zonder die nieuwe make-up of het effect van een product bij daglicht en bij een donkere nacht. Ook kun je denken aan een nieuwe versie van een product waarbij er bijvoorbeeld een “stoere” mannen versie is gekomen die je zo mooi kunt vergelijken met het normale model. Relatief simpele interactieve banners, maar bij het juiste product wel zeer doeltreffend!

Interactieve banners met multi video

Multi page / video banners

Of je nu meerdere producten in een banner wil laten zien of juist meer informatie wilt tonen dan er eigenlijk in een banner past. Het kan allemaal met een interactieve multi-item display banner. Als je meerdere producten hebt wil je deze misschien een soort product viewer laten zien waar kijkers zelf doorheen kunnen bladeren. Naast het tonen van een ander product kan er ook andere tekst of een video bij getoond worden.

Als je verschillende informatie wil laten zien maken we gebruik van een multi-page principe. In feite heb je een klein menu binnen een banner die verschillende pagina’s kan laten zien. Elke pagina kan weer helemaal naar wens worden ingevuld.

Framescroller HTML5 banner

Wat ons betreft een super gave techniek die in eerste instantie erg subtiel is, maar zodra de kijker doorheeft wat er gebeurt, volgt de interactie snel! De Weborama Framescroller kan namelijk animatie en video op basis van de scroll positie van de kijker laten bewegen. Wanneer de kijker de ad in beeld scrollt gaat deze dus op het scroll tempo (met vaak bijbehorende veeg bewegingen) animeren wat een uniek en opvallend effect heeft! Wij kunnen deze techniek in bijna ieder Weborama Rich Media template verwerken dus denk verder dan het template formaat! Let er wel op dat het effect op mobiele apparaten het mooiste resultaat geeft.

Scratch banner (techniek)

Waar vaak wordt gedacht dat een Scratch banner een specifiek formaat is, is het een HTML5 techniek die in principe in iedere Rich Media banner kan worden verwerkt. Stiekem zijn er ontzettend veel mogelijkheden om met de scratch banner techniek leuke interactieve banners te maken. Vaak denkt men niet verder dan een kraskaart open krassen of een ijslaag wegkrassen terwijl er van alles mogelijk is, van iets zoeken (zie voorbeeld) tot je schutting opfrissen met nieuwe beits tot het schoonmaken van de stoeptegels in je tuin. Meer inspiratie nodig? Neem contact met ons op!

Pre-fill banners

Verhoog je conversie door een slim formulier (van kenteken tot postcode tot interesse) in je interactieve banners te bouwen die bij het drukken op een knop alle informatie meestuurt naar jouw landingspagina. Zorg dat je op de landingspagina weer meteen aan de slag gaat met die informatie en een bezoeker is nog sneller geneigd om actie te ondernemen.

Er kan allerlei input worden meegestuurd in een prefill banner zoals tekst, keuzes, telefoonnummers, e-mailadressen of gegevens die via buttons worden ingesteld. Denk ook buiten inputvelden, maar ook aan bijvoorbeeld een meerkeuzevraag met knoppen met antwoorden. Ook kan een formulier als entertainment onderdeel worden ingezet om meer engagement met je bezoeker te generen. Denk hierbij aan prijsvraag of een quiz waar bezoekers een prijs mee kunnen winnen.

Onthoudt wel dat je adserving systeem URL parameters moet ondersteunen (dus waardes die we achter de click URL mogen plaatsen). Twijfel je of dit mogelijk is? Vraag gerust naar meer informatie.

Mobiele Interactieve banners

Steeds meer smartphones maken gebruik van allerlei hardware snufjes en voor mobiele banners is de accelerator een erg leuke om interactieve mobiele banners mee te maken. We kunnen bijvoorbeeld een fullscreen video op je mobiel starten als je je telefoon kantelt of de korting van een product laten zien als je met je telefoon op en neer schud. Draai je telefoon snel rondjes en je maakt vuur op het scherm. Natuurlijk is hier alles mogelijk wat met HTML5 gemaakt kan worden.

Naast interactie door hardware kun je ook denken aan de bewegingen die je met je vinger kan maken van het swipen door een cube, het weg moeten “krassen” van een ijslaag of interactie op basis van het scrollen in de pagina (zie een gaaf voorbeeld in de Glass case).

Panorama / 360 display banners

Wil je dat de kijker écht in de wereld van jouw merk of product wordt gezogen? Ga dan voor een Panorama of 360 graden wereld banner waarin de kijker opeens veel meer kan zien binnen hetzelfde banner kader. Laat ze er doorheen bewegen met pijltjes, met de muis of met swipen. Vervolgens kun je binnen deze wereld bijvoorbeeld hotspots aanbrengen of verschillende exit clicks.

Interactieve banner met hotspot technologie voor alle devices.

Hotspot banners

Heb je een product met gave features zoals een nieuw type wasmachine of een nieuw soort auto? Laat de kijker door middel van hotspots op interactieve wijze de features ontdekken. Met beweging over een hotspot kun je extra informatie laten zien in tekst, maar je kunt ook een animatie of video afspelen van de betreffende feature om extra op te vallen. Met Hotspots kun je op deze manier veel informatie kwijt (die allemaal even belangrijk kan zijn) zonder dat het teveel wordt voor de kijker.

Hotspot banners zijn mogelijk op elk device en in elk systeem, maar het hangt van het systeem af hoe complex dit is toegestaan. Zelfs in Google Ads kan een basis hotspot banner worden gebouwd onder de 150kb.

Muis interactie banners

Wist je dat interactie zelfs mogelijk is binnen Google Ads (voorheen Google Adwords) onder de 150kb? Er is helaas vrij weinig toegestaan binnen Google Ads, maar muisbewegingen mogen gelukkig wel geregistreerd worden en daar kan interactie aan gekoppeld worden wat zowel zorgt voor engagement als voor betere resultaten, want met deze vorm van interactie kun je de kijker uitdagen om te klikken / actie te ondernemen.

Hierin zijn verschillende toepassingen mogelijk zoals een object dat de muis volgt of bijvoorbeeld een scratch element.

Swipe en 3D cube banners

Met de DSlab 3D cube technologie kunnen we van elk formaat banner een Swipe Cube maken en daarmee beperken we deze technologie niet meer alleen tot een Rectangle. Naast andere formaten kunnen we ook 360 graden animeren (dus ook omhoog en omlaag) of juist alleen omhoog en omlaag in plaats van naar links en naar rechts. De Cube banners zorgen voor de mogelijkheid tot veel (statische) informatie binnen één banner waar de kijker interactief doorheen kan bladeren.

Met de swipe techniek kunnen we overigens nog veel meer met interactieve banners doen. Denk aan bijvoorbeeld een keuze maken door naar links of rechts te swipen en daar een gepersonaliseerd vervolg aan te geven. Ook kun je met swipen door producten of highlights heen bladeren.

Prijzen om Interactieve banners te laten maken

De prijs voor een interactieve banner is afhankelijk van het aantal formaten in een set en de moeilijkheidsgraad van de interactie. We hanteren wel zoveel mogelijk vaste staffelprijzen, zodat jij weet waar je aan toe bent. Een set van 4x interactieve banners (basis) kost €1.425, maar ga je voor uitgebreide maatwerk interactie dan moet je denken aan € 2.097 voor 4 formaten. Weet dat korting mogelijk is als je zelf ontwerpen aanlevert. Daarnaast krijgt iedere nieuwe klant een welkomstkorting.

Hoe lang duurt het om Interactive banners te bouwen?

Een Interactieve HTML5 set met 4 formaten kost gemiddeld 8 werkdagen om te ontwikkelen vanaf het moment dat de offerte getekend is, de materialen bij ons binnen zijn en de briefing helder is. In spoedsituaties kan het soms zelfs in 3 werkdagen. We werken dan met een designfase met tussentijdse goedkeuring en uitwerkfase waarin we de definitieve creative(s) bouwen.

Interactieve banners met HTML5 - Linda

Linda Mellink
Digital Creative Manager

Neem contact op

Laat ons je als gespecialiseerd creative studio helpen jouw product of merk met impact aan je doelgroep te laten zien. Wil je samen sparren over een mogelijke opdracht, heb je een dosis inspiratie nodig of wil je direct een offerte? We helpen je graag op de manier die het fijnste werkt voor jou. Een video call, fysieke afspraak, mailconversatie of telefoontje zijn allemaal goed!

Interactieve banner formaten

Interactie zit niet perse alleen in bepaalde banner formaten, want interactie kan in theorie in elk banner formaat ingebouwd worden. Wel zijn er enkele templates (bijvoorbeeld via Weborama) die al standaard gebouwd zijn om interactief te zijn. Hieronder enkele formaten:

  • Framescroller: animatie op basis van scrollen
  • Swipe ad / cube: swipe d.m.v. touch of pijltjes door verschillende Rectangles.
  • Rotation to Fullscreen: wanneer je je mobiel een kwartslag draait start er automatisch een fullscreen layer met bijvoorbeeld een video.
  • Shake ad: wanneer je je mobiel op en neer schud kun je een animatie of video laten starten
  • Scratch banner: beweeg met je muis of vinger over de advertentie om de bovenste laag weg te krassen.
  • Panorama banner: zie uitleg hierboven
  • Compare slider: laat de kijker d.m.v. een slider twee afbeeldingen die over elkaar heen liggen vergelijken

Schrijf je in voor de inspiratie updates mailing!

Ontvang enkele keren per kwartaal een innoverende inspiratie update per email met gave cases, nieuwe technieken/formaten, slimme tips en nog veel meer!