Toen ik de indeling voor een modelwebshop voor koffie in 2014 schetste, was het logisch om de header, homepage, categorie en het productdetail bijna als bouwblokken te beschrijven: logo links, winkelwagen rechts, filters hier, koopknop daar.
De basisverwachtingen van mensen zijn niet veel veranderd. De context wel: de meeste ontwerpen moeten op mobiel werken, aanbiedingen zijn complexer en elk extra script concurreert om snelheid en aandacht. Daarom raad ik niet langer aan om blind een indeling te kopiëren. Ik raad aan om klanttaken stap voor stap te doorlopen.
De header moet oriënteren, niet elke optie tonen
In de header zoeken mensen naar het merk, de navigatie, zoekfunctie, account en winkelwagen. Ze hoeven niet allemaal even prominent te zijn. De prioriteit verandert met het assortiment en de fase van het aankoopproces.
- Het logo leidt naar de homepage en heeft een begrijpelijke tekstnaam.
- De zoekfunctie is makkelijk bereikbaar wanneer mensen een product of parameter kennen.
- De winkelwagen toont zijn status en verdwijnt niet nadat een artikel is toegevoegd.
- Contact of hulp is vindbaar zonder de aankoop te verdringen.
- Het menu werkt met aanraking, toetsenbord en zonder nauwkeurig richten met de muis.
Een uitschuifmenu kan helpen bij een breed assortiment. Met tien categorieën is het vaak gewoon een indrukwekkend obstakel. Google raadt aan om categorieën en producten bereikbaar te maken via gewone navigatielinks; alleen zoeken biedt robots mogelijk niet het volledige assortiment. De principes staan beschreven in de documentatie over de structuur van e-commercesites.
De homepage moet verkeer verdelen, niet het hele assortiment vertellen
Op de homepage wil ik snel begrijpen wat de webshop verkoopt, voor wie het aanbod bedoeld is en waar ik verder kan. In plaats van een automatische slider geef ik de voorkeur aan één duidelijke prioriteit en meerdere stabiele ingangen naar de belangrijkste aankoopsituaties.
Bestsellers kunnen helpen, net als seizoenscategorieën, advies of een reden om de webshop te vertrouwen. Elk blok moet een functie hebben. ‘Zodat de pagina niet leeg is’ is geen functie.
Een categorie helpt de keuze te beperken
Een categorie is geen SEO-tekst die boven een productraster is geplakt. Het is een hulpmiddel bij het kiezen. De naam en korte introductie bepalen het aanbod, filters beperken de keuze en sortering helpt bij de situatie van de klant.
- Benoem filters in de taal van klanten, niet met interne databasevelden.
- Toon actieve keuzes na het filteren en maak ze eenvoudig te verwijderen.
- Maak belangrijke subcategorieën zichtbaar als links, niet alleen als scriptwaarden.
- Toon de lijstgegevens die nodig zijn voor vergelijking; zet de rest in het detail.
- Een leeg resultaat moet een weg terug bieden, geen doodlopende weg zijn.
Broodkruimelnavigatie helpt mensen hun positie in het assortiment te begrijpen en kan zoekmachines helpen de hiërarchie te begrijpen. Als je gestructureerde data gebruikt, volg dan de actuele documentatie van Google over broodkruimels.
Het productdetail moet vóór en na de knop vragen beantwoorden
Een zichtbare knop om iets aan de winkelwagen toe te voegen is een basis, niet het volledige productdetail. Voordat mensen beslissen, hebben ze de naam, prijs, variant, beschikbaarheid, verzending, retourbeleid, foto's en informatie nodig die past bij het aankooprisico.
Bij koffie zijn herkomst, smaak, brandingsgraad, gewicht en bereidingswijze belangrijk. Bij een boormachine zijn specificaties, compatibiliteit en service belangrijker. Er is geen universele volgorde. Wel is er één universele vraag: wat moet de klant weten om de juiste variant te kopen en die later niet terug te sturen?
Reviews moeten geloofwaardig zijn en betrekking hebben op het specifieke product. Aanbevolen producten moeten de keuze ondersteunen, niet iemand afleiden van een bijna afgeronde aankoop. Een socialknop op een productdetailpagina is nog steeds geen prioriteit. We zouden de tijd waarin een like-knop het antwoord op alles was inmiddels achter ons moeten hebben gelaten.
De winkelwagen en checkout moeten verrassingen wegnemen
In de winkelwagen moet je aantallen en varianten kunnen wijzigen en artikelen kunnen verwijderen. Toon de totaalprijs, verzendkosten en leverdatum zo vroeg mogelijk, niet pas na de derde stap en registratie.
Afrekenen als gast is vaak een verstandige standaard. Als een account echte waarde biedt, bied het dan na de bestelling aan. Formulieren hebben correcte labels, automatisch invullen en foutmeldingen die uitleggen wat er moet worden aangepast. Aanraakdoelen moeten groot genoeg zijn; het huidige criterium staat in WCAG 2.2 onder Target Size.
Meet taken, niet de kleur van een knop
A/B-testen kunnen helpen wanneer een bedrijf voldoende verkeer, één hypothese en een beslissende metric heeft. Wekelijkse bannerwijzigingen zonder voldoende steekproef zijn een speelterrein, geen betrouwbare conclusie.
Ik volg het gebruik van zoeken en filters, acties om iets aan de winkelwagen toe te voegen, formulierfouten, uitval bij elke stap, retouren en vragen aan de klantenservice. Ik vul cijfers aan met observaties van mensen en hun vragen. Analytics laat zien waar; een persoon legt vaak uit waarom.
De basis voor metingen staat in Google Analytics 4. Prestatiecontroles bespreek ik in Een website sneller maken.
Een webshop hoeft niet origineel te zijn in de plek van de winkelwagen. Hij moet overtuigend uitleggen waarom je dit product hier zou kopen.
Ga voor argumenten op product- en verkooppagina's verder met Belangrijke elementen van een verkooppagina. De volledige basis voor websites staat in Een webproject starten.