E-commerce website design: complete gids met voorbeelden

Maak de beste, mooiste en efficiëntste e-commerce website

Article Header Ecommerce Website

Choose the Right Ecommerce Platform

Ken je het gezegde “als je niet online bent, dan besta je niet”? Dit wordt met de dag relevanter naarmate de online marktplaats de wereld van het winkelen blijft domineren. 

Retailers kunnen dit op de volgende manier interpreteren: zonder e-commerce website kan het zijn dat je jezelf belemmert om je omzetdoelstellingen te halen en je volledige potentieel te bereiken.

Wat houdt e-commerce website design precies in?

Simpel gezegd is dit het process van het creëren van een online winkel voor jouw bedrijf, waarmee je op digitale wijze aan jouw doelgroep kunt verkopen. Om een e-commerce website te ontwerpen moet je een plan uitwerken, dit plan vervolgens conceptualiseren en jouw content en producten op de juiste manier weergeven.

E-commerce is nu al enorm populair. Steeds meer bedrijven en shoppers doen hun aankopen bij e-commerce winkels. In 2020 steeg de online verkoop van Walmart met 97%. De omzet- en winstgroei van Amazon bedroeg in het tweede kwartaal 40%. Niet alleen de grote jongens profiteren van de toegenomen honger van consumenten naar online winkelen. Kleinere retailers, zoals Howards Storage World en B-Wear Sportswear, zien hun omzet uit e-commerce in vergelijking met het jaar ervoor met dubbele en zelfs driedubbele cijfers toenemen.

Wat hebben deze bedrijven met elkaar gemeen? Hun moderne e-commerce websites zijn ontworpen en geoptimaliseerd voor klantconversie.

Wij gaan je laten zien hoe jij je aan kunt sluiten bij het groeiende aantal retailers die elk jaar hun jaarlijkse e-commerce doelen behalen en overtreffen.

Wat heb je nodig om een prachtige (en goed presterende) e-commerce website te bouwen?

Wat voor soort e-commerce website je dan ook wilt bouwen, je zult als eerste een e-commerce platform nodig hebben die jou in staat stelt de beste e-commerce winkel te bouwen.

De drie hoofdtypes e-commerce platforms zijn:

  • Open-source.
  • SaaS.
  • Headless commerce.

Deze zullen jou allemaal voorzien met een toolkit waarmee jij een online winkel kunt creëren: een page builder, betaalpagina, betalingsgateway integraties en meer. Het verschil tussen deze e-commerce platforms zit hem in de niveaus van:

  • Personalisatie.
  • Prestaties.
  • Ingebouwde functies.
  • Flexibiliteit.

SaaS platforms bieden een kant-en-klare e-commerce website design ervaring. Je kunt binnen enkele uren een website ontwerpen door middel van een drag-and-drop visuele editor. Dit betekent wel dat je minder aangepaste functies kunt toevoegen en jouw website minder kunt personaliseren.

Open source platforms zijn net een leeg doek die je, wanneer je er genoeg tijd en moeite in steekt, kunt omzetten tot elk soort e-commerce website. Als je alles vanaf nul moet creëren zul je wel beschikking moeten hebben over een programmeur en ontwerper.

Headless commerce platforms zijn gebouwd met flexibiliteit in het achterhoofd, zodat je overal gedifferentieerde shopervaringen kunt creëren, met een krachtige commerce engine op de back-end. In tegenstelling tot andere e-commerce opties is bij headless commerce de front-end gescheiden van de back-end, waardoor je op elk moment van platform kunt veranderen. Met extra benodigde systemen gaat echter wel een ingewikkelder proces gepaard.

Je kunt kiezen tussen:

  • Headless commerce en Open SaaS platforms zoals BigCommerce.
  • SaaS platforms zoals Shopify, dat wel een headless commerce aanbod heeft, maar met strikte API call per seconde limieten.
  • SaaS webshop builders zoals Squarespace en Wix.
  • Open-source platforms zoals Magento, wat geen eigen thema-editor heeft, en WooCommerce, wat technisch gezien een e-commerce plugin is.

Met dergelijke e-commerce oplossingen kun je prachtige en unieke websites creëren, maar hoef je tegelijkertijd geen core commerce functionaliteit vanaf nul op te bouwen.

Het maakt niet uit voor welke webshop builder je kiest, zolang je er maar voor zorgt dat jouw keuze de volgende functies heeft:

1. Responsive ontwerp

Mobiele responsiviteit is van essentieel belang voor het succes van een e-commerce website. Veel consumenten voltooien hun hele aankoopproces (van onderzoek tot aankoop) op smartphones. geven zelfs toe dat ze websites die niet geoptimaliseerd zijn voor mobiel gebruik links laten liggen. Een responsive e-commerce platform kan ervoor zorgen dat bezoekers met alle soorten apparaten dezelfde geweldige on-site ervaring hebben - zonder enige ontwerpbeperkingen.


BigCommerce is een vooraanstaand e-commerce platform voor het bouwen van een prachtige mobiele webwinkel die aangepast is om de mobiele omzet zonder enige extra inspanning te verhogen. Met ons platform krijgen gebruikers:

  • Responsieve thema’s
  • Afbeeldingen op maat en geschikt voor mobiel gebruik.
  • Mobiele pagina’s die ontworpen zijn voor betere prestaties en meer engagement.

2. Personalisatiemogelijkheden

"Schoonheid" is een zeer subjectief begrip. Met betrekking tot webdesign betekent “er goed uitzien” meestal een handige lay-out, mooie typografie en iconografie, scherpe visuals en andere on-site design elementen die jouw winkel zal onderscheiden van anderen. 

Als jouw e-commerce platform geen personalisatiemogelijkheden en mooie kant-en-klare sjablonen heeft, zit je vast aan hetzelfde ontwerp als honderden andere winkels, met weinig mogelijkheid om te laten zien hoe jouw merk zich onderscheidt.

Met BigCommerce kunnen bedrijven:

  • Hun website met onze intuïtieve visual editor, Page Builder, volledig personaliseren.
  •  Mobiele verkoop stimuleren door middel van responsieve sjablonen.
  • Een website met behulp van moderne ontwikkelingstools in de helft van de tijd bouwen.
  • Een gepersonaliseerde, aantrekkelijke shopervaring bieden.
  • Verbinden met een wereldwijd netwerk van professionele website design experts.

3. Gebruiksvriendelijke website navigatie.

Navigatie is een overkoepelende term voor alle UI-elementen waarmee gebruikers specifieke informatie op jouw website kunnen bereiken. Denk hierbij aan het header navigatie menu, product categorie pagina's, filters, on-site zoeken en footers. Als een e-commerce pagina jou beperkt in jouw mogelijkheden om aangepaste navigatiepaden te maken, zorgt dit voor een mooie maar disfunctionele website. Weinig klanten zullen hier gebruik van willen maken, wat betekent dat jouw conversiepercentage eronder zal lijden.

Een kwalitatief goede, gebruiksvriendelijke website kan een wereld van verschil maken tussen een klant die rondkijkt en een klant die koopt. Het eenvoudige, intuïtieve platform ontwerp van BigCommerce laat klanten op elk apparaat zonder afleiding gemakkelijk afrekenen. Door de online shopervaring te vereenvoudigen, maken we een ooit moeilijk proces gemakkelijk.

4. Een aantrekkelijke gebruikerservaring

Plezier zet consumenten ertoe aan hun aankoop te voltooien en daarna verder te winkelen. Wat creëert een gevoel van plezier en tilt een merk naar een hoger niveau? De beste marketingtools ter wereld zullen niet helpen als jouw website klanten in de steek laat. 

De oplossing? Een goed doordachte gebruikerservaring (UX).

UX speelt een doorslaggevende rol in ervoor zorgen dat jouw website niet alleen functioneel is, maar daarnaast ook intuïtief, betrouwbaar, gebruiksvriendelijk en gemakkelijk te navigeren. Deze factoren maken de interactie met de site prettiger en verbeteren de surfervaring.

Denk aan hogere conversies, herhaalaankopen, geweldige beoordelingen en mond-tot-mond aanbevelingen. Deze zijn van groot belang en kunnen het verschil maken tussen de groei en ondergang van een bedrijf.  Hoe bepaal je of jouw e-commerce platform UX-vriendelijk is? Bekijk verschillende webshop voorbeelden die gebouwd zijn op het BigCommerce platform. In het bijzonder:

  • Beoordeel de basis UI-componenten. Bekijk de website en bepaal of de navigatie je bevalt, of je de lay-outs effectief vindt en of alle ontwerpelementen intuïtief zijn en er goed uitzien.
  • Bekijk de aanpassingsmogelijkheden. Hoe meer elementen je kunt aanpassen, des te unieker je jouw UX kunt maken naarmate jouw activiteiten zich uitbreiden. Vergeet ook niet: een ‘starter’ praktijk die in het begin voor een kleine winkel prima lijkt kan voor grotere bedrijven veranderen in een geldverslindende verplichting. Zorg ervoor dat je naarmate jouw prioriteiten veranderen verschillende ontwerpelementen kunt toevoegen en verwijderen.
  • Meet de prestaties van de website. De laadtijd van pagina's en de algehele snelheid van de website voegen iets toe of doen iets af aan jouw UX. Trage pagina's, haperende designelementen en langzaam ladende productvideo's zijn vaak het gevolg van een slechte hostingprovider en CMS/CDN die door het e-commerceplatform worden gebruikt.

Het e-commerce platform van BigCommerce houdt hier rekening mee en stelt bedrijven in staat een website te creëren met een aantrekkelijke en lonende gebruikerservaring.

Wil je jouw bedrijf snel online op de kaart zetten? 
Bouw, beheer en schaal de online business die jij wilt. Start vandaag nog jouw gratis proefperiode!

Ontwerpverschillen tussen B2C en B2B e-commerce websites

Om een goed presterende website te ontwerpen, moet je jouw doelgroep en de beste manier om die te bereiken begrijpen. Zowel Business-to-Business (B2B) als Business-to-Consumer (B2C) e-commerce websites hebben hetzelfde doel: verkopen. De middelen om dat doel te bereiken verschillen echter.

  • Voor B2C bedrijven is naamsbekendheid de belangrijkste prioriteit. Een herkenbaar merk (denk hieraan bij het kiezen van jouw domeinnaam) met een sterke online aanwezigheid = een groter aandeel van de totale potentiële markt.
  • Voor B2B-bedrijven is het genereren van leads de topprioriteit. Met een nichemarkt en langere aankoopcycli moeten B2B-merken een stabiele stroom van warme leads creëren.

Laten we eens kijken wat dit betekent op het gebied van design.

1. Intentie van de klant.

Zowel B2B- als B2C-aankopen worden aangewakkerd door een behoefte. De onderliggende motivaties achter die behoeften zijn echter verschillend.

B2B-klantenintentie wordt gedreven door bedrijfsprioriteiten en gesteund door een groep andere mensen (stakeholders, teams, klanten van het bedrijf, eindgebruikers). Met veel mensen om tevreden te stellen, duurt productonderzoek langer en is de lijst van vereisten voor productevaluatie gedetailleerder. Daarom zijn B2B e-commerce websites meer gericht op het converteren van top-of-the-funnel (TOFU) en middle-of-the-funnel (MOFU) bezoekers naar prospects en ze vervolgens om te zetten in klanten met behulp van een combinatie van online (e-mailmarketing, eBooks, sociale media, online demo's) en offline verkoop (telefonisch overleg, persoonlijke demo's, enz.) strategieën.

B2C shoppers handelen op basis van een onmiddellijke behoefte. Hoewel veel mensen ook rondkijken en productspecificaties en prijzen vergelijken, besteden ze gemiddeld minder tijd aan elke fase van de verkoopcyclus. In tegenstelling tot B2B-kopers, die meer tijd besteden aan op gegevens gebaseerde productevaluatie en -overweging, handelen B2C shoppers vaak impulsief en zijn ze daardoor ontvankelijker voor verschillende cognitieve triggers, geactiveerd door onze vooringenomenheid:

Chart Website Design

De effectieve conversie optimalisatie tactieken van B2C retailers maken gebruik van deze vooroordelen in hun ontwerp om aankoopbeslissingen te beïnvloeden.

2. Aankoopproces

Er zijn meer mensen zijn betrokken bij het B2B aankoopproces, inclusief eindgebruikers en de inkopers/beslissers. Een e-commerce website is een faciliterend instrument dat informeert, ondersteunt en laat zien hoe jouw producten aan alle behoeften van het bedrijf kunnen voldoen door middel van content, interactieve on-site tools en ondersteunende marketingmiddelen. Vergeet niet: jouw einddoel is het genereren van leads, niet hopen op een onmiddellijke verkoop.

In de B2C-markt zijn aankoopbeslissingen vaak emotioneel en gedreven door gebeurtenissen. Is het koffiezetapparaat kapot? Dan heb ik heb een nieuwe nodig. Oh, die schoenen zien er leuk uit. Waar kan ik die kopen? 

De meeste B2C-consumenten zijn voortdurend op zoek naar producten en evalueren ze op de achtergrond. Na het ontdekken van een goed aanbod staan ze bijna klaar om ervoor te gaan. In dat opzicht moeten B2C e-commerce websites het ontdekken vergemakkelijken en inspelen op dat gevoel van urgentie.

3.Gebruikerservaring

Gebruikerservaring is net zo essentieel voor B2B- als B2C-shoppers, maar het is belangrijk dat je rekening houdt met de verschillen in intentie en aankoopproces. Nielsen group identificeert vijf belangrijke verschillen in UX-vereisten voor B2B en B2C websites:

  1. B2B-ontwerp moet ruimte hebben voor langere content die een lang besluitvormings- en verkoopproces ondersteunt.
  2. Alle B2B-content moet twee doelgroepen aanspreken: "kiezers" (besluitvormers) en eindgebruikers.
  3. B2B-productinformatie moet langer en uitgebreider zijn en daarnaast een duidelijk overzicht bevatten van integraties, mogelijkheden en wettelijke vereisten.
  4. Zowel B2B- als B2C-klanten zijn prijsbewust. B2B-prijsscenario's zijn echter complexer. Voorzie B2B-kopers van verschillende prijsvarianten, pay-per-usage scenario's of calculators wat de besluitvorming zal vergemakkelijken.
  5. B2B-websites moeten zich, net als B2C-winkels, richten op verschillende klantsegmenten die variëren in grootte, bedrijfstak en operationele budgetten. Dat betekent dat B2B-websites een meer diverse, doelgroep gebaseerde navigatie moet ontwerpen om op alle doelgroepen in te spelen.

Bij het ontwerpen van een e-commerceplatform moet een B2B-bedrijf alles doen wat het kan om het uiterlijk en het ontwerp van de website te verbeteren en uitzonderlijke gebruikerservaring te bieden. Dit kan worden bereikt door middel van: 

  • Gebruiksgemak. Alles op de website moet gemakkelijk te vinden zijn. De snelheid en het gemak waarmee een klant de site kan bekijken is cruciaal voor het koopproces. 
  • Logo's en beoordelingen. Een gevarieerde selectie van klant- en logorecensies en getuigenissen kan een breder publiek bereiken door betrouwbare informatie te verstrekken. 

Calls to action (CTA's). Een klant is geïnteresseerd in een product - wat nu? Afgestemde CTA's die de aandacht trekken en consumenten in de juiste richting kunnen wijzen, zullen leads genereren en de winstgevendheid verhogen.

E-commerce voorbeelden: 7 van de beste webshop designs

Nu je weet hoe e-commerce webdesign verschilt voor B2B-websites kunnen we terugkomen op B2C-commerce en enkele webshop voorbeelden bekijken..

1. Larq.

Larq Website Design

LARQ maakt gebruik van heldere productafbeeldingen en animaties en maakt ons daarmee enthousiast over iets simpels als water drinken. De herbruikbare waterfles verkoper overtuigt ons om ons aan te sluiten bij hun Bottle Movement en meer van hun stijlvolle producten te ontdekken via spot-on copywriting, colour-block productkenmerken en een interactieve plastic afval calculator.

Een ander cruciaal moment was het toevoegen van multi-regionale mogelijkheden (met behulp van BigCommerce). Volgens LARQ steeg hun conversie binnen drie maanden met 80%.

2. Burrow.

Burrow Website Design

Modulaire meubel retailer Burrow heeft op de homepage in plaats van tekst gebruik gemaakt van een video. Deze demonstreert hun belangrijkste waardepositie: nieuwe meubels samenstellen kan zowel leuk als snel zijn en je hebt er geen gereedschap voor nodig. Met behulp van een combinatie van product en lifestyle foto's laat Burrow hun nieuwste ontwerpen in een huiselijke omgeving zien, kun je ze aanpassen en met enkele klikken bestellen.

3. Revelry.

Revelry Website Design

Revelry weet dat stofstalen, als het gaat om de jurken van de bruidsmeisjes, de kortste weg zijn naar de portemonnee van elke bruid. En dan hebben we het nog niet eens over de gratis sample levering en het thuis passen voor het hele gezelschap. Beide opties hebben een prominente plek op de homepage van de e-tailer, net als een uitstekende categorie navigatie waarmee klanten verschillende jurk stijlen, materialen en kleuren kunnen ontdekken.

4. Skullcandy.

Skullcandy Website Design

We zijn nogal vaak enthousiast over Skullcandy, maar het is lastig om deze e-commerce winkel te overtreffen. Ze compenseren op vakkundige wijze felle kleuren met een kenmerkend zwart website-ontwerp en creëren zo een gestroomlijnd, luxueus gevoel. Producten zijn gemakkelijk te ontdekken en op video in detail te bekijken, waarna je kunt lezen over de specificaties. Hoewel hun primaire markt audio is, heeft Skullcandy dankzij hun deskundige gebruik van visuals, material design-elementen en video op hun website gezorgd voor een heerlijke zintuiglijke ervaring.

5. Solo stove.

Solo Stove Website Design

De website van Solo Stove is een uitzonderlijk voorbeeld van het gebruik van iconografie in e-commerce. De vuurkorven fabrikant heeft aangepaste iconen voor elke productcategorie gecreëerd en brengt zo beter over wat ze verkopen en benadrukken daarnaast enkele van de belangrijkste productspecificaties. How-to productvideo's, illustraties en FAQ-secties benadrukken hun belangrijkste punt verder - hun producten zijn duurzaam, gemakkelijk te gebruiken en de prijs zeker waard.

6. Bliss.

Bliss Website Design

De website van Bliss is een absolute eyecatcher. Het wellness huidverzorgingsmerk maakt gebruik van drie dominante kleuren - millennial pink, babyblauw en Gen Z-geel - en spreekt daarmee hun primaire buyer persona’s op visuele wijze aan. De funky en vriendelijke merkattitude wordt verder versterkt door microcopy. De tekst van knoppen, titels van rubrieken en formulierbeschrijvingen geeft je het gevoel dat je met een vriend over je huidverzorgingsroutine aan het praten bent.

7. The Mountain.

The Mountain Website Design

The Mountain heeft alle geweldige ontwerpkenmerken die je zou willen een e-commerce website De eenvoudige navigatiebalk met de belangrijkste productcategorieën laat je gemakkelijk de website verkennen. De service banner onder de header informeert onmiddellijk over verzendingsvoorwaarden en mogelijke vertragingen. Hierdoor kun je de verwachtingen van een klant managen.

De hero slider belicht de nieuwste seizoensgebonden goodies en promo's en moedigt je aan de website verder te bekijken. The Mountain heeft met een breder scala aan productcategorieën alles zo georganiseerd dat het overweldigende gevoel, dat veel e-commerce platforms je kunnen geven, te verminderen.

Voordelen van het gebruik van BigCommerce voor het ontwerpen van een e-commerce website

De bovenstaande websites zijn allemaal door BigCommerce ontworpen. De kwaliteit spreekt voor zich en dit is waarom zowel enterprise klanten als kmo's kiezen voor ons e-commerce platform:

1. Het ontwerp van de webshop heeft geen last van andere functies.

Een mooie of goed functionerende e-commerce website? Met BigCommerce krijg je beide.

Het ontwerpen van een e-commerce website lijkt op het bouwen van een huis. Eerst moet je sterke mortel en buitenmuren ontwikkelen. BigCommerce geeft jou de technische 'stenen' die je in het hart van jouw online activiteiten kunt plaatsen - no-code page builders, veilige afrekenpagina’s, SEO-vriendelijke codebase en nog veel meer. Je kunt verschillende 'stenen' combineren en zo een klein huis of een Victoriaans herenhuis met 6 slaapkamers in elkaar zetten.

We beperken je ook niet als het gaat om het ontwerpen van jouw front-end. Je kunt jouw website een volledig aangepaste on-brand look geven zonder afbreuk te doen aan SEO, gebruiksvriendelijkheid of veiligheid. Tegelijkertijd kun je jouw back-end aan jouw activiteiten aanpassen door de ingebouwde core commerce te combineren met externe integraties. 

2. Meer dan 150 geweldige e-commerce thema's.

Als je geen zin hebt om jouw eigen website vanaf nul op te bouwen, kun je een kijkje nemen bij onze thema winkel. Met meer dan 150 unieke ontwerpen zit er zeker iets tussen dat jou zal bevallen. Ontdek thema’s gebaseerd op grid type, productcatalogus lay-out of branche. Onze werknemers hebben ook enkele van de beste e-commerce thema’s uitgezocht. Elk BigCommerce thema is responsive, mobiel- en SEO-vriendelijk, en geoptimaliseerd voor gebruiksvriendelijkheid. Met een kant-en-klaar thema kun je tegen een lagere prijs een geweldige e-commerce website ontwerpen.

3. Personalisatiemogelijkheden

Wat als ik een compleet aangepaste e-commerce ervaring wil ontwerpen? Denk aan third-party integraties en add-ons met AR apps, een custom CDN + CMS om heavy-duty publishing te ondersteunen en een ML-powered productaanbeveling engine met real-time data. Is BigCommerce voor mij dan nog steeds de juiste keuze? 

 Absoluut. BigCommerce is een open-SaaS platform, wat betekent dat onze technische infrastructuur gemakkelijk via API's verbonden kan worden met allerlei andere toepassingen. Ons platform integreert naadloos met externe apps en kan ook in grotere technische ecosystemen worden geïntegreerd. Met behulp van partners zoals Folio3, die gebruik maken van BigCommerce ontwerpdiensten, kun je de winkel van jouw dromen creëren.  Met BigCommerce kun je gebruik maken van onze core commerce functies voor voorraadbeheer, betalingsverwerking, verzending, fraude management en nog veel meer, terwijl je een andere technologie (zoals WordPress of Adobe Experience Management) gebruikt om de front-end van jouw website aan te drijven. Zo’n set-up wordt ook wel headless commerce genoemd.

4. Gebruiksvriendelijke e-commerce bouwtools.

Als je minder geavanceerde maar nog steeds robuuste ontwerpfunctionaliteit nodig hebt,  ben je bij ons ook aan het juiste adres. Onze Page Builder is een drag-and-drop webpagina editing tool die kleine bedrijven en Fortune 500 bedrijven gebruiken om aantrekkelijke landingspagina’s te creëren. 

Met behulp van kant-en-klare ontwerpelementen kun je, zonder ook maar één regel code te hoeven schrijven, snel prototypes van productlijsten maken die de aandacht trekken en tot klikken aanzetten. Creëer interactieve klantervaringen, verbeter jouw contentmarketing en voeg nieuwe ondersteunende pagina's toe aan jouw sales funnel zonder dat je jouw developers hoeft te bellen

5. Prestaties en beveiliging van jouw website.

Niets is belangrijker voor het succes van een online platform dan de bouw en de prestaties van de website. Daarom heeft BigCommerce haar e-commerce platform gebouwd om het klanttraject te vergemakkelijken door middel van fenomenale snelheid, ongeëvenaarde bandbreedte en meerdere lagen van beveiliging.

Het is belangrijk dat bedrijven meer tijd besteden aan het genereren van omzet en minder aan het bewaken en onderhouden van hun site. Met de kracht van Google Cloud Platform biedt BigCommerce meerdere lagen van beveiliging, bandbreedte en toonaangevende snelheid. Het BigCommerce platform is ISO/IEC 27001:2013 gecertificeerd en PCI DSS 3.1, Level 1-gecertificeerd als zowel Merchant als Service Provider.

Deze snelheid en veiligheid betekenen niets als de winkel offline gaat als gevolg van netwerkfouten of hostingproblemen. Met BigCommerce hoef je je daar geen zorgen over te maken. Ons hosted e-commerce platform heeft namelijk een gemiddelde uptime van meer dan 99,99%.

6. E-commerce expertise.

Zonder de hulp van experts kan het bouwen van een e-commerce platform lastig zijn en een project worden dat snel in duigen kan vallen. De sleutel tot succes? De tools waarmee je werkt volledig begrijpen. 

Wees niet bang, BigCommerce zal je wanneer je het nodig hebt helpen door middel van toonaangevende, live ondersteuning. In combinatie met waardevol e-commerce advies op onze community forums zijn we toegewijd aan het ondersteunen van onze handelaren terwijl ze bouwen aan hun platformen en bedrijven.

Geen enkel ander e-commerce platform heeft de in-house ondersteuning en diensten van BigCommerce. Ons deskundig opgeleid ondersteuningsteam staat klaar om 24/7 via telefoon, e-mail of chat jouw vragen te beantwoorden en jouw problemen op te lossen. De meeste gesprekken worden in minder dan twee minuten beantwoord en meer dan 85% van de problemen worden tijdens het eerste gesprek opgelost. Of je nu jouw eerste of honderdste online winkel lanceert, BigCommerce biedt de ondersteuning die jij nodig hebt tijdens elke fase van jouw groei.

Checklist voor het ontwerpen van webshop in 9 stappen

Zelfs met de beste tools kan het ontwerpproces zonder een duidelijk stappenplan gemakkelijk ontsporen. Wat moet je voorbereiden voordat je jouw webwinkel lanceert?

  1. Homepage.
  2. Categorie pagina's.
  3. Product landingspagina’s.
  4. Afrekenpagina.
  5. Over ons.
  6. On-site zoekmachine. 
  7. Account registratie en login formulieren.
  8. E-mail inschrijvingsformulier.
  9. Wettelijke vereisten.

Laten we deze allemaal een voor een bekijken.

1. Homepage

Een homepage is het eerste contactpunt tussen jou en een potentiële klant – het is een digitale etalage voor jouw webwinkel. Je hebt ongeveer drie seconden de tijd om een goede indruk te maken, wat betekent dat je strategisch zijn met jouw ontwerpkeuzes op de homepage.

Goed presterende e-commerce homepages bevatten meestal de volgende elementen:

  • Duidelijke productcategorieën in de header of zijbalk sectie.
  • Hero afbeeldingen (of afbeelding sliders) met het belangrijkste product of de huidige aanbiedingen.
  • Een zorgvuldig samengestelde selectie van aanbevolen producten, trending items of productcategorieën.
  • Een enter of exit pop-up, of sticky aanbiedingen voor retentie.

De bovenstaande structuur is echter niet zo recht door zee als het lijkt. Het uiterlijk van jouw homepage wordt bepaald door twee factoren: jouw branche en de voorkeuren van jouw klanten.

Op de homepage van American Leather zie je door middel van een duidelijk en informatief ontwerp direct hun meest populaire functies en landingszones.


Source: American Leather

2. Categorie pagina

Categoriepagina's helpen bij het organiseren van al jouw producten en stellen klanten in staat ze gemakkelijker te ontdekken. Digitaal afgeleide klanten willen onmiddellijk informatie, vooral op mobiele apparaten. Dat betekent dat ze snel toegang moeten krijgen tot de gewenste producten.

Categoriepagina's zijn niet alleen cruciaal voor de gebruikerservaring, ze moeten ook geoptimaliseerd zijn voor zoekmachineoptimalisatie (SEO). Onjuiste parent-child relaties kunnen leiden tot dubbele content en jouw ranking verslechteren. Zorg er dus voor dat elke categoriepagina:

  • een beschrijvende, SEO-vriendelijke URL heeft;
  • unieke teksten heeft voor categorie beschrijvingen;
  • logisch in jouw algemene informatie-architectuur past;
  • extra filters bevat om waarmee je productsuggesties kunt sorteren.

Natori volgt al deze principes en creëert daardoor een prettige browse-ervaring voor hun klanten.

Natori Website Design

3. Product pagina

Het ontwerp van productpagina's is van cruciaal belang voor e-commerce. Of je nu T-shirts of autobanden verkoopt, als jouw producten er niet aantrekkelijk uitzien, zullen je bezoekersaantallen en conversiecijfers nooit omhoog gaan. De minimale vereisten voor een productpagina zijn:

  • Productfoto('s) van hoge kwaliteit.
  • Productspecificaties: naam, kleur, maten, prijzen, belangrijkste kenmerken.
  • Koop en bewaar voor later knoppen.
  • Een gedetailleerde productbeschrijving.
  • Sociaal bewijs/klantenbeoordelingen.
  • Verwante producten (upsells en cross-sells).

Daarna kun je het opleuken met extra functies zoals countdown timers, video- of AR-demo's, een check-in-store optie, terug-op-voorraad waarschuwingen en meer.

Een productpagina zoals die van Nikon is gestroomlijnd en gebruiksvriendelijk. Het geeft bezoekers een duidelijk overzicht van hun producten, terwijl er ook ruimte is voor specificiteit en vergelijkingen.

 


Source: Nikon

4. Afrekenpagina

Volgens het Baymard Institute zijn er veel factoren die ervoor kunnen zorgen dat een klant zijn winkelmandje achterlaat:

Baymard Website Design

Het uiterlijk en de flow van jouw afrekenpagina verbeteren kan bijna al deze problemen voorkomen.

  • Schakel de ‘als gast afrekenen’ optie in voor klanten die voor het eerst een aankoop doen en vraag hen na het voltooien van hun aankoop een account aan te maken.
  • Verminder het aantal verplichte formuliervelden. Gemiddeld bevat het betalingsproces van e-commerce websites 12,8 velden, terwijl je alle nodige klantgegevens in 6 tot 8 velden vast kunt leggen.
  • Maak een duidelijke lijst van alle betaalmethoden die je accepteert (bijv. pinpas of creditcard, Apple Pay, PayPal, cryptocurrency).
  • Informeer klanten voor het afrekenen over alle mogelijke kosten. Plaats bijvoorbeeld een sticky banner en informeer bezoekers over de 'gratis verzending'-drempel, neem afhandelingskosten op in de productprijzen en past relevante verkoopbelastingen automatisch toe voordat ze afrekenen.

5. “Over ons”-pagina.

Een “Over ons”-pagina is geen bijzaak, vooral niet als je in B2B e-commerce zit. Zakelijke kopers lezen vaak op een website het liefste als eerste deze pagina, om zo meer over het bedrijf te weten te komen. 

Er zijn veel manieren om een aantrekkelijke "Over ons"-pagina voor een e-commerce bedrijf te maken:

  • Vertel een verhaal over jouw producten.
  • Stel het team voor.
  • Presenteer jouw bedrijfswaarden.
  • Leg uit hoe je te werk gaat.
  • Vertel over jouw geschiedenis.
  • Of presenteer jouw toekomstvisie.

Qua ontwerp is het verstandig om de tekst kort en to-the-point te houden. Vermijd verkooppraatjes en CTA's, en maak in plaats daarvan gebruik van goede team- en productfoto's om je verhaal te ondersteunen.

De “Over ons”-pagina van Grenson is een uitstekend voorbeeld van een bedrijf dat het verhaal van zijn geschiedenis en erfgoed vertelt en daarnaast ook de toekomst verkoopt.

 


Source: Grenel

6. On-site zoekmachine.

Een on-site zoekmachine is voor zowel grote als kleine bedrijven doorslaggevend voor de levensvatbaarheid van een e-commerce website op lange termijn. Als bedrijf moet je de reis van de klant zo eenvoudig en gestroomlijnd mogelijk maken. Een on-site zoekmachine versnelt deze reis, waardoor ze hun resultaten snel en zonder gedoe kunnen vinden. 

Creëer een uitstekende on-site zoekervaring door:

  1. Ervoor te zorgen dat de zoekbalk makkelijk te ontdekken is.
  2. Auto-aanvullingen voor te stellen.
  3. Resultaten te geven voor verkeerd gespelde woorden.
  4. Zoekresultaten te personaliseren door middel van analytics.
  5. Zoekopdrachten te ondersteunen met afbeeldingen samen met tekst queries.

Vergeet tijdens het ontwerpen van een on-site zoekmachine ook niet de mobiele ervaring. De zoekmogelijkheden van een e-commerce site moeten compatibel zijn met mobiel scrollen en in staat zijn om te werken met een kleiner scherm. 

Fujitsu’s on-site zoekmachine is grondig en gestroomlijnd, met voorgestelde auto-aanvullingen en filters waarmee je de zoekresultaten kunt beperken.

Source: Fujitsu

7. Accountregistratie en inlogformulieren.

Maak je niet te druk over inlogformulieren. Ze moeten kort, progressief en probleemloos zijn. 

Vraag de shopper als eerste om de basisinformatie te geven (e-mail/pas) of in te loggen met een van hun social media accounts. Hou in gedachten dat elke extra stap tijdens de registratie de kans op ‘churn’ vergroot. Wacht met het vragen naar verzend- en factureringsgegevens tot na de registratie. Bied gebruikers de mogelijkheid om hun informatie op te slaan en later opnieuw te gebruiken.

Een langdradig en ingewikkeld aanmeldingsformulier kan klanten afschrikken voordat ze überhaupt een aankoop hebben gedaan, waardoor ze niet langer geïnteresseerd zullen zijn en niet meer met het bedrijf willen communiceren. 

De accountregistratie van Clark is een gestroomlijnde ervaring die gemakkelijk te vinden en te gebruiken is.

Source: Clark’s

8. E-mail nieuwsbrief formulier.

Een goed uitgevoerde e-commerce e-mailmarketing campagne kan terugkerend verkeer naar jouw website leiden en het aantal conversies maximaliseren. Voordat je hieraan begint, moet je echter jouw e-maillijst opbouwen. 

Om mensen te verleiden zich in te schrijven, plaats je jouw nieuwsbrief prominent op de homepage en bewaar je een sticky of pop-up versie in de footer. Om nieuwe klanten te behouden, kun je ze na het inschrijven een kleine korting geven.

Bij Jeni's Splendid Ice Creams staat het nieuwsbrief formulier op het midden van het scherm, waardoor je je enorm gemakkelijk in kunt schrijven.

 

Source: Jeni’s

9. Wettelijke vereisten voor een e-commerce website.

Voor de lancering van jouw e-commerce website, moet je ervoor zorgen dat deze wettelijk in overeenstemming is met alle toepasselijke wetgeving inzake gegevensprivacy. Recente wetgeving, zoals GDPR in Europa of CCPA in Californië, heeft met name voor grotere organisaties directe gevolgen voor het verzamelen en gebruiken van gegevens. Als je cookies wilt gebruiken op jouw website moet je ervoor zorgen dat je toestemming krijgt van de gebruikers. 

GDPR en CCPA hebben al invloed gehad op e-commerce websites: in het jaar na de invoering van GDPR zijn de totale inkomsten uit e-commerce met 8,3% gedaald

Om ervoor te zorgen dat de regels worden nageleefd, moet elk bedrijf voor de lancering van de website deze drie dingen instellen:

  1. Privacybeleid
  2. Voorwaarden en bepalingen 
  3. Disclaimers

Dit zal jou helpen juridische problemen die zich kunnen voordoen te voorkomen en duidelijk aan jouw klanten te communiceren dat jouw website aan de GDPR voldoet. De boetes voor overtredingen zijn hoog - het is verstandiger om ze een stapje voor te zijn.

Beste webshops: 10 tips van experts over het ontwerpen van e-commerce websites

We hebben besproken en laten zien hoe een winnend e-commerce ontwerp eruit ziet en welke pagina's van belang zijn.

Laten we nu het how-to gedeelte ontdekken en het hebben over design tips voor winkeleigenaren.

1. Houd het simpel

Keep Simple Website Design

Het aankooptraject moet voor de klant onmiddellijk duidelijk zijn. Vraag jezelf voordat je een nieuw designelement aan de pagina toevoegt af: zal dit de reis van de klant vergemakkelijken of belemmeren? 

Het is verstandig om te beginnen met een minimale landingspagina. Voeg naarmate je meer te weten komt over het gedrag en de voorkeuren van jouw doelgroep extra conversiebevorderende elementen toe.

2. Conversie hangt samen met tevredenheid.

Conversion Website Design

Een uitstekende gebruikerservaring maakt de interactie met jouw merk plezieriger. Ontwerpfouten doen daarentegen afbreuk aan dat goede gevoel.

Nadat je klaar bent met het eerste ontwerp moet je elke pagina controleren om te kunnen bepalen waar je het surfen kunt vergemakkelijken en extra plezier toe kunt voegen. Dit zal de conversiepercentages van jouw winkel te verbeteren.

3. Met een gepersonaliseerde winkel kunt je de concurrentie aan.

Custom Store Website Design

Branding is een krachtige troef waarmee je een emotionele band op kunt bouwen met jouw publiek en hen om kunt vormen tot uitgesproken voorstanders van jouw merk. Vier van de vijf klanten promoten liever een merk dat al lange tijd hun favoriet is. 

Door een onderscheidende e-commerce winkelervaring te creëren, zorg je ervoor dat jij dat favoriete merk wordt.

4. Een geweldige gebruikerservaring moet altijd op de eerste plaats komen

User Experience Website Design

Aantrekkelijke prijzen, gave promo's en pakkende banners zijn nog steeds belangrijk, maar niet erg effectief wanneer de algehele UX onhandig is. Zorg voor een gebruiksvriendelijke website die goed presteert en werk daarna aan extra grafische ontwerpelementen.

5. Maak gebruik van flat design

Flat Website Design

Inmiddels is flat design een 'klassieke' look op het internet, en dat is niet voor niets. De belangrijkste principes van flat design zijn:

  • Duidelijke hiërarchie om informatie sneller te verwerken.
  • Stimulerende iconografie en adaptief design.
  • Gebruik van bekende patronen waardoor we de mogelijkheden sneller begrijpen.

De combinatie van deze elementen zorgt voor een geweldige e-commerce-ervaring.

6. Onderscheid jezelf.

Distinct Website Design

E-commerce wordt elk jaar populairder. Jouw branding, iconografie, website functies en on-site ervaring moeten samen jouw unieke waardepropositie versterken en zo jouw e-commerce bedrijf onderscheiden van de concurrentie.

7. Denk bij het ontwerpen van jouw e-commerce website aan CRO.

Cro Website Design

Onderbouw jouw ontwerp ingevingen met gegevens. Bestudeer jouw customer lifecycle of voer usability tests uit met een focusgroep. Leer zoveel mogelijk over het surfgedrag van jouw klanten en verwerk deze inzichten vervolgens in jouw ontwerp. Het is belangrijk dat jouw e-commerce ontwerp jouw doelgroep aanspreekt en er niet alleen voor jouzelf esthetisch aantrekkelijk uitziet.

8. Show, don’t tell.

Show Website Design

Goede e-commerce websites leiden klanten tijdens hun reis op visuele wijze. Elk element speelt een strategische rol in dat ontdekkingsproces. Tooltips en serviceteksten kunnen nuttig zijn en conversies bevorderen. 

Als je elke nieuwe stap moet uitleggen, is het gekozen ontwerp niet geschikt voor jouw merk.

9. Zet je klanten niet aan het denken.

Customers Website Design

Het ontdekken en kopen van online producten moet intuïtief zijn. Bied elke bezoeker een duidelijk aankooptraject aan door middel van navigatiebalken, duidelijke informatie-architectuur en snel geplaatste call-to-actions. Door de cognitieve belasting bij elke stap naar een aankoop te minimaliseren, verhoog je de kans op conversie..

10. Onderzoek klantgegevens en feedback uit de eerste hand.

Data Website Design

Met veel verschillende e-commerce best practices op het web, kan het verleidelijk zijn om ze allemaal uit te voeren. Meer is echter niet altijd beter en niet elke praktijk zal universeel goed werken voor elke retailer. 

Als ondernemer moet je jouw ontwerpbeslissingen baseren op gegevens en feedback van klanten uit de eerste hand, in plaats van op algemeen bekende informatie. Op die manier creëer je een unieke gebruikerservaring waarmee je jouw doelgroep aanspreekt en hen loyaler maakt aan jouw merk.

Het laatste woord

Het bouwen van een e-commerce website is nog nooit zo eenvoudig geweest. Het is niet langer het enorm technische, inspannende proces dat zowel grote als kleine bedrijven ervan weerhield om deel te nemen aan de online marktplaats.  

Fantastisch e-commerce website design draait nu volledig om functionaliteit en iteratie. Begin met de belangrijkste pagina's en ontwerp snelle prototypes. Test ze met jouw team en maak alliteraties. Lanceer een nieuwe look en verzamel inzichten uit de eerste hand van jouw klanten. Tussen conversie optimalisatie, nieuwe product landingspagina's en seizoensgebonden promoties is er altijd genoeg ontwerpwerk te doen. 

BigCommerce vereenvoudigt dit hele proces en biedt een platform dat jou in staat stelt om mee te schalen met jouw groei. Zo kun je gemakkelijk jouw producten laten zien en jouw gebouwde websites gemakkelijk beheren.

Wanneer BigCommerce de functionele en prestatie eisen op zich neemt, kun jij je richten op het creatieve deel van het proces en jezelf met elke nieuwe ontwerp variatie overtreffen. Het draait niet langer alleen om het bouwen en ontwerpen van een online winkel, maar om het maken van de ultieme e-commerce website.

Talk to our sales team to learn how BigCommerce can help your online store for growth.

FAQ over het ontwerpen van e-commerce websites en de beste designs voor online winkelen

Wat zijn de huidige e-commerce website design trends?

Zoals met de meeste online zaken, volgen de dominante e-commerce website design trends die van het technologische gebied.

Sociale media domineren online conversaties en zullen binnenkort hetzelfde doen met e-commerce. Van gepersonaliseerde gebruikerservaringen - ontworpen met dynamische landingspagina's en op gegevens gebaseerde productaanbevelingen - tot interactieve ontwerpen, e-commerce websites zullen binnenkort wellicht nog meer verbonden zijn met social commerce.

Wat maakt een goed ontwerp voor een e-commerce website?

Goede e-commerce website ontwerpen zijn direct zichtbaar. Ze zijn doorgaans gebaseerd op vijf belangrijke elementen:

  • Vastgestelde merk esthetiek.
  • Duidelijke navigatie.
  • Effectieve informatie architectuur.
  • Geoptimaliseerde product landingspagina's.
  • Eenvoudige afrekenpagina. 

Hoewel dit simpel lijkt, is dat het vaak niet. Jouw website heeft dan misschien wel een duidelijke navigatie, maar als jouw pagina's lelijk zijn, zullen jouw klanten niet lang rondhangen. Elk van deze vijf elementen is afhankelijk van elkaar om een kwaliteit e-commerce website te bouwen.

Hebben kleine e-commerce winkels specifieke ontwerp elementen nodig?

Of jouw winkel nu tientallen of miljoenen klanten per jaar verwerkt, met zorg en expertise ontwerpen is van onschatbare waarde voor het in stand houden van of zorgen voor groei. Kleine e-commerce winkels moeten net zoals grotere e-tailers prioriteit geven aan de gebruikerservaring. Dit betekent dat ze responsive, mobielvriendelijke ontwerpen moeten gebruiken en moeten zorgen voor handige filtering en navigatie. 

Visuals en diverse betaalsystemen kunnen zelfs voor kleine online bedrijven een belangrijke rol spelen bij online winkelen. Kleinere bedrijven kunnen hun websites nog aantrekkelijker maken voor potentiële kopers door in visuals van hoge kwaliteit te investeren en door verschillende betaalmethoden te ondersteunen.

VIEW MORE
Hebben grote e-commerce winkels specifieke ontwerp elementen nodig?

Voor grote e-commerce winkels is het gemakkelijk om op hun lauweren te rusten. Een proactieve benadering van websitenavigatie en -beheer is echter essentieel voor duurzame winstgevendheid. 

Bedrijven - zelfs grotere - moeten meer tijd besteden aan het bepalen van de optimale informatiearchitectuur voor het tonen van jouw voorraad en daarnaast verschillende productcategorie groepen en subgroepen creëren die het surfen zullen versnellen. Het creëren van een krachtige on-site product zoekfunctie die verschillende filteropties ondersteunt - prijs, producttype, maat, kleur, seizoen, enz. - zou dit proces op natuurlijke wijze moeten vergemakkelijken, en het gevoel van overweldiging als gevolg van de enorme hoeveelheid keuze niet moeten versterken.

Worden B2B e-commerce winkels op dezelfde manier ontworpen als B2C e-commerce winkels?

B2B e-commerce winkels maken gebruik van dezelfde UX-ontwerppatronen als B2C e-commerce winkels, maar hebben een iets andere structuur. Een B2B verkoopcyclus is langer, waardoor deze winkels zich meer richten op het vastleggen van TOFU en MOFU prospects, in plaats van het verleiden tot een onmiddellijke conversie (zoals B2C winkels). 

Daarom zijn enkele van de belangrijkste ontwerpelementen voor een B2B e-commerce winkel: 

  • Langere product landingspagina’s, met demo video's en uitgebreide productbeschrijvingen.
  • CTA-formulieren voor het aanvragen van een productdemo, het plannen van een gesprek, enz.
  • Langere afrekenformulieren waarbij gevraagd wordt om een minimum bestelhoeveelheid op te geven, met betalingsplannen en prijscalculators voor grote bestellingen.
VIEW LESS

Browse additional resources

Article Thumbnail Page Builder Catalog Transfer Generic
Article
Ecommerce Website Design 101: How to Position Your Online Store for Growth
Explore Designs
Article Thumbnail Headless Ecommerce Catalog Product Person Bigcommerce
Article
Lead with Experience: How Headless Can Provide the Experience-Driven Commerce Customers Crave
Read Article
Article Thumbnail Wholesale Payment Packaging Skincare Woman Payment Generic
Article
A Closer Look at Wholesale Ecommerce
Read Article
Custom Card Thumbnail Storefront Dashboard Code Growth Bigcommerce
Article
Headless Commerce Success Stories: 4 Brands Solving Tough Challenges with Innovative Tech
Read Article
B2B ecommerce trends
Article
7 B2B Ecommerce Trends You Need to Follow for 2020 and Beyond
Read Article
B2B ecommerce platforms
Article
How to Find the Best B2B Ecommerce Platform
Read Article