# Tien ontwerpkeuzes voor je webshop die de conversie meetbaar verhogen

> Niet 'gebruik meer witruimte', niet 'test de kleur van je knop'. De specifieke keuzes in visuele hiërarchie, fotografie, typografie en mobiel die de conversie op echte shops echt bewegen.

Ryan Badger - 3 november 2024 - 7 min leestijd

## Ontwerpkeuzes die de conversie echt bewegen

Artikelen over ontwerp vallen meestal in twee kampen. "Gebruik veel witruimte!" (te vaag) of "A/B-test 47 knopkleuren" (te gedetailleerd). Geen van beide helpt iemand die naar zijn shop kijkt en zich afvraagt waarom die met 1,3% converteert.

Dit artikel gaat over de specifieke visuele ontwerpkeuzes die de conversie in webshops meetbaar verschuiven. Niet smaak. Niet merkesthetiek. De keuzes in layout, hiërarchie, kleur en typografie die mensen helpen kopen of hen in de weg zitten.

## 1. Visuele hiërarchie: het belangrijkste moet het belangrijkst lijken

De meeste shops geven alles op de productpagina hetzelfde visuele gewicht: 16px lopende tekst, 18px prijs, 18px koppen. Elk element concurreert; niets wint. Het oog heeft geen ingang.

De oplossing: waarop je wilt dat er geklikt wordt, moet het grootste element met het hoogste contrast op de pagina zijn.

- Producttitel: 28-36px
- Prijs: 20-24px, vet, duidelijk afgebakend
- Knop In winkelwagen: op mobiel over de volle breedte, visueel het zwaarste element op de pagina
- Beschrijvingen, specificatielijsten, verzendinformatie: 14-16px, rustiger

Als je vanaf 2,5 meter naar je productpagina kijkt (ja, leun letterlijk achterover), zie je dan wat de hoofdactie is? Ziet de hele pagina eruit als grijze soep, dan is je hiërarchie stuk.

## 2. Witruimte rond de CTA, niet overal

"Gebruik meer witruimte" wordt aangedragen als universele ontwerptip. Waar het echt om gaat, is witruimte rond de knoppen en de sleutelelementen, niet witruimte om de witruimte.

- Minstens 40-60px opvulling rond het gedeelte met In winkelwagen
- De prijs in zijn eigen schone ruimte, niet bedolven onder andere tekst
- Productafbeeldingen krijgen ruimte (niet marge-loos van rand tot rand)

Pak al het andere (reviews, verzendinformatie, gerelateerde producten) strakker. Dat is secundair. Het CTA-gebied wint doordat het het enige is met ademruimte.

## 3. Consistente productfotografie verslaat "betere" productfotografie

Een catalogus van 50 producten waarvan de foto's allemaal een beetje verschillen (andere achtergronden, ander licht, andere zoomniveaus) ziet er amateuristisch uit. Een catalogus waarin elke foto dezelfde hoek, hetzelfde licht, dezelfde uitsnede en dezelfde achtergrond heeft, ziet er professioneel uit.

Dit is een volumeprobleem, geen kwaliteitsprobleem. Je top 5 bestsellers kunnen gepolijste herofoto's hebben. Al het andere moet identiek worden geschoten, ook als dat iets minder glamoureus is. Inconsistentie signaleert "kleine, onbetrouwbare shop" meer dan lage kwaliteit.

Praktische regel:

- Hoofdfoto: witte of effen achtergrond, gecentreerd, dezelfde uitsnede door de hele catalogus
- Aanvullende foto's: lifestyle of in gebruik, consistente toon
- Alle foto's met dezelfde beeldverhouding en resolutie

## 4. CTA-contrast, niet CTA-kleur

"Oranje knoppen converteren X% beter dan groene!" Je ziet deze geteste claim vaak. Op zichzelf is het onzin. Wat telt is **het contrast met de pagina eromheen**. Een oranje knop op een oranje site is onzichtbaar. Een blauwe knop op dezelfde site is een baken.

Kies de kleur met het hoogste contrast met het dominante palet van je site. Is je pagina wit + zwart + beige, dan moet je CTA de ene kleur zijn die nergens anders voorkomt.

Tweede punt: vermijd ghostknoppen (alleen een rand, geen vulling) voor primaire CTA's. Ze zien er elegant uit maar scoren slecht op conversie omdat ze het oog "secundair" seinen. Gebruik een gevulde knop voor In winkelwagen, Bestelling plaatsen en Nu kopen.

## 5. Lettergrootte en regellengte op mobiel

De meeste mobiele shops hebben tekst die te klein en te breed is. Telefoons tonen tekst met een hogere pixeldichtheid; wat op desktop 16px is, voelt op mobiel klein.

Ondergrens voor typografie op mobiel:

- Lopende tekst: minimaal 16-18px
- Regellengte: 40-60 tekens per regel
- Regelhoogte: 1,4-1,6x de lettergrootte
- Knoppen en tikdoelen: minimaal 44px hoog (de toegankelijkheidsrichtlijn van Apple)

Als bezoekers inzoomen om je productbeschrijvingen te lezen, is je tekst te klein. Test op een echte telefoon op armlengte, niet in de mobiele emulator van de browser.

## 6. Een vastgepinde knop In winkelwagen op mobiel

Scroll op mobiel door een lange productpagina: tegen de tijd dat je de beschrijving hebt gelezen, staat de knop In winkelwagen 3 schermlengtes hoger. Klanten die hebben besloten te kopen, moeten nu terugscrollen, en dat verlaagt het conversiepercentage.

De oplossing: een vastgepinde knop In winkelwagen die onderaan het mobiele scherm blijft zweven zodra de oorspronkelijke knop uit beeld is. Eén tik, de winkelwagen opent, geen zoektocht door de pagina.

Desktop: een vastgepinde knop is optioneel (het scherm is groter). Mobiel: niet onderhandelbaar.

## 7. Herobeeld dat het resultaat toont, niet het product

De meeste herosecties tonen het product, vrijgesteld, op wit. Prima voor een referentiefoto; fout voor een hero. De hero moet in 2 seconden communiceren "hoe is het leven hiermee".

Beter: het product in gebruik, in context, met een persoon of omgeving die past bij je doelgroep.

- Huidverzorging: iemand die het gebruikt, ochtendlicht, badkamer
- Meubels: het meubelstuk in een echte kamer, bewoond
- Kleding: op een lichaam, in beweging, geen etalagepop
- Eten en koffie: wordt bereid of genuttigd, geen productfoto

De hero met het product in gebruik converteert beter dan die met het vrijgestelde product, omdat hij meer van het voorstellingswerk voor de koper doet. Ze zien zichzelf het gebruiken zonder het zich te hoeven inbeelden.

## 8. Consistente componenten door de hele shop

Een veelgemaakte fout: productpagina's gebruiken één kaartstijl, categoriepagina's een andere en de homepage een derde. Klanten voelen deze inconsistentie ook als ze haar niet kunnen benoemen. Shops lijken betrouwbaar als dezelfde componenten consequent terugkomen.

Een klein designsysteem voor een webshop bestaat uit:

- Eén productkaartcomponent (gebruikt bij uitgelichte producten op de homepage, categoriegrids, gerelateerde producten en zoekresultaten)
- Eén knoppensysteem (primair, secundair, tertiair; alleen deze drie)
- Eén koppenstijlsysteem (H1, H2, H3; consequent toegepast)
- Eén kleurenpalet (maximaal 3 merkkleuren, plus een grijsschaal)
- Eén typeschaal (maximaal 3-4 groottes)

De meeste shops maken 15 variaties van elk als één voldoende was. Minder variaties = professionelere uitstraling.

## 9. Het eerste scherm is de advertentie om te scrollen

Het zichtbare gebied bij het eerste laden (boven de vouw) heeft één taak: de bezoeker laten willen scrollen. Dat is alles. Probeer de verkoop niet op het eerste scherm te sluiten.

Wat boven de vouw nodig is:

- Voor wie dit is (in één regel)
- Wat het product is (visueel, één goede afbeelding)
- Eén duidelijke CTA (In winkelwagen of Shop nu)
- Één geruststellend vertrouwenssignaal (beoordeling + aantal reviews, of een perscitaat, of een bekende klant)

Wat boven de vouw NIET nodig is:

- Meerdere CTA's die om aandacht strijden
- Een herocarrousel die elke 3 seconden doorschuift (conversiedoder; klanten bevriezen als content beweegt)
- Elk voordeel dat het product heeft
- Galerijen met getuigenissen

## 10. Haal de carrousel van je homepage

Verwant aan het bovenstaande, maar een eigen punt waard: carrousels met heroslides op homepages zijn dood. Onderzoek laat steeds zien dat roterende heroslides met 1-3% worden aangeklikt, en dat alleen de eerste slide serieuze aandacht krijgt. Kies de ene boodschap die je op slide 1 zou zetten; zet die als statische hero neer. Laat de rest vallen.

## Wat Shoprocket regelt

De winkel met thema's wordt geleverd met sjablonen die de visuele hiërarchie, het contrast en de mobiele patronen hierboven al volgen. Gebruik je de widget-embed op je eigen site, dan bepaal jij het ontwerp van de omringende pagina, maar:

- **Winkelwagenlade** (geen winkelwagen op een volledige pagina) is de standaard
- **Vastgepinde mobiele winkelwagen** wordt ondersteund
- **Responsive productafbeeldingen** met automatische WebP-levering en de juiste beeldverhoudingen
- **Sitebuilder met 40+ thema's** zodat je het designsysteem niet vanaf nul hoeft te bouwen
- **Aangepaste CSS-hooks** laten je de embed thematiseren zodat hij bij je site past

```
<!-- EXAMPLE ONLY. Grab your real snippet from Sales channels → Embeds in your dashboard -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
```

Wat Shoprocket niet bepaalt: je herobeeld, de consistentie van je fotografie, je teksten, je kleurensysteem. Die maak of breek je zelf.

> **Tip:** Open je shop nu op je telefoon. Neem één productpagina. Zie je In winkelwagen zonder te scrollen? Is de prijs duidelijk het op één na grootste element? Kun je de beschrijving lezen zonder te turen? Is het antwoord op een van deze vragen nee, dan is dat de eerste ontwerpfix.

## Kort samengevat

- **Hiërarchie:** het belangrijkste element moet het belangrijkst lijken. Check met de test van 2,5 meter
- **Witruimte rond de CTA**, niet overal om de witruimte
- **Consistentie in fotografie** verslaat kwaliteit van fotografie. Eén stijl door de hele catalogus
- **CTA-contrast, niet kleur.** De kleur met het hoogste contrast tegen het palet van je pagina wint
- **Typografie op mobiel: 16px+ lopende tekst, 44px+ tikdoelen**
- **Vastgepinde knop In winkelwagen op mobiel** is niet onderhandelbaar
- **Herobeelden tonen resultaten** (product in gebruik), geen product op wit
- **Een klein designsysteem (3 kleuren, 4 groottes, 3 knopvarianten)** oogt professioneler dan 15 varianten
- **Het eerste scherm verkoopt het scrollen**, niet het product. Eén duidelijke boodschap, één CTA
- **Weg met de carrousel op de homepage**. Een statische hero wint

[Start een gratis proefperiode](https://app-v3.shoprocket.io/signup) als je een winkel met thema's wilt waarin deze patronen zijn ingebouwd. 14 dagen, geen creditcard.

---

- HTML version: https://v3.shoprocket.io/nl/blog/tien-ontwerpkeuzes-webshop-die-conversie-verhogen
- Language: Nederlands (nl)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/ecommerce-design-entscheidungen-die-conversion-messbar-steigern.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [English](https://v3.shoprocket.io/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Español](https://v3.shoprocket.io/es/blog/diez-decisiones-de-diseno-ecommerce-que-mejoran-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/dix-decisions-design-ecommerce-qui-augmentent-la-conversion.md), [עברית](https://v3.shoprocket.io/he/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/sepuluh-keputusan-desain-ecommerce-yang-terukur-menaikkan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/dieci-scelte-di-design-ecommerce-che-aumentano-la-conversione.md), [日本語](https://v3.shoprocket.io/ja/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/desimt-e-parduotuves-dizaino-sprendimu-didinanciu-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/ti-designvalg-nettbutikk-som-loefter-konverteringen.md), [Polski](https://v3.shoprocket.io/pl/blog/dziesiec-decyzji-projektowych-w-e-commerce-ktore-podnosza-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/dez-decisoes-de-design-que-aumentam-a-conversao-no-ecommerce.md), [Română](https://v3.shoprocket.io/ro/blog/zece-decizii-de-design-ecommerce-care-cresc-masurabil-conversia.md), [Русский](https://v3.shoprocket.io/ru/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/donusumu-artiran-on-eticaret-tasarim-karari.md), [中文](https://v3.shoprocket.io/zh/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md)