TIPS VOOR EEN BETERE BANNER Als online marketeer, reclame- of mediabureau of netwerk is het altijd een uitdaging om digitale (banner)campagnes zo succesvol mogelijk te maken. Gebruik deze tips om de click-through-ratio (CTR) van een bannercampagne te verhogen 1. Een goede banner heeft een relevante en aantrekkelijke propositie verpakt in een uitnodigende grafische weergave. Een online bannercampagne heeft altijd een bepaalde doelstelling. Of het doel nu naamsbekendheid, bewustwording, retargeting, touch, tell of sales is, er zijn altijd een aantal voor de hand en minder voor de hand liggende zaken waar bij de ontwikkeling van banners rekening mee gehouden moet worden. Alion heeft ze gebundeld in een handig overzicht.
Welke websites en apps bezoekt de doelgroep? Wat is de beste vorm om hen aan te spreken? Bedenk dat de doelgroep waarschijnlijk niet op een banner zit te wachten. Zorg er daarom voor dat de banner niet nog verder irriteert. Stem de propositie, stijl van communiceren en het mediaplan (formaten, websites, specificaties) goed af op de doelgroep. Het reclame-, media- en/of productiebureau kan hierbij helpen. Op die manier zal de online campagne de juiste boodschap, op de beste tijd en plaats en in de beste formaten getoond worden.
PROPOSITIE KISS, ofwel keep it stupid simple! Eén van de meest voorkomende fouten in het ontwerp van een banner is de wens om teveel te vertellen.
DOELGROEP Een goede banner begint met een goede briefing. Daarbij zijn doelgroep en propositie essentieel. Bepaal zorgvuldig wie de doelgroep is en breng de inzichten en voorkeuren in kaart. Wat moet de doelgroep na het zien van de banner denken?
EEN BEZOEKER ZIT NIET OP EEN BANNER TE WACHTEN De CTR kan een waardevol meetinstrument zijn om de kracht van een banner te meten. Vaak is het zinvol om de winnaar van een A-B test op basis van de hoogste CTR te bepalen. Maar niet altijd bestaat er correlatie tussen 1
TIPS VOOR EEN BETERE BANNER September 2015 / www.alion.nl
1. Wordt deze tekst in deze banner helemaal gelezen?
Een adverteerder heeft soms de neiging om alle informatie in één banner te willen zetten. Mogelijk met het idee om het meeste uit een bannerimpressie te halen. Op het eerste gezicht lijkt dit een prima strategie, maar meestal ontstaat er zo een clicks en conversie. Afhankelijk van het doel van de campagne is kan het ook zinvol zijn om andere statistieken, zoals interactie in de banner en op de landingspage, conversie, waardering en awareness te meten.
onduidelijke banner – juist vanwege de grote hoeveelheid informatie – die juist slechter presteert.
resultaat per stap van de doelgroep in de salesfunnel kan verschillen.
Als er toch veel tekst in de banner geplaatst moet worden, kunnen teksten onleesbaar klein worden. Resultaat is een banner waarin de hoofdboodschap onduidelijk wordt. Daarnaast is het formaat van een banner beperkt en past een wat langere tekst vaak beter in een billboard (970x250 pixels) of leaderboard (728x90 pixels) dan in een skyscraper (120x600 pixels), zoals bijvoorbeeld hiernaast het geval is waar de boodschap slecht leesbaar is. Let er dus op dat de inhoud past hij het formaat van de banner. Past het niet, schrap dan in de communicatie voor een betere balans. Zorg ervoor dat in één oogopslag duidelijk is wat de banner belooft. Schets het op een post-it, hang het aan de muur, laat het zien aan een collega of kennis en laat ze uitleggen wat de banner volgens hen communiceert. Is er toch meer te vertellen? Verdeel je communicatie dan over meerdere bannervarianten, test ze en bekijk welke het beste resultaat oplevert. Let op dat dit
TIPS VOOR EEN BETERE BANNER September 2015 / www.alion.nl
2. ANWB heeft 1 heldere propositie, 1 USP en 1 CTA
Bedenk ook dat het mogelijk is om via interactie van de gebruiker bepaalde content in de banner weer te geven, zoals disclaimers en andere voorwaarden die in een pop-up bij hover wordt getoond. Besef ook dat de uitleg van het product of dienst uiteindelijk op de landingspage of in de voorwaarden plaatsvindt. Een banner is het middel om de doelgroep op die plek te krijgen.
UITLEG HOORT OP DE LANDINGSPAGE, NIET IN EEN BANNER Over het algemeen werkt een actie in een banner erg goed. Dus zorg ervoor dat er iets te winnen valt, gratis is of dat er een uniek aanbod wordt gedaan. Gebruik bij het bepalen van de juiste boodschap tips en tricks uit onderzoeken en literatuur zoals bijv. Made to Stick of de Beïnvloedingsprincipes van Cialdini. Hieruit zijn voor bannercampagnes een aantal interessante tips te filteren.
MADE TO STICK Zorg ervoor dat de propositie eenvoudig te begrijpen is en concreet en geloofwaardig is zodat er geen onduidelijkheden bestaan. Op deze manier worden zoveel mogelijk drempels weggenomen. Een onverwachte boodschap, afbeelding of animatie kan voor de nodige aandacht zorgen waarna de informatie in de banner kan worden opgenomen. SCHAARSTE / URGENTIE - Benadruk schaarste en urgentie in tijd: ‘dit product is nog maar een week verkrijgbaar’
4. Een door echte klanten ondersteunde propositie geeft vertrouwen in het product of de dienst.
AUTORITEIT - Laat bij producten de beoordelingen en aanbevelingen van experts en bekende mensen uit het vakgebied zien - Maak een lijst met ‘favorieten van onze medewerkers’
3. De laatste kans om te winnen, doe dus nú nog mee!
-
-
Gebruik schaarste en urgentie in hoeveelheid: ‘nog maar 5 exemplaren over’ Gebruik schaarste en urgentie in verkrijgbaarheid: ‘dit product is alleen verkrijgbaar voor geregistreerde klanten’
SOCIALE BEWIJSKRACHT - Vermeld dat het product een beststeller is of dat de dienst populair is onder de doelgroep - Laat de evaluaties van andere klanten zien, bijvoorbeeld m.b.v. sterren, likes of reviews - Laat zien wat andere klanten hebben gekocht of bekeken
TIPS VOOR EEN BETERE BANNER September 2015 / www.alion.nl
WEDERKERIGHEID - Geef de mogelijkheid om het product gratis of met een korting te proberen
5. Caiway biedt de eerste maanden een korting aan.
-
Geef gratis (nuttige) informatie, bijvoorbeeld als download Geef een bepaalde waarde aan (virtuele) ‘credits’ die ingeleverd kan worden bij aankoop
CALL TO ACTION Het deel van een banner dat verleidt tot een bepaalde actie zoals klikken, kopen, afsluiten wordt call to action (CTA, soms ook call for action) genoemd.
Is het doel van de banner dat erop wordt geklikt? Dan is een goede CTA, knop en/of duidelijk klikbaar element essentieel. Het is één van de belangrijkste onderdelen van een banner en waarschijnlijk het onderdeel waarmee het meeste wordt getest.
7. Test een 'dwingende' CTA...
8. ...tegenover een algemenere CTA
6. Een duidelijke CTA met een hoog 'What's in it for me' gehalte.
Is de CTA relevant voor de doelgroep? Legt hij uit wat er moet gebeuren? Legt hij uit wat de gebruiker kan verwachten ná deze actie? Is het doel van de campagne awareness? Dan past een CTA die nieuwsgierig maakt of juist een vraag oproept mogelijk beter. Vaak wordt aangenomen dat een dwingende CTA zoals ‘bestel hier’ beter werkt dan een meer algemene CTA zoals ‘meer informatie’. Dit is echter erg afhankelijk van de doelstelling, de doelgroep en de propositie.
TIPS VOOR EEN BETERE BANNER September 2015 / www.alion.nl
Een retargeting of sales doelstelling op een b2c propositie heeft een andere CTA nodig dan een awareness campagne voor een b2b dienst. Bedenk en test de CTA dus zorgvuldig. Vaak wordt gesteld dat een bepaalde mate van urgentie in de CTA (‘profiteer alleen vandaag nog’) de CTR verhoogt. Deze stelling gaat echter vooral op wanneer onmiddelijke actie gewenst is, denk aan de aankoop in een webshop of een specifiek retargeting moment in de funnel. Is het doel van de campagne naamsbekendheid of de promotie van een abstracter product zoals een b2b abonnement of bepaalde dienstverlening? Dan werkt een meer informerende CTA
zoals ‘lees verder’ of ‘bekijk hier meer informatie’ waarschijnlijk beter. Een combinatie van een urgente koop-CTA met een informerende secundaire CTA kan een goed alternatief zijn.
Dit neemt overigens niet weg dat er op campagne-niveau zeker opvallende en actiegerichte vormgeving kan worden toegepast. En – met behoud van merkwaarden – naar effectieve vormgeving moet worden gezocht. Over het algemeen kan gesteld worden dat hoe eenvoudiger de vormgeving van een banner, des te beter deze presteert. Zorg er dus voor dat de vormgeving vooral ondersteunend is aan de propositie.
9. Deze reisverzekering geeft ook de ruimte aan de minder snelle beslisser d.m.v. een secundaire CTA.
VORMGEVING Niets is zo subjectief als vormgeving, toch zijn er tal van aandachtspunten om met een zorgvuldige vormgeving de banner optimaal te laten presteren.
HOE EENVOUDIGER DE VORMGEVING, HOE BETER DE BANNER PRESTEERT Als de banner visueel past in de website waar deze wordt vertoond, is het vertrouwen van de gebruiker in de propositie vaak groter.
ALGEMENE VORMGEVINGSTIPS Zorg dat de vormgeving van de banner en die van de landingpage goed op elkaar aansluiten en beiden in lijn liggen met de uitstraling van het merk. Zo behoudt de gebruiker, na een klik op de banner, het vertrouwen op de juiste website te zijn belandt. Besef dat winst op korte termijn (bijv. het aansturen op een hoge CTR m.b.v. grote knipperende knoppen en teksten) op de lange termijn een averechts effect kan hebben. De naamsbekendheid kan nadelig worden beïnvloed waardoor toekomstige performance campagnes een lager resultaat zullen boeken. Ontwerp dus altijd in lijn met de merkwaarden en vormtaal van het merk om de herkenbaarheid te vergroten. Lift mee op de naamsbekendheid van het merk. TIPS VOOR EEN BETERE BANNER September 2015 / www.alion.nl
10. Banner die qua kleuren, vormtaal en lettertype is aangepast aan het design van huizensite www.jaap.nl
Zorg er echter wel voor dat de banner geen onderdeel wordt van de site en er nog steeds aanklikbaar uitziet.
Zorg ervoor dat op het moment waarop de banner stopt de kern van de propositie, het merk en de CTA altijd goed zichtbaar zijn. Gedurende de campagne neemt de effectiviteit van een bannerset soms af. Houd hier bij de campagneplanning rekening mee en zorg ervoor dat, zodra een ondergrens bereikt wordt, nieuwe of aangepaste banners ingezet kunnen worden. Eenvoudige aanpassingen, zoals een andere foto of visual, kunnen hier al een oplossing voor zijn. DESIGN VAN DE CTA Geef een CTA altijd de vorm van een knop of ander klikbaar element. Zorg ervoor dat de vormgeving van dit element zo uitnodigend mogelijk is. Een animatie op de button werkt over het algemeen positief. Zorg ervoor dat bij interactie van de gebruiker met de banner, de CTA direct oplicht of ‘ingedrukt’ wordt. Hierdoor kan er geen twijfel bestaan over de vervolgactie.
11. Deze banner laat zelfs zien waar de gebruiker moet klikken.
dan een banner zonder foto. Soms is dit het geval, maar net zo vaak kan het gebruik van een foto averechts werken.
12. Test de verschillen tussen een banner zonder en een banner mét foto.
Als de foto relevant en aantrekkelijk is, dan heeft dit zeer waarschijnlijk een positief effect op de presetaties van de banner. Géén foto is beter dan een slechte foto. Een zorgvuldige gekozen (en geteste) foto is dus erg belangrijk. Test daarom een banner mét en een banner zonder foto.
GÉÉN FOTO IS BETER DAN EEN SLECHTE FOTO Het gebruik van willekeurige foto’s (bijv. van een persoon) heeft geen toegevoegde waarde voor de propositie of het product en is één van de meest voorkomende fouten in de vormgeving van banners.
Plaats een CTA of knop altijd in de buurt van en ná de relevante propositie (dus: “Profiteer van dit aanbod” gevolgd door de CTA “Hier bestellen”). Zorg dat de knop een contrasterende of complementaire kleur heeft in vergelijking met de rest van de banner (maar wel in lijn met de campagne). GEBRUIK VAN FOTO’S Er wordt vaak verondersteld dat een banner met een foto van een persoon (al dan niet naar de propositie kijkend) beter presteert TIPS VOOR EEN BETERE BANNER September 2015 / www.alion.nl
13. Generieke foto’s maken een banner... generiek.
Vaak wordt aangenomen dat een banner zonder foto over het hoofd wordt gezien. Een banner met een fel gekleurde
achtergrond of eenvoudig artwork kan echter vaak beter presteren. Meestal zijn deze banners meer in het oog springend dan banners met een foto, daarnaast zijn deze vormgevingselementen vaak beter bruikbaar voor de uiteenlopende formaten waarin de banner gemaakt wordt. Foto’s kunnen echter de gebruiker ook helpen om de propositie of de voordelen van het product of dienst sneller te begrijpen. Dit effect is het sterkst als de foto een persoon of situatie toont waarin het product of dienst gebruikt wordt. Voor de b2c markt is het gebruik van een foto van persoon die het product gebruikt of draagt vaak een effectieve manier om met weinig middelen het voordeel of de werking van het product uit te leggen.
15. Deze mensen zijn druk bezig businesscoach te worden.
Uiteindelijk moet de te gebruiken foto dus echt relevant en ondersteunend zijn voor de propositie. Als de foto klanten laat zien die het product bij zich dragen, gebruiken, genieten, of profiteren van de dienst dan kan deze goed worden gebruikt in de banner. Is dat niet het geval? Overweeg dan een banner zonder foto.
14. Door deze foto wordt de werking van het product al deels begrepen en nodigt uit tot verder onderzoek.
Voor b2b proposities of abstractere diensten kan het gebruik van een foto in de banner lastiger zijn. Sommige banners voor b2b klanten gebruiken foto’s van echte klanten. Samen met een review van de klant is dat een potentieel effectieve manier de connectie tussen de dienst en gebruik ervan te communiceren.
TIPS VOOR EEN BETERE BANNER September 2015 / www.alion.nl
16. Geen foto werkt soms beter, in dit geval liever een relevante review dan een generieke afbeelding van een woning.
KLEUREN Ook bij het kiezen van de juiste kleuren voor de banner geldt dat de gekozen kleuren relevant moeten zijn. Over het algemeen kan gesteld worden dat de doelgroep eerder positief reageert op de juiste kleur van het product dan de kleur van de knop of achtergrond. Onderzoek dus goed in welke kleur het product word getoond, pas daar
vervolgens de kleuren van de banner op aan. De keuze voor een afbeelding van een product in een bepaalde kleur kan op basis van de hoogste verkoopaantallen gekozen worden maar ook op basis van retargeting informatie (bijvoorbeeld de langst of laatst bekeken kleur van een bepaald product)
worden. Gebruik ook geen lettergrootte kleiner dan 10 pt (tenzij voor gebruik van een verplichte disclaimer of ‘kleine lettertjes’). KADER DE BANNER AF Het menselijke brein wordt van nature aangetrokken door onderwerpen binnen een gesloten kader. Zorg er dus voor dat de banner een duidelijk kader bevat en dat al het artwork tot aan de randen doorloopt zodat er één geheel ontstaat. Meestal is dit ook een eis van het netwerk waar de banner geserveerd wordt. Een rand van 1 pixel dik is dan vaak verplicht gesteld. Binnen deze verplichting is het overigens goed mogelijk om de suggestie van ‘uitstekende‘ elementen te wekken m.b.v. de juiste vormgeving.
17. Pas de kleur van het product aan op basis van retargeting informatie, kies anders voor goed verkopende productkleuren.
Een keuze voor een kleur van de CTA of andere vormgevingselementen kunnen met een A-B of multivariatie test worden bepaald. VORMGEVING VAN TEKSTEN Zorg ervoor dat alle teksten in de banner goed leesbaar zijn. Kies dus zorgvuldig de te gebruiken lettertype(s) en maak teksten zo groot en duidelijk mogelijk. Zorg voor duidelijk onderscheid tussen koptekst en bodytekst en voorkom alinea’s groter dan drie regels. Vooral bij smalle banners zoals skyscrapers betekent dit dat teksten soms ingekort moeten worden. Zorg voor duidelijk contrast tussen de teksten en de achtergrondkleur of afbeelding. Gebruik liever geen cursieve, handgeschreven of zeer dunne lettertypes in de banner omdat deze meer tijd van de gebruiker nodig hebben om gelezen te TIPS VOOR EEN BETERE BANNER September 2015 / www.alion.nl
18. De kerstman lijkt buiten de banner te staan en valt daarom op.
BRAND GUIDE LINES De brand guide lines van het merk kunnen conflicteren met de performance doelstelling van een bannercampagne. Over het algemeen lijkt er in brand guide lines niet altijd goed over banners nagedacht te zijn of is er slechts één template beschikbaar. Informatie over knoppen, animaties, afwijkende formaten en specifieke booschappen (bijv. touch, tell, sell) ontbreken vaak.
Verplicht de guide lines het gebruik van een groene knop of specifieke visual terwijl tests uitwijzen dat de oranje variant of een andere visual veel beter presteert? Maak het bespreekbaar en pas zonodig de brand guide lines aan. Optimaliseer de brand guide lines op het gebied van banners continue. Zorg ervoor dat ze online beschikbaar zijn en voorzie ze zo nodig van een library van animaties, frames, formaten, specificaties van netwerken en vooral veel voorbeelden.
Ook A-B tests kunnen op deze manier snel worden opgezet. Door een aanpassing in de content feed kan automatisch een banner met een andere foto, propositie, kleur of CTA worden opgemaakt. Andere toepassingen zijn het bijsturen van de vormgeving of inhoud van de banner aan de hand van het tijdstip van de impressie, het weer, de gemeten ISP of de locatie van de gebruiker.
REAL TIME DATA Over het algemeen geldt: hoe relevanter de banner, hoe hoger de waardering van de doelgroep. Een goede manier om de relevantie van de banner nog verder te vergroten is door gebruik te maken van actuele gegevens (of real time data).
19. Bestemming, prijs, weer, CTA en achtergrondafbeelding, allen aan te passen m.b.v. real time data.
Banners kunnen eenvoudig worden voorzien van real time data door een koppeling met een externe content feed. Op die manier is het eenvoudig om met de propositie snel in te spelen op zaken als voorraad, rentestanden, prijzen en acties, maar ook op actuele gebeurtenissen (bijv. tijdens een wedstrijd van het Nederlands Elftal). Dit voorkomt tevens dat er voor ieder event een nieuwe bannerset ontwikkeld en geserveerd moet worden.
TIPS VOOR EEN BETERE BANNER September 2015 / www.alion.nl
20. Banner met adres en Google Maps locatie van popup-store verwerkt in mobiele banner.
ANIMATIE Een animerende banner presteert vaak beter dan en statische banner. Juist een animatie kan voor extra attentiewaarde zorgen. Een animatie hoeft maar kort te duren om de aandacht te trekken, daarna dient een animatie vooral ondersteunend aan de propositie ingezet te worden. Meet
per campagne het verschil tussen de animerende HTML5 banner en een statische banner en stuur bij indien nodig. Voorkom dat de animatie van de banner te lang duurt voordat hij ter zake komt. Een storyboard van 10 frames is geen goede banner, maar kan mogelijk wel op de landingspage als leuke uitleganimatie dienen. Een banner heeft vanuit het netwerk altijd een maximale tijdsduur waarna de animatie van de banner moet stoppen. Zorg ervoor dat het frame waarop de banner moet stoppen alle relevante informatie bevat. Dit kan overigens ook een geheel nieuw frame zijn en hoeft geen bestaand frame op de timeline van de animatie te zijn. Zorg ervoor dat een actie van de gebruiker altijd voor een reactie in de banner zorgt, interactie met een knop of element in de banner nodigt uit tot verder klikken.
RICH MEDIA & VIDEO Video, interactie en andere vormen van rich media leveren over het algemeen een hogere CTR op en blijken het vaakst op relevante posities op de website te worden weergegeven.
DE CTR VAN RICH MEDIA BANNERS ZIJN VEEL HOGER DAN REGULIERE FORMATEN De CTR van rich media banners zijn over het algemeen hoger dan reguliere IAB formaten. Dit komt door de high-impact mogelijkheden, premium posities op websites en grotere afmetingen. Gebruikers kunnen er feitelijk niet omheen.
22. Rich media met performance; een opvallende propositie in een opvallend formaat.
Een video van rond de 15 seconden werkt als preroll beter dan 30 seconden, een kortere video kan de boodschap niet voldoende overbrengen.
21. Bij de doelgroep passende animatie bij interactie met de banner.
TIPS VOOR EEN BETERE BANNER September 2015 / www.alion.nl
Wordt de video in een banner getoond, dan speelt hij pas na een actie van de gebruiker, in dat geval blijkt een video van 30 seconden een betere lengte om de propositie te communiceren. Houd er hierbij rekening mee dat bij mobiele inzet ieder device anders reageert op de interactie. Zo zal een Apple device de video full screen afspelen
waardoor de gebruiker de rest van de banner niet meer ziet.
TECHNIEK Houd de bestandsgrootte van een banner altijd zo laag mogelijk. Hoe sneller een banner inlaadt, hoe eerder hij weergegeven wordt en dus hoe groter de kans dat hij gezien wordt. Gebruik HTML5 banners in plaats van Flash banners. Of een HTML5 banner nu op een desktop, iPad, iPhone, Android device of laptop bekeken wordt, hij is altijd zichtbaar. Dit in tegenstelling tot een Flash banner die niet op tablets en smartphones kan worden bekeken. Daarnaast wordt Flash niet meer ondersteund door Chrome, Firefox en Facebook. Gebruik altijd een goede backup GIF waarin de kern van de propositie goed tot uiting komt. De backup GIF hoeft niet de volledige animatie te bevatten kan vaak beter het eindframe van de banner zijn met een opvallende animatie van de CTA of de propositie. Bevat een banner dynamische teksten uit een database zoals bijvoorbeeld productnamen of prijzen? Zorg er dan voor dat de banner rekening houdt met lange en korte teksten en dat beide versies er altijd goed uitzien.
TEST EN OPTIMALISEER Test banners continue, maar hou de tests eenvoudig. Test je teveel tegelijk dan ontstaat ruis en is het lastig om goede conclusies te trekken. Verander binnen een A-B test slechts één aspect van de banner. Vergelijk bijvoorbeeld de resultaten van dezelfde banner met twee verschillende CTA’s. In een andere test kunnen dan twee achtergrondafbeeldingen getest worden met een gelijkblijvende CTA.
TIPS VOOR EEN BETERE BANNER September 2015 / www.alion.nl
Een poging om beide wisselingen binnen dezelfde test te vergelijken, zal weinig vertellen over de reden waarom de winnende banner gewonnen heeft.
CONCLUSIE Houd banners relevant, eenvoudig en leesbaar. Gebruik interactie, rich media, video en real time content. Verwijder elementen die niet noodzakelijk zijn. Bedenk goed dat creatie geen wetenschap is en blijf daarom testen en optimaliseren. Houd ook je tests simpel en overzichtelijk. Kortom; keep it simple.
OVER ALION Alion maakt succesvolle digitale campagnes en heeft al meer dan 15 jaar ervaring in het bedenken, ontwerpen en ontwikkelen van bannercampagnes voor grote en kleine klanten. We werken nauw samen met netwerken, media- en reclamebureaus en serving partners voor een snelle en optimale integratie. Alion maakt banners in alle soorten, formaten, IAB standaarden, vormen en smaken. Denk aan XML-banners, floorads, HTML5 banners, expandables, rich-media en video banners, (slimme) retargeting en andere technische hoogstandjes. Alion is gecertificeerd voor Double Click Studio. Bekijk ons portfolio op www.alion.nl. Meer weten over succesvolle campagnes? Neem contact op met Niels Bovendeur van Alion, mail
[email protected] of bel 015-2191650.