5 manieren om om jouw landingspagina te optimaliseren
introductie Een landingspagina is een essentiële schakel in het succes van jouw customer journey, want het is dé plek om jouw klant te overtuigen om actie te ondernemen. Een landingspagina is zo succesvol als de mate waarin hij converteert. Daarom is een goed doordachte landingspagina heel belangrijk. Om die reden hebben wij, StoryMail, een onderzoek uitgevoerd naar hoe je een landingspagina kunt optimaliseren. Leunend op onze decennialange ervaring marketing-, communicatie- en klantvraagstukken zijn wij dé kennispartij voor het definiëren, scherp krijgen en/of verrijken van jouw customer journey, waar de landingspagina een cruciaal onderdeel van is. Een goede campagne gaat uit van video om de bezoeker aan te spreken; makkelijk te consumeren en video is leuk. Daarom zijn we in dit onderzoek uitgegaan van video op de landingspagina. Het uitgevoerde onderzoek is driedelig. Ten eerste is literatuur over neuromarketing en webdesign onderzocht. De werking van het menselijk brein en de manier waarop we beeld waarnemen leert ons hoe een visueel ontwerp eruit hoort te zien. Ten tweede hebben we op basis van deze bevindingen verschillende landingspagina’s ontworpen. Ten slotte zijn deze verschillende ontwerpen getest. De gebruikte technieken voor het opnemen van het gedrag van de bezoekers zijn de programma’s Google Analytics en Hotjar. Google Analytics kijkt op een kwantitatieve manier naar verschillende bezoekerscijfers en statistieken, terwijl Hotjar het gedrag van de bezoeker kwalitatief registreert. Aan de hand van de resultaten zijn we tot een aantal lessen gekomen die je helpen bij het optimaliseren van een landingspagina.
1
De indeling
De wijze waarop de landingspagina is ingericht speelt een grote rol voor zijn succes. Het is niet alleen de allereerste indruk die een bezoeker krijgt, maar tevens kan het de leesrichting sterk beïnvloeden. Het is daarom belangrijk dat de landingspagina de bezoeker door de pagina leidt. Een indeling van informatie waar onvoldoende over is nagedacht, kan door de bezoeker als onlogisch worden ervaren. Hoe bereik je dit? Hanteer een bepaalde volgorde of laat de bezoeker stappen doorlopen. Daarnaast moet de opzet van het template betrouwbaar overkomen op de bezoeker. Tips & Tricks: • Stel de video en de CTA (call-to-action) voorop in de landingspagina. •
Plaats de CTA dichtbij de video, zodat de stap na het voltooien van de CTA zo klein mogelijk is.
•
Gebruik een titel én een ondertitel. De titel vat de pagina subtiel samen en de ondertitel zorg ervoor dat de bezoeker de video gaat kijken.
Afbeelding 1 Uit het literatuuronderzoek is gebleken dat de Golden Ratio (afbeelding 1), de ‘gulden snede’ nog altijd op visueel vlak erg krachtig werkt. De Golden Ratio is een berekening van de onderlinge verhoudingen van objecten. Zo lang het paginaontwerp rekening houdt met de Golden Ratio, zal dit voor de bezoeker visueel erg aantrekkelijk ogen en logisch aanvullen.
Afbeelding 2 Ontwerp gebaseerd op de Golden Ratio.
2
DE TEKST
Veel landingspagina’s maken logischerwijs gebruik van tekst. Belangrijk hierbij is dat er voorafgaand het ontwerp één concreet doel wordt vastgesteld. Verwar de bezoeker bijvoorbeeld niet met meerdere CTA’s. Afhankelijk van dit ene doel, kan de tekst worden vastgesteld. Máár, er zijn natuurlijk wel minimale eisen waaraan de tekst moet voldoen. Dit heeft voornamelijk te maken met de vormgeving. Zorg dat de tekst altijd goed leesbaar is door slim gebruik te maken van lettertypen en contrasten. Schrijf kort en bondig. Tips & Tricks: • Zorg ervoor dat tekst in een button in hoofdletters staat. Dit zorgt voor een goede leesbaarheid én een nette uitlijning.
Afbeelding 3 Dit is een voorbeeld van een button waarin de tekst in hoofdletters staat.
3 Call-to-action
Met je landingspagina wil je natuurlijk dat de bezoeker de video bekijkt én er volgens iets mee gaat doen (reach, touch, move). Een goede landingspagina is altijd gericht op conversie. Die stap moet zo makkelijk mogelijk zijn. Bij call-to-actions is het van belang dat er een goed evenwicht is tussen achtergrondinformatie over het product en tegelijkertijd ook de motivatie of ‘priming’ om de bezoeker aan te zetten tot het voltooien van de call-to-action. Door hiervoor een sectie aan te maken direct naast de hoofdcontent, wordt dit evenwicht gecreëerd. Tips & Tricks: • Vul de formulieren zoveel mogelijk in met bekende informatie. • Gebruik de toepassing van confirmation. Het levert de bezoeker feedback op tijdens het ondernemen van een actie. Al lijkt het invullen van een formulier een makkelijke taak, de bezoeker kan nooit genoeg gestuurd worden richting het voltooien van de call-to-action.
Afbeelding 4 Dit is een voorbeeld van een formulier met de toepassing van confirmation.
Naast het formulier is een button een essentieel onderdeel van een landingspagina. Wanneer een bezoeker op de button klikt, betekent dit dat de bezoeker een keuze heeft gemaakt. Een opvallende button helpt de kijker te verleiden. Op basis van ons onderzoek zijn de volgende drie buttons ontworpen, die kracht bij kunnen zetten. Welke variant het beste toegepast kan worden, zal verschillen per landingspagina en boodschap.
Afbeelding 5 De drie ontworpen buttons op basis van ons onderzoek.
4 vormgeving
Vormgeving is essentieel om de bezoeker te verleiden tot een bepaalde actie. Waarschijnlijk heeft jouw bedrijf een eigen huisstijlgids met kleurenpakket. Probeer deze los te laten bij het vaststellen van de landingspagina. Ga niet zomaar met alle elementen van de landingspagina aan de slag, maar denk na over de toegevoegde waarde. De positie van ieder element is immers een weloverwogen beslissing geweest. Pas kleuren niet zomaar toe, maar ga hier zorgvuldig mee om. Kortom: door het toepassen van de huisstijl op de landingspagina mag de kracht en werking van de landingspagina niet verloren laten gaan. Een andere belangrijke factor in het design van de pagina is om alle cruciale content boven de zogeheten ‘fold’ te verwerken. De fold is de lijn die onderscheid maakt tussen wat zonder scrollen zichtbaar is en niet zichtbaar in de browser van de bezoeker. De fold verschilt dus per bezoeker, op whereisthefold.com kan voor verschillende resoluties getest worden waar de fold ligt. Speel hiermee voor diverse devices; om zo een optimale indeling te bereiken.
Afbeelding 6 Een landingspagina waarbij de fold is aangegeven.
Tips & Tricks: • Verwerk in ieder geval de header, video en belangrijkste CTA boven de fold. •
Beperk de kleuren die je gebruikt op de landingspagina tot twee basiskleuren met één of twee accentkleuren. Voorbeeld:
•
Voor de titel en subtitel raden wij het gebruik van een lettertype met schreef af, omdat de meeste huisstijldocumenten dit lettertype niet toestaan en het mag de de leesbaarheid van titels niet belemmeren. Schreef is een lettertype waarbij er “pootjes” van de letters uitsteken:
•
Het is van belang dat de titel een groot contrast heeft met de achtergrond kleur.
•
De achtergrondkleur van de pagina dient licht te zijn, gebruik hiervoor een witte tint.
5 personalisatie
Last, but not least; pas personalisatie toe! Probeer met je landingspagina zo persoonlijk mogelijk te zijn. Maak gebruik van een gepersonaliseerde header en een gepersonaliseerde video. Een gepersonaliseerde header kan bijvoorbeeld een persoonlijke welkomstgroet zijn aan de bezoeker. In geval van distributie per e-mail, kan de benodigde naam of andere data kan met het template meegestuurd worden. Denk aan: “Jan Jansen, bekijk nu je persoonlijke video!”.
6 landingspagina
Tot slot Hoe ziet een landingspagina er dan uit op basis van deze 5 manieren? Nou, zo!
Voorbeeld 1 landingspagina
Voorbeeld 2 landingspagina
GO DIGITAL stay human Julianalaan 1 | 3722 GA Bilthoven | +31 (0)30 - 601 3800 |
[email protected] | www.storymail.nl
