De homepage is geen galerij of brochure. Hij is een routeringsmechanisme. Zijn enige taak is de juiste bezoeker zo snel mogelijk bij het juiste product te brengen. Elke ontwerpkeuze op de homepage moet dat doel dienen.
In dit artikel lees je hoe je de homepage van een webshop ontwerpt die werkt. Wat je erop zet, wat je weglaat, welke fouten conversie doden en hoe je nadenkt over de indeling op mobiel, waar de meeste van je kopers rondkijken.
Wil je het volledige beeld van welke pagina's je shop nodig heeft, begin dan met welke pagina's elke webshop nodig heeft.
Waar is de homepage eigenlijk voor?
De homepage is er voor bezoekers die nog niet hebben besloten. Ze kennen je merk een beetje, of ze vonden je via zoeken of social media, maar ze hebben zich nog niet aan een aankoop verbonden. De homepage is het moment waarop ze uitzoeken of ze verder gaan.
Hij moet drie vragen direct beantwoorden. Wat verkoopt deze shop? Is het voor iemand zoals ik? Wat moet ik nu doen? Is een van die antwoorden onduidelijk, dan vertrekken bezoekers. Niet omdat je producten slecht zijn, maar omdat de homepage ze geen reden gaf om te blijven.
Hoe ontwerp je de hero-sectie?
De hero is het eerste wat een bezoeker ziet. Hij staat boven de vouw, voordat ze scrollen, en draagt het grootste deel van het gewicht van de eerste indruk.
Een sterke hero heeft vier elementen. Een kop die in gewone taal zegt wat je verkoopt. Een korte ondersteunende regel die context toevoegt, vaak een belangrijk voordeel of onderscheidend punt. Een beeld dat het product of het resultaat laat zien. En één call-to-action-knop die de bezoeker precies vertelt waar hij heen moet.
De kop is het belangrijkste onderdeel. Houd hem specifiek. "Handgemaakte leren tassen voor elke dag" werkt. "Waar vakmanschap en functie samenkomen" niet. Kopers scannen snel. Moet je kop worden geïnterpreteerd, dan ben je ze al kwijt.
De CTA-knop moet een bestemming noemen, geen gevoel. "Shop tassen" of "Bekijk nieuwe binnenkomers" werkt. "Ontdek meer" of "Verken nu" niet. Geef de bezoeker een richting, geen suggestie.
Je hero-beeld moet het product duidelijk tonen. Lifestylebeelden werken goed als het product context nodig heeft om logisch te zijn, zoals kleding of woonartikelen. Beelden van alleen het product werken beter als duidelijkheid zwaarder weegt dan inspiratie, zoals bij gereedschap of elektronica. Gebruik beelden van hoge kwaliteit. Een onscherpe of slecht belichte hero ondermijnt al het andere.
Wat laat je zien onder de hero?
Zodra een bezoeker voorbij de hero scrolt, zoekt hij specifiekere redenen om te blijven. Dit deel van de homepage moet producten of categorieën tonen die passen bij wat je kopers het waarschijnlijkst willen.
Probeer niet alles te tonen. Kies je bestsellers, je producten met de hoogste marge of de categorie waar de meeste kopers uitkomen. Drie tot zes uitgelichte producten is een redelijk aantal. Meer dan dat gaat er rommelig uitzien en zorgt voor keuzeverlamming.
Categorieblokken werken goed voor shops met een breed assortiment. Toon in plaats van losse producten de drie of vier belangrijkste categorieën, elk met een duidelijke afbeelding en label. Laat kopers zelf het juiste deel van de shop kiezen.
Het uitgelichte deel moet ook dynamisch zijn. Wissel seizoensproducten, aanbiedingen of nieuwe binnenkomers af. Een homepage die nooit verandert, geeft terugkerende bezoekers geen reden om te scrollen.
Hoe gebruik je social proof op de homepage?
Kopers vertrouwen andere kopers meer dan shops. Social proof op de homepage bouwt geloofwaardigheid op voordat een bezoeker een productpagina bereikt.
De meest effectieve vormen van social proof op de homepage zijn korte klantreviews of sterrenbeoordelingen, een aantal klanten of verzonden bestellingen, vermeldingen in de pers of mediabeeldmerken en vertrouwensbadges van derden, zoals pictogrammen voor veilig betalen of erkende keurmerken.
Houd het beknopt. Een of twee sterke getuigenissen werken beter dan een muur van vijfsterrenreviews. Eén persbeeldmerk van een bekend medium doet meer dan een lijst van tien onbekende namen. Kies het bewijs dat het meest betekent voor de koper die het meest sceptisch is over de eerste keer kopen bij jou.
Moet je een merkverhaal toevoegen?
Een korte sectie met een merkverhaal op de homepage is optioneel, maar helpt in bepaalde situaties. Het werkt het best als het verhaal van de oprichter deel is van de reden waarom een koper voor dit merk kiest en niet voor een grotere concurrent. Handgemaakte producten, ethische inkoop, merken uit de community en producten van een oprichter profiteren allemaal van een kort menselijk moment op de homepage.
Neem je er een op, houd het dan kort. Twee of drie zinnen en een link naar de volledige Over ons-pagina is genoeg. Zet het niet boven de vouw of boven de uitgelichte producten. Het verhaal voegt warmte toe, maar producten sturen beslissingen.
Staat het product voor zichzelf, sla het verhaal dan over. Een pagina die standaardartikelen verkoopt, heeft geen oorsprongsverhaal nodig. Gebruik die ruimte liever voor meer productzichtbaarheid.
Wat de homepage niet nodig heeft
Rommel op de homepage is net zo schadelijk als een ontbrekende sectie. Elk element dat geen taak heeft, neemt aandacht weg van iets dat dat wel heeft.
Veelgemaakte homepagefouten zijn te veel calls-to-action die op hetzelfde niveau strijden, video's of animaties die automatisch afspelen en de pagina vertragen, grote blokken tekst die niemand leest, een navigatiemenu met meer dan zes of zeven items en pop-ups die verschijnen voordat de bezoeker iets heeft kunnen zien.
Elke extra keuze die je een bezoeker opdringt, kost een beetje wrijving. De homepage moet duidelijk voelen, niet druk. Kun je niet kiezen tussen twee elementen, haal dan het element weg dat niet direct bijdraagt aan het brengen van een bezoeker naar een product.
Homepage ontwerpen voor mobiel
Meer dan de helft van al het e-commerceverkeer komt van mobiel. Je homepage moet mobile-first zijn gebouwd, niet achteraf aangepast vanuit desktop.
Op mobiel moet de kop van de hero kort genoeg zijn om in twee regels te lezen. De CTA-knop moet groot genoeg zijn om makkelijk aan te tikken. Productafbeeldingen moeten netjes onder elkaar staan in één kolom. De navigatie moet inklappen tot een menu dat het scherm niet domineert.
Test elke wijziging aan de homepage op een telefoon voordat je hem publiceert. Wat er op een desktopmonitor schoon uitziet, kan op een klein scherm een verwarrende scroll worden. De ervaring van de koper op mobiel is je belangrijkste ontwerpbeperking, geen bijzaak.
Duidelijkheid over verzending telt ook op mobiel. Kopers op telefoons zijn vaak dicht bij een koopbeslissing. Een zichtbare banner met de grens voor gratis verzending of de verwachte levertijd op de homepage kan een rondkijksessie in een koopsessie veranderen. Meer over het inrichten van verzending voor je shop lees je in hoe je verzending voor je webshop instelt.
Hoe WEMASY homepage-ontwerp ondersteunt
Het webshopsysteem van WEMASY heeft tools voor de indeling van de homepage die zijn gemaakt voor webshops. Hero-secties, rasters met uitgelichte producten, categorieblokken en secties voor social proof zijn allemaal beschikbaar zonder maatwerkcode. Hetzelfde systeem regelt de mobiele indeling automatisch.
Bekijk op de pagina met WEMASY-prijzen welke homepage- en shoptools in elk plan zitten.
Veelgestelde vragen
Hoeveel CTA's moet een homepage hebben?
Eén primaire CTA boven de vouw, daarna secundaire CTA's verderop op de pagina, gekoppeld aan specifieke secties. De primaire CTA moet de belangrijkste actie zijn die je van een nieuwe bezoeker wil, meestal "Shop nu" of een link naar een specifieke categorie. Concurrerende primaire CTA's met hetzelfde visuele gewicht verdelen de aandacht en verlagen het aantal klikken op alle. Met de websitebouwer van WEMASY stel je dit direct in je shop in.
Moet ik prijzen tonen op de homepage?
Niet per se op de homepage zelf, maar prijzen tonen op uitgelichte productkaarten helpt. Kopers scannen prijsklassen om te bepalen of een shop binnen hun budget valt. Prijzen verbergen tot de productpagina zorgt voor wrijving en kan ontwijkend overkomen. Zijn je producten premium, dan zet het tonen van een instapprijs de verwachting positief neer in plaats van voor een verrassing te zorgen.
Hoe vaak moet ik de homepage bijwerken?
Werk uitgelichte producten en seizoenssecties bij als je nieuwe binnenkomers hebt, een actie loopt of het seizoen verandert wat kopers zoeken. De hero-sectie kan langer stabiel blijven, maar ververs hem als je hoofdaanbod of positionering verandert. Een homepage die een heel jaar hetzelfde eruitziet, wekt de indruk van een shop die niet actief is.
Beïnvloedt de laadsnelheid van de homepage de verkoop?
Ja. Een homepage die op mobiel langer dan drie seconden laadt, verliest een flink deel van de bezoekers voordat ze iets zien. Grote niet-gecomprimeerde afbeeldingen zijn de meest voorkomende oorzaak. Comprimeer afbeeldingen vóór het uploaden, gebruik geen automatisch afspelende video in de hero en beperk scripts van derden. Snelheid is een ontwerpkeuze voor de homepage, niet alleen een technische.
Moet de homepage linken naar elke productcategorie?
Niet per se. Link naar de categorieën die de meeste kopers willen. Een navigatiemenu kan de volledige lijst met categorieën dragen. Het hoofdgedeelte van de homepage moet de categorieën tonen die de meeste conversie opleveren of die je voorrang wil geven. Naar alles linken zorgt voor visuele ruis en verwatert de pagina's die het meest tellen.
Waar horen vertrouwensbadges op de homepage?
Bij de hero, dicht bij de CTA, of in een aparte vertrouwensbalk tussen de hero en de uitgelichte producten. Kopers zoeken het vaakst naar vertrouwenssignalen op het moment dat ze overwegen op een CTA te klikken. Badges alleen in de footer zetten bereikt alleen kopers die al naar beneden zijn gescrold, en dat is voor de meeste nieuwe bezoekers te laat.