UX Design: in e-commerce is uitmuntendheid geen optie

Wanneer iemand een bestelling in je winkel niet kan afronden, denkt hij niet: "de informatiearchitectuur zou duidelijker kunnen". Hij denkt dat de site kapot is.

Dat is geen beeldspraak. In het onderzoek van het Baymard Institute naar waarom mensen hun winkelmandje achterlaten (etaleurs buiten beschouwing gelaten), zegt 17% te zijn vertrokken omdat de website fouten had of crashte. Sommige daarvan waren echte storingen. Veel ervan niet: een formulier dat het kaartnummer wist na een typefout, een foutmelding die bovenaan de pagina blijft hangen terwijl het foutieve veld onder de vouw staat, een zoekopdracht die niets teruggeeft voor een product dat je wel degelijk verkoopt, een modal die ze met hun duim niet konden sluiten.

Jij ziet een ontwerpbeslissing. Zij zien een bug. En anders dan een echte bug, verschijnt deze nooit in je foutmonitoring. Hij is alleen te zien als een stille daling in conversie.

Eerst dit: UX is niet UI

Eén verduidelijking voordat we verdergaan, want de twee woorden worden voortdurend door elkaar gehaald. UI, user interface, is wat je klant ziet: kleuren, knoppen, typografie, witruimte. UX, user experience, is wat hem overkomt: of hij het product vindt, de leverdatum begrijpt, herstelt van een typefout en kan betalen zonder erbij na te denken. Een winkel kan een prachtige UI hebben en een kapotte UX: een schitterende checkout die je kaartnummer wist, blijft een kapotte checkout. Alles in dit artikel gaat over UX: niet over hoe je winkel eruitziet, maar over hoe hij zich gedraagt wanneer een echte klant hem gebruikt, met één hand, gehaast.

De enige goede fout is de fout die nooit gebeurt

De usability-heuristieken van Jakob Nielsen zijn dertig jaar oud en nog altijd de eerlijkste checklist in digitale handel. Twee ervan wegen zwaarder dan de rest zodra er geld in het spel is:

Voorkom de fout (heuristiek #5). Beperkingen, verstandige standaardwaarden, het juiste toetsenbord, een bevestiging voor alles wat onherstelbaar is.
Als het toch gebeurt, help mensen dan herstellen (heuristiek #9). Heldere taal, het exacte probleem, een voor de hand liggende volgende stap.

Een rode rand zonder tekst faalt op beide. Een bericht als Invalid input ook. En een checkout die "e-mail is verplicht" roept op de milliseconde dat iemand het veld aanraakt, ook: NN/g vergelijkt dat met een examen nakijken voordat de student ook maar één vraag heeft beantwoord.

De checkout-benchmark van Baymard uit 2025 is ongemakkelijk leesvoer als je aannam dat "de grote sites dit wel onder de knie hebben": 64% van de desktop-checkouts en 63% van de mobiele checkouts bij toonaangevende Amerikaanse en Europese winkels wordt als middelmatig of slechter beoordeeld. Twee procent krijgt het label goed. Geen enkele perfect (Baymard).

Hoe een nuttige fout er echt uitziet

Neem een Franse postcode die niet bij de stad past. De luie versie is een rode banner: "Ongeldig adres". De nuttige versie staat onder het veld, in de taal van de klant, en biedt een oplossing: "Deze postcode hoort niet bij Lyon. Bedoelde u 69001 (Lyon 1er)?"

Dat is geen verfraaiing. Het is de efficiëntieregel van NN/g plus WCAG 3.3.3 (stel een correctie voor wanneer het systeem er een kent). In de praktijk:

Zet het bericht naast het veld, niet in een toast twaalfhonderd pixels verderop.
Gebruik pictogram + rand + tekst. Kleur alleen is onzichtbaar voor een aanzienlijk deel van je klanten, en het faalt per definitie op toegankelijkheid.
Geef hen niet de schuld. "Ongeldig", "illegaal", "onjuist" klinken allemaal alsof de klant iets verkeerd deed. Het systeem weigerde een invoer; de zin moet dat op zich nemen.
Wis nooit wat ze al hebben getypt, ook het kaartnummer niet na een typefout in de CVV. Het formulier wissen betekent dat je hen vraagt de aankoop een tweede keer te beslissen.
Valideer wanneer ze het veld verlaten (of wanneer een postcode, telefoonnummer of kaartnummer compleet is), niet terwijl ze nog typen, en nooit bij de eerste focus.

Baymard ontdekte dat 31% van de sites nog altijd helemaal geen inline-validatie heeft, en een deel van de rest past die zo agressief toe dat testers dachten dat ze de pagina kapot hadden gemaakt. Drie details bepalen aan welke kant je staat: geen voortijdige waarschuwingen, de fout verdwijnt zodra de waarde is gecorrigeerd, en een klein groen vinkje bij geldige velden zodat ongeruste klanten het hele formulier niet blijven herlezen.

Als je deze maand maar vijf berichten kunt herschrijven, meet dan eerst. Welke validatiefouten komen het vaakst voor, en welke ervan gaan aan een afbreking vooraf? Die verdienen een menselijke zin. Baymard noemt dit adaptive error messaging. Jij mag het "stop met het schrijven van teksten voor fouten die niemand ooit tegenkomt" noemen.

Een geweigerde betaling is een andere soort. De klant moet weten of hij is belast, of de voorraad nog voor hem gereserveerd is en wat hij in plaats daarvan kan proberen. "Betaling mislukt" plus een knop "Opnieuw proberen" die blijft ronddraaien is de kortste weg van een UX-fout naar een chargeback.

Als de winkel niets zegt, denken ze dat hij vastloopt

"Zichtbaarheid van de systeemstatus" is heuristiek #1, en het is in wezen een vertrouwensregel. Voorspelbare feedback is wat de volgende tik veilig laat voelen.

Een paar patronen die als een storing lezen, zelfs wanneer de backend perfect gezond is:

"Toevoegen aan winkelmandje" zonder badge, zonder lade, zonder melding, zodat ze twee keer tikken en twee stuks bestellen.
Een knop "Betalen" die klikbaar blijft terwijl de bank nadenkt, zodat ze twee keer tikken en jij een dubbele autorisatie creëert.
Een spinner zonder timeout bij een 3-D Secure-omleiding. Na een paar seconden is dat, voor een duim in de tram, wel een bevriezing.
"Stap 2 van 4" die vervolgens verrast met een accountaanmaak of een sms-stap.

Stem de indicator af op de inzet: een rustige bevestiging voor "toegevoegd aan winkelmandje", een blokkering alleen wanneer de gebruiker echt moet stoppen. En wanneer de lay-out al bekend is, verslaat een skeleton screen een oneindige spinner.

Steven Hoober observeerde 1.333 mensen die hun telefoon in het openbaar gebruikten. Bijna de helft bediende hem met één hand; de meesten van de rest hielden de telefoon vast en tikten nog steeds met een duim. Ze wisselen elke paar seconden van greep, afhankelijk van de taak. Ze zitten niet achter een bureau met een muis.

Een hamburgermenu in de linkerbovenhoek, een microscopische "X" rechtsboven in een pop-up op volledig scherm of een primaire knop die vastzit onder een cookiebanner zijn dus niet "de mobiele versie van de desktopversie". Het zijn bereikfouten. Primaire acties horen waar de duim al is: navigatie onderaan, een sticky "Toevoegen aan winkelmandje" die echt aantikbaar is, een menu in de duimzone in plaats van tegen de statusbalk gedrukt.

De desktop-neef van dat idee is accentkleur. Eén kleur zou moeten betekenen "dit is de actie die ertoe doet". Als filters, chips, secundaire links en "Nu betalen" allemaal hetzelfde rood delen, moeten mensen de interface lezen in plaats van herkennen. Dat is geen branding. Dat is camouflage.

Telefoons zijn sinds 2013 alleen maar langer geworden. De bovenkant van het scherm is niet makkelijker te bereiken geworden.

Stop met het tekenen van nep-invoervelden

Het besturingssysteem weet al hoe het een telefoonnummer moet verzamelen. type="tel" opent een toetsenblok, type="email" biedt de @, en een native datumkiezer verslaat altijd een aangepaste kalender die autofill breekt. Plakken blokkeren in kaartvelden maakt je niet PCI-complianter; het fabriceert typefouten.

Dezelfde logica geldt voor hoe velden worden benoemd. Het HTML-attribuut autocomplete is een contract met de browser: shipping street-address, shipping postal-code, email, tel. Vul het correct in en Safari, Chrome en de wachtwoordmanager typen het adres voor je klant. Laat het leeg, of erger, forceer autocomplete="off" "voor de veiligheid", en je hebt een belasting van veertig seconden uitgevonden voor elke terugkerende klant. Dit is ook een toegankelijkheidsvereiste (WCAG 1.3.5), geen trucje van ontwikkelaars.

Een niveau hoger is adresopzoeking tijdens het typen (de BAN of La Poste in Frankrijk, of elke serieuze aanbieder) de volwassen versie van autocomplete. Houd gewoon een handmatige terugvaloptie voor de dagen dat de API traag is: een widget die voor altijd blijft draaien is, opnieuw, "de site is kapot".

Geef ze een uitweg en een weg terug

Mensen tikken voortdurend op het verkeerde. Heuristiek #3 is de duidelijk gemarkeerde nooduitgang: ongedaan maken, annuleren, buiten klikken, de Escape-toets, een sluitknop die groot genoeg is om echt te raken.

De regel van NN/g over modals is bot. Gebruik ze om onherstelbare schade te voorkomen, of om informatie te vragen zonder welke de flow niet kan doorgaan. Niet voor een nieuwsbrief, niet voor een cookie-upsell en niet voor wat dan ook midden in de checkout. Een modal in de checkout is de zekerste manier om een klant die klaar was om te betalen in een wachtwoord-reset-konijnenhol te sturen.

Let op mobiel ook op de tegenovergestelde bug: een iets te brede vinger die een dialoog sluit die ze juist nodig hadden. Destructieve bevestigingen mogen nooit sluiten bij een tik buiten; niet-kritieke modals moeten op drie manieren sluiten (knop, Esc, buiten klikken). Als je desktop-"non-modal" op een iPhone een val op volledig scherm wordt, heb je geen responsieve overlay. Je hebt een gijzeling.

Hervatbaarheid is dezelfde heuristiek, uitgerekt in de tijd. Een winkelmandje moet een gesloten tab overleven. Een checkout met twaalf velden mag niet resetten omdat de postcode werd geweigerd. Als de flow lang is, stuur dan een magic link om te hervatten. In Europese e-commerce is de klant die midden in een aankoop op zijn telefoon wordt onderbroken geen randgeval: het is de standaard.

En gastafrekenen is geen nice-to-have: 18% van de kopers heeft afgehaakt omdat de site een account eiste, en 62% van de sites verstopt "Doorgaan als gast" nog altijd onder een label "Nieuwe klant" (Baymard 2025). Als ze ernaar moeten zoeken, bied je het niet aan. Verzamel het account na de bestelling, met een magic link, niet als tolpoortje voor de verkoop.

Praat als iemand die op een pakket wacht, niet als een ERP

"2 tot 3 werkdagen" is een zin geschreven door logistiek. "Komt donderdag aan" is een zin geschreven voor een mens. Volgens Baymard laat bijna de helft van de toonaangevende winkels de klant nog altijd het kalenderrekenwerk doen, feestdagen inbegrepen. Een aftelling naar de deadline ("bestel binnen 43 minuten voor levering op donderdag") verslaat een statisch "bestel voor 11:00 PST" dat niemand zal omrekenen vanuit een tijdzone waarin hij niet woont.

Andere vocabulairefouten die onbeduidend lijken en zich als bugs gedragen:

Alleen optionele velden markeren, of alleen verplichte: 61% van de sites doet dit fout, en in gebruikerstests sloeg 32% van de deelnemers minstens één verplicht veld over (vaak het telefoonnummer) voordat ze tegen een muur liepen.
Wachtwoordregels die een centrale bank waardig zijn, voor een winkelaccount. Te strenge regels dreven tot 19% afhaking op bij mensen die al een account hadden, en faalden vervolgens op de reset-e-mail. Een minimum van 6 tot 8 tekens plus een magic link is ruim voldoende om schoenen te verkopen.
Lekken uit de backoffice: SKU, 3PL, "fulfillment", "pre-autorisatie", "3-D Secure challenge". Vertaal ze. "We controleren je kaart nu, je wordt belast bij verzending" is een statusbericht. "RUM" niet.

Minimalisme is hetzelfde respect, toegepast op structuur. Baymard telt 23,48 formulierelementen op de gemiddelde Amerikaanse checkout, tegen een ideaal van 12 tot 14 (7 tot 8 echte velden). Bijna één op de vijf afhakers zei dat de checkout te lang aanvoelde. De meeste van die extra velden waren nooit nodig om een pakket te verzenden.

Als ze het niet kunnen vinden, verkoop je het niet

Zoeken is geen widget. Voor een catalogus die je niet in vijftien seconden kunt doorbladeren, is het de winkel. Een pagina "geen resultaten" die haar schouders ophaalt, is een neergelaten rolluik, en ongeveer de helft van de sites biedt nog altijd geen uitweg. "Controleer je spelling" is geen uitweg; niemand leest die zin. Gerelateerde categorieën, een verruimde zoekopdracht met vijf productvoorbeelden, recent bekeken items, een telefoonnummer, bestsellers: dat is een uitweg.

Hetzelfde geldt voor navigatie die is gebouwd op je magazijnnamen in plaats van op de woorden van de klant, en voor aanbevelingen die willekeurig of licht verontrustend zijn. "Recent bekeken" en "samen gekocht" verdienen hun plek; "we zagen dat je naar trouwringen keek" niet.

Lijsten respecteren ten slotte het feit dat het winkelmandje al als extern geheugen dient. NN/g observeerde dat mensen alles met het label "Wishlist" vermijden (het klinkt als een cadeaulijst, en het klinkt als werk) en alles weigeren dat een account eist om een item op te slaan. "Bewaren voor later": zichtbaar, zonder inloggen. De operationele bonus is reëel: een lijst is een legitieme reden om te mailen "dit raakt uitverkocht", maar in de EU vereist die e-mail nog altijd een correcte opt-in-toestemming. De UX-fout en de AVG-fout zijn vaak hetzelfde veld.

Nog één laatste onglamoureuze fout: je artikelen zijn onleesbaar

Als je een blog publiceert, is de leesmodus van de browser een test die je markup ofwel haalt ofwel faalt. Echte hiërarchische koppen, een echte paginatitel, tekst die echt tekst is. Een marketingpagina van afbeeldingen en divs faalt op leesmodus, faalt op ondersteunende technologie en faalt op de lezers die het artikel simpelweg wilden bewaren voor later. Het is klein naast de checkout. Het is ook een lek in je geloofwaardigheid.

Veelgestelde vragen

Waarom verschijnen UX-fouten nooit in mijn monitoring?

Omdat het voor een machine geen bugs zijn. Een formulier dat het kaartnummer wist na een typefout, een foutmelding die bovenaan de pagina blijft hangen of een zoekopdracht die niets teruggeeft, gooit nooit een fout op: ze zijn alleen te zien als een stille daling in conversie. In het onderzoek van het Baymard Institute zegt 17% van de achtergelaten winkelmandjes te zijn vertrokken omdat de website fouten had of crashte.

Wat is het verschil tussen UX en UI, en waarom is dat belangrijk?

UI is wat de klant ziet: kleuren, knoppen, typografie, witruimte. UX is wat hem overkomt: het product vinden, de leverdatum begrijpen, herstellen van een typefout en betalen zonder na te denken. Een winkel kan een prachtige UI hebben en een kapotte UX. Een schitterende checkout die je kaartnummer wist, blijft een kapotte checkout.

Hoe zien nuttige foutmeldingen eruit?

Ze staan naast het foutieve veld, in de taal van de klant, en bieden een oplossing: "Deze postcode hoort niet bij Lyon. Bedoelde u 69001 (Lyon 1er)?". Ze wissen nooit wat de klant al heeft getypt, de validatie gebeurt wanneer hij het veld verlaat, en een geldig veld krijgt een klein groen vinkje.

Waarom is gastafrekenen zo belangrijk?

18% van de kopers heeft afgehaakt omdat de site een account eiste, en 62% van de sites verstopt "Doorgaan als gast" nog altijd onder een label "Nieuwe klant" (Baymard 2025). Als ze ernaar moeten zoeken, bied je het niet aan. Verzamel het account na de bestelling, met een magic link, niet als tolpoortje voor de verkoop.

Heb ik een replatform nodig om deze UX-problemen op te lossen?

Nee. Niets daarvan vereist een replatform, en het meeste vereist niet eens een volledige sprint: fouttekst naast de velden, invoervelden die hun waarden behouden, gastafrekenen goed zichtbaar, de juiste type en autocomplete op elk veld, een werkende sluitknop op elke overlay, een leverdatum in plaats van "werkdagen" en een pagina zonder resultaten die een volgende stap biedt.

Waar moeten mijn primaire acties op mobiel staan?

Waar de duim al is. Steven Hoober observeerde 1.333 mensen die hun telefoon in het openbaar gebruikten: bijna de helft bediende hem met één hand, en de greep verandert elke paar seconden. Een hamburgermenu linksboven, een microscopische sluitknop rechtsboven in een pop-up op volledig scherm of een primaire knop die vastzit onder een cookiebanner zijn bereikfouten, niet "de mobiele versie van de desktopversie". Navigatie onderaan, een sticky "Toevoegen aan winkelmandje" die echt aantikbaar is, een menu in de duimzone.

Wat moet een zoekpagina zonder resultaten doen?

Ongeveer de helft van de sites biedt helemaal geen uitweg, en "Controleer je spelling" is er geen. Bied gerelateerde categorieën, een verruimde zoekopdracht met vijf productvoorbeelden, recent bekeken items, een telefoonnummer en bestsellers.

Waarom leidt een slecht afgehandelde geweigerde betaling tot chargebacks?

Audit het als een klant: op een telefoon, met een typefout

Deze fouten zie je niet vanaf de desktop op kantoor, ingelogd als beheerder. Je ziet ze in de tram, op 4G, met één letter te veel in de postcode en een cookiebanner die de knop Betalen bedekt.

Begin daar deze week: fouttekst naast de velden, invoervelden die hun waarden behouden, gastafrekenen goed zichtbaar, de juiste type en autocomplete op elk veld, een werkende sluitknop op elke overlay, een leverdatum in plaats van "werkdagen", een pagina zonder resultaten die een volgende stap biedt. Niets daarvan vereist een replatform. Het meeste vereist niet eens een volledige sprint.

De winkels die de minste klanten verliezen, zijn niet die met de meeste animaties. Het zijn die waarvan de fouten als zinnen lezen, waarvan de knoppen zitten waar de duim al is, en waarvan de klanten zich nooit hoeven af te vragen of de site net is gecrasht.

Bij Saphes IT-Systems auditen we dat parcours precies zoals een bezoeker het voor het eerst beleeft: fouten, lege staten, zoeken, checkout, tot aan de modal die je niet meer kunt sluiten en waar je niet meer bij stilstaat, en we verhelpen de defecten die er al als bugs uitzien. Wil je weten welke van je "ontwerpkeuzes" je klanten al onder "kapot" hebben geschaard, laten we dan praten.