Browsertest – in 9 stappen alle browserproblemen opgespoord!

Weet jij welke browsers jouw websitebezoekers gebruiken? Weet jij in welke browsers jouw website slecht presteert? Maar nog belangrijker: weet jij WAAROM jouw website slecht presteert in deze browsers? Na het lezen van dit artikel weet je precies hoe je op basis van je data uit Google Analytics kunt bepalen welke browsers, browserversies en browserformaten problemen opleveren. Daarnaast laat ik je zien hoe je met een browsertest erachter komt wat problemen veroorzaakt. Ben je klaar om jouw website flink onder de loep te nemen? Lees dan verder. 

Allereerst duiken we in Google Analytics voor een grondige data-analyse. Zo kunnen we precies in kaart brengen met welke browsers, browserversies en browserformaten jouw website wordt gebruikt en waar de problemen ontstaan. Weet je al precies welke browsers, browserversies, browserformaten en pagina’s je wilt gaan testen? Verspil dan geen tijd en ga direct door naar stap 7.

Stap 1: verschillende apparaten vragen om een verschillende analyse.

Een mobiele gebruiker gedraagt zich anders dan een desktop gebruiker. Daarom is het belangrijk de data van deze verschillende gebruikersgroepen apart te analyseren. Dit doe je door voor desktop-, mobiele- en eventueel (als het genoeg gebruikers zijn) tabletgebruikers, aparte segmenten te gebruiken.

Laten we beginnen met desktopgebruikers. Klik hiervoor op Segment toevoegen in het Google Analytics.

segment toevoegen

Zoek vervolgens op ‘desktop’ en vink een van de Desktop verkeer segmenten aan. Klik daarna op toepassen.

Desktop verkeer browsertest

Nu hoef je alleen nog het Alle gebruikers- segment te verwijderen om alleen maar het desktopverkeer te zien.

Alle gebruikers verwijderen

Stap 2: welke browsers worden veel gebruikt?

We gaan nu kijken in welke browsers jouw website vaak wordt bekeken. Ga hiervoor onder Doelgroep naar het browser en besturingssysteem-rapport. Klik vervolgens op het vergelijkingsicoontje en selecteer Bouncepercentage in de dropdown.

vergelijkingen in browsertest

Je ziet nu in een overzicht wat de meest gebruikte browsers waarin je website ondergemiddeld presteert. Om een goed beeld te vormen van de prestaties, kan het ook slim zijn om naast het bouncepercentage te kijken naar het Conversieratio van e-commerce, het Doelconversieratio, het aantal Pagina’s per sessie of de Sessieduur.

Stap 3: welke browserversies zorgen voor problemen?

We gaan nu een stap dieper door de browserversies onder de loep te nemen.

Klik op een van de browsers die veel wordt gebruikt. Je krijgt nu een overzicht van alle browserversies en je ziet zo perfect welke versies voor problemen zorgen. Het is belangrijk dat je ook de browsers bekijkt die bovengemiddeld presteren, want ook daar kun je versies vinden die problemen veroorzaken.

In dit voorbeeld zien we dat Safari versie 7.0.3 vrij veel wordt gebruikt en duidelijk voor slechte resultaten zorgt. Dit is dus zeker een browserversie die we moeten meenemen in de browsertest.

Browsertest versie

Bekijk zo alle versies van de browsers die veel gebruikt worden. Zet alle browserversies die veel gebruikt worden en slechte prestaties opleveren op deze lijst voor de browsertest. Voeg voor de onderbouwing ook een screenshot van het Google Analytics rapport toe. (Bij het gebruiken van de lijst, graag een kopie maken om je eigen data in te vullen.)

Stap 4: zijn er specifieke pagina’s waar problemen ontstaan?

Het kan zijn dat er bepaalde pagina’s zijn waar problemen ontstaan. Om dit te onderzoeken voeg je de secundaire dimensie Uitstappagina toe.

Secundaire uitstappagina browsertest

Nu zie je exact welke pagina’s in welke browserversies veel verkeer krijgen en een hoge bouncerate hebben.

Browsertest hoge bouncerate

Breng zo alle pagina’s van slecht presterende browserversies in kaart. Plaats vervolgens alle pagina’s met veel verkeer en opvallend hoge bouncepercentages op je lijst voor de browser test. Doe dit door voor elke pagina deze punten in te vullen:

  • Apparaat
  • Browserversie
  • Aantal gebruikers
  • Pagina

Maak ook hier een screenshot van het Google Analytics rapport en voeg deze toe aan de lijst.

Stap 5: zijn er bepaalde browserformaten die zorgen voor ondergemiddelde prestaties?

Specifieke browserformaten kunnen problemen veroorzaken. Om in kaart te brengen welke specifieke formaten problemen kunnen veroorzaken, gaan we terug naar het overzicht van stap 3. Voeg vervolgens de secundaire dimensie Browserformaat toe. Nu kun je precies zien welke browserformaten in welke browserversies zorgen voor bovengemiddelde bouncepercentages.

Browsertest: welke browserformaten zorgen voor bovengemiddelde bouncepercentages?

Doe dit voor alle browsers met veel verkeer. Vul je lijst aan met de combinaties van browserversies en browserformaten die bovengemiddeld hoge bouncerates hebben. Vul voor alle combinaties deze punten in:

  • Apparaat
  • Browserversie
  • Browserformaat
  • Aantal gebruikers
  • Pagina

Stap 6: de belangrijkste pagina’s.

Het is nu nog belangrijk om de lijst voor de browsertest aan te vullen met de volgende pagina’s:

  • Pagina’s met veel verkeer. Hoe meer verkeer een pagina heeft, hoe groter de invloed kan zijn van een probleem en de uiteindelijke oplossing. In Google Analytics kun je hier precies zien welke pagina’s goed worden bezocht: Gedrag > Alle pagina’s.Browsertest gedrag op alle pagina's
  • Alle pagina’s uit je salesfunnel die bijdragen aan de conversies.
    Dit kunnen allerlei pagina’s zijn, bijvoorbeeld een productpagina, winkelwagenpagina of offertepagina. Als je Analytics account perfect staat ingesteld, dan kun je onder Conversies een Trechterweergave bekijken. Hier zie je alle pagina’s uit je funnel. Daarnaast zie je precies hoeveel mensen er uitstappen bij welke pagina.
    Browsertest Trechterweergave

Als je geen Trechterweergave hebt ingesteld, dan kun je ook de belangrijke pagina’s in kaart brengen door zelf een bestelproces te doorlopen.

Deze belangrijke pagina’s ga je testen met alle browserversies die je in stap 3 hebt verzameld. Noteer daarom samen met deze browserversies van elke belangrijke pagina de volgende punten:

  • Apparaat
  • Browserversies
  • Aantal gebruikers
  • Pagina

Stap 7: doe dezelfde analyses voor mobiele gebruikers.

Nu alle desktopdata is geanalyseerd, moet de mobiele data worden geanalyseerd. Doorloop hiervoor opnieuw stap 1 tot en met 6. Nadat je dit hebt gedaan, is je lijst voor de browsertest klaar!

Stap 8: kies een tool.

Voor de browsertest heb je verschillende betaalde en onbetaalde tools. We hebben de belangrijkste tools met elkaar vergeleken, zodat jij kunt beslissen welke het beste voor jou is:

  Inte

ractief testen mogelijk?

Kosten Mobile testing Verschillende Browser-formaten Browserversies Overige opmerkingen
Browsershots Nee Gratis Nee Ja +++
(geen IE of mobile browsers)
NetRenderer Nee Gratis Nee Nee + (alleen maar IE) Erg eenvoudig
Browser Sandbox Nee Gratis – $ 19 per maand Nee Nee ++ (geen Safari en geen mobiele browsers)
Browserling Ja Gratis – $29 per maand Ja Ja ++++
(Geen iOS)
Is niet erg gebruiksvriendelijk
Saucelabs Ja $ 19 – 298 per maand Ja Ja +++++ Erg gebruiksvriendelijk.
Is ook geschikt voor geautomatiseerd testen.
CrossBrowserTesting Ja $ 29 – 100 per maand Ja Ja +++++ Erg gebruiksvriendelijk
Browserstack Ja $ 29 – 149 per maand Ja Ja +++++ Erg gebruiksvriendelijk
TestingBot Ja $ 20 – 399 per maand Ja Ja +++++
Browseemall Ja $ 129 – 199 voor lifetime licentie, $ 69 – 99 per jaar voor updates. Ja Ja ++++ (nadeel is dat alleen Safari 10 beschikbaar is en geen oudere versies)
Multibrowser Ja $ 149 voor een lifetime licentie, $ 149 per jaar voor een update. Ja Ja ++++ (nadeel is dat Safari helemaal niet beschikbaar is) Is niet erg gebruiksvriendelijk

 

Het is aan jou om op basis van jouw voorkeuren en budget een keuze te maken voor een tool. We raden je wel sterk aan om interactieve tests uit te voeren om deze redenen:

  • Een website is een medium dat je gebruikt, niet iets waar je naar kijkt. Interactieproblemen komen daarom alleen naar voren als interacteert met de website.
  • Veel screenshots tonen alleen het gedeelte van de pagina boven de vouw, waardoor je veel problemen niet kunt opsporen.

Stap 9: doe de browsertest!

Nu hebben we alle voorbereidingen gedaan voor het echte werk: de browsertest. Doorloop daarvoor de volgende stappen:

  1. Open een pagina die je wilt testen in een browser waarin de website goed werkt.
  2. Open daarnaast dezelfde pagina in de browserversie of in het browserformaat waarin je de pagina wilt testen.
  3. Plaats deze twee verschillende browsers naast elkaar op een groot scherm of op twee schermen.
  4. Test beide browsers nu door eerst alle visuele elementen te vergelijken en zo te zien of hier fouten in zitten.
Browsertest interactieve elementen
oude browser vs. nieuwe browser

Klik vervolgens een element aan in de oude browser en hetzelfde element in de nieuwe browser. Zo kun je testen of de interactieve elementen correct reageren in de oudere browser. Doe dit voor alle interactieve elementen.

Werk op deze manier je hele testlijst af.

Breng de problemen goed in kaart

Het is belangrijk om de problemen die je tegenkomt goed in kaart te brengen. Vul hiervoor deze spreadsheet in waarin je per issue het volgende beschrijft:

  • Het probleem: beschrijf het probleem kort en bondig.
  • De pagina: geef aan om welke pagina het gaat.
  • Het device: op welk apparaat of op welke apparaten komt het probleem naar voren?
  • De oplossing: beschrijf wat volgens jou de oplossing van het probleem is.
  • Het doel: wat is het doel van het oplossen van het probleem? Zorgt dit voor een verbetering van de usability of ga je meer producten verkopen?

Prioriteer de issues

Je hebt nu alle problemen in kaart gebracht. Samen met de oplossingen die je hebt beschreven, ben je klaar om je site naar een hoger niveau te tillen. De vraag is nu nog: welk probleem pak je het eerst aan? Dit doe je niet op basis van je onderbuikgevoel maar met behulp van het PIE-Framework.

  • Potential: wat is volgens jou de geschatte impact van de oplossing op het beoogde doel?
  • Importance: in hoeverre kan deze aanpassing bijdragen aan het beoogde doel in vergelijking met de rest van de pagina’s?
  • Ease: hoe makkelijk is het om dit probleem op te lossen? Hoeveel geld en tijd zal het kosten om dit issue te verhelpen?

Wat doe je als je geen probleem kunt vinden?

Als je geen problemen kunt vinden die browser-gerelateerd zijn, maar wel ziet dat de website onderpresteert, ligt het probleem ergens anders. Wellicht is de website over het algemeen erg traag of is deze niet gebruiksvriendelijk. Wat je wel weet, is dat het niet aan het uiterlijk en de interactiviteit van de website ligt in de betreffende browserversie of in dit browserformaat. Daardoor kun je in ieder geval deze factor uitsluiten.

Conclusie

Je weet nu precies hoe je een op data gebaseerde lijst kunt maken voor je browser test. Daarnaast weet je hoe je met deze lijst jouw website kunt testen om zo browser gerelateerde problemen op te sporen. Tenslotte heb je geleerd hoe je de problemen die je tegenkomt documenteert en prioriteert. Daardoor heb je nu nieuwe kennis in huis om jouw website naar een hoger niveau te tillen en meer conversies binnen te halen.

Mocht je nog vragen of opmerkingen hebben, neem dan gerust contact met ons op of laat een reactie achter onder mijn blog. We helpen je graag om jouw website gebruiksvriendelijker te maken en je conversieratio te laten stijgen.

Bronnen

https://pixabay.com/nl/laptop-computer-browser-onderzoek-2562325/

https://www.widerfunnel.com/how-to-prioritize-conversion-rate-optimization-tests-using-pie/