Een mobiele productpagina ontwerpen: 9 keuzes en de reden erachter

Nomad Fire Co. verkoopt kamado's van 250 tot 1.600 euro, plus de accessoires eromheen. Het grootste deel van het verkeer komt binnen op een telefoon, vaak 's avonds, en bijna nooit op de homepage. De productpagina is de winkel.

Dit is het verslag van hoe we die pagina opnieuw hebben ontworpen: negen concrete keuzes, elk met de reden erachter en wat we ervan verwachten. Geen stuk over kleuren en fonts, want daar komt niemand voor. Wel een stuk over waar een mobiele productpagina ontwerpen in de praktijk op stukloopt. Meer voorbeelden van dit soort trajecten staan bij onze case studies.

Een kamado van 1.600 euro koop je niet even tussendoor

De aankoopdrempel is hoog, de vragen zijn talrijk en de klant moet in een paar minuten beslissen over iets waar hij tien jaar mee doet. Dat maakt de opdracht anders dan bij een shop die sokken verkoopt.

De opdracht was daarom niet "maak de productpagina mooier". Hij was concreter: minder mensen die halverwege afhaken, meer accessoires per bestelling, en minder mensen die eerst de klantenservice moeten mailen voordat ze durven te kopen. De Grill Bill Pro III werd het voorbeeldproduct waarop alles is uitgewerkt.

Mobiele productpagina ontwerpen begint bij drie uitgangspunten

Drie dingen lagen vast voordat er ook maar iets getekend werd.

Eerst 390 pixels breed, daarna pas desktop. Niet omdat mobile-first een mooi woord is, maar omdat elke beperking die je op een telefoon oplost, op desktop vanzelf ruimte krijgt. Andersom werkt het nooit: een desktopontwerp dat je indikt levert altijd een pagina op waar iets in de weg zit.

Eén visuele richting uit drie. We noemden hem Campfire: petrol als basis, ember-oranje voor alles wat de klant kan aanraken, een subtiel toile-patroon op de achtergrond en Manrope als letter. De andere twee waren netjes, maar Campfire voelde het meest als vuur en het minst als een webshoptemplate. Verder gaan we het hier niet over kleuren hebben.

Alles wat de klant moet doen, gebeurt onderin. In duimbereik. Dat ene uitgangspunt verklaart de helft van de keuzes hieronder.

1. De navigatie zit onderin, niet achter drie streepjes

Onderaan het scherm zit een dock met vijf plekken: huis, verlanglijst, menu (de vlam-knop in het midden), chat en winkelwagen. Geen hamburgermenu rechtsboven.

Waarom: navigatie die verstopt zit achter een icoon wordt minder gevonden en minder gebruikt. Nielsen Norman Group meet dat al jaren, op mobiel net zo goed als op desktop. Daar komt een puur fysiek argument bij. Een telefoon houd je met één hand vast, je duim komt makkelijk bij de onderkant en moeizaam bij de rechterbovenhoek. Het duurste stukje scherm is dus precies waar de meeste shops hun menu neerzetten.

Het dock schuift weg zodra je naar beneden scrollt en komt terug zodra je omhoog scrollt. Zo krijgt de productfoto het volle scherm als de klant leest, en staat de navigatie er weer zodra hij ergens naartoe wil.

2. De galerij laat zien dat er meer te zien is

De volgende foto gluurt aan de rechterkant mee, net genoeg om duidelijk te maken dat er nog iets komt. Daarbij staat een teller: 2 / 6. Tikken opent een fullscreen lightbox met thumbnails, dubbeltikken zoomt in.

Het klinkt als een detail, maar een galerij waarin de volgende foto niet zichtbaar is, wordt in de praktijk vaak helemaal niet geswipet. Mensen zien één foto en scrollen door. Bij een product van 1.500 euro is dat zonde, want de foto's zijn het halve verkoopgesprek.

De laatste slide is een productvideo. Dezelfde video staat ook als losse kaart onder de maatkiezer, met het label "Zie 'm in actie", voor wie de galerij niet uitzwiept.

3. Maat kiezen is de eerste beslissing, dus is het geen dropdown

Medium, Large, L Solo en XL staan naast elkaar, elk met de eigen prijs erbij. Geen uitklapmenu waarin je eerst moet tikken om te zien wat er te kiezen valt.

De reden: de maat bepaalt de prijs, en de prijs bepaalt of iemand verder leest. Die informatie achter een tik verstoppen kost je bezoekers die anders hadden gezien dat er ook een variant van 250 euro is.

Uitverkochte maten blijven staan, doorgestreept en gelabeld. Dat lijkt tegenintuïtief, maar het vertelt de klant iets nuttigs: dit ding wordt gekocht, en er is meer keuze dan wat er vandaag op voorraad ligt.

4. De prijs die je ziet, is de prijs die je betaalt

Onder de maatkiezer staat een pre-orderblok: een aftelklok, wat je erbij krijgt (een Grate Organizer ter waarde van 149 euro plus korting) en de mededeling dat je kosteloos kunt annuleren. De prijs is inclusief btw en eronder staat: gratis bezorging en montage, geen extra kosten bij het afrekenen.

Dat laatste zinnetje is geen marketing, het is schadebeperking. Onverwachte extra kosten zijn volgens Baymard Institute de belangrijkste reden dat mensen hun winkelwagen achterlaten: 39 procent van de afhakers noemt verzendkosten, belastingen of toeslagen als reden. Zijn die kosten er niet, dan moet je dat zeggen op de plek waar de twijfel ontstaat, niet pas in stap drie van de checkout.

5. Accessoires bied je aan als set, niet als lijst

Onder het product staan drie tabbladen: Beginner, Pro en Brandstof. Elk tabblad bevat een gecureerde set accessoires met 20 procent bundelkorting. Vink je iets aan, dan telt het meteen door in de koopknop onderin: "In winkelwagen, 1.573,40".

De reden is tweeledig. Een hogere orderwaarde is het commerciële doel, maar de echte winst zit in de keuzestress. Nomad Fire heeft tientallen accessoires. Wie er tientallen laat zien, verkoopt er nul. Wie er zes toont onder de kop "Pro", verkoopt er drie.

6. Eén knop wint, de rest bestaat niet

De koopknop is sticky, ember-oranje, staat altijd net boven het dock en toont de actuele totaalprijs inclusief aangevinkte accessoires. Er staat geen tweede knop naast. Geen "vergelijken", geen "offerte aanvragen", geen "bewaar voor later" op gelijke voet.

Elke extra knop van hetzelfde gewicht verdeelt de aandacht. Op een pagina die maar één doel heeft, is dat verlies zonder opbrengst. Alles wat de klant nog meer kan doen, mag bestaan, maar niet in dezelfde maat en kleur.

7. De winkelwagen is een lade, geen nieuwe pagina

Tik je op kopen, dan schuift de winkelwagen als sheet over de productpagina heen. Je verliest je plek niet. In die sheet staat een suggestie ("vaak samen gekocht"), de betaalmethoden zijn zichtbaar (iDEAL, Klarna, Apple Pay, PayPal) en onderin staat een knop: bewaar winkelwagen voor later. Die verplaatst de producten naar de verlanglijst en stuurt een mail zodra de prijs zakt.

Dat is bewust geen weggeefactie. Bij een aankoop van deze omvang komt vrijwel niemand er in één sessie uit. De vraag is niet of iemand wegklikt, maar of je hem terugziet.

8. Advies is het product, dus staat er een mens in de chat

De chatknop in het dock toont een foto van Mike, pitmaster, met een groen stipje als hij online is en zijn gemiddelde reactietijd erbij. In de chat staan een paar vragen klaar als tikbare chips: "Welke maat past bij mij?" en "Wat is het verschil met de Pro II?".

Bij een product van 1.500 euro is advies geen service maar het verkoopargument zelf. Dat is precies waarom een naam en een gezicht meer doen dan een chatbubbel met een robotje erin. De klant wil weten of hij straks de goede kiest, en dat is een vraag aan een mens.

9. Eerst kopen mogelijk maken, dan pas overtuigen

Alles onder de vouw is verhaal: kenmerken met tikbare hotspots op de buiten- en binnenkant, afmetingen, wat er in de doos zit, de volledige specs en reviews met klantfoto's.

Die volgorde is een keuze. Wie al besloten heeft, hoeft niet langs vier secties merkverhaal voordat hij kan kopen. Wie nog twijfelt, scrollt vanzelf door. Het omgekeerde, eerst overtuigen en dan pas de knop tonen, straft de klant die al klaar was om te betalen.

Dit is gebouwd, niet getekend

De drie visuele richtingen zijn nooit als statisch plaatje gepresenteerd. Het waren klikbare prototypes, en de keuze is gemaakt terwijl iedereen ze op de eigen telefoon had staan.

Daarna is de hele pagina uitgewerkt als werkende HTML met echte interacties: het scrollgedrag van het dock, de sheets, de galerij, de chat en de meelopende prijs. Niet omdat het indrukwekkend oogt in een presentatie, maar omdat je pas voelt of iets werkt als je het met je duim probeert terwijl je op de bank zit. Een plaatje van een sticky knop vertelt je niets over of hij in de weg zit.

Header en footer zitten als losse componenten die elke pagina inlaadt, zodat één wijziging overal doorwerkt. Als laatste stap is het designsysteem geëxporteerd: kleuren, typeschaal, componenten en de regels eromheen, zodat het team dat het in de website builder bouwt niet hoeft te gokken wat de bedoeling was.

Wat we nog niet weten

Dit is een ontwerp op basis van onderzoek en ervaring, niet op basis van A/B-data uit deze shop. Dat is een belangrijk verschil en we doen niet alsof dat anders ligt. Elke keuze hierboven is een beredeneerde gok, sommige beter onderbouwd dan andere.

Wat er na livegang gemeten wordt: de add-to-cart-ratio op de productpagina, de attach rate van accessoires (welk deel van de orders bevat er minstens één), het aantal gestarte chats en de bounce op de productpagina zelf. Pas als die cijfers er drie maanden liggen, weten we welke van deze negen keuzes echt heeft gewerkt en welke vooral logisch klonk.

Geldt dit alleen voor kamado's?

Nee. Dit patroon werkt voor elke shop waarvan het product uitleg vraagt: een hoge prijs, meerdere varianten, accessoires die de aankoop compleet maken en klanten die eerst iets willen weten voordat ze iets kopen. Van keukenapparatuur tot fietsen tot machines voor de zaak.

De invulling verschilt, de volgorde niet. Eerst kopen mogelijk maken, dan overtuigen, en alles wat telt binnen duimbereik. Wil je weten wat dit voor jouw productpagina betekent, neem dan contact op. Dan kijken we samen naar de pagina die bij jou het meeste verkeer krijgt.