9 UX-fouten die je conversie kosten, en hoe je een gebruiksvriendelijke website maakt

Een UX-fout is elke ontwerpkeuze waardoor bezoekers harder moeten werken dan ze verwachtten om te doen waarvoor ze kwamen. Zulke fouten vallen zelden op. Pagina's laden, knoppen reageren en de bezoekcijfers zijn stabiel, maar aanvragen en verkopen blijven achter. Een gebruiksvriendelijke website haalt die drempels weg. De lijst van hardnekkige webdesignfouten van Nielsen Norman Group laat zien hoeveel van deze problemen al tientallen jaren meegaan.

Deze gids behandelt negen UX-fouten die conversies kosten op zakelijke websites. Vijf zijn klassiekers: calls-to-action, hiërarchie, navigatie, tekstmuren en mobiel. Vier ontbreken in de meeste oudere lijstjes: lange formulieren, trage reacties op tikken (gemeten met INP), chatwidgets en pop-ups die de pagina afdekken, en toegankelijkheid, waar in de EU nu ook wettelijke eisen aan hangen.

Per fout lees je hoe hij eruitziet, waarom hij conversies kost en hoe je hem oplost. De cijfers komen van Baymard Institute, WebAIM, Google en NN/g, met links zodat je ze zelf kunt nakijken.

Kleine usabilityproblemen kosten geld omdat ze bezoekers raken op het moment dat ze een beslissing nemen, en omdat niemand ze meldt. Wie niet snapt wat een knop doet, stuurt geen bugrapport. Die twijfelt, opent het tabblad van een concurrent en vergeet je. Je analytics noteert een bounce zonder reden, dus het verlies lijkt een probleem met de kwaliteit van het verkeer terwijl het een ontwerpprobleem is.

Onderzoek naar het afrekenproces geeft de duidelijkste cijfers. Het onderzoek van Baymard Institute naar het verlaten van winkelwagens komt op een gemiddeld gedocumenteerd percentage van 70,22%, op basis van 50 studies. Volgens hetzelfde onderzoek kan een gemiddelde grote webshop zijn conversieratio met 35,26% verhogen door alleen het ontwerp van de checkout te verbeteren. Dat is een relatieve stijging: een conversieratio van 3% gaat dan naar ongeveer 4%.

Waarom deze problemen onzichtbaar blijven

• Er gaat niets kapot, dus de foutmonitoring blijft groen.
• Bezoekers vertrekken zonder te klagen.
• Los bekeken lijkt elk probleem klein.

Vertrouwen krijgt de eerste klap

Een verwarrende interface doet mensen twijfelen aan het bedrijf erachter. In de enquête van Baymard zei 19% van de Amerikaanse kopers die een bestelling afbraken (zonder de mensen die alleen rondkeken) dat ze de site hun creditcardgegevens niet toevertrouwden. Dat oordeel valt al voordat een bezoeker je prijzen of dienstverlening bekijkt. Wil je weten wat slechte UX met je vindbaarheid doet, lees dan ons artikel over hoe slechte UX je SEO, conversies en vertrouwen schaadt.

Een zwakke call-to-action is een van de meest gemaakte UX-fouten, juist omdat hij er in een designreview prima uitziet. De knop past in de huisstijl en valt goed op. Het probleem zit in de tekst: "Verzenden", "Lees meer" of "Aan de slag" vertelt de bezoeker niet wat er na de klik gebeurt. Staan er drie even zware knoppen naast elkaar, dan moet de bezoeker kiezen, en een deel kiest ervoor om te vertrekken.

Zo herken je een zwakke CTA

• De tekst beschrijft een handeling in plaats van een resultaat ("Verzenden" in plaats van "Ontvang mijn offerte").
• Meerdere acties hebben op één scherm hetzelfde visuele gewicht.
• De CTA staat er al voordat de pagina een reden heeft gegeven om te klikken.
• Niets bij de knop neemt de voor de hand liggende zorg over prijs, verplichting of gegevens weg.

Zo los je het op

Geef elke pagina één primaire actie en maak alle andere links visueel ondergeschikt. Schrijf de knoptekst als het resultaat dat de bezoeker wil en zet er één geruststellende regel naast, zoals "Reactie binnen één werkdag", als dat voor jouw aanbod klopt. Herhaal op lange pagina's de primaire CTA na elk groot inhoudsblok, zodat scrollers niet terug naar boven hoeven.

Test tekstwijzigingen één voor één. Onze gids voor conversieoptimalisatie van landingspagina's legt uit hoe je die tests opzet.

Een zwakke hiërarchie ontstaat als elk element op de pagina even hard om aandacht vraagt. Koppen, featurelijsten, badges, banners en knoppen hebben vergelijkbare formaten en kleuren, waardoor het oog geen startpunt heeft. Bezoekers besteden hun eerste seconden aan uitzoeken waar ze moeten kijken in plaats van je aanbod te lezen, en velen haken af voordat ze bij het argument komen dat hen had overtuigd.

Signalen dat je hiërarchie niet werkt

• De hoofdboodschap is niet binnen een paar seconden duidelijk.
• Bijzaken zoals klantlogo's of awards vallen net zo op als de kop.
• Er worden meerdere kleuren gebruikt om te benadrukken, dus geen enkele springt eruit.

Zo los je het op

De definitie van visuele hiërarchie van NN/g noemt drie middelen: kleur en contrast, formaat, en groepering. Gebruik formaat voor de ene boodschap die er het meest toe doet, contrast voor de primaire actie en witruimte om bij elkaar horende onderdelen te groeperen. Doe daarna de knijpoogtest die NN/g beschrijft: maak de screenshot wazig en kijk of de kop en de CTA er nog uitspringen.

Bepaal de volgorde van informatie voordat iemand een designtool opent. Een korte inhoudsopzet per pagina, geordend op wat de bezoeker als eerste nodig heeft, voorkomt de meeste hiërarchieproblemen al in de wireframefase.

Verwarrende navigatie schaadt elk bezoek, omdat mensen het menu gebruiken om te beoordelen of je site heeft wat ze zoeken. Labels in intern jargon, megamenu's met veertig links en dienstpagina's die alleen via de homepage bereikbaar zijn, dwingen bezoekers tot gokken. Elke verkeerde gok kost een klik en wat vertrouwen, en na twee of drie misgokken is het bezoek meestal voorbij.

Waar navigatie meestal misgaat

• Labels volgen je organogram in plaats van de woorden waarop bezoekers zoeken.
• Te veel opties op het hoogste niveau zonder logische groepering.
• Geen duidelijke weg terug als een bezoeker een verkeerde afslag neemt.
• Mobiele menu's waarin de link die de meeste mensen nodig hebben, vaak Contact of Prijzen, diep verstopt zit.

Zo los je het op

Gebruik de woorden van je klanten. Zoekopdrachten in Google Search Console en de vragen die je salesteam het vaakst hoort, zijn goede bronnen voor labels. Houd de items op het hoogste niveau kort, groepeer de rest onder duidelijke kopjes en houd de primaire actie (contact, offerte of demo) op elke pagina zichtbaar. Ga je een site herstructureren, dan laat onze gids voor het plannen van je websitestructuur zien hoe je pagina's in kaart brengt voordat het ontwerp begint.

Lange, ononderbroken alinea's zijn een UX-ontwerpfout, omdat mensen webpagina's scannen in plaats van ze te lezen. In de analyse van NN/g over hoe weinig gebruikers lezen hadden bezoekers tijd om hooguit 28% van de woorden op een gemiddelde pagina te lezen, en 20% was waarschijnlijker. Die studie stamt uit 2008, en later eyetrackingonderzoek naar het F-vormige leespatroon wijst dezelfde kant op.

Wat scanners nodig hebben

• Tussenkoppen die zeggen wat er in de sectie staat.
• Korte alinea's die met de hoofdzaak beginnen.
• Opsommingen voor stappen, opties en vergelijkingen.
• Belangrijke feiten, zoals prijsindicaties, doorlooptijden en garanties, los van de lopende tekst.

Zo los je het op

Herschrijf de eerste zin van elke sectie zodat die op zichzelf de tussenkop beantwoordt. Beperk alinea's tot drie of vier zinnen en zet specificaties in tabellen. Bekijk de pagina daarna op een telefoon: een alinea die op desktop redelijk oogt, vult op mobiel vaak het hele scherm.

Sommige kopers willen veel details voordat ze contact opnemen, dus schrappen is niet altijd het antwoord. Met een goede structuur vinden zij die details en kan de rest ze overslaan.

De meeste bezoeken komen tegenwoordig van een telefoon. De platformcijfers van StatCounter tonen dat mobiele apparaten in september 2026 goed waren voor ongeveer 59% van het wereldwijde webverkeer, tegenover zo'n 39% voor desktop. Toch worden veel sites nog op een groot scherm ontworpen en later verkleind. Lay-outs, tikgebieden en formulieren werken dan op het scherm van de designer en falen op de telefoon van de bezoeker.

Desktop-first-problemen op kleine schermen

• Tikgebieden die te klein zijn of te dicht op elkaar staan.
• Sticky headers, cookiebalken en chatknoppen die het halve scherm bedekken.
• Interacties die alleen met hover werken, zonder alternatief voor touch.
• Formulieren die het verkeerde toetsenbord openen voor e-mail- of telefoonvelden.

Zo los je het op

Ontwerp eerst de mobiele lay-out van je belangrijkste conversiepagina's en breid die daarna uit voor grotere schermen. WCAG 2.2 legt in succescriterium 2.5.8 een minimale doelgrootte van 24 bij 24 CSS-pixels vast, een verstandige ondergrens voor knoppen en links. Gebruik de juiste inputtypes, zodat telefoons het juiste toetsenbord tonen. Test op een Android-toestel uit het middensegment met een gewone mobiele verbinding, niet alleen op een nieuwe iPhone via de kantoorwifi.

Mobiele gebruiksvriendelijkheid is een basisvereiste in ons UX/UI-designproces: de mobiele conversieflow bekijken we als hoofdroute, niet als aanpassing van de desktopversie.

In het formulier wordt interesse een lead of een verkoop, en juist daar vragen veel sites veel meer dan nodig. Het onderzoek van Baymard naar formuliervelden in de checkout vond dat de gemiddelde checkout in 2024 11,3 formuliervelden had, terwijl de meeste sites er maar 8 nodig hebben. Elk extra veld is een reden om te stoppen, en velden die niets met de aanvraag te maken lijken te hebben, doen mensen afvragen waarom je die gegevens wilt.

Veelvoorkomende frictie in formulieren

• Vragen naar gegevens die je ook na de eerste reactie kunt verzamelen, zoals bedrijfsgrootte op een eenvoudig contactformulier.
• Verplicht een account aanmaken, door 18% van de Amerikaanse kopers in de enquête van Baymard genoemd als reden om af te haken (zonder de mensen die alleen rondkeken).
• Foutmeldingen die pas na het verzenden verschijnen en niet zeggen wat er anders moet.
• Placeholdertekst in plaats van labels, die verdwijnt zodra de bezoeker begint te typen.

Zo los je het op

Zet elk veld op een rij en vraag je af wie het antwoord gebruikt, en wanneer. Heeft niemand het nodig vóór het eerste gesprek, schrap het dan. Dat sluit ook aan bij het AVG-principe van dataminimalisatie. Houd labels zichtbaar boven de velden, valideer direct tijdens het typen en ondersteun automatisch invullen met de juiste autocomplete-attributen. Voor veel B2B-leadformulieren zijn een naam, een e-mailadres en één open vraag genoeg om het gesprek te starten. Formulieranalyse in een CRO-audit laat zien welk veld de meeste afhakers veroorzaakt, zodat je het ergste eerst aanpakt.

Een pagina kan snel laden en toch kapot aanvoelen als hij traag reageert wanneer iemand op een knop tikt of een menu opent. Google meet dit met Interaction to Next Paint (INP), dat op 12 maart 2024 First Input Delay verving als Core Web Vital. Volgens de INP-documentatie van web.dev is een INP van 200 milliseconden of minder goed en alles boven 500 milliseconden slecht, gemeten op het 75e percentiel van echte bezoeken.

Waarom INP een conversieprobleem is

Als een tik geen zichtbare reactie geeft, tikken mensen nog een keer, openen ze het verkeerde item of denken ze dat de site is vastgelopen. Dat zie je terug in de omzet. In een case study op web.dev verbeterde het reisplatform redBus de INP van zijn zoekpagina met 72% en zag het de totale verkoop met 7% stijgen.

Veelvoorkomende oorzaken

• Zware JavaScript die tijdens interacties op de main thread draait.
• Tagmanagers, chattools en A/B-testscripts die om dezelfde thread vechten.
• Filters en zoekvelden die bij elke toetsaanslag de hele pagina opnieuw renderen.

Zo los je het op

Bekijk INP in het Core Web Vitals-rapport van Google Search Console of in de velddata van PageSpeed Insights. Geef bij elke tik meteen visuele feedback, ook als het werk nog niet klaar is. Knip lange taken op in kleinere, stel scripts uit die de eerste interactie niet nodig heeft en loop elk kwartaal je externe tags na. Onze gids over een high-performance website bouwen gaat dieper in op de technische kant.

Overlays zijn sterk toegenomen sinds AI-chattools goedkoop toe te voegen zijn. Een nieuwsbriefpop-up bij binnenkomst, een cookiebanner en een chatwidget die zichzelf opent met een begroeting kunnen samen het grootste deel van een telefoonscherm bedekken voordat de bezoeker één regel heeft gelezen. Elk van die elementen verbetert misschien zijn eigen cijfer, terwijl de pagina als geheel slechter converteert, omdat mensen niet bij de inhoud komen waarvoor ze kwamen.

Wat Google adviseert

De richtlijnen van Google Search Central over opdringerige interstitials waarschuwen dat opdringerige dialogen content moeilijker te begrijpen maken voor zoekmachines en sites lastiger te gebruiken. Google raadt kleine banners aan in plaats van overlays over het hele scherm. Verplichte dialogen, zoals een leeftijdscheck, zijn de uitzondering.

De cookiebanner en de AP

Gebruik je niet-noodzakelijke cookies, dan kun je de cookiebanner niet weglaten, maar hij hoeft de pagina niet te blokkeren. De Autoriteit Persoonsgegevens (AP) controleert cookiebanners en stelt dat weigeren net zo makkelijk moet zijn als accepteren. Een compacte, eerlijke banner voldoet daaraan en zit de bezoeker minder in de weg dan een groot venster dat naar "Alles accepteren" duwt.

Zo los je het op

• Open geen chatvenster of modal bij het laden van de pagina. Wacht op een teken van interesse, zoals scrolldiepte, of laat bezoekers het zelf openen.
• Houd de gesloten chatknop klein en uit de buurt van de primaire CTA en van de onderkant van het scherm op mobiel.
• Toon één overlay tegelijk en onthoud wanneer een bezoeker hem heeft weggeklikt.
• Zorg dat elke overlay met één tik en met het toetsenbord te sluiten is.

Een AI-assistent kan vragen beantwoorden en leads kwalificeren, zolang hij wacht tot hij iets gevraagd wordt. Ons artikel over een AI-agent op je website gaat in op waar die balans ligt.

Toegankelijkheidsproblemen zijn UX-problemen met een juridische kant. Tekst met weinig contrast, formuliervelden zonder label en knoppen zonder naam maken een site voor iedereen lastiger, ook voor mensen die nooit een schermlezer gebruiken. Het WebAIM Million-rapport 2026 vond detecteerbare WCAG 2-fouten op 95,9% van de een miljoen meest bezochte homepages, met gemiddeld 56,1 fouten per pagina.

De meest voorkomende fouten

• Tekst met te weinig contrast, op 83,9% van de homepages.
• Ontbrekende alt-tekst bij afbeeldingen, op 53,1%.
• Ontbrekende labels bij formuliervelden, op 51%.

Twee van die drie zitten direct in de conversieroute: knopteksten die slecht leesbaar zijn en formulieren die schermlezers niet kunnen voorlezen.

De Europese deadline is verstreken

De European Accessibility Act geldt sinds 28 juni 2025. Nederland heeft de richtlijn omgezet met de Implementatiewet toegankelijkheidsvoorschriften. De regels gelden onder meer voor e-commerce en een aantal andere consumentendiensten in de EU. Micro-ondernemingen die diensten leveren, dus met minder dan 10 medewerkers en een jaaromzet of balanstotaal van maximaal €2 miljoen, zijn uitgezonderd. Verkoop je online aan consumenten in de EU, dan is toegankelijkheid nu een nalevingskwestie en niet alleen een UX-kwestie.

Zo los je het op

Laat een geautomatiseerde checker over je belangrijkste templates lopen en doorloop daarna de conversieroute alleen met het toetsenbord en met een schermlezer. Pak eerst contrast en formulierlabels aan: die zijn goedkoop te wijzigen en raken de meeste mensen. Onze gids over de WCAG-richtlijnen behandelt de eisen uitgebreider.

Niet elk probleem is even urgent. De tabel hieronder is de prioritering die wij voor zakelijke websites hanteren, gebaseerd op de gebruikelijke impact op conversie en de moeite die een oplossing meestal kost. Het is een inschatting, geen gemeten benchmark, dus stem hem af op je eigen analytics: een probleem op je best bezochte conversiepagina gaat altijd voor een probleem op een pagina die weinig mensen zien.

UX-fouten kosten conversies doordat ze extra moeite toevoegen op de momenten waarop bezoekers beslissen of ze doorgaan. Eén onduidelijk label kost zelden in zijn eentje een klant. Het verlies komt door opstapeling: een traag menu, dan een pagina zonder duidelijke volgende stap, dan een formulier met twaalf velden. Elke stap kost een deel van de bezoekers, en die delen vermenigvuldigen zich over de hele funnel.

Een eenvoudig funnelvoorbeeld

Neem 1.000 bezoekers op een dienstpagina. Klikt 40% door naar de contactpagina en verstuurt 20% daarvan het formulier, dan heb je 80 leads. Verbeter elke stap met een kwart, naar 50% en 25%, en hetzelfde verkeer levert 125 leads op. Geen van beide wijzigingen ziet er spectaculair uit, maar samen leveren ze 56% meer leads op zonder één extra bezoeker.

Waar je in je data kijkt

• Uitval van stap naar stap in je funnelrapporten.
• Pagina's met veel verkeer en weinig doorkliks naar de volgende stap.
• Rage clicks, dode klikken en herhaalde tikken in sessie-opnames.
• Uitval per veld, als je formuliertool dat bijhoudt.

Vergelijk je cijfers met realistische bandbreedtes voordat je doelen stelt. Ons artikel over het berekenen van je conversieratio geeft benchmarks, en de gids over UX-statistieken legt uit welke signalen je naast conversies volgt. Voor het bredere vak begin je met onze gids over conversieoptimalisatie.

De meeste UX-fouten zijn goedkoper te voorkomen dan op te lossen. Een navigatielabel of formulierveld aanpassen tijdens het wireframen kost minuten, terwijl dezelfde wijziging na de lancering nieuwe ontwerpen, development, testen en nog een release kan betekenen. Daarom bekijken zorgvuldige teams structuur en flows voordat het visuele ontwerp begint, en testen ze de conversieroute vóór de lancering opnieuw op echte apparaten met echte content.

Wat een review vóór de lancering omvat

• User flows van elke belangrijke verkeersbron naar het conversiedoel.
• Per pagina een afgesproken inhoudshiërarchie, nog vóór de styling.
• Elk formulierveld afzonderlijk verantwoord.
• Core Web Vitals, inclusief INP, gemeten op een stagingomgeving.
• Toetsenbord- en schermlezertests op de belangrijkste conversieroute.

Hoe Vezert werkt

Bij Vezert komen structuur en volgorde van de content vóór het visuele ontwerp. We gebruiken AI-tools om analyses te versnellen, bijvoorbeeld om heatmaps te bekijken en inconsistente componenten op te sporen, terwijl designers en developers de uiteindelijke beslissingen nemen. Dezelfde review geldt of we nu een landingspagina, een bedrijfswebsite of een webportaal bouwen. Landingspagina's beginnen bij €1.500, bedrijfswebsites bij €4.500 en webportalen bij €9.000, en op de prijzenpagina zie je wat elk pakket bevat. Afgeronde projecten vind je in ons portfolio.

Loop deze checklist na op elke pagina in een conversieroute: de homepage, landingspagina's, dienstpagina's, prijzen en het contact- of afrekenproces. Controleer elke pagina eerst op een telefoon en daarna op desktop. Elk punt dat je niet kunt afvinken is frictie, en de lijst werkt als briefing voor je designers als je de verbeteringen uitbesteedt.

1. Eén duidelijke primaire actie

• Is er één logische volgende stap op de pagina?
• Zegt de CTA-tekst wat er na de klik gebeurt?

2. Zichtbare hiërarchie

• Is de hoofdboodschap binnen een paar seconden duidelijk?
• Springen kop en CTA er bij de knijpoogtest nog uit?

3. Voorspelbare navigatie

• Komen de menulabels overeen met de woorden van klanten?
• Kunnen bezoekers vanaf elke pagina contact of prijzen bereiken?

4. Scanbare content

• Beantwoordt de eerste zin van elke sectie de tussenkop?
• Staan belangrijke feiten los van de lopende tekst?

5. Mobiel op orde

• Zijn tikgebieden minstens 24 bij 24 CSS-pixels en ruim genoeg verdeeld?
• Werkt de mobiele flow zonder inzoomen of precisietikken?

6. Korte formulieren

• Is elk veld nodig vóór het eerste gesprek?
• Verschijnen foutmeldingen direct en leggen ze uit wat er moet gebeuren?

7. Snelle reacties

• Is de INP in de velddata 200 ms of lager op mobiel en desktop?
• Geeft elke tik meteen feedback?

8. Vrij scherm

• Is de content bij binnenkomst zichtbaar, zonder modal of chat die zichzelf opent?
• Staat er maar één overlay tegelijk in beeld?

9. Basistoegankelijkheid

• Voldoet de tekst aan de contrasteisen van WCAG?
• Hebben alle formuliervelden een label en alle knoppen een naam?

Los de open punten eerst op je best bezochte pagina op en werk dan de rest van de lijst af.

Veelgemaakte UX-fouten zijn zelden één grote misser. Het is een reeks kleine beslissingen die zijn genomen zonder te kijken hoe echte bezoekers zich gedragen, en ze tellen op over de hele funnel. Heb je dit kwartaal maar tijd voor drie verbeteringen, begin dan met de primaire CTA op je best bezochte pagina, schrap velden uit je belangrijkste formulier en controleer INP en overlays op mobiel. Die wijzigingen kosten weinig en bereiken de meeste bezoekers.

Pak daarna hiërarchie, navigatie en toegankelijkheid aan, en kies met je analytics de pagina's die er het meest toe doen. Wil je voor de grotere wijzigingen een designteam inschakelen, dan legt onze gids over wat je kunt verwachten als je met webdesigners werkt elke fase uit. Of neem contact op met ons team, dan lopen we samen je conversieroute door.