Stel, je bent op zoek naar een digitale camera. Je gaat verschillende websites af en bekijkt het aanbod. Welke camera’s hebben een wifiverbinding? Wat is de kwaliteit van de lens? In één overzicht wil je zien waar je aan toe bent, de zoektocht duurt immers al lang genoeg. Uiteindelijk bestel je de camera bij die ene webshop die betrouwbaarheid uitstraalt en je er zeker van bent dat je krijgt wat je ziet.
Een duidelijk aanbod met relevante informatie en een betrouwbare uitstraling. Dat is wat je wilt als je jouw producten vertoont in je webshop. Je wilt een goede overzichtspagina waar in één oogopslag duidelijk wordt wat de klant bij jou kan kopen en hem vervolgens zo soepel mogelijk de funnel inleiden. Klik, kopen, klaar. Maar waar voldoet een goede overzichtspagina aan? Welke informatie hoort daar thuis en welke juist niet? In dit whitepaper vertellen wij je alles over de inrichting van een overzichtspagina, geven we je tips en kun je vervolgens direct aan de slag met het maken van je eigen killerpagina.
Op zoek naar de perfecte site
Elke designer, UX-designer en marketeer is op zoek naar de perfecte site, waar de bezoeker precies kan vinden wat hij zoekt en moeiteloos een aankoop doet. Daarbij hoort ook de perfecte overzichtspagina voor alle producten. Het doel van een overzichtspagina is laten zien welke producten je de klant kunt aanbieden. Binnen elke branche kan zo’n overzichtspagina anders ingedeeld zijn, maar toch bevatten ze allemaal wel basiselementen die overal gelijk zijn. Een goede overzichtspagina maken, is echter moeilijker gezegd dan gedaan. Bij de presentatie van de producten zijn namelijk ook branding, creativiteit en overtuigingskracht van groot belang.
Als UX designer voor Isatis Online Results ben ik betrokken geweest bij designs en optimalisaties van veel e-commerce pagina's. Waaronder ook Listing pages.
Laten we eerst even kijken naar wat er allemaal aanwezig moet zijn op zo’n overzichtspagina. We maken een onderverdeling in twee categorieën: de informatie en functionaliteiten.
Een overzichtspagina bevat minimaal de volgende informatie per product:
Het idee dat een groot aanbod gelijk tot meer verkopen leidt, is fictie. Het aantal producten dat je toont is afhankelijk van de hoeveelheid informatie die je laat zien. Hoe meer producten je presenteert, hoe lastiger het wordt om een keuze te maken. Dit heeft te maken met het kortetermijngeheugen. Psycholoog George A. Miller (1956) specialiseerde zich in cognitieve psychologie en schreef over The Magical Number Seven: Plus or Minus Two. Dit gaat over de beperkingen van ons kortetermijngeheugen en het betekent dat volwassenen over het algemeen tussen de 5 en 9 dingen kunnen onthouden in hun kortetermijngeheugen. Deze kennis kan ook verwerkt worden op websites en op de overzichtspagina. Daarom worden er vaak niet meer dan 7 items in het hoofdmenu getoond, en proberen we nooit meer dan 7 producten in een scherm te tonen bij onze klanten.
Daarnaast is er nog een gouden regel:
Veel informatie per product = minder producten op het scherm.
Zo blijft de pagina rustig en overzichtelijk. Welke informatie vervolgens getoond wordt per product is bij elk producttype verschillend. In de voorbeelden hieronder zie je dat Wolkyshop meer producten laat zien dan de Mediamarkt.
Naast de gegevens die je de bezoeker laat zien, moet de bezoeker natuurlijk ook iets kunnen doen met het aanbod. Daarvoor moet je de juiste functionaliteiten aanbieden. Een overzichtspagina bevat de volgende basisacties: Bekijken, Toevoegen en Filteren. Als een product meer dan zeven eigenschappen heeft, wordt het waardevoller de optie voor het vergelijken van producten of het filteren op eigenschappen aan te bieden. Bij technische apparaten kun je bijvoorbeeld filteren op grafische kaart of opslagcapaciteit. In het productoverzicht van de Mediamarkt zie je ook dat je de producten kunt vergelijken.
Een voorbeeld
Hierboven staat een voorbeeld van een overzichtspagina die we maakten voor Proday, een webshop met eiwitdieetproducten. Je ziet dat we er voor gekozen hebben maximaal zes producten tegelijk te tonen. De pagina oogt overzichtelijk doordat je niet al teveel eigenschappen kunt zien. Pas als je met je muis over een product gaat (zoals je linksboven kunt zien bij de Crunch reep chocolade) zie je of het product op voorraad is, voor welke fase in het eiwitdieet je het product kunt gebruiken en de stapelkorting die je eventueel krijgt.
