Landingspagina mobiel: de zeven fouten die je aanvragen kosten

Ontwerp voor de telefoon, niet voor je laptop

De meeste pagina’s worden gemaakt op een groot scherm en daarna "even gecontroleerd" op mobiel. Dat is de verkeerde volgorde. Wat op een laptop een nette rij van drie blokken is, wordt op een telefoon een lange sliert waar je zes keer voor moet scrollen.

Draai het om: bepaal eerst wat er op dat kleine scherm moet staan en in welke volgorde. Dan hou je vanzelf over wat er echt toe doet.

De zeven fouten

Deze zeven kom je op bijna elke pagina tegen die niet met de telefoon in gedachten is gebouwd. Ze staan op volgorde van hoeveel ze je kosten.

#	Fout	Wat je in plaats daarvan doet
1	Een bovenste blok waarin alleen een foto past en geen kop	Kop, één zin en de knop direct in beeld; foto kleiner of eronder
2	Knoppen te klein of te dicht op elkaar	Minstens zo groot als een vingertop, met ruimte eromheen
3	Tekst van tien regels achter elkaar	Alinea’s van twee tot drie zinnen met tussenkopjes
4	Formulier met acht velden	Drie velden en het juiste toetsenbord per veld
5	Tabellen en prijslijsten die niet passen	Per regel onder elkaar zetten in plaats van naast elkaar
6	Cookiebanner of pop-up over de knop heen	Klein, onderin, en pas na een paar seconden
7	Telefoonnummer als platte tekst	Klikbaar maken, zodat één tik de telefoon opent

Nummer zeven is de goedkoopste winst van allemaal. Een deel van je bezoekers wil niet typen maar bellen, zeker bij spoed. Een nummer dat niet klikbaar is, dwingt die bezoeker tot overtypen, en dat doet bijna niemand.

Knoppen en duimbediening

Een telefoon wordt met één hand vastgehouden en met één duim bediend. Die duim komt makkelijk bij de onderste helft van het scherm en moeilijk bij de bovenrand. Toch staat de belangrijkste knop meestal bovenaan.

• Maak knoppen groot genoeg. Reken op ongeveer een halve centimeter aan alle kanten extra ruimte, zodat een dikke duim niet naast de knop drukt.
• Zet ruimte tussen twee acties. Bellen en aanvragen naast elkaar met een millimeter ertussen levert verkeerde tikken op.
• Gebruik een vaste balk onderin. Een meelopende balk met "Bel" en "Vraag aan" is op mobiel vaak de best werkende plek voor je actie.
• Maak knoppen over de volle breedte. Een knop die het scherm vult, is niet te missen en niet mis te tikken.

Wat er op die knop staat, telt net zo zwaar als hoe groot hij is. Twintig voorbeelden die het beter doen dan "Verzenden" staan in een call to action schrijven.

Formulieren op een klein scherm

Op een telefoon is elk veld werk. Er is geen toetsenbord met tien vingers, er is een duim en een schermtoetsenbord dat de helft van je pagina bedekt. Daarom valt of staat je aanvraag hier met het aantal velden.

Test ook wat er gebeurt als iemand een fout maakt. Verschijnt de melding bovenaan terwijl de bezoeker onderaan staat, dan denkt hij dat er niets gebeurt. Meer daarover staat in het formulier op je landingspagina.

Snelheid op 4G

Bezoekers op een telefoon zitten niet altijd op wifi. Ze staan op een bouwplaats, in de trein of op straat. Een pagina die op glasvezel in een halve seconde klaar is, kan daar vier seconden duren.

Het verschil zit meestal in afbeeldingen. Een foto die op je laptop mooi scherp is, is op een telefoon vier keer zo groot als nodig. Schaal terug naar de maat waarop hij getoond wordt en sla hem op in een modern formaat. De volledige aanpak staat in de laadsnelheid van je landingspagina verbeteren.

Let ook op alles wat automatisch begint: video’s die vanzelf spelen, sliders die doordraaien, animaties bij het scrollen. Op een telefoon kost dat data, accu en geduld, en het levert zelden een aanvraag op.

Zo test je je landingspagina mobiel

Je hebt geen dure gereedschappen nodig. Deze vijf controles doe je in tien minuten en ze vinden het meeste.

• Zet wifi uit. Open je pagina op mobiel internet en tel hardop tot je iets zinnigs ziet.
• Hou de telefoon in één hand. Kun je alles bereiken met alleen je duim, zonder je greep te verleggen?
• Vul je eigen formulier in. Helemaal, tot en met de bevestigingsmail. Kijk of je op de juiste bedankpagina uitkomt.
• Draai het scherm. In liggende stand hoort de pagina niet uit elkaar te vallen.
• Zet de tekst groter. Veel mensen hebben grotere letters ingesteld. Blijft je pagina dan leesbaar?

Laat het daarna doen door iemand die je bedrijf niet kent. Geef hem tien seconden en vraag wat je aanbiedt en wat het kost. Weet hij het niet, dan is je kop of je aanbod het probleem, en niet de techniek.

Mobiel en Google

Google beoordeelt websites op basis van de mobiele versie. Tekst die je inklapt in een uitklapblok of achter tabbladen zet, is daarbij geen probleem: die staat gewoon in de pagina en wordt door Google meegenomen. Het gaat mis als je op mobiel tekst wegláát, dus als hele stukken alleen in de bureaubladversie staan.

Wat er op een telefoon helemaal ontbreekt of niet werkt, telt niet mee voor je positie in de zoekresultaten. Zorg daarom dat de mobiele versie dezelfde inhoud bevat als de grote versie, ook al toon je die anders.

Kom je er zelf niet uit, dan kijken wij mee. Bij het ontwerpen van je landingspagina beginnen we standaard bij het telefoonscherm, en elke pagina die we bouwen wordt op een echte telefoon gecontroleerd voordat hij live gaat. Kijk bij een landingspagina laten maken wat dat inhoudt, of bel 085 123 45 67.