6 tips om de productlijst pagina veel waardevoller te maken

Onderstaande 6 tips helpen jou om de pagina met weergave van jouw producten – in een bepaalde categorie – veel waardevoller te maken. Het is immers jammer als bezoekers afhaken op die pagina terwijl deze juist de laatste stap naar de productdetailpagina zou moeten zijn.

Wat is een productlijst?

Een productlijst (bijvoorbeeld “alle zomerjurken” op een online kledingwinkel of “alle laptops” op een online computerwinkel) is een belangrijk moment voor oriëntatie en eerste selectie door de bezoeker. Vanuit dit aanbod moet de bezoeker immers een eerste selectie maken en doorklikken naar de productdetail pagina. Een bezoeker wil deze actie (het kiezen van een product uit de lijst om dan naar de detailpagina te gaan) niet te vaak maken: als de productdetailpagina (dus in bovenstaand voorbeeld alle details van de gekozen zomerjurk of laptop) in de ogen van de bezoeker tegenvalt (“als ik de details van de jurk zie vind ik die toch niet zo leuk” of “dit zijn niet de technische specificaties van de laptop die ik zoek”) dan moet de bezoeker vaak weer terug naar de productlijst om op zoek te gaan naar een ander product. De bezoeker zal deze actie (van lijst naar detail en weer terug) maar enkele keren volhouden en na een aantal keren teleurgesteld en gefrustreerd afhaken en wellicht een andere aanbieder gaan zoeken. Gevolg: de resultaten (conversie) op de website zijn lager dan eigenlijk mogelijk zouden zijn en dus wordt er omzet verloren.

In dit artikel geef ik 6 tips die de productlijst verbeteren zodat bezoekers sneller het juiste product kiezen en eerder overgaan tot bestellen.

1. Uitbreiding visualisatie in productlijst

Als we willen dat minder mensen ‘teleurgesteld’ raken over de informatie op de productdetailpagina dan moeten we hen dus beter informeren op de productlijst pagina. Uit onderzoek van o.a. Baymard is gebleken dat de resultaten (het rendement) verhoogd werden nadat gebruikers in staat waren om, zonder naar de detailpagina te moeten klikken, de voor hen relevante producten alvast te selecteren.

In het voorbeeld hieronder zien we 2 afbeeldingen zoals deze op de H&M website staan: door middel van een mouse-over kan de bezoeker zonder te hoeven klikken dit product mét en zonder model zien. Je kunt je voorstellen dat als dit product alleen getoond zou worden door het model je bepaalde details niet kunt zien en dus eigenlijk ook niet voldoende geïnformeerd wordt over het product. De combinatie van deze twee afbeeldingen vergroot het aantal zichtbare details terwijl men nog op de pagina met producten aan het kijken is: gevolg is dat eventuele teleurstelling op de productdetailpagina (“Goh, jammer dat die knoopjes tot bovenaan doorlopen”) niet ontstaat en meer bezoekers positief over het product blijven.

Voorbeeld H&M: via een mouse-over wordt het product op de productlijst uitgebreider getoond

TIP: het is wel belangrijk consistent te zijn en deze manier van weergave: zorg er voor dat alle producten op deze manier getoond worden of helemaal niet: als het soms wel en soms niet wordt toegepast vergroot dit juist weer de frustratie bij de bezoekers.

2. Uitbreiding door extra uitleg beschikbaar te maken

Laten we niet vergeten dat bij online shoppen de ondersteuning / hulp aan de online bezoeker minimaal is: er komt niet toevallig net een expert aanlopen die allerlei vragen over deze nieuwe laptop kan beantwoorden zoals dat in de fysieke winkel wel gebeurt. Dus we moeten alle opties die mogelijk zijn om de bezoeker zo goed mogelijk te informeren vóórdat deze naar de productdetailpagina gaat, toepassen. Dit kan door bijvoorbeeld extra informatie in bijv. popup-schermen te plaatsen: als een bezoeker bij Coolblue iets meer wil weten over de processor in de laptop dan wordt dit voorzien in een apart, kleiner scherm waarin tekst én video staat over de eigenschappen, voor- en nadelen van een processor in een laptop.

Voorbeeld Coolblue: een technische term wordt in een popup uitgebreid uitgelegd

3. Plaatsen van productvariaties

Als een product meerdere variaties kent (er zijn bijvoorbeeld meerdere kleuren beschikbaar in een kledingproduct) dan zou je deze al op de productlijst moeten laten zien. Het kan immers zijn dat de afbeelding die standaard wordt getoond (hieronder in het voorbeeld uit de website van Adidas de grijze variant) niet tot de voorkeur behoort maar dat de bezoeker liever een rode versie zou zien. Door de kleurmogelijkheden al direct op de productlijst te tonen informeer je de bezoeker niet alleen vollediger maar is de kans ook aanwezig dat, omdat de rode variant nu ook getoond wordt, er toch wordt doorgeklikt naar de productdetailpagina (ondanks de “saaie grijze variant”.

Voorbeeld Adidas: de beschikbare productvariaties zijn al op de productlijst zichtbaar

4. Maak een hybride vorm

Je kunt er ook voor kiezen om het verschil tussen de productlijst en de productdetailpagina te verkleinen door een hybride vorm toe te voegen: vanuit de productlijst kunnen bezoekers in een popup-scherm extra informatie opvragen en dan beslissen of zij terug willen naar het overzicht van alle producten of naar de detailpagina willen gaan.

Hieronder zien we een voorbeeld van de website van Canon.nl waarin bij de producten op de productlijst de call-to-action SNELLE WEERGAVE staat. Als hierop wordt geklikt blijft de productlijst in beeld maar verschijnt ook een nieuwe popup met meer informatie over dit specifieke product. Deze popup kan eenvoudig gesloten worden (bezoekers gaan door op de productlijst) of er kan naar de detailpagina gegaan worden.

Voorbeeld website Canon: hybride vorm van productlijst en detailpagina via popup scherm

5. Toon productdetails bij complexe producten

Bij bepaalde producten kan het voorkomen dat bezoekers die niet thuis zijn in de materie het moeilijk vinden het juiste product te kiezen. Neem als voorbeeld kabels voor het opladen van een smartphone of tablet. Helaas zijn hier nogal wat varianten van gemaakt en het kan daarom helpen als bezoekers op de productlijst al bepaalde eigenschappen van de kabel kunnen zien: bijvoorbeeld hoe de aansluiting richting het op te laden apparaat er uit ziet. Apple heeft dit op haar website toegepast door bezoekers in staat te stellen op de productlijst de foto’s bij een product te laten veranderen en op die manier, nog voordat de productdetailpagina wordt geopend, duidelijkheid te geven in de aansluitingen van de kabel.

Voorbeeld website Apple: op de productlijst kunnen bezoekers al de aansluitingen van de adapter bekijken

6. Laat producttoepassingen zien

Een slaapbank is een product met eigenlijk 2 belangrijke functies: een bank om op te kunnen zitten (en hoe ziet deze er dan uit?) en, als het nodig is, waarop geslapen kan worden (en hoe ziet dit product er dan uit?). Beide toepassingen en manier waarop producten dan er uit zien zijn voor bezoekers belangrijk. Het is dan in dit geval raadzaam deze twee variaties in de productlijst op te nemen.

Voorbeeld website IKEA: de slaapbank kan met een mouse-over actie getoond worden in de twee belangrijkste productvariaties

Tot slot

Uiteraard is het kiezen van bovenstaande uitbreidingen helemaal afhankelijk van de doelstelling van jouw website, de producten, diensten, doelgroep en complexiteit. Maar ik denk dat in bijna alle gevallen zal gelden dat de productlijst op de website voor de bezoekers toegankelijker gemaakt kan worden, informatiever en daardoor meer bezoekers uiteindelijk een productdetailpagina gaan bekijken.

Ben je op zoek naar nog meer tips om jouw conversie te verhogen? Kijk dan eens naar deze checklist conversie optimalisatie!