Blog / Affiliate marketing
Hoe maak je een landingspagina? Deel II - ontwerptrucs
In dit artikel presenteren we verschillende trucs en regels voor het bouwen van een landingspagina die deze toegankelijker maken voor je gebruikers. Net zoals een zakenman het juiste pak nodig heeft en een vrouw de perfecte jurk, heeft de landingspagina het juiste ontwerp en goed geplaatste content nodig.
Weet je niet hoe je een landingspagina vanaf nul moet maken? Ga dan naar ons artikel “Hoe maak je een landingspagina? Deel I”, waarin we het hele proces stap voor stap uitleggen.
Houd er rekening mee dat het ontwerpen van je eigen website, in tegenstelling tot het lezen van dit artikel, een tijdrovend proces is. Laat je echter niet ontmoedigen. Door het zelf te ontwerpen, kun je tot $5.000 besparen. Zullen we beginnen?
Truc 1 - Vier krachtpunten
Misschien heb je weleens het 'raster' op het scherm gezien tijdens het maken van een foto? Dit is gerelateerd aan de 'regel van derden' en wordt ook gebruikt in webdesign. Volgens deze regel wordt de pagina visueel verdeeld in drie delen en bestaat uit 9 identieke vierkanten.
De punten in het midden van de vier kruisingen van de lijnen zijn precies de 'krachtpunten'. Alles wat zich binnen deze grenzen bevindt, wordt als eerste door het menselijk oog opgemerkt. Probeer bij het maken van een landingspagina de belangrijkste elementen op deze kruisingen te plaatsen.
Truc 2 - Wet van Hick
Een andere truc die handig kan zijn, komt van William Edmund Hick, een Britse psycholoog. Hij stelde dat de tijd die nodig is om een beslissing te nemen toeneemt naarmate het aantal keuzemogelijkheden toeneemt. Dit betekent dat hoe meer opties we hebben, hoe meer tijd we nodig hebben om een keuze te maken.
Uit onderzoek van Mark Lepper en Sheen Iyengar bleek dat een tafel met 24 soorten jam minder aantrekkelijk is dan een tafel met 6 soorten jam. Wanneer iemand te veel keuze heeft, daalt de kans op aankoop met factor 10. Hoe gebruik je dit bij het maken van een landingspagina? Beperk het aantal CTA’s en knoppen en focus op één doel. Overweeg alle mogelijke beslissingen die de gebruiker op de pagina kan nemen en minimaliseer deze waar mogelijk.
Truc 3 - Het “F”-model
Veel onderzoeken tonen aan dat het menselijk oog bij het bekijken van tekst onbewust een bepaald patroon volgt. Eerst kijken we van links naar rechts, dan bewegen we naar beneden, en besteden we de minste aandacht aan de rechterbenedenhoek – we scannen die slechts vluchtig.
Wil je het de gebruiker makkelijker maken om informatie te verwerken en de conversie verhogen, plaats dan de belangrijkste elementen langs de letter F en de minder belangrijke daarbuiten. Handige contactmogelijkheden moeten op een prominente plek staan: sociale netwerken, telefoonnummers, enzovoort.
Truc 4 - De 8-secondenregel
Je hebt slechts 8 seconden om de gebruiker te boeien (en volgens het nieuwste onderzoek zelfs minder). Het spijt ons te zeggen, maar dit is het concentratievermogen van een mens op één ding. Hoe trek je binnen 8 seconden de aandacht van de gebruiker?
- Maak de titel pakkend en interessant, en zorg dat deze snel en bondig de voordelen van het product/de pagina communiceert en ingaat op de problemen van de klant.
- Vul je boodschap aan met opvallende afbeeldingen die het hoofddoel van het product weergeven.
- Maak een zichtbare en korte CTA-knop.
Truc 5 - De wet van gelijkenis
Mensen nemen de gehele structuur anders waar dan de afzonderlijke elementen. We hebben graag objecten bij elkaar die op elkaar lijken maar in aparte groepen staan.
Maak gebruik van deze regel. Stel dat je product uitstekende beoordelingen heeft. Plaats dan de aanmeldknop of een formulier naast de referentie.
Truc 6 - Social proof
Social proof omvat verschillende certificaten en diploma’s. Uit onderzoek van Data Insight en AliExpress blijkt dat 9 van de 10 aankopen worden afgerond nadat de klant de reviews heeft gelezen. Hoe gebruik je dat op je website? Voeg klantbeoordelingen toe aan je website.
Truc 7 - Above the fold
Heb je er ooit van gehoord? Zo niet, dan leggen we het uit. Above the fold is het deel van de website dat zichtbaar is zonder te hoeven scrollen.
Het zal je waarschijnlijk niet verbazen dat mensen elk jaar minder lezen. Meestal scannen we alleen met onze ogen over het artikel. Onderzoek van Nielsen Norman Group heeft aangetoond dat content boven de vouw 84% beter wordt ontvangen door gebruikers dan content eronder.
Waarom? Het antwoord is simpel – content onder de vouw bekijken kost extra moeite (scrollen). Hoe langer je content, hoe kleiner de kans dat gebruikers zich in je tekst verdiepen.
Landingspagina - Ontwerp en UX
De eerste stap bij het kiezen van je website-ontwerp is nadenken over wie tot je doelgroep behoort. Vrouwen of mannen? Wat doen ze? Wat doen ze in hun vrije tijd? Wat is hun doel en wat verwachten ze? Door deze vragen te beantwoorden maak je het jezelf makkelijker. Je weet of je pastel- en ontspannende kleuren moet gebruiken of juist donkere en mysterieuze. Zodra je de basis van je website kent en een eerste visie hebt, houd je aan de onderstaande regels.
Regel #1 - Afbeeldingen van hoge kwaliteit
Uit onderzoek van Bright Local blijkt dat 60% van de mensen de voorkeur geeft aan zoekresultaten met afbeeldingen. Uit onderzoek van Skyword blijkt dat interessante afbeeldingen gemiddeld 94% meer vertoningen opleveren. Kies dus geen saaie en stereotype afbeeldingen, maar zoek iets origineels en interessants. Meestal moet je voor zulke afbeeldingen betalen, maar er zijn veel sites die gratis afbeeldingen van hoge kwaliteit aanbieden. Hier enkele voorbeelden:
- Pexels,
- Unsplash,
- StockSnap,
- Negative Space,
- Superfamous Studios,
- Little Visuals,
- Gratisography,
- Kaboompics,
- Picjumbo.
Afbeeldingsgrootte
Een andere belangrijke factor die de gebruikerservaring beïnvloedt, is de snelheid van de website, en dus de grootte van afbeeldingen en video's. Ze moeten zo licht mogelijk zijn zonder kwaliteitsverlies.
Voor het comprimeren van afbeeldingen als je een Windows-gebruiker bent, raden we aan:
Voor het comprimeren van afbeeldingen als je een MacOS-gebruiker bent, raden we aan:
Online afbeeldingscompressietools:
Videogrootte
Wat betreft de grootte van videobestanden is het vergelijkbaar met afbeeldingen, maar iets ingewikkelder. Foto’s zijn slechts enkele MB, terwijl video’s vaak honderden MB zijn, wat je website aanzienlijk kan vertragen.
De beste video-compressors:
- Any Video Converter Free,
- Leawo Prof. Media,
- Freemake Video Converter,
- WinX Video converter,
- MediaCoder (alleen Windows),
- AVS Video converter (alleen Windows),
- Total Video Converter,
- HandBrake.
Regel #2 - Kleuren
Kleuren spelen een belangrijke rol in marketing en de keuze ervan moet zorgvuldig overwogen worden. Ze beïnvloeden vooral hoe de gebruiker jouw bedrijf waarneemt. Wil je meer weten over de psychologie van kleur in affiliate marketing, bekijk dan ons artikel: “De psychologie van kleur in affiliate marketing. Hoe veranderen details je inkomsten?”.
Onthoud dat de kleuren van het merk moeten aansluiten bij de missie en vooral moeten aanspreken bij je doelgroep. Maar het belangrijkste is je aanbod en de kwaliteit van je diensten.
Daarnaast is het gebruik van kleuren van belang voor de toegankelijkheid voor mensen met een beperking, waar we het over hebben in regel 4. Zet nooit twee verschillende felle kleuren naast elkaar, vooral blauw en groen, want dit kan problematisch zijn voor kleurenblinden. De best leesbare kleurcombinatie is zwart op wit.
Regel #3 - Heldere en duidelijke koppen
De gebruiker moet je pagina onthouden en willen terugkomen. Door te kiezen voor een heldere (niet-opdringerige) en duidelijke kop, help je hen enorm. Let ook op mensen met een beperking of digitale uitsluiting en maak het hen makkelijker je website te gebruiken. Zo zou het eruit moeten zien.
Regel #4 - Toegankelijkheid voor mensen met een beperking
Om het voor mensen met een beperking makkelijker te maken te navigeren, hebben we een lijst samengesteld met punten waarmee je rekening moet houden bij het ontwerpen van een website. Bovendien heeft zulke aangepaste content een positief effect op SEO, wat resulteert in een betere positie in Google of andere zoekmachines.
ALT-beschrijvingen
ALT-beschrijvingen zijn alternatieve beschrijvingen van afbeeldingen op je website. Hiermee kan schermleessoftware de gebruiker vertellen wat er te zien is. En bij een slechte internetverbinding zie je alsnog wat er op de afbeelding staat, dus het is niet alleen softwareleesbaar.
Ondertiteling voor video’s
Als je website veel video’s bevat, is het goed om ondertiteling toe te voegen voor doven. Voor langere audio is het handig om een transcript toe te voegen. Een online programma dat automatisch ondertiteling kan toevoegen is bijvoorbeeld veed.io.
Goed bewerkte en gemarkeerde links
In plaats van een link te plaatsen in de woorden “Klik hier”, kun je beter kiezen voor “Voor meer informatie, bezoek [websiteadres]”, dit helpt blinden enorm. Markeer hyperlinks ook met een andere kleur dan gewone tekst. Zo hoeven gebruikers er niet met de muis naar te zoeken.
Grootte van de knoppen
Als de knoppen die naar andere pagina’s leiden te klein zijn, kan dat een probleem zijn voor mensen die moeite hebben met navigeren. Zorg ervoor dat het 'klikbare' gebied van de knop altijd groot genoeg is.
Toetsennavigatie
Je website moet zo zijn gestructureerd dat je met de "TAB"-toets logisch en intuïtief van de adresbalk naar het menu en andere onderdelen van de site gaat. Zo kunnen mensen met een beperking makkelijk navigeren.
Regel #5 - Ruimte
Een ander belangrijk punt is de ruimte op je website, de gebruiker moet snel en zonder moeite weten waar je website over gaat en wat ze kunnen verwachten. Je wilt natuurlijk niet dat je landingspagina eruitziet als een pagina uit 2010 met overal tekst en advertenties, zodat de gebruiker niet weet wat hij moet doen. Zulke situaties zijn tegenwoordig zeldzaam. Kijk hieronder naar een voorbeeld van een pagina die veel beter had gekund.
Het begin is niet zo slecht, simpele informatie over wat het bedrijf doet en wat je kunt verwachten. Kijk nu naar wat eronder staat. De gebruiker wordt gebombardeerd met verschillende links en zinnen die aan spam doen denken. Dit moet je vermijden.
Regel #6 - Transparant menu en symmetrie
Net als de header moet het menu eenvoudig zijn. Tegenwoordig is de standaard één hoofdmenubalk bovenaan, duidelijk en makkelijk te navigeren. Zorg ervoor dat je landingspagina symmetrisch is, het menselijk oog houdt daarvan.
Regel #7 - Footer
Last but not least – de footer. Hoe moet deze eruitzien en wat moet erin staan? De footer moet vooral doordacht, eenvoudig en interessant zijn. Bedenk wat je verwacht van de gebruikers die onderaan de pagina komen. Weet je het antwoord op deze vraag, dan wordt het veel makkelijker om een goede footer te ontwerpen. Meestal zoeken bezoekers onderaan de website naar contactinformatie.
Dit betekent niet dat je er geen belangrijke zaken kunt plaatsen. Onthoud dat de footer moet voldoen aan de behoeften van de gebruiker en tegelijkertijd jouw doelen ondersteunt. Hier enkele voorbeelden van informatie die een footer kan bevatten:
- privacybeleid en gebruiksvoorwaarden,
- contactgegevens,
- navigatie,
- links naar social media,
- inschrijving op de nieuwsbrief.
Landingspagina - tekstuele inhoud
Na het maken van de juiste koppen en knoppen is de volgende stap het creëren van de content op de pagina. Logisch is dat alles moet aansluiten op het aanbod dat je promoot en moet aanzetten tot aankoop van het product.
De belangrijkste principes voor het maken van heldere content zijn hiërarchie en systeem: elk blok moet op zijn plek staan. Je kunt een schets maken in PowerPoint of op papier om de structuur na te bootsen. Een duidelijk interface bereik je alleen als je de hoofdvragen beantwoordt: wat, waar, waarheen en waarom. De informatie moet logisch volgen: welk product, waarom de gebruiker het nodig heeft. Je kunt referenties toevoegen om het vertrouwen te vergroten. LeadGeneration-sites moeten content stap voor stap en zo kort en eenvoudig mogelijk plaatsen. Minder stappen betekent hogere conversie.
Op de markt vind je aantrekkelijke oplossingen om je website te maken en aan te passen, die er op elk apparaat goed uitziet. Een voorbeeld is Kubio – een sitebuilder-plugin die Gutenberg uitbreidt en volledige ontwerpvrijheid en een soepele site-ervaring biedt. Je bewerkt volledige pagina’s in één intuïtieve interface, zonder de WordPress-template-structuur te hoeven kennen.
Deze website biedt een uitgebreide sjabloonbibliotheek zodat je snel kunt starten met je nieuwe site. Ook is er een uitgebreide blokbibliotheek met elementen zoals prijstabellen, galerijen, sliders en accordeons om snel geavanceerde pagina’s te bouwen. Het is het vermelden waard dat de website automatisch elk onderdeel opslaat, zoals de header, footer en paginacontent, in de juiste sjablonen.
Belangrijkste kenmerken van Kubio Builder:
- maak volledige pagina’s in één intuïtieve interface,
- geavanceerde ontwerp- en responsive opties,
- pagina’s maken door vooraf gedefinieerde secties te combineren,
- uitgebreide sjabloonbibliotheek,
- grote blokbibliotheek.
Ben je al zover?
We hopen dat je na het lezen van dit artikel precies weet hoe je je website als een professional kunt ontwerpen. Het enige wat ons rest is je veel succes te wensen!