Wat UX landingspagina betekent op een pagina met één doel

UX staat voor user experience: de ervaring van de gebruiker. Op een gewone website gaat dat over navigeren en vergelijken. Op een landingspagina valt dat weg. Er is één doel: een aanvraag, een aanmelding of een belletje. De vraag is alleen of de bezoeker daar zonder gedoe komt.

Daarom is UX landingspagina een smaller onderwerp dan UX in het algemeen. Je hoeft geen menu te ontwerpen en geen zoekfunctie te bedenken. Je moet vier dingen goed doen: de informatie in de juiste volgorde zetten, klikbare dingen herkenbaar maken, het formulier eenvoudig houden en de tekst leesbaar maken.

Het verschil met vormgeving is belangrijk. Vormgeving gaat over hoe iets eruitziet, gebruiksgemak over hoe iets werkt. Een pagina kan er verzorgd uitzien en toch onhandig zijn: een knop die op een kopje lijkt, een formulier dat pas na drie keer scrollen komt. Wil je aan de vormgeving werken, dan hoort dat bij landingspagina laten ontwerpen.

Volgorde: wat een bezoeker eerst wil weten

De grootste winst zit meestal in de volgorde. Een bezoeker leest niet van boven naar beneden zoals jij het hebt opgeschreven. Hij scant en stelt in stilte drie vragen: ben ik hier goed, wat kost het me, en wat gebeurt er als ik klik.

Keuze 1: zet de belofte bovenaan. In het bovenste scherm staat wat je doet, voor wie en waar. Geen welkomstzin, geen bedrijfsgeschiedenis. Iemand die uit een advertentie of zoekresultaat komt, moet dezelfde woorden terugzien als waarop hij klikte. Klopt dat niet, dan is hij weg.

Keuze 2: houd het bij één doel en één soort knop. Twee knoppen met evenveel nadruk laten de bezoeker kiezen, en kiezen kost moeite. Bel-mij-terug naast offerte-aanvragen mag, maar geef er dan één de kleur en de ander een tekstlink.

Keuze 3: herhaal de knop op de plek waar de vraag ontstaat. Niet om de twee alinea’s, wel na het blok waarin je een bezwaar wegneemt. Bij een lange pagina: na de uitleg, na de prijsindicatie en onderaan.

1. 1KopWaar de pagina over gaat, in gewone taal.
2. 2BelofteWat je krijgt en wat het je oplevert.
3. 3BewijsErvaringen, logo's of voorbeelden van werk.
4. 4AanbodWat er precies in zit en hoe het werkt.
5. 5FormulierDe actie zelf, kort en zichtbaar.
6. 6ContactTelefoon, mail en je bedrijfsgegevens.

Dit is geen wet, wel de volgorde waarin de meeste bezoekers hun vragen stellen.

Knoppen, velden en foutmeldingen

Keuze 4: maak klikbare dingen herkenbaar. Een knop hoort eruit te zien als een knop: een gevuld vlak, ruimte eromheen en een tekst die zegt wat er gebeurt. “Verstuur” zegt niets, “Vraag je offerte aan” wel. Onderstreepte tekst is een link; onderstreep dus niets anders.

Keuze 5: vraag alleen wat je nodig hebt om terug te bellen. Elk extra veld is een reden om te stoppen. Bedrijfsnaam en “hoe heb je ons gevonden” vraag je in het gesprek. Wat er verder aan je formulier te sleutelen valt, staat bij formulier op je landingspagina verbeteren.

Keuze 6: zet je foutmelding bij het veld en schrijf hem in gewone taal. Een rode balk bovenaan met “Er is een fout opgetreden” laat de bezoeker zoeken. Zet onder het veld: “Vul een telefoonnummer in waarop we je kunnen bereiken.” Gooi ingevulde velden nooit leeg na een fout.

Wel doen

• Labels boven de velden, die blijven staan tijdens het typen
• Het juiste toetsenbord op mobiel: cijfers bij een telefoonnummer
• Een knoptekst die de handeling noemt
• Verplichte velden markeren, of alleen verplichte velden tonen
• Na het versturen doorsturen naar een bedankpagina

Niet doen

• Het label alleen in het veld zetten, zodat het verdwijnt bij typen
• Een sterretje zonder uitleg wat het betekent
• Een knop met alleen een pictogram, zonder tekst
• Een ingevuld formulier leeggooien na een foutmelding
• De bezoeker laten raden of zijn bericht is aangekomen

Leesbaarheid: contrast, regellengte en tussenkoppen

Keuze 7: maak de tekst prettig om te lezen. Drie dingen bepalen dat. De lettergrootte: op een telefoon leest kleine tekst niet fijn, dus houd je lopende tekst royaal. De regellengte: een regel over de volle breedte van een beeldscherm is moeilijk te volgen. En de witruimte, die meer doet voor het leesgemak dan welk lettertype ook.

Tussenkoppen zijn geen opsmuk, maar het skelet waarop iemand scant. Schrijf ze als antwoord, niet als etiket: “Wat het kost” werkt beter dan “Tarieven”. Wie alleen de koppen leest, moet het verhaal kunnen navertellen.

Let ook op tekst op een foto. Een lichte kop op een drukke achtergrondfoto is buiten in de zon vrijwel onleesbaar, en veel bezoekers zitten precies daar. Hoe je pagina zich op een klein scherm gedraagt, staat in landingspagina op mobiel.

Toegankelijkheid die iedereen helpt

Keuze 8: zorg dat je pagina ook zonder muis en zonder scherpe ogen werkt. Toegankelijkheid klinkt als iets voor grote organisaties, maar de basis is klein en helpt al je bezoekers. Grijze tekst op wit is niet stijlvol als niemand het leest.

De richtlijnen van het W3C vragen voor gewone tekst een contrast van minstens 4,5 op 1 tussen tekst en achtergrond; voor grote koppen mag dat 3 op 1 zijn. Met een gratis contrastcontrole kijk je dat in een minuut na. De volledige uitleg staat bij w3.org/WAI.

Verder: geef elke afbeelding een alternatieve tekst. Loop je pagina één keer door met de tabtoets in plaats van met de muis; je moet kunnen zien waar je bent en bij elk veld en elke knop komen. Maak aanraakvlakken op mobiel groot genoeg voor een duim.

• Genoeg contrast tussen tekst en achtergrond
• Aanraakvlakken die je met een duim raakt
• Bedienbaar met alleen het toetsenbord

Zelf testen met vijf mensen uit je omgeving

Keuze 9: laat je pagina door mensen gebruiken voordat je hem beoordeelt. Je kent je eigen aanbod te goed om te zien waar het schuurt. Vijf mensen die je vak niet kennen, leveren je meer op dan een middag zelf turen.

Zo doe je het. Geef ieder dezelfde opdracht, bijvoorbeeld “Vraag via deze pagina een offerte aan voor je eigen situatie”, en zeg er verder niets bij. Laat ze hardop denken en kijk mee op hun telefoon, niet op je eigen laptop. Grijp niet in als ze vastlopen; dat vastlopen is precies wat je wilt zien.

Vraag daarna twee dingen: wat denk je dat dit bedrijf doet, en wat gebeurt er als je op die knop drukt. Kunnen ze dat niet in eigen woorden zeggen, dan zit je probleem bovenaan de pagina en niet in het formulier.

Werk de negen keuzes daarna van boven naar beneden af. De eerste drie kosten je een uur en raken iedere bezoeker; de rest is fijnslijpen. Loop je vast omdat de opbouw van de pagina zelf niet klopt, dan is sleutelen zinloos en kun je beter opnieuw beginnen.