Optimaliseer de Magento 2 Winkelwagen

Magento 2

Op 17 november 2015 heeft Magento de publieke beschikbaarheid van haar volgende generate open source digital ecommerce platform aangekondigd: Magento 2.0.

Momenteel heeft Magento een marktaandeel van 22.59% van de ecommerce platformen. Dit maakt haar het tweede grootste ecommerce platform wereldwijd achter WooCommerce die momenteel een marktaandeel van 23.93% heeft van alle Alexa top 1M sites.

Magento 2 seminar

Tijdens een recent bezoek aan een Magento 2 seminar in Nederland, werd een vraag gesteld door het publiek. De spreker vroeg aan de bezoekers “Hoeveel van jullie hebben enige veranderingen gedaan aan je Magento 1 checkout?”. Enkele seconden later staken vrijwel alle bezoekers hun hand op. Door de combinatie van een groot marktaandeel, en de aanwezig behoefte voor veranderingen, leek een artikel over hoe je de Magento 2 winkelwagen kunt optimaliseren op zijn plaats.

Officiële demo

Voor deze analyse hebben we ons gericht op de officiële Magento 2 demo. Uiteraard zullen hierdoor sommige bevindingen niet van toepassing zijn op jouw Magento webshop wanneer je gebruik maakt van een ander thema. We zijn echter van mening dat de meeste aanbevelingen van toepassing zijn op iedere winkelwagen, met of zonder Magento 2, en dat zij hierdoor sowieso in overweging genomen zouden moeten worden.

Findings

De NNGroup beschrijft het goed in hun artikel Guidelines for Visualizing links: “Om de waargenomen ‘affordance’ van de klikbaarheid te maximaliseren, dient de linktekst gekleurd en onderstreept te zijn. Gebruikers zouden niet moeten gokken of de pagina moeten afspeuren op zoek naar waar ze op kunnen klikken.”.

Uiteraard zijn er uitzonderingen te maken op deze regel. Denk bijvoorbeeld aan items in het hoofdmenu, of wanneer iconen of tekstkleuren zijn ingezet om duidelijk aan te geven dat een item klikbaar is. Webdesigners zouden echter het zekere voor het onzekere moeten nemen en proberen links te onderstrepen of een kleur te geven, zelfs wanneer dit niet strikt noodzakelijk is.

Nieuwsbrief inschrijving is afleidend

Het invulveld en de knop aan de rechterkant van de footer stellen je in staat je in te schrijven voor de nieuwsbrief. Hoewel dit een nuttige micro conversie op de meeste pagina’s van de website is, lijkt het niets meer dan een afleiding op de winkelwagen. Naast de product afbeelding en het aantal-items-in-de-wagen icoon trekken de twee blauwe knoppen aan de rechterkant het meeste aandacht. Zoals benoemd in het visual design artikel dient de primaire Call-To-Action knop het meest op te vallen.

Daarbij zou er geprobeerd moeten worden de aandacht ratio te optimaliseren van de pagina. Dit houdt in dat er een zo laag mogelijk aantal knoppen en links op dienen te staan die vereist zijn om bezoekers naar de volgende stap te helpen.

Er kan niet ingezoomd worden op foto’s

Wanneer een bezoeker klikte op een afbeelding wordt hij/zij naar de product pagina gebruikt. Hoewel er gesteld kan worden dat dit het beoogde resultaat is voor sommige bezoekers, vermoed ik dat velen van hen even zichzelf willen verzekeren dat ze het juiste item aan het kopen zijn. Die bezoekers zouden dan liever een ingezoomde versie van de afbeelding willen zien.

Ik zou de standaard dan ook op inzoomen instellen. Wanneer het zoomen namelijk de standaard is, dan zullen bezoekers die klikken niet uit de flow van het bestelproces gehaald worden. Hierom zullen ze niet afgeleid worden door de product pagina, en is het waarschijnlijker dat ze hun bestelproces afronden.

Jisse Reitsma - Oprichter van Yireo

Jisse Reitsma

“Een afdeling waar ik in het bijzonder op richt is gerelateerd aan laadsnelheid. Vaak hebben klanten specifieke configuraties in hun Magento checkout nodig die een negatieve impact hebben op de laadsnelheid.

Ik zorgde er dan voor dat de checkout pagina weer snel zouden inladen zodat de positieve gebruikerservaring intact bleef.”

Hoewel Bart Schutz van Online Dialogue positiever over links onder de CTA knop schrijft in zijn artikel Hobson’s+1 Choice Effect, zou ik er in dit geval tegen adviseren.

Dit is voornamelijk omdat de link de bezoeker niet alleen overlaadt, maar hen ook zal verwarren. Zij zullen zich misschien gaan afvragen of ze de normale checkout moeten gebruiken, of ‘Check Out with Multiple Addresses’. In mijn beleving valt dit meer onder ‘verwarren’ dan onder het mentaal overladen van bezoekers.

Kortingscode veld is afleidend

Zoals benoemd in diverse artikelen, waaronder GetElastic en WebsiteOptimizers kan een kortingscode (of coupon) veld webshops veel geld kosten. Niet alleen is het opnieuw een afleidende CTA, maar het moedigt bezoekers ook aan op Google te gaan zoeken naar kortingscodes wanneer ze deze nog niet hebben.

Peep Laja van ConversionXL omschrijft het goed in zijn artikel: How to Design an eCommerce Checkout Flow That Converts: “Wanneer bezoekers een ‘Vul hier je kortingscode in’ veld zien dan voelen zijn zich minder special. ‘Waarom heb ik er geen?’. Velen gaan naar Google om een kortingscode te zoeken; velen zullen nooit meer terugkeren.”

Verzendkosten en belasting zijn verborgen

Geconfronteerd worden met onverwachte kosten tijdens het afrekenproces was de nummer één reden om een winkelwagen te verlaten in een 2012 Statista onderzoek. Hierom wordt het aangeraden zo transparant mogelijk te zijn over verzendkosten en belasting.

Ik begrijp echter dat het voor bedrijf die internationaal verzenden lastig kan zijn om een goede schatting te geven van deze aantallen. Hier staat echter tegenover, dat wanneer er van degelijk visueel design gebruik gemaakt worden het goed mogelijk is om bezoekers duidelijk te maken dat het bedrag wat ze zien nog geen verzendkosten of belastingen zoals BTW bevat.

A/B test ideeën, best practices of quick wins?

Er dient opgemerkt te worden dat de bevindingen die hierboven zijn aangegeven in eerste instantie als A/B test ideeën beschouwd dienen te worden, vervolgens als best practices en past in de laatste plaats als quick wins. In andere woorden, probeer de bevindingen te valideren voor jouw doelgroep voordat je ze implementeert.

Genoeg verkeer voor A/B testen?

Indien je voldoende verkeer hebt (> 1.000 conversies per maand, een vuistregel aangeraden door Ton Wesseling) dan wil ik je een adviseren een A/B test te doen van je huidige winkelwagen, tegen eentje die de wijzigingen hierboven heeft geïmplementeerd. Indien je echter dergelijk volume aan verkeer niet hebt, overweeg dan gebruikerstesten of mouse tracking op deze twee versies van de winkelwagen om te ontdekken welke het beste presteert.


Engelse vertaling: Optimizing The Magento 2 Shopping Cart


Theo van der Zee

Auteur: Theo van der Zee

Hij is de oprichter van ConversionReview. Hij bouwt en optimaliseert inmiddels al 15+ jaar websites, en met veel succes.

Bovenop zijn digitale vaardigheden is Theo tevens een afgestudeerd psycholoog, en frequent spreker op evenementen over de hele wereld.