Naar hoofdinhoud

InsightsConversie

Website conversie verhogen: 12 aanpassingen vanuit design en development

De meeste lijstjes met conversietips gaan over knopkleuren. De aanpassingen waar wij in projecten het vaakst aan werken zitten in laadtijd, formulieren en de vraag of een pagina weet wat hij van de bezoeker wil.

· Design & Development · · bijgewerkt · 7 min lezen

Kort antwoord

Je website conversie verhogen zonder extra verkeer doe je met aanpassingen op vier plekken: het ontwerp (één doel per pagina, bewijs en een duidelijke knop), de snelheid en techniek, de formulieren en, bij een webshop, de productpagina en checkout. Meet vooraf je huidige cijfer, zodat je daarna ziet wat het oplevert.

Website conversie verhogen: begin bij je huidige cijfer

Zonder beginpunt weet je achteraf niet of een aanpassing iets heeft gedaan. Noteer daarom eerst je conversieratio per paginatype en per apparaat, over een periode van minstens een paar weken. Kijk ook of de meting klopt: telt elke aanvraag of bestelling één keer?

Deze twaalf aanpassingen komen uit ons werk als ontwerpers en ontwikkelaars. Ze zijn geen vervanging voor een aanpak: welke je eerst doet hangt af van waar jouw bezoekers afhaken, en die volgorde staat in het artikel over conversieoptimalisatie.

Conversie verhogen met design

Conversiegericht webdesign begint niet bij mooi, maar bij de vraag wat de pagina van de bezoeker wil.

1. Eén doel per pagina. Bepaal per pagina de ene actie die telt, en maak alle andere acties visueel ondergeschikt. Een pagina met vier even grote knoppen (bellen, offerte, brochure, nieuwsbrief) laat de keuze aan de bezoeker, en die kiest vaak voor niets. De andere acties hoeven niet weg; ze worden een tekstlink of verhuizen naar lager op de pagina. Voor verkeer uit advertenties werkt een aparte landingspagina nog strakker, omdat daar ook het menu weg kan.

2. Een visuele hiërarchie die de volgorde afdwingt. Kop, dan een regel uitleg, dan de knop. Eén stijl voor de hoofdknop, overal op de site dezelfde, en een tweede, rustiger stijl voor alles wat minder belangrijk is. Als alles opvalt, valt niets op.

3. Bewijs boven de vouw. Reviews, klantlogo's of een keurmerk horen in de buurt van de knop, op het moment dat de bezoeker twijfelt. Onderaan de pagina of alleen op een aparte reviewpagina ziet bijna niemand ze.

4. Een knoptekst die zegt wat er gebeurt. "Verzenden" en "Meer informatie" zeggen niets over wat de bezoeker krijgt. Google Ads adviseert bovendien om de pagina dezelfde actie te laten vragen als de advertentie. Een paar voorbeelden van hoe dat eruitziet:

Was Wordt
Verzenden Vraag je offerte aan
Meer informatie Bekijk de prijzen
Contact Plan een proefrit
Bestellen Bestel, morgen in huis

De tweede kolom werkt alleen als hij klopt. Belooft de knop "morgen in huis" en is dat na vier uur 's middags niet meer waar, dan levert de knop een klik op en kost hij een klant.

Een snelle controle voor deze vier: laat iemand die de site niet kent een paar seconden naar de pagina kijken en vraag wat hij hier kan doen. Noemt hij iets anders dan jouw hoofdactie, dan ligt daar het werk.

Conversie verhogen met snelheid en techniek

5. Een laadtijd binnen de grens. Google legt de grens voor een goede Largest Contentful Paint op 2,5 seconden, gemeten over het 75e percentiel van de bezoeken. De gebruikelijke oorzaken van een trage pagina zijn een zware openingsfoto, een slider en scripts van derden die allemaal tegelijk laden. Bij Vouwwagenspecialist ging de mobiele laadtijd met een nieuw platform van 6 naar 2,1 seconden; wat dat samen met nieuwe pagina's en campagnes opleverde staat op de case. Hoe je de drie meetwaarden leest en verbetert staat in het artikel over Core Web Vitals.

6. Mobiel eerst testen, op een echte telefoon. Een site wordt meestal op een groot scherm beoordeeld, terwijl GA4 per apparaat laat zien hoeveel bezoekers op een telefoon binnenkomen. Test elke belangrijke pagina op een telefoon: staat de knop in beeld zonder te scrollen, is hij met een duim te raken, schuift de opmaak niet weg als een afbeelding laat laadt?

7. Foutmeldingen die zeggen wat er mis is. WCAG 2.2 vraagt op het laagste niveau al dat een fout in een formulier wordt aangewezen en in tekst wordt beschreven. Een rood kader zonder uitleg voldoet daar niet aan. web.dev adviseert daarnaast om een fout direct bij het veld te tonen zodra het is ingevuld, en niet pas na het verzenden, zodat niemand een lang formulier opnieuw moet doorlopen.

Fouten in de techniek zijn het lastigst te vinden, omdat ze bij jou vaak niet optreden. Ze zitten op een oudere telefoon, in een andere browser of achter een cookiebanner die de knop afdekt. Sessie-opnames laten zien waar bezoekers blijven klikken zonder dat er iets gebeurt; die plekken zijn meestal een fout en geen ontwerpkwestie.

Conversie verhogen met formulieren

8. Velden schrappen. Het advies van web.dev is om zo weinig mogelijk te vragen en de rest pas op te halen als je het nodig hebt. Loop elk veld langs: wat doe je met dit antwoord vóór het eerste contact? Een adres voor een offerte die je eerst telefonisch bespreekt kan weg. Gebruik voor de velden die blijven het juiste invoertype, zodat een telefoon het juiste toetsenbord toont.

9. Een lang formulier in stappen. Heb je echt veel informatie nodig, zoals bij een offerte op maat, verdeel het dan over stappen. Begin met de makkelijke vragen, laat zien hoeveel stappen er nog komen en bewaar wat al is ingevuld als iemand teruggaat.

10. Een bevestigingspagina die iets doet. Na het verzenden hoort de bezoeker te lezen wat er nu gebeurt en wanneer: "We bellen je binnen één werkdag". Een eigen bedankpagina is bovendien het makkelijkste meetpunt voor een conversie, en de plek voor een volgende stap, zoals een link naar de cases of een telefoonnummer voor wie haast heeft.

Of de formulieraanpassingen werken zie je in GA4. Met de uitgebreide meting aan registreert het de eerste interactie met een formulier als form_start en het verzenden als form_submit. Het verschil tussen die twee is het aantal mensen dat begon en afhaakte. Wordt dat na het schrappen van velden kleiner, dan weet je dat het iets deed.

Conversie van je webshop verhogen

Bij een webshop zitten de afhakers vooral in de laatste stappen. Baymard Institute houdt een overzicht bij van 50 onderzoeken naar het verlaten van de winkelwagen, met een gemiddelde van 70,22%. Een deel daarvan was nooit van plan te kopen. Maar van wie dat wel was, noemt 40% te hoge extra kosten zoals verzending als reden, 18% een verplicht account en 17% een te lange of ingewikkelde checkout.

11. Een productpagina die de totaalprijs laat zien. Toon de verzendkosten en de levertijd al op de productpagina, niet pas in de laatste stap. Wie daar voor het eerst ziet wat hij werkelijk betaalt, haakt af op het moment dat je het minst wilt. Relevante accessoires of een bijpassend product op de productpagina kunnen de orderwaarde verhogen; hoe je dat doet zonder de bestelling in de weg te zitten, staat in het artikel over upsell en cross-sell.

12. Een checkout met minder velden en zonder verplicht account. Baymard gaat uit van 12 tot 14 formulierelementen als ideaal, waarvan 7 tot 8 invulvelden. De gemiddelde Amerikaanse checkout in hun onderzoek telt er 23,48, met 14,88 invulvelden. Maak bestellen als gast mogelijk, laat de browser adres en betaalgegevens invullen en schrap wat je voor de levering niet nodig hebt. Zo is de conversie van een webshop verhogen vaak eerder een kwestie van weghalen dan van toevoegen.

Hoe je meet of het werkt

Een aanpassing doorvoeren is het halve werk. Om te weten of hij werkt, vergelijk je een periode ervoor met een even lange periode erna, met drie voorwaarden.

  • Dezelfde verkeersbronnen. Start er in de periode erna een nieuwe campagne, dan meet je de campagne en niet de aanpassing. Vergelijk per bron.
  • Geen seizoen ertussen. Een tuinmeubelshop in maart en in mei vergelijken zegt niets over de nieuwe productpagina.
  • Niet alles tegelijk. Voer je tien aanpassingen in één week door, dan weet je achteraf niet welke het deed. Groepeer ze per pagina of per stap, en noteer de datum van elke wijziging.

Heb je veel verkeer, dan is een A/B-test betrouwbaarder dan een voor-en-navergelijking. Zo niet, dan is een eerlijke vergelijking van twee periodes beter dan niets meten. Wie zijn conversies wil verhogen zonder te meten, weet achteraf alleen dat er iets is veranderd.

Wil je je website conversie verhogen met aanpassingen aan ontwerp, snelheid of formulieren: wat we daarin doen staat op design en development.

Veelgestelde vragen

Hoe kan ik mijn website laten optimaliseren?

Begin met meten: wat is je conversieratio per pagina en apparaat, en klopt de meting? Kijk daarna waar bezoekers afhaken, bijvoorbeeld met heatmaps en sessie-opnames. Pak dan eerst de problemen aan die veel bezoekers raken, zoals laadtijd en formulieren, en meet na elke aanpassing opnieuw.

Hoe krijg ik meer aanvragen via mijn website?

Zorg dat elke pagina één duidelijke actie vraagt, zet bewijs zoals reviews bij de knop, maak het formulier kort en laat de knop zeggen wat er gebeurt. Meet daarnaast telefoontjes en klikken op je telefoonnummer, want die worden vaak vergeten en tellen net zo goed als een formulier.

Bronnen

Portret van Jos van der Pluijm tussen de stellingen van een magazijnVragen hierover?Mail Josjos@klubb.nl

Let’s work together.

Wil je weten hoe dit voor jouw business uitpakt? Plan 30 minuten met Daan of Jos.