Meer conversies? Performance, usability en A/B tests

Met conversie-optimalisatie zetten we onze pijlers vaak nog op content, design en marketing. Wat vaak ondergesneeuwd wordt? De performance van je webshop. En dit is juist het fundament van een succesvolle conversie-optimalisatie strategie. Web performance gaat hand in hand met de snelheid van je shop. Je hebt 8 seconden om de aandacht van bezoekers te vangen en koopintenties aan te wakkeren.

Web performance refereert naar de snelheid waarmee pagina’s worden weergegeven in de browser van je gebruikers, maar ook de mate van responsiviteit en interactie. Waarom is web performance belangrijk? Jouw bezoekers hebben gemiddeld een spanningsboog van 8 seconden en deze wordt alsmaar korter (in 2000 was de aandachtspanne nog 12 seconde). Acht seconden dus. Zoveel tijd heb je om bezoekers te overtuigen.

Met alleen content die aanspreekt en een gebruiksvriendelijk design red je het niet. In ieder geval niet wanneer je web performance onder presteert. Onderzoek wijst uit dat de laadtijd van je webshop je bouncerate enorm beïnvloedt. Met een page load time van 5 seconden stijgt het bouncerate gemiddeld met 38%. Dit betekent dat ongeveer 1/3 van de bezoekers wegklikt na het zien van de pagina waar ze in eerste instantie op landen. Kijkend naar de 8 seconden van hiervoor komt dit niet als verrassing, maar het is wel verbluffend hoog.

Maar de performance van je website beïnvloedt niet alleen sterk je bouncerate, het beïnvloedt ook de usability van je webshop, de kwaliteit van sessies, je kwaliteitsscores in SEA en je posities in SEO. En deze beïnvloeden om beurt natuurlijk je conversiepercentage! Een hoge web performance is dus de start van een succesvolle conversie-optimalisatie strategie.

De invloed van development op performance

De snelheid van je webshop wordt voor het overgrote deel bepaald door development. Een taaie (onmogelijke) klus om te verbeteren wanneer je geen kennis van programmeren hebt. Maar aangeven waar winst te behalen is, dat kun je wel!

Via de Google PageSpeed Insights tool (of nog beter: Google Lighthouse) vind je manieren om je website te verbeteren. Of eigenlijk, de manieren waar development zich over kan buigen. Wat veel mensen niet weten: Google’s PageSpeed tool is een tool voor developers, die scant van waar je wel of juist niet gebruik van maakt. Een soort checklist dus en daar wordt een score aan gehangen. Een lage score betekent ruimte voor verbetering, en vice versa. De daadwerkelijke snelheid van je website meet Google’s tool niet. Wil je weten hoe snel je écht bent? Gebruik dan tools zoals Pingdom of GTmetrix.

Waar liggen kansen qua development:

• CSS critical
  CSS zorgt voor de styling van je pagina, zonder CSS komt de bezoeker op een kale, witte pagina. De performance van je website is voor een groot deel afhankelijk van je CSS. Wij raden aan om gebruik te maken van ‘critical CSS’, waarbij alleen de minimale styling ingeladen wordt. Bezoekers zien dat er ‘iets’ gebeurt en dit vergroot de perceived performance, want de pagina voelt dan aan als ‘snel’.

• Lazy en progressive loading
  Daarnaast kun je voorrang geven aan alle content boven de fold. Zo worden afbeeldingen en/of video’s onder de fold later ingeladen door middel van lazy loading. Of maak gebruik van: progressive loading. Met progressive loading wordt een afbeelding eerst in pixels weergegeven en vervolgens steeds scherper, naarmate er meer bytes worden ingeladen (alleen beschikbaar JPG-format).

• Browsercaching
  Een andere belangrijke performance indicator: browsercaching. Deze wordt vooral belangrijk bij herhaalbezoekers. Met browser caching stel je een verloopdatum in voor de content en styling van je website, waardoor content niet opnieuw geladen hoeft te worden bij een herhaalbezoek. Het aantal verzoeken richting de server neemt af en je snelheid neemt toe!

• Mobile performance
  Het aantal aankopen via mobiel wordt alsmaar hoger. We leven in een mobile-first tijdperk. Des te belangrijker wordt het om jouw web performance voor mobiel te optimaliseren. Met responsive afbeeldingen verhogen developers de laadtijd van je website, omdat afbeeldingen zo perfect aansluiten bij het device waarop de website bekeken wordt. Content wordt sneller ingeladen en dit geeft een boost aan je performance! Klein nadeel: de opslag van je webshop wordt groter omdat een afbeelding – op de achtergrond – wordt aangemaakt voor ieder device. Het is een afweging die je (samen met development) maakt.

• Bestandsruimte minimaliseren
  Bouwen is nou eenmaal leuker dan schoonmaken. Of opruimen. Datzelfde geldt voor je webshop. Maar je webshop een grote schoonmaakbeurt geven, draagt wel bij aan een betere performance. Oude (niet-gebruikte) data kan weg. Heb je plugins of extensies van andere partijen? Weeg de (performance) kosten op tegen (conversie) baten.

Developers kunnen een bezem door je webshop halen, maar jij kunt ook een handje mee helpen. Heb je afbeeldingen die je nergens gebruikt maar die nog wel op de server staan? Verwijder ze dan. Datzelfde geldt voor pagina’s die je offline hebt gezet: weg ermee.

Performance verbeteren: jouw inbreng

Developers buigen zich over backend en frontend om de performance te perfectioneren, maar jouw bijdrage als webshopeigenaar heeft ook effect. Waar jij je in vast kan bijten? Het optimaliseren van afbeeldingen op je website. Dit zijn de richtlijnen:

1. Allereerst, afbeeldingen (en video’s) in het juiste formaat en bestandstype plaatsen. Let op: een afbeelding met een transparante achtergrond, sla je op in PNG-format. Een afbeelding met achtergrond sla je altijd op als JPG. JPG is namelijk een stuk kleiner dan PNG afbeeldingen (scheelt soms de helft!). Op dit moment raadt Google steeds vaker aan om JPG-2000-format aan te houden om op snelheid te komen.

2. De bestandsgrootte minimaliseren. Dit doe je door tools, zoals Tinypng of Optimizilla, waarmee je soms wel 90% je bestandsgrootte verkleint. Hoe lager de bestandsgrootte, hoe sneller je website. Daar mag je vanuit gaan. Een grove richtlijn is 100kb per afbeelding, maar dit is natuurlijk enorm afhankelijk van het formaat van je afbeelding.

3. Slideshows en GIF’jes? Liever niet. Vaak zijn video’s kleiner. Of maak gebruik van animaties op basis van code.

Web performance: de start van meer conversies

Je conversie-optimalisatie strategie start met het verhogen van je performance, want de aandachtsspanne van bezoekers is maar kort. Je hebt geen tijd te verliezen. Trage websites scoren lager in zoekmachines, beïnvloeden SEA-scores negatief en verlagen customer engagement. Het zijn conversiekillers. Voor veel performance indicatoren ben je afhankelijk van development. Maar ook jij beïnvloedt de performance van je shop, vooral wanneer je veel content op je webshop plaatst.

Zorg dus voor een hoge web performance en zet daarna stappen naar een gebruiksvriendelijk design waardoor bezoekers moeiteloos naar het winkelwagentje weten te navigeren, en met content waardoor bezoekers naar het winkelwagentje willen navigeren.

Met consumenten die steeds veeleisender worden, is een gebruiksvriendelijk webdesign belangrijker dan ooit. Alles moet makkelijker, anders kopen ze het wel ergens anders. De usability van je website beïnvloedt dus direct je conversieratio. Waarom veel bezoekers niet converteren? Omdat twijfel toeneemt of de behoefte nog niet daar is. Maar ook omdat een account verplicht is of vanwege een lange, verwarrende checkout. Waar gaat het mis en hoe transformeer je bezoekers tot buyers? Zet in op een gebruiksvriendelijk(er) design.

Bekijk en bestudeer bijzonderheden

De gebruiksvriendelijkheid van je website wordt bepaald door hoe snel en makkelijk je bezoekers je shop gebruiken. Usability begint dus bij je users. Je wilt het ze zo gemakkelijk mogelijk maken. Daarvoor wil je eerst weten wie je target user is, en hoe deze op dit moment door je website navigeert. Onderzoek het pad wat ze bewandelen – van homepage tot categoriepagina en van productpagina naar checkout-pagina – eerst in Google Analytics. Waar is een enorme drop-off in bezoekers? Waar haken bezoekers af?

Gebruik daarna Hotjar, welke scrol- en klikgedrag analyseert, om te achterhalen waarom je bezoekers op deze pagina uitstappen. Waar let je op? Wanneer bezoekers het niet kunnen vinden wordt scrollgedrag explosiever, beweegt de muis zigzaggend heen en weer en wordt herhaaldelijk (oppervlakkig) geklikt. Is je bezoeker afgeleid? Dan blijven ze vaak met de muis op een item hangen. Onderzoek het gedrag, ga op zoek naar patronen en stel knelpunten vast. Op basis hiervan maak je een steeds gebruiksvriendelijker design.

Low hanging fruit: usability basics

Er zijn een aantal basics waar je webshop wel aan moet voldoen om de usability te waarborgen. Op nummer één: don’t make them think. Iedere pagina heeft een duidelijk doel, waardoor je bezoekers eenvoudig navigeren naar de checkout. Een logisch pad van bestellen naar betalen dus. Zonder na te denken en zonder irritaties. Met duidelijke en opvallende call-to-actions en zo min mogelijk afleidingen, stuur je ze door naar de volgende stap. Weten ze al wat ze nodig hebben? Dan is daar jouw on-site search die helpt bij het vinden van het juiste product. En natuurlijk geeft deze zoekfunctie suggesties, want zo vriendelijk ben je.

Van bestellen naar betalen versnellen

Zo min mogelijk ruimte over laten voor twijfel, doe je door het proces van bestellen tot betalen te versimpelen en te versnellen. Bijvoorbeeld met een one-step-checkout. Geen vijf stappen om een bestelling te voltooien maar alles op één pagina. Datzelfde geldt voor overbodige invulvelden. Heb je echt een bedrijfsnaam nodig? Of een ‘tussenvoegsel’ tussen voor- en achternaam? Maak gebruik van formulieren die automatisch gegevens aanvullen. En van bestellen zonder te registreren, want dat is ook een groot struikelblok voor bezoekers.

Wanneer twijfel toeslaat…

Dan zorg je dat ze een warm welkom krijgen bij een volgend bezoek! Bijvoorbeeld door het mogelijk maken van een verlanglijstje, een add-to-wishlist. Bezoekers slaan alvast een product op en kunnen later alsnog een bestelling plaatsen. Of anders met een keep-cart-alive integratie. Bezoekers zijn al een stap verder en hebben het winkelwagentje al gevuld. En dan? Twijfel slaat toe en ze verlaten je website. Met de keep-cart-alive integratie blijft de shopping cart (tijdelijk) gevuld, zodat ze bij terugkomst alsnog gemakkelijk converteren.

Betalen een makkie (met Tikkie)

Betalen moet zo makkelijk (en pijnloos) mogelijk zijn. Irritaties voorkom je door de bekende betaalopties aan te bieden. Maar het liefst wil je ook betalen versimpelen en vermakkelijken. Maar hoe? Dit kan met de Tikkie SuperSnel betalen implementatie, waarbij bezoekers in slechts één klik converteren (onze klanten profiteren hier al van!). Simpel en snel dus. Maar, gemak is ook belangrijk! Verkoop je producten die vaak geretourneerd worden? Bied dan ‘achteraf betalen’ aan. Producten bundelen? Ook dat biedt gemak. Bij aankoop van een laptop is vaak vraag naar een laptoptas. Natuurlijk niet alleen heel (gebruiks)vriendelijk van je, maar ook conversie-verhogend!

(gebruiks)vriendelijk en veelbelovend

Er is meer! Je kunt een stapje verder zetten (dan je concurrenten). Om je bezoekers het echt gemakkelijk te maken, gebruik je:

1. Een chatbot, welke de behoefte van de bezoeker buitengewoon begrijpt en bezoekers doorstuurt naar het gewenste product. De gebruiksvriendelijkheid wordt zo enorm geboost, want het is snel, gemakkelijk en laagdrempelig! Wel een vereiste: maak je bot slim. Daar hangt de mate van gebruiksvriendelijkheid van af. Je bot moet de intentie van je bezoeker goed begrijpen zodat je bezoeker direct door wordt gestuurd naar de gewenste categorie- of productpagina (en daar transformeert naar buyer!).

2. Artificial intelligence, zodat je je webshop vormgeeft op basis van de persoonlijke voorkeuren van je bezoekers. Een homepage op basis van browsegeschiedenis of een productpagina met persoonlijke voorkeuren zijn conversie-boosters! Bezoekers zijn al eerder op een productpagina geweest, de interesse is gewekt. Mogelijk hoeven ze er alleen nog aan herinnert te worden dat ze dat product willen kopen. Daar kun jij dan voor zorgen!

Meer bezoekers, meer buyers

De behoefte van consumenten wordt alsmaar groter. En de gebruiksvriendelijkheid van je website alleen maar belangrijker. Met deze usability tips verlaten steeds meer bezoekers jouw webshop als buyer. Naast usability, draagt de performance en content van je webshop bij aan meer conversies. De ene integratie of oplossing is effectiever bij de ene bezoeker of geschikt binnen een bepaalde branche. Met A/B testing en multivariate testing onderzoek je welke implementatie meer effect heeft bij jouw bezoekers. En zo transformeren je bezoekers naar buyers!

Ik denk dat activerende woorden aanzetten tot actie, je collega vindt dat schaarste resulteert in begeerte en je buurman zei laat het Euroteken weg. Allemaal best practices en dus aannames voor meer conversies, maar ze zijn niet gericht op jouw webshop met haar unieke bezoekers en context. Bovendien spraken we de vorige keer over cognitieve biases en hoe we deze inzetten om gedrag te beïnvloeden. Diezelfde biases werken tegen je: nog (te) vaak worden keuzes gebaseerd op een aanname en – in lijn met de confirmation bias – zoeken we naar argumenten die deze aanname bevestigen. Het ondernemerschap brengt al genoeg risico’s mee. Laten we keuzes baseren op keiharde data.

Je webshop als een huis

Wanneer je kijkt naar het ontwikkelen van je conversieoptimalisatie strategie, bouwen we eigenlijk een huis. De fundering is vergelijkbaar met de performance van je site. De gebruiksvriendelijkheid wordt bepaald door een logische indeling van je interieur. Maar een huis is – net zoals een webshop – nooit helemaal af. Een nieuwe aanbouw, een andere muurkleur of ander interieur. Net zoals een nieuwe productlijn, extra menu-item of een andere call-to-action kleur.

Wanneer je een webshop start begin je met de best practices, in performance, usability en content. Daarna start conversieoptimalisatie pas écht. Conversie-optimalisatie heeft geen plafond. En is daarmee vergelijkbaar met de continuïteit van het huishouden. Maar dan veel leuker! En in tegenstelling tot het huishouden, creëer je blijvend resultaat.

Stap 1. Core audience aanwijzen

Iedere schoonmaakbeurt begint met afstoffen. Bij conversie-optimalisatie is dit vaststellen wat er onder het stof schuilgaat: je ‘core audience’. En deze bevat zoveel mogelijk van onderstaande kenmerken:

• Bezoekers die je shop herhaaldelijk bezoeken;

• Bezoekers met hoge engagement (laag bouncepercentage, veel pagina’s per sessie en lange tijd per pagina);

• Converteerders (bezoekers die een doelstelling behalen).

Als je een groep vindt die alle (of meerdere) criteria omarmt, dan heb je je core audience gevonden. Deze groep ga je eerst analyseren, bijvoorbeeld met behulp van segmenten in Google Analytics.

Stap 2. Problemen identificeren

Je weet nu wie je moet onderzoeken maar waar begin je? Iedere pagina heeft een bepaald (conversie) doel. Dit kan zijn een nieuwsbriefinschrijving, whitepaper download, contactaanvraag of een daadwerkelijke transactie. Per pagina heb je dit doel bepaalt. En daar hangt een conversiemetrics (aantal conversies / aantal sessies) aan vast. Kijkend naar deze metric: welke presteert onder je verwachting? Dat is de insteek van je onderzoek.

Basics: Google Analytics en Hotjar

Met Google Analytics overzie je het bredere plaatje. Je segmenteert op je core audience, onderzoekt pagina’s met een hoge bouncerate en lage gemiddelde tijd per pagina, bekijkt de funnel van conversie (waar haken de meeste bezoekers af?) en analyseert welke productpagina’s ondermaats presteren.

Daarna zet je een stap verder naar kwalitatieve data: hoe gebruiken bezoekers je website écht? Onderzoek wijst uit dat je muis meebeweegt in de richting waar je heen kijkt. Hotjar trackt de muis van je bezoekers (en is te koppelen met je Magento platform!). Hierdoor begrijp je wat bezoekers willen en waar ze om geven op je site door klik- en scrollgedrag te analyseren. Zo wordt een niet-werkende link direct zichtbaar. Datzelfde geldt voor frustratie, welke gekenmerkt wordt door snelle zigzaggende bewegingen en oppervlakkig geklik.

Beide tools zijn gratis te gebruiken en door eerst kwantitatief onderzoek te verrichten, weet je direct waar de focus ligt voor het kwalitatieve (en tijdsintensieve) onderzoek met Hotjar.

Intermediate: duik dieper in data

Niet alle problemen zijn vast te stellen via Google Analytics en Hotjar. Soms wil je gericht onderzoek doen of zelfs feedback ontvangen van je individuen. Hiervoor gebruik je:

• Eyetracking, waarbij (in tegenstelling tot Hotjar) kijkgedrag écht gemeten wordt met behulp van een eyetracking-bril. Je ziet nauwkeurig waar gebruikers zich op focussen en voor hoe lang. Dit maakt de data erg betrouwbaar! Wel is het onderzoek moeilijker uit te voeren aangezien participanten op locatie moeten komen, waardoor ze weten ze dat ze deelnemen aan een onderzoek. Hierdoor neemt de validiteit – wat je beoogt te meten – af.

• Enquêtes, waarbij je met behulp van een pop-up vragen stelt aan je bezoekers. Bijvoorbeeld middels een vragenlijst of poll. Voordeel: eenvoudig te implementeren (met gebruik van Hotjar) en wat je wilt weten, daar kun je gericht naar vragen. Nadeel: veel non-response.

• User testing, waarbij gebruikers door je website navigeren en hardop vertellen wat opvalt en wat wel/niet fijn in gebruik is. Participanten zijn zich in deze onderzoeksmethode bewust van deelname waardoor ze zich (onbewust) anders kunnen gedragen. Bovendien wordt vaak vergeten hardop te blijven praten. Het voordeel is wel dat je door kunt vragen nadat een opmerking gegeven is.

PIE model voor prioriteit

Op basis van bovenstaande tools en manieren heb je de nodige knelpunten gevonden. Maar wat krijgt prioriteit? Daar gebruik je het PIE-model voor.

• Potential: zeer lage impact op conversie = 0, hoge impact = 10;

• Importance: pagina’s met weinig traffic = 0, pagina’s met veel traffic = 10;

• Ease: moeilijk te implementeren = 0, makkelijk te implementeren = 10.

Ieder knelpunt beoordeel je op de drie factoren, van 0 tot 10. Degene met de hoogste score krijgt prioriteit.

Stap 3. Verwachting vaststellen

Op basis van jouw vooronderzoek, formuleer je een hypothese. Bijvoorbeeld:

• Tekst onder de afreken-button zorgt voor meer conversies.

• Het Euroteken weghalen leidt tot meer conversies.

• Bestellen zonder aanmelden zorgt voor een stijging in conversies.

• Een video op de productpagina boost conversies van dat product.

Stap 4. A/B testen en multivariate analyses

En nu het leukste werk! Eens kijken of jouw mening, de gedachte van je collega of aanname van je buurman klopt, we gaan de hypothese testen. Eerst stel je een nulmeting vast, de status van dit moment. Zo zie je vervolgens hoe de aanpassing je conversieratio beïnvloedt.

De meest gebruikte (en misschien ook de makkelijkste methode) is A/B testen. Je maakt, op basis van je hypothese, een variant A en variant B (controlegroep) van een specifieke pagina en gebruikers worden random verdeeld over de twee situaties. Heb je meer varianten? Dan gebruik je multivariate analyses waarmee je naar meerdere variaties onderzoek doet.

Hoeveel data heb je nodig? Om een statistische analyse dien je een bepaald aantal bezoekers op je website te hebben. Deze bereken je vrij simpel op basis van het conversieratio van je controlegroep, de grootte van het effect wat je verwacht (verwacht je een groot effect? Dan heb je minder bezoekers nodig), en de statische significantie, welke doorgaans 95% is.

Je kunt periodes vergelijken met behulp van Google Analytics, maar veel liever wil je een onderzoek op hetzelfde moment laten plaatsvinden. Anders zijn er te veel variabelen die je effect beïnvloeden, zoals een feestdag. Er zijn veel tools beschikbaar die het leven makkelijker maken. Komen ze:

1. VWO: maak een account aan en test je hypotheses door verschillende varianten toe te voegen in VWO. Daarna plaats je de smart code in je HTML en test je je hypothese.

2. Google Optimize: installeer de Google Optimize extensie in Chrome en voeg de code toe aan je website. Daarna kun je A/B en multivariate testen en je hypothese bevestigen of weerleggen.

3. Unbounce: met Unbounce leg je als het ware een laag over je pagina heen. In die laag maak een variant of meerdere versies aan, waar je vervolgens je hypothese mee A/B of multivariate test.

4. Optimizely: voor A/B-test, funnel test en personalisatie oplossingen. Na een eenmalige tag in je code, kun je direct aan de slag!

Stap 5. Implementatie voor meer conversie

Bovenstaande tools wijzen uit welke variant (significant) beter presteert dan de controlegroep of andere varianten. Significant resultaat? Nice! Dan kun je de aanpassing in je webshop implementeren. Natuurlijk is het goed om na implementatie – vooral bij een grote aanpassing – het conversieratio te evalueren na een bepaalde periode. Ook leuk om die stijging bij te houden, en te laten zien aan je collega’s of buurman ;-).

Je webshop als een villa

Zorg voor begeerte, minder afleiding is meer afzet en het ontbreken van een Euroteken verhoogt het aantal aankopen. Dit zijn eigenlijk nog maar aannames totdat je ze test in je eigen webshop, met jouw unieke bezoekers en context. Pas dan weet je wat wel werkt en juist niet voor jouw webshop. Dan staat jouw webshop niet meer als een huis, maar als een voortreffelijke villa. En genereer je meer conversies met evenveel bezoekers.

Nu je web performance hoog is en de usability goed is, test je de nieuwe aannames (van je buurman, collega of jezelf). Zo verminder je (confirmation) bias en verhoog je het aantal conversies.