Websites Optimaliseren Voor Tablets

Hoewel de tablet tegenwoordig door een aanzienlijk deel van de bezoekers op de meeste sites wordt gebruikt, lijkt deze helaas grotendeels genegeerd te worden qua website optimalisatie.

Hoe definieer je een 'tablet'?

Het definiëren van wat een tablet is, wordt steeds moeilijker. Nog niet zo lang geleden konden we een tablet simpelweg definiëren als "een aanraakgevoelig mobiel apparaat met een scherm dat groter is dan een smartphone, maar ook kleiner dan een desktop- of laptopcomputer".

Deze definitie houdt echter geen nauwkeurige rekening met recente ontwikkelingen in mobiele technologie. Apparaten zoals de Surface van Microsoft en de iPad Pro zijn nu bijvoorbeeld uitgerust met schermen van desktopformaat en worden 'detachables' genoemd. Dan is er ook de opkomst van de 'phablets', die Centaur-achtige wezens lijken te zijn die tegelijkertijd als telefoon en tablet worden beschouwd.

Met al deze hybriden die de markt overspoelen, is het niet toekomstbestendig om de tablet qua grootte te vergelijken met andere apparaatgroepen. Daarom definiëren we een tablet simpelweg als "een aanraakgevoelig mobiel apparaat met een middelgroot tot groot scherm".

Hoe verhouden tablets zich tot desktop en mobiel?

Marktaandeel

Het marktaandeel van tabletgebruikers nam tot 2014 gestaag toe en is sindsdien langzaam aan het dalen. De voorspellingen over de toekomst van de tablet zijn divers. Sommige onderzoeken stellen namelijk dat de tablet langzaamaan een steeds serieuzere concurrent voor de desktop en tablet computer begint te worden. Andere onderzoeken wijzen echter op de eerdergenoemde dalende trend over de jaren.

Conversie ratio's

Het kwartaalrapport van Monetate Ecommerce toont de conversieratio's per apparaatgroep. Hun meest recente cijfers laten zien dat traditionele (desktop) apparaten wereldwijd een gemiddelde conversieratio hebben van 3,30%, tablets 3,82% en mobiele telefoons 1,99%.

Zoals het rapport laat zien, zijn de conversieratio's voor tablets soortgelijk als die van traditionele apparaten. Momenteel zijn er echter maar een paar goede bronnen beschikbaar over conversie-optimalisatie specifiek voor tablets, terwijl ze er in overvloed zijn voor desktopoptimalisatie. Wanneer de tabletgebruiker na verloop van tijd serieuzer wordt behandeld, dan zullen de conversieratio's van gebruikers op tablets mogelijk nog verder toenemen.

Gegevens in Google Analytics

Je kunt Google Analytics gebruiken om meer te weten te komen over de conversieratio's van de tablet-, mobiele en desktopgebruikers op je website. Ga hiervoor naar het rapport: Doelgroep > Mobiel > Overzicht.

Scherm grootte

Moderne tablets (die volgens onze definitie ook phablets en detachables bevatten) variëren in schermgrootte van 600 x 1024 tot 1024 x 1366 pixels. Houd er rekening mee dat sommige apparaten mogelijk hogere schermformaten rapporteren, maar dat zijn meestal apparaten met een pixeldichtheid van meer dan 1.

Gegevens in Google Analytics

Als je nieuwsgierig bent naar de populairste tabletschermformaten voor je website, ga je naar Google Analytics om erachter te komen. De gegevens zijn te vinden in het rapport: Doelgroep > Mobiel > Apparaten > Primaire dimensie > Overige > Schermresoluties.

Houd er echter rekening mee dat de variatie in tabletschermformaten sterk varieert. Daarom moet je er waar mogelijk voor zorgen dat je website is geoptimaliseerd (of op zijn minst goed functioneert) op elke schermresolutie, van de kleinste Apple Watch tot de grootste flatscreen-tv.

Hoe gebruiken mensen tablets?

Locatie

Statistieken over tabletgebruik geven een algemeen inzicht in waar mensen tablets gebruiken. Uit de gegevens blijkt bijvoorbeeld dat de meeste respondenten de tablet in hun eigen huis gebruiken. Thuis is de woonkamer de meest populaire plek om de tablet te gebruiken (72%), gevolgd door de slaapkamer (63%) en de keuken (40%). Alleen het restaurant (30%) en de algemene categorie 'Op reis' (48%) komen in de buurt van het percentage tabletgebruikers thuis.

Verbinding

Wanneer je het hoge niveau van wifi-aanwezigheid in huizen combineert met de gegevens over waar tablets het meest worden gebruikt, kunnen we concluderen dat de meeste tabletgebruikers (zelfs degenen die 3G-, 4G- of 5G-tablets hebben) websites voornamelijk bezoeken via een wifi-verbinding.

Tijdstip

Enkele jaren terug presenteerden onderzoekers van Microsoft hun bevindingen van een onderzoek naar zoekgedrag van gebruikers op mobiele apparaten. Als onderdeel van hun onderzoek hielden ze bij welke apparaatgroep werd gebruikt om toegang te krijgen tot de zoekmachine. Zoals de afbeelding laat zien, bleef het tabletverkeer de hele dag redelijk stabiel, het vertoont een piek rond etenstijd, waarna het snel keldert. Als je dit vergelijkt met de gegevens op desktop en mobiele apparaten, bevestigt dit de eerdere bevindingen dat tablets meestal thuis worden gebruikt, en meer specifiek in de woonkamer, gevolgd door de slaapkamer.

Hoe optimaliseer je een website voor tablets?

Responsive design

Deze beweging heeft het internet intussen veroverd. Rond 2008 begonnen websites met een responsief ontwerp mediaquery's te gebruiken om de weergave van hun inhoud aan te passen aan de grootte van het scherm waarop deze wordt weergegeven. Mobiele bezoekers kregen een gericht ontwerp met één kolom, geoptimaliseerd voor een klein scherm. Desktopgebruikers kregen daarentegen een rijkere ervaring, die het best geschikt was voor veel beschikbare pixels.

Desktop versie

Helaas voor de tabletgebruikers werd hun tabletomgeving niet volledig begrepen noch misbruikt, en kregen ze in plaats daarvan vaak een opgeschaalde versie van de mobiele website. Het lijkt er echter op dat dit niet de optimale oplossing was voor zowel de bezoekers als de website-eigenaren. Grote delen van hun scherm waren immers ongebruikt en mogelijke nuttige elementen waren verborgen vanwege het op mobiele apparaten gebaseerde interfaceontwerp. Dus als je organisatie niet klaar of bereid is om tablets (van alle formaten!) als prioriteit op te nemen, zorg er dan voor dat je tabletbezoekers de desktopversie van je website presenteert. Zowel een artikel van Google als een casestudy van het VWO bevestigen dat dit voorlopig de beste manier is om te gaan.

Tools

Fysieke tablets

De belangrijkste tools in je toolbox zouden fysieke versies moeten zijn van de meest populaire tablets die bezoekers gebruiken om op je website te surfen. Door je website op deze apparaten te testen, kunt je er zeker van zijn dat je de gebruikerservaring van je bezoekers zo goed mogelijk nabootst.

Foutopsporing op afstand

Als je bezig bent met het verbeteren van je website (of bijvoorbeeld het opzetten van een A/B test), kan het vaak nuttig zijn om elementen live op je tablet te inspecteren. Door een techniek te gebruiken die debugging op afstand wordt genoemd, kun je elementen op je fysieke tablets inspecteren, net als op je desktopcomputer.

Google Chrome Developer Console

Met de Google Chrome-browser kunt je een mobiele of tabletweergave van je website emuleren. De ontwikkelaarsconsole is toegankelijk via cmd-shift-c gevolgd door cmd-shift-m (Mac) of F12 gevolgd door ctrl-shift-m (PC). Met deze Toggle-apparaatmodus kunt je een breed scala aan apparaten emuleren, waaronder populaire modellen van de iPad en verschillende Android-tablets.

User recordings

Door user recordings van je tabletbezoekers te bekijken (met een tools zoals Hotjar), kunt je zien hoe ze op je website navigeren. Kunnen ze je navigatie gebruiken? Is de winkelwagen goed ontworpen voor mobiel gebruik?

Praktische tips voor tabletwebsites

Fix CSS hover

Een veelvoorkomend probleem voor tabletgebruikers is dat ze moeten dubbeltikken op een link om naar de pagina te navigeren waarnaar deze linkt. Helaas weten de meeste mensen niet dat ze moeten dubbeltikken en zullen ze hun inspanningen staken na de eerste 'mislukte' tik. Het probleem wordt in dit artikel beschreven. Daar wordt het beschreven als gerelateerd aan het ontbreken van een muis om op een tablet te zweven, en Apple dat dit probleem probeert op te lossen door de eerste klik op een element te maken dat de gerelateerde :hover class in CSS activeert.

Gebruik geen Flash

In het verleden was Flash een van de beste opties om animatie of interactie aan een website toe te voegen. Momenteel is Flash-technologie met oplossingen zoals jQuery, HTML5 en CSS-animaties gedaald in gebruiksstatistieken. Deze verandering werd verder gekatalyseerd door de release van de iPhone en iPad met het iOS-besturingssysteem (dat geen Flash ondersteunt). Aangezien de iPad nog steeds een marktaandeel van ongeveer 50% heeft op de tabletmarkt, zorgt het gebruik van Flash voor elke kritieke taak er in feite voor dat 1/2e van je tabletbezoekers niet converteren.

Open geen nieuwe tabbladen

Zoals uiteengezet in dit artikel over target="_ blank", zijn er een paar goede redenen om automatisch links in nieuwe tabbladen te openen. In de praktijk kunnen de meeste geldige toepassingen die in het artikel worden genoemd, ook worden opgelost met inline pop-ups, waardoor de noodzaak om nieuwe tabbladen te openen bijna volledig wordt geëlimineerd.

Test landschap en portret

Websites die op tablets worden weergegeven, moeten in beide oriëntaties worden getest: liggend en staand. Omdat het aantal beschikbare pixels in de schermbreedte sterk verschilt tussen deze oriëntaties, kan het zijn dat websites vaak grote witruimte hebben of rommelig zijn. Houd er rekening mee dat zelfs het proces van het wisselen van stand (de tablet omdraaien) problemen kan veroorzaken op sommige websites, zorg ervoor dat dit niet het geval is op de jouwe.

Test alle schermformaten

Naast het testen van beide oriëntaties, moet je ervoor zorgen dat je jouw website test op alle tabletschermformaten. Helaas nemen de meeste websites genoegen met testen voor alleen de meest populaire modellen van Apple of Samsung. Hoewel dit nu misschien een effectieve oplossing lijkt, met de snelheid dat er nieuwe apparaten worden uitgebracht, zal dit waarschijnlijk betekenen dat ze hun website in de nabije toekomst opnieuw zullen moeten aanpassen of optimaliseren.

Test je menu

Je navigatie juist op een tablet krijgen kan moeilijk zijn. Het omvat een evenwicht tussen de behoeften van je gebruikers om snel naar een pagina te navigeren, met de beperkte schermruimte die beschikbaar is voor een menu. Zoals blijkt uit de gebruikersinterface van deze Tablet U| | Navigation op Pinterest, zijn er tal van manieren om dit aan te vliegen. Welke oplossing je ook kiest, zorg ervoor dat je gebruikerstests en user recordings uitvoert om te zien of tabletgebruikers je menu kunnen vinden en gebruiken zoals bedoeld.

Test een hoge pixeldichtheid

Veel moderne tablets hebben schermen met een pixeldichtheid van meer dan 1. Deze schermen worden ook wel Retina-schermen genoemd. Omdat op deze schermen afbeeldingen scherper kunnen worden weergegeven, kunnen ze ook afbeeldingen markeren die niet voor hen zijn geoptimaliseerd. Om je productafbeeldingen er op hun best uit te laten zien op een retinascherm, moet je dus eerst jouw website testen en waar mogelijk verbeteren. Zorg er ook voor dat je bijvoorbeeld SVG iconen gebruikt, zodat ze er bij elke resolutie of pixeldichtheid scherp uitzien.

Optimaliseer je formulieren

Formulieren zijn een belangrijk onderdeel van je website. Ze dienen als poortwachter tussen een bezoeker en een klant. Voor wat betreft het optimaliseren van formulieren voor tablets, zijn de belangrijkste aspecten om in de gaten te houden autocorrectie, HTML5-formuliertypen en het weergeven van formuliervelden in een formaat dat groot genoeg is om op te tikken.

Vergroot het formaat van je knoppen

Het kan veel moeilijker zijn om nauwkeurig met een vinger op een element te klikken in vergelijking met een muis. Daarom is het raadzaam om de grootte van klikbare elementen op je website te vergroten. Hierdoor kunnen gebruikers van alle apparaten gemakkelijker op je knoppen klikken of tikken. De aanbevolen grootte voor elementen waarop geklikt dient te worden is ten minste 44 x 44 pixels, met bonuspunten voor een goede hoeveelheid witruimte rond de elementen.

Luke Wreblowski - Product Director bij Google

"Mensen communiceren met op aanraking gebaseerde gebruikersinterfaces met hun vingers. De bedieningselementen van de gebruikersinterface moeten dus groot genoeg zijn om vingertopacties vast te leggen zonder gebruikers te frustreren met foutieve acties en kleine doelen."

Vergroot je lettergrootte

Om tekst leesbaar te houden voor alle bezoekers, moet de lettergrootte groot genoeg zijn. Dit geldt met name voor mobiele apparaten, die meestal kleinere schermen hebben dan desktopmonitors of laptopschermen. Zorg er daarom bij het ontwikkelen van je website voor (of het gebruik van mediaquery's om deze te optimaliseren voor tablets) een lettergrootte van 16 pixels of meer te kiezen. Dat zorgt voor een goede leesbaarheid en zal daarom hoogstwaarschijnlijk positief bijdragen aan je conversieratio.

Voeg 'E-mail winkelwagen' toe

Het converteren van bezoekers op mobiele apparaten kan nog steeds een moeilijke taak zijn, wat de lagere conversieratio's op deze apparaten zou kunnen verklaren. Daarom kan het verstandig zijn om functies zoals 'E-mail winkelwagen' toe te voegen aan je checkout. Hierdoor kunnen bezoekers die bereid zijn, maar niet gemakkelijk in staat zijn, om hun items te kopen om dit te doen op het apparaat van hun keuze (dat is vaak de desktopcomputer).

Pas metatags aan

Er zijn verschillende metatags beschikbaar om de mobiele ervaring verder te optimaliseren. Zo is er bijvoorbeeld de metatag 'viewport' die aspecten zoals de breedte en initiële schaal van het scherm bestuurt. Met andere metatags zoals 'apple-touch-icon' en 'apple-mobile-web-app-status-bar-style' kun je de ervaring op de iPad nog verder aanpassen.

Conclusie

Ook al hebben tablets het laagste weergavedeel van desktop- en mobiele apparaten, ze bieden nog steeds een belangrijke mogelijkheid voor conversie-optimalisatie. Door de bovenstaande richtlijnen en best practices te volgen, kunnen tablets een nog belangrijkere aanjager van conversies op je website of webshop worden.