Online marketing Webshop
13 minuten

Hoe je van je mobiele checkout een conversiemagneet maak

Hoewel we tegenwoordig bijna alles op onze smartphone doen, blijft de conversieratio op mobiel vaak pijnlijk achter bij die op desktop. De boosdoener is meestal een checkout die aanvoelt als een hindernisbaan vol (te) kleine tekstvelden en verplichte accounts; de digitale equivalenten van een dichtslaande deur. In dit blog duiken we in de wereld van ‘mobile-first‘ frictie en laten we zien hoe je barrières sloopt, zodat de duim van je klant bijna automatisch op de bestelknop drukt.

Een UX-specialist van Wux bespreekt de mobiele checkout-flow om de drempel voor klanten te verlagen.
Mika de Bruijn

Geschreven door Mika de Bruijn

Zwaaiende emoji

Mika Teamlead webdevelopment

Meer over Mika

Inhoudsopgave

Elke milliseconde telt

Voordat de klant überhaupt begint met het invullen van zijn gegevens, moet de pagina er staan. Op mobiel is geduld een schaars goed. Waar een desktopgebruiker nog wel eens een paar seconden wil wachten terwijl hij een slok koffie neemt, is de mobiele shopper onverbiddelijk. Snelheid is hier een absolute voorwaarde.

De ongeduldige duim en het goudvis-geheugen

De mobiele gebruiker is vaak onderweg, gehaast of wordt snel afgeleid door de wereld om hem heen. Op het moment dat je pagina moet “nadenken”, geef je de klant onbedoeld de ruimte om ook na te denken, bijvoorbeeld over de vraag of hij jouw product of dienst eigenlijk wel echt nodig heeft. Je wilt die kritische reflectie voorblijven door een vloeiende ervaring te bieden. Een trage checkout creëert namelijk een stilte die de klant opvult met twijfel, en in de wereld van e-commerce is twijfel de grootste vijand van een voltooide transactie.

Scripts minimaliseren voor maximale vaart

Een van de grootste boosdoeners van een trage mobiele checkout is de overvloed aan onnodige scripts. Marketingpixels, trackers en zware lettertypen eisen hun tol op de processor van een smartphone. In de checkout-flow moet je alles wat niet strikt noodzakelijk is voor de betaling, tijdelijk uitschakelen. Houd de code ‘lean’. Een snelle checkout voelt betrouwbaar aan, terwijl een trage checkout fragiel en onveilig oogt.

De magie van beeldoptimalisatie

Hoewel je in de checkout geen enorme banners meer nodig hebt, zijn productafbeeldingen (als kleine thumbnails) vaak nog aanwezig om de klant te herinneren aan wat hij koopt. Zorg dat deze afbeeldingen ‘responsive’ zijn en in het juiste formaat (zoals WebP) worden geserveerd. Een checkout die moet wachten op een zware afbeelding om te laden, is een checkout die klanten verliest.

De psychologie van de minimale inspanning

Op een scherm van 6 inch is elke extra handeling er één te veel. De menselijke geest is geprogrammeerd om de weg van de minste weerstand te kiezen. In de e-commerce noemen we dit ‘frictie’. Hoe meer velden een klant moet invullen, hoe groter de kans dat hij de handdoek in de ring gooit. Het doel van een goede mobiele checkout is om de cognitieve belasting zo laag mogelijk te houden.

Gast-afrekenen als de ultieme vrijheid

Niets is zo dodelijk voor je conversie als de melding: “Maak eerst een account aan om verder te gaan”. Op mobiel is dit een absolute ‘no-go’. De klant wil nu kopen, niet een langdurige relatie met je database aangaan. Bied altijd de optie ‘Afrekenen als gast’ aan. Je kunt ze na de betaling, op de bedankpagina, altijd nog vragen of ze hun gegevens willen opslaan voor een volgende keer. Op dat moment is de buit binnen en de psychologische barrière verdwenen.

De heilige Single Column Layout

Op een klein scherm is horizontaal scannen vermoeiend en verwarrend. Toch zie je soms checkouts die twee kolommen naast elkaar proberen te proppen. Doe het niet. Gebruik een strikte ‘Single Column Layout’. Dit zorgt voor een natuurlijke flow van boven naar beneden. De blik van de klant wordt in één rechte lijn naar de bestelknop geleid. Het geeft rust, overzicht en voorkomt dat velden buiten het zicht van de gebruiker vallen.

Het visuele schouderklopje van de progressiebalk

Mensen willen weten waar ze aan toe zijn. Een checkout zonder indicatie van hoe lang het nog duurt, voelt als een tunnel zonder einde. Gebruik een visuele progressiebalk bovenin het scherm. Stap 1: Gegevens, Stap 2: Bezorging, Stap 3: Betalen. Het geeft een klein dopamineshotje wanneer een klant een stap afrondt. Het gevoel van progressie motiveert om de laatste stap ook af te maken.

De tunnelvisie-methode

Zodra een klant in de checkout zit, moeten alle mogelijke afleidingen in de flow verdwijnen. Weg met het menu, weg met de zoekbalk en weg met de links naar de algemene voorwaarden in de header. De enige weg uit de checkout moet de betaalknop zijn (of het kruisje om terug te gaan naar de mand). Creëer een ‘distraction-free’ zone waar de focus puur ligt op de transactie.

Stop de typ-irritatie met slimme formulieren

Typen op een virtueel toetsenbord is een bron van fouten en irritatie. Kleine schermen en gevoelige toetsenborden vragen om extra aandacht. Met slimme invoervelden voorkom je dat het invoeren van gegevens een onnodige drempel wordt. Een geoptimaliseerde mobiele checkout maakt typen bijna optioneel. We willen de telefoon het werk laten doen.

De magie van Autofill

Maak optimaal gebruik van de ‘autocomplete’ attributen in je HTML-code. Browsers zoals Safari en Chrome hebben de adresgegevens en creditcardinformatie van de gebruiker vaak al opgeslagen. Als je velden de juiste labels hebben (zoals ‘shipping address’ of ‘email’), kan de klant met één tik het hele formulier invullen. Dit is het verschil tussen dertig seconden typen of twee seconden klikken.

Het juiste toetsenbord op het juiste moment

Het is een kleine aanpassing met een enorme impact: zorg dat het juiste toetsenbord verschijnt bij elk veld. Vraagt een veld om een telefoonnummer of postcode? Laat dan automatisch het numerieke toetsenbord verschijnen. Vraagt een veld om een e-mailadres? Zorg dat de “@” en de punt direct zichtbaar zijn. Het dwingt de klant niet om handmatig tussen toetsenborden te schakelen, wat de snelheid en het gemak verhoogt.

Adresgegevens invullen? Postcode is genoeg!

Niemand vindt het leuk om zijn volledige straatnaam, stad en provincie in te voeren. Gebruik een postcode-check waarbij de klant alleen zijn postcode en huisnummer invult, waarna de rest automatisch wordt aangevuld. Dit voorkomt niet alleen typfouten (die weer zorgen voor mislukte bezorgingen), maar het verkort het proces aanzienlijk. Hoe minder tekens de klant moet aanslaan, hoe blijer hij is.

Het vinkje van vertrouwen

Niets is frustrerender dan een heel formulier invullen, op ‘verder’ klikken, en dan pas een rode melding krijgen dat er ergens iets fout is gegaan. Gebruik ‘inline validatie’. Zodra een veld correct is ingevuld, verschijnt er een groen vinkje. Is er een fout? Laat het dan direct zien terwijl de klant nog bij dat veld is. Het geeft een gevoel van controle en voorkomt een zoektocht naar fouten achteraf.

Design- en developmentteam van Wux werken samen aan een duimvriendelijk ontwerp voor een nieuwe mobiele checkout.

Betalen met één klik

De fysieke bankpas is aan het uitsterven in het mobiele domein. Niemand heeft zin om zijn portemonnee te trekken, een pasje in een reader te steken en codes over te typen. De moderne consument verwacht ‘one-tap’ betalingen. De integratie van digitale wallets is de grootste conversie-booster van het afgelopen decennium.

De nieuwe standaard van Apple Pay en Google Pay

Deze diensten elimineren de noodzaak om adresgegevens en betaalinformatie in te vullen op jouw site. Met één klik op de Apple Pay knop en een snelle FaceID-check is de bestelling geplaatst. De verzendgegevens worden direct vanuit de wallet naar je webshop gestuurd. Dit is de ultieme wrijvingsloze ervaring. Als je deze opties nog niet aanbiedt, laat je simpelweg geld op tafel liggen.

De naadloze iDEAL-app koppeling

Voor de Nederlandse markt is iDEAL (Wero) essentieel, maar de mobiele uitvoering moet perfect zijn. Zorg voor een ‘app-to-app’ koppeling. De klant kiest zijn bank en wordt direct naar de bank-app geleid, waar hij met een vingerafdruk of FaceID bevestigt, om vervolgens automatisch weer in jouw shop te landen op de bedankpagina. Elke tussenstap waarbij een klant moet inloggen met een identifier, is een moment waarop hij kan afhaken.

Biometrie als versneller van vertrouwen

Het gebruik van vingerafdrukscanners en gezichtsherkenning (biometrie) heeft het vertrouwen in mobiele betalingen enorm vergroot. Het voelt veilig, maar tegelijkertijd razendsnel. Door betaalmethoden te ondersteunen die biometrie gebruiken, verlaag je zowel de technische als psychologische drempel van de klant om een grotere uitgave te doen op hun smartphone.

Ontwerpen voor de duim

Een mobiele website moet er niet alleen goed uitzien, maar vooral ook goed voelen. We gebruiken onze telefoons meestal met één hand, waarbij de duim het meeste werk doet. Het ontwerp van je checkout moet rekening houden met de fysieke beperkingen van het menselijk lichaam.

De wet van de duim

De belangrijkste actieknoppen (zoals ‘Naar betalen’ of ‘Bestelling afronden’) horen onderaan het scherm te staan. Waarom? Omdat daar de duim van de gebruiker rust. De bovenkant van het scherm is de ‘dead zone’; daar moet je strekken om erbij te komen, wat oncomfortabel is en kan leiden tot het laten vallen van de telefoon (oké, dat is extreem, maar je begrijpt het punt). Houd de interactieve elementen dus binnen duimbereik.

Ruimte voor elke vinger

Maak knoppen groot genoeg. De standaardrichtlijn is minimaal 44 bij 44 pixels. Op een touchscreen is precisie lastig. Als knoppen te dicht op elkaar staan of te klein zijn, klikt de klant per ongeluk op het verkeerde, wat leidt tot frustratie. Zorg voor voldoende ‘white space’ rondom je knoppen zodat elke actie een bewuste en trefzekere keuze is.

Houd de weg naar de finish altijd open

In een langere checkout-pagina kan het nuttig zijn om de hoofdprijs en de bestelknop ‘sticky’ te maken onderaan het scherm. Terwijl de klant door de verzendopties scrolt, blijft de knop om naar de volgende stap te gaan altijd in beeld. Dit herinnert de klant constant aan zijn doel en maakt het overbodig om helemaal terug naar beneden te moeten scrollen als hij klaar is met lezen.

Vertrouwen uitstralen op een postzegel

Op een klein scherm is er minder ruimte om je autoriteit te bewijzen. Toch is vertrouwen cruciaal, zeker op het moment dat er geld over de digitale toonbank gaat. Je moet in een paar pixels laten zien dat je een legitieme, veilige partij bent.

De overtuigingskracht van kleine woorden

Kleine tekstjes kunnen een groot verschil maken. In plaats van een knop met alleen ‘Betalen’, werkt ‘Veilig betalen’ of ‘Bestelling afronden’ vaak beter. Het bevestigt de actie die de klant gaat ondernemen. Ook teksten als “Je zit nergens aan vast” of “Gratis retourneren” vlakbij de bestelknop kunnen die laatste twijfel wegnemen.

Kies je digitale keurmerken met zorg

Op desktop kun je een hele rij met logo’s van betaalproviders en keurmerken kwijt. Op mobiel oogt dat snel rommelig. Kies voor de belangrijkste twee of drie. Het logo van iDEAL, een slotje voor de beveiliging en misschien het logo van je hoofdbesteller (zoals PostNL) zijn vaak genoeg om dat broodnodige basisvertrouwen te creëren zonder het scherm te vervuilen.

Weg met de verborgen extraatjes

Niets is zo dodelijk voor de conversie als onverwachte kosten in de allerlaatste stap. Verzendkosten, administratiekosten of BTW die er plotseling bijkomen; het voelt als een valstrik. Wees vanaf het allereerste moment in de winkelwagen transparant over het totaalbedrag. Een mobiele shopper die zich bedrogen voelt, komt nooit meer terug.

Een checkout die nooit slaapt

Een mobiele checkout is nooit ‘af’. Het is een levend organisme dat constante aandacht nodig heeft. Wat vandaag werkt, kan morgen door een update van iOS of Android weer anders zijn. Daarom is data je beste vriend.

Kijk over de schouder van je klant mee

Tools zoals Hotjar of Clarity zijn goud waard voor je mobiele checkout. Je kunt letterlijk zien waar mensen proberen te klikken maar waar geen knop zit, of waar ze eindeloos blijven hangen. Als je ziet dat 40% van je mobiele bezoekers afhaakt bij het veld ‘Telefoonnummer’, weet je dat je dat veld optioneel moet maken of helemaal moet verwijderen.

Laat de cijfers beslissen over je design

Werkt een groene knop beter dan een blauwe? Is ‘Afrekenen’ effectiever dan ‘Nu kopen’? De enige manier om daarachter te komen is door het te testen. Voer kleine, gecontroleerde experimenten uit. Soms kan het verplaatsen van één tekstveld de conversie met een paar procent verhogen. Op de schaal van een succesvolle webshop zijn dat enorme bedragen.

Luisteren naar de klantenservice

Je supportteam is een goudmijn voor UX-verbeteringen. Als zij regelmatig telefoontjes krijgen van klanten die zeggen: “Ik kom niet door de betaling heen op mijn telefoon”, dan heb je een serieus probleem dat je data misschien niet direct in detail laat zien. Gebruik die feedback om je flow te verfijnen.

Supportmedewerker en marketeer bespreken feedback van klanten om de mobiele betaalervaring te verfijnen.

De weg van de minste weerstand

Het verbeteren van je mobiele checkout is een proces waar je constant mee bezig moet blijven. Het vereist dat je in de schoenen (of duimen) van je klant gaat staan. Elke klik die je kunt besparen, elke milliseconde die je van de laadtijd afschaaft en elk veld dat je verwijdert, brengt je dichter bij die perfecte conversieratio.

De smartphone is het primaire instrument geworden waarmee we de wereld (en dus ook jouw webshop) ervaren. Door te investeren in een frictieloze, snelle en vertrouwde mobiele checkout, geef je jouw klanten de ervaring die ze anno nu verwachten. Stop met het frustreren van de ‘duim-dictatuur’ en begin met het faciliteren ervan. Je bankrekening zal je dankbaar zijn.

Vind je het lastig om objectief naar je eigen checkout-flow te kijken, of heb je het gevoel dat er ergens geld weglekt maar kun je de vinger niet op de zere plek leggen? Geen zorgen, je hoeft het wiel niet alleen uit te vinden. Heb je hulp nodig bij het optimaliseren van je mobiele checkout of wil je een uitgebreide conversie-audit van je gehele shop? Neem dan contact met ons op en we zorgen er samen voor dat jouw klanten nooit meer stranden vlak voor de finish!

Mika de Bruijn

Mika de Bruijn Teamlead webdevelopment

Meer over Mika

Sinds mijn 16e ben ik serieus bezig met het ontwerpen en bouwen van websites. Wat begon met projecten voor familie en vrienden, groeide al snel uit tot een echte passie. Tijdens een eerdere stage werd het me duidelijk: dit is wat ik wilde doen. Naast het creatieve proces van websites bedenken en realiseren, trok het ondernemerschap me ook enorm aan. Na twee stages bij Wux en diverse freelance opdrachten waarin ik veel leerde over online marketing – van websites tot social media, SEO en ads – besloot ik fulltime bij Wux aan de slag te gaan als Lead Digital Designer, waar ik de vrijheid heb om te doen wat ik leuk vind, samen met collega’s die net zo gedreven.