De ingrediënten van een succesvolle productpagina
5 juni 2007 - 10:07
Tags: User experience, e-Commerce
Productpagina’s op e-commerce websites vormen het eindpunt van de zoektocht naar een passend product. Deze pagina’s hebben de zware taak de kritische klant over de streep te trekken. Een aantal gouden tips van Jungle Rating om uw productpagina zo warm, toegankelijk en verleidend mogelijk te maken, geïllustreerd door best practices.
1. Maak het product zo tastbaar mogelijk
Klanten geven aan sneller te kopen als je het productaanbod zoveel mogelijk tot leven brengt (Allurent, 2006). Alles draait om tastbaarheid: toon zoveel mogelijk facetten van het product en maak de presentatie zo warm mogelijk.
a. Toon zoveel mogelijk facetten van het product
EddieBauer.com toont zoveel mogelijk verschillende foto’s van haar artikelen: los, op model, de achterkant en de details. Op Walmart.com zie je een voorbeeld van een sterke zoom functie, zodat je de details van het artikel goed kan bekijken (zoals de stof waar het artikel van gemaakt is en het aantal knopen op de kraag).

Bij EddieBauer.com kan je op allerlei manieren het artikel bezichtigen.
Walmart.com biedt een sterke zoomfunctie: de details en de stof komen goed tot hun recht.
b. Maak de productpresentatie zo warm mogelijk
In de toekomst zijn platte plaatjes niet meer genoeg. Klanten willen de luxe ervaring: niet alleen foto’s, maar ook een audio en video presentatie. Uit onderzoek van E-consultancy (2004) bleek dat conversie van hotel websites tot 120% kon stijgen als gevolg van een videopresentaties van de hotels. Inmiddels heeft weekendjeweg.nl dit met verve geïntroduceerd.

Weekendjeweg.nl biedt o.a. een mooie video van hotel Leeuwenhorst.
Echter, een video is op zich mooi, maar het kan nog beter. De losse video staat immers los van productinformatie en navigatie. Bedrijven als FBTO, Younique van Robeco en Noterik mengen website functionaliteit en content met audio/video met het doel om de klantervaring nog warmer en naadlozer te maken. Zo leukt FBTO de productpagina van haar doodsaaie autoverzekering op met een presentatie van een vlotte actrice en haalt Younique zijn Anne Zuidema erbij om online advies te geven over vermogen. Tot slot maakt Noterik het mogelijk om te klikken op objecten of mensen in de video.

FBTO maakt het ‘lezen’ van informatie over haar autoverzekering een stuk warmer.

Bovendien kan de klant ook steeds wisselen van filmpje door de navigatie onderin het scherm uit te laten klappen.

Robeco maakt haar vermogensplan tastbaar door het gezicht van Anne Zuidema te gebruiken. De adviesfunctie helpt mij om mijn profiel vast te leggen. Anne begeleidt je door het proces en geeft het bedrijf smoel.

Het Amsterdamse bedrijf Noterik maakt het mogelijk om te klikken in objecten of mensen in een video. Klik op de kleding van de modellen op de catwalk en de website stuurt je naar de relevante productpagina.
2. Beschouw de productpagina als de homepage van je product
Er is vaak veel te vertellen over een product. Als je alle informatie over het product op een productpagina onder elkaar zou zetten, zouden weinigen nog de informatie vinden waar zij naar op zoek zijn. Zorg dat de pagina direct inzicht geeft in de unieke eigenschappen van het product en deel de informatie op door gebruik van tabs.
a. Maak de unieke eigenschappen van het product direct inzichtelijk
Zorg dat de klant de unieke eigenschappen van het product gemakkelijk kan scannen. Staples.com (ter indicatie: Staples.com is Amerika’s tweede webwinkel met een omzet van 4,9 miljard dollar in 2006) maakt deze direct duidelijk met een sterke pay off (‘perfect for storing and transferring data…’) en enkele makkelijk scanbare bullets.

De productpagina van Staples.com maakt in het rechterkader de unieke eigenschappen van haar product direct duidelijk.
b. Maak gebruik van tabnavigatie op de productpagina
Slechts 42% van de internetgebruikers scrollt naar beneden op een productpagina (‘Prioritising Web Usability’, Nielsen, 2006). Zorg dus dat de meest belangrijke productinformatie zichtbaar toegankelijk is door middel van een tabnavigatie, zoals HP.com.

HP.com maakt sterk gebruik van tabnavigatie binnen de productpagina om de belangrijkste onderwerpen boven de ‘vouw’ van de pagina toegankelijk te maken. Fraai is ook dat HP.com in het rechterkader onder de tab ‘overview’ een ’support’ blok biedt: klanten die op zoek zijn naar support voor een bepaald product zoeken dit vaak via de productnavigatie (in plaats van de ‘klantenservice’ rubriek).
3. Geef inzicht in hoe en of de klant het artikel kan krijgen
Ga er niet van uit dat klanten weten of en hoe ze het artikel kunnen krijgen. Leg dit dus goed uit op de productpagina. Geef bovendien duidelijk aan of het artikel beschikbaar is en toon alternatieven als dit niet het geval is. Otto.de en Wehkamp.nl doen dit goed. Otto.de toont alle aflevermogelijkheden op haar productpagina en Wehkamp.nl toont in haar ‘maat en levertijd’ pulldown direct inzicht in de beschikbaarheid van het artikel. Indien het artikel niet direct leverbaar is, biedt de website de mogelijkheid om vergelijkbare artikelen te bekijken.

Otto.de toont op haar productpagina’s een blok genaamd ‘serviceleistungen’. Het blok toont alle mogelijkheden voor de aflevering van het product.

Wehkamp.nl biedt een link naar ‘vergelijkbare artikelen’ indien het artikel niet direct beschikbaar is.
4. Maak de productpagina zo verleidend mogelijk
Een succesvolle webwinkel verleidt haar klanten om zoveel mogelijk extra’s bij het gewilde product te kopen. De productpagina is hier dé plek voor. 60% van de Nederlandse webwinkels doen dit (Jungle Rating, Nationaal Webwinkel Onderzoek 2006). Comet.co.uk is een sterk voorbeeld van een webwinkel die alles in het werk stelt om klanten meer te verkopen. Zij toont alle gerelateerde producten onder de tab ‘accessoires’ en biedt pakketkorting als de gebruiker meer koopt Bovendien biedt zij een kenniscentrum in de rechterkolom (‘the knowledge’) om je te helpen met het maken van een gefundeerde keuze (maar ook om je te bewegen zoveel mogelijk bijpassende artikelen te kopen).

Comet.co.uk biedt accessoires, pakketdeals en een kenniscentrum om klanten te verleiden tot een hoger bonbedrag.
5. Plaats een Dikke Grote Vette Druk Knop ‘plaats in winkelmand’
Een productpagina kan niet zonder de knop waar alles om draait, de zogenaamde Dikke Grote Vette Druk Knop. Zorg dat de huisstijl één opvallende kleur reserveert voor deze knop en zorg dat de productpagina niet meer dan één toont. Zorg, tot slot, dat de overige opties (zoals ‘voeg toe aan wensenlijst’ en ‘email een vriend’) minder opvallend zijn vormgegeven, zodat De Knop eruit springt. De productpagina van Target.com voldoet aan deze eisen.

Target.com toont een krachtige Dikke Vette Druk Knop op haar productpagina ‘add to cart’. Daaronder toont de website enkele minder opvallende opties, waaronder ‘add to wish list’.
Joost Wolzak is consultant bij internetadviesbureau Jungle Rating. Hij is (mede) auteur van de Finest Fifty boeken.
6158x gelezen 20 reacties




5 juni 2007 om 20:36
Cool, veel bekende dingen, maar ook veel nieuwe dingen die ik zeker ga toepassen in onze site.
5 juni 2007 om 20:54
Zeer interessant artikel Joost! Keep up the good work!
5 juni 2007 om 21:44
Weer een zeer interessant artikel en langs deze weg sowiezo een compliment voor je diepgaande en uitgebreide artikelen. :-)
5 juni 2007 om 22:10
Nog wat technische tips:
- Zorg voor een heldere simpele logische permanente URL voor je product. Dit is handig als mensen willen linken of het naar vrienden willen mailen.
- Biedt bruikbaar foto-/videomateriaal als mensen je product willen bespreken. Dus handige links of kant-en-klare codes die mensen op hun eigen site op kunnen nemen.
5 juni 2007 om 23:36
@ Kasper: Ere wie ere toekomt: het artikel is van de hand van Joost Wolzak, vanaf vandaag ook te vinden op Frankwatching.
@ Joost: Ook jij van harte welkom hier op de blog! Ik sluit me aan bij de vorige reacties: erg interessant en overzichtelijk verhaal, met sterke illustraties! Smullen dus!
@ Alper: Goeie aanvullling. Wat mij betreft mag je daar ook nog presentatiemateriaal (slideshare e.d.) aan toevoegen.
6 juni 2007 om 09:32
Zijn er ook al kleding shops die je kledingstukken laat combineren? Wanneer dit mogelijk is lijkt mij dit ook verkoop bevorderend.
Wanneer je in de huidige situatie een shirt bekijkt zie je daarnaast diverse broeken staan, maar waarom niet meteen een plaatje waarop je de broek ziet met het shirt dat je aan het bekijken bent?
Daarnaast kan dit ook een goede oplossing zijn voor minder modebewuste kopers die zelf het combineren van kledingstukken een uitdaging vinden.
6 juni 2007 om 11:06
Allereerst, een eer om te mogen schrijven voor het best weblog van NL.
En dank voor de mooie reacties. Mooie suggesties Alper. Daar had ik nog niet aan gedacht.
Robert, het combineren van kledingstukken is iets dat in opkomst is. Meestal zie je het nog als een ‘ordinaire’ vergelijkingsfunctie. http://www.tuff.nl biedt in essentie een goed concept: ‘de paskamer’. Je kan daar bekeken kleding toevoegen aan je paskamer en kijken of het goed bij elkaar past. Het is nog wachten op een webwinkel die een paskamer ontwikkelt, waarin je geselecteerde kleding binnen de paskamer kan slepen (drag ‘n drop) op een paspop. Kent iemand hier een goed voorbeeld van?
6 juni 2007 om 13:53
Toch raar dat bij FBTO het meest leuke deel wegstopt zit in een filmpje, wat lang niet iedereen zal aanklikken en/of kan bekijken. Zonde van de moeite die erin is gestoken.
6 juni 2007 om 18:37
@ Joost: Interessante post over een onderwerp waar ik mijn gedachten ook vaak over laat gaan en waar ik ook al de nodige informatie over verzameld heb. Kijk zeker eens eens naar de myshape- site http://www.myshape.com/index.php?override=true, die gaat een heel eind in de richting die ik voor me zie wanneer je het hebt over online kleding-shopping. Je kiest een figuur dat lijkt op jouw eigen figuur en krijgt kleding te zien die past bij die lichaamsvorm. Vooralsnog ‘women only’ maar zeker de moeite van het bekijken waard.
7 juni 2007 om 10:13
Hi Joost,
Mooi en uitgebreid artikel. Ik denk dat veel sites hier hun voordeel mee kunnen doen, ook wij (weekendjeweg.nl) kunnen hier ook nog meer mee. Erg fijn.
Voor onder de noemer verleiden, en wat ik in je artikel nog mis: hoe zit het met user generated content?
Ik denk dat je de productpagina nog verleidelijker kan maken door er ook filmpjes/foto’s van je gasten aan toe te voegen voor een extra dimensie (gastenbeoordelingen skip ik even). Dat kan vele productpagina’s ook iets minder gelikt en ‘echter’ maken. Hoe zien jullie dit?
7 juni 2007 om 10:15
Hi Joost,
Mooi en uitgebreid artikel. Ik denk dat veel sites hier hun voordeel mee kunnen doen, ook wij (weekendjeweg.nl) kunnen hier ook nog meer mee. Erg fijn.
Voor onder de noemer verleiden, en wat ik in je artikel nog mis: hoe zit het met user generated content?
Ik denk dat je de productpagina nog verleidelijker kan maken door er ook filmpjes/foto’s van je gasten aan toe te voegen voor een extra dimensie (gastenbeoordelingen skip ik even). Dat kan vele productpagina’s ook iets minder gelikt en ‘echter’ maken. Hoe zien jullie dit?
7 juni 2007 om 11:48
@Jorg
Goede suggestie. Vond UGC een hoofdstuk apart, dus daarom niet meegenomen in dit artikel. Voor hotels maken filmpjes en foto’s van klanten het hotel nog tastbaarder. Echter, vergeet niet dat je niet ‘realiteit’ verkoopt, maar een droom (’romantisch’ weekendje weg). Bovendien maken jullie een selectie uit het complete hotelaanbod dus niemand verwacht dat jullie 100% onafhankelijke beoordelingen op jullie website zetten (geen foto van vieze badkamer ofzo). Ik denk dat het goed kan werken als je mooie foto’s en video’s van klanten op de pagina zet. Dan heb je dus een goede redactie nodig…
Overigens, hebben de filmpjes tot een conversieverhoging geleid?
7 juni 2007 om 13:19
@Joost - ik dacht al dat je UGC om die reden weg liet, het artikel wordt dan misschien al gauw te groot.
Ik ben niet geheel eens met je definitie: het verkopen van een ‘droom’, maar zit wel enigzins in die hoek wellicht. Wij bieden een weekendje weg aan en daar hoort inderdaad een goede vakantiesfeer bij. Maar ik geloof daarin wel in een goed evenwicht: een productpagina met teksten en beelden met een zoete marketingsaus accepteert niemand meer. Consumenten herkennen dit ook direct en accepteren die niet meer. O.a. om deze reden schrijven we bij Weekendjeweg.nl al sinds het begin (1999) alle teksten zelf voor de hotels die er bij ons worden aangeboden. In plaats van de teksten van de hotels direct over te nemen. We vinden het zeer belangrijk dat de informatie die wordt aangeboden kwalitief maar ook correct is ( zo ook in beeld).
Ik begrijp natuurlijk jouw verwijzing in je bericht naar de uitersten: een foto van een smerige badkamer (op tripadvisor.com staan ze) is natuurlijk erg vervelend. Het is een uitdaging hiermee om te gaan, en daar denken wij natuurlijk over na. Als voorbeeld wil ik even gastenreacties nemen. Wij komen hier binnenkort mee en dat zullen wel 100% onafhankelijke gastenreacties zijm. We vinden dat belangrijk en ik denk dat het ontkenning is als je als bedrijf denkt dat je deze informatie überhaupt nog kan verstoppen.
In gastenrecensies kan men ook klagen over het gebrek aan kinderfaciliteiten, het slechte ontbijt of vieze badkamer. Ik vind dat je deze informatie ongeredigeerd moet kunnen doorgeven aan je consuemtnen. MAAR wat daarbij heel belangrijk is dat je in de presentatie van deze informatie de goede context mee kan geven.
Dat kan je doen door bijvoorbeeld een gem. cijfer weer te geven. Zo las ik eens de recensies van een hotel op Bali waar het gemiddelde cijfer een 8 was. Er waren toch een paar negatieve recensies waarin mensen hun beklag deden over bepaalde faciliteiten. Maar in de recensies die daar achteraan kwamen was te lezen dat niet iedereen diezelfde negatieve ervaringen deelden. Ik merkte aan mijzelf dat ik een bepaalde kant koos op basis van de informatie en het cijfer, en dat ik dus nog steeds interesse had in het hotel.
Even terug: video’s en foto’s van andere gasten zijn een ander verhaal en ik zal niet ontkennen dat hier een flinke uitdaging ligt. Maar we zijn hier wel mee bezig omdat we vinden dat dit van zeer toegevoegde waarde is voor de consument.
7 juni 2007 om 13:32
Pardon, voor de typfouten
7 juni 2007 om 15:50
O ja, waar de post om gaat: nee helaas hebben we destijds niet specifiek gelet op conversieverhoging nadat de video’s erop stonden. Dat is een paar jaar geleden en toen groeiden we sowieso enorm had in boekingen.
8 juni 2007 om 13:17
Een voorbeeld van een pop (in dit geval een avatar) waar je verschillende kledingstukken bij elkaar kunt ‘aantrekken’ vindt je op http://www.whyrobbierocks.com. Is natuurlijk niet het doel van de website maar toch…
11 juni 2007 om 11:59
Een aantal mooie tips!!
Voor onze webwinkel http://www.debannerconcurrent.nl
kunnen we hier zeker wat mee.
Bij ons ervaren we dat (potentiële) klanten vaak contact met ons opnemen met vragen over de producten, leveringsvoorwaarden betalingen enz. Deze contactmomenten zouden we zeker kunnen reduceren door de bovenstaande tips toe te passen. Tevens zal ook het weigeringspercentage sterk afnemen door bovenstaande tips toe te passen.
Het enige nadeel wat er aan lijkt te plakken is dat door deze (voornamelijk) telefonische contactmomenten er toch een soort vertrouwensband wordt gecreëerd met de klant.
Wanneer er niet meer de behoefte is om dit contact met ons op te nemen denk ik dat deze mensen eerder van een eventuele aanschaf van een product af zullen zien. (minder commitment)
Welke oplossing zou hier voor gevonden kunnen worden??
12 juni 2007 om 00:16
Bedankt voor presentatie van de best practices voor de vormgeving van een productdetailpagina. Ik vind de detailpagina het minst lastig om vorm te geven omdat je veelal een volle open pagina hebt en dus ruimte om alles 200% te etaleren. Ik ben zeer benieuwd naar de best practices als het gaat om de productgroep- / categorie- pagina en de listingpagina. Hoe geef je die pagina’s vorm, zodat ze verleiden naar de laatste klik en conversie…(beeldgrote, titel, spreiding info, volgorde, kleur, ritme, specs, mate van omschrijving, prijsweergave, enz.).
Peter Broeder