Als u ooit de waarschuwing 'Tapdoelen hebben niet de juiste afmetingen' van Google PageSpeed Insights , bent u niet de enige. Dit probleem betekent dat uw links, knoppen of andere klikbare elementen te klein of te dicht bij elkaar zijn, waardoor gebruikers er moeilijk op kunnen tikken, vooral op mobiele apparaten. Het kan de bruikbaarheid van uw site schaden en uw mobielvriendelijke score beïnvloeden.
Gelukkig is het mogelijk om het te repareren. U moet de grootte van uw tikdoelen aanpassen en wat afstand ertussen toevoegen. Dit helpt niet alleen bij de mobielvriendelijkheidstests van Google, maar verbetert ook de algehele ervaring voor bezoekers op alle apparaten . Laten we enkele eenvoudige manieren bekijken om dit op te lossen.
Wat is het probleem met de paginasnelheid 'Tikdoelen hebben niet de juiste afmetingen'?
Het PageSpeed-probleem 'Tapdoelen hebben niet de juiste afmetingen' is een veelvoorkomend probleem dat de gebruikerservaring van websites beïnvloedt, vooral op mobiele apparaten. Dit probleem doet zich voor wanneer interactieve elementen op een webpagina, zoals knoppen, koppelingen en formulierinvoer (gezamenlijk bekend als 'tikdoelen'), te klein of te dicht bij elkaar zijn om gemakkelijk en nauwkeurig met een vinger op een touchscreen-apparaat te kunnen tikken. Een manier om dit probleem op te lossen is door diensten voor optimalisatie van de sitesnelheid .
Bij WordPress-ontwerp is het van cruciaal belang om rekening te houden met de verschillende schermformaten en invoermethoden die door bezoekers worden gebruikt. Terwijl een desktopgebruiker met een muis gemakkelijk op kleine of dicht bij elkaar geplaatste elementen kan klikken, vertrouwen mobiele gebruikers op hun vingers, die minder nauwkeurig zijn. De waarschuwing ‘Tapdoelen hebben niet de juiste afmetingen’ geeft aan dat de pagina -indeling voor mobiele gebruikers moeilijk kan zijn om effectief te navigeren en ermee te communiceren.
Waarom small tap-doelen tot frustratie en verloren conversies leiden
Voor mobiele gebruikers kunnen kleine of drukke tikdoelen aanzienlijke bruikbaarheidsproblemen veroorzaken. Wanneer interactieve elementen moeilijk te gebruiken zijn, kunnen gebruikers per ongeluk op de verkeerde knop klikken, moeite hebben om de gewenste optie te selecteren of moeten ze inzoomen om met de pagina te communiceren. Deze frustraties kunnen resulteren in een verslechterde gebruikerservaring, hogere bouncepercentages en verloren conversies.
PageSpeed Insights van Google signaleert dit probleem omdat mobielvriendelijkheid van cruciaal belang is. Omdat het merendeel van het webverkeer afkomstig is van mobiele apparaten, is het essentieel om sites te ontwerpen die gemakkelijk te navigeren zijn op kleine schermen.
Lees grondig: WordPress volledige sitebewerking: complete beginnershandleiding
Wilt u dat uw website sneller werkt met soepelere en betere overgangen?
Krijg verkleinde CSS, uitgestelde Javascript-parsing, code-optimalisatie, beeldcompressie en diverse andere opties voor slechts $ 499.
Aanpak van het probleem “Het probleem met de tikdoelen heeft niet de juiste grootte voor de paginasnelheid”
Het oplossen van het probleem 'Tapdoelen hebben niet de juiste afmetingen' heeft alles te maken met het verbeteren van de mobiele bruikbaarheid. Door de grootte en afstand van interactieve elementen aan te passen, kunt u ervoor zorgen dat gebruikers gemakkelijk en zonder frustratie op knoppen, koppelingen en formulieren kunnen tikken.
Hier leest u hoe u aan de slag kunt gaan met het optimaliseren van uw website voor een betere mobiele ervaring.
Begrijp wat tikdoelen zijn en waarom ze belangrijk zijn voor PageSpeed Insights
Tikdoelen zijn de delen van een webpagina waarmee gebruikers kunnen communiceren, zoals knoppen, koppelingen en formulierbesturingselementen. In een mobielvriendelijk ontwerp moeten deze elementen groot genoeg zijn en voldoende uit elkaar geplaatst zijn om gemakkelijke interactie te garanderen zonder onbedoelde tikken.
Waarom tikdoelen belangrijk zijn voor PageSpeed Insights:
- Gebruikerservaring: Tikdoelen van de juiste grootte verbeteren de navigatie en verminderen de frustratie van de gebruiker, vooral op mobiele apparaten.
- Mobielvriendelijkheid: PageSpeed Insights beschouwt mobielvriendelijkheid als een rangschikkingsfactor, en de doelgrootte voor tikken is hiervan een belangrijk onderdeel.
- Toegankelijkheid: Een adequate tikdoelgrootte en -afstand maken websites toegankelijker voor gebruikers met motorische beperkingen of grotere vingers.
- Prestatieperceptie: hoewel het niet direct van invloed is op de laadsnelheid van de pagina , draagt een goed tikdoelontwerp bij aan de algehele waargenomen prestaties en bruikbaarheid van een site.
Waarom tikdoelen belangrijk zijn voor PageSpeed Insights:
- Gebruikerservaring: Tikdoelen van de juiste grootte verbeteren de navigatie en verminderen de frustratie van de gebruiker, vooral op mobiele apparaten.
- Mobielvriendelijkheid : PageSpeed Insights beschouwt mobielvriendelijkheid als een rangschikkingsfactor, en de doelgrootte voor tikken is hiervan een belangrijk onderdeel.
- Toegankelijkheid: Een adequate tikdoelgrootte en -afstand maken websites toegankelijker voor gebruikers met motorische beperkingen of grotere vingers.
- Prestatieperceptie: hoewel het niet direct van invloed is op de laadsnelheid van de pagina , draagt een goed tikdoelontwerp bij aan de algehele waargenomen prestaties en bruikbaarheid van een site.
PageSpeed Insights evalueert tikdoelen op basis van grootte en nabijheid. Het beveelt aan:
- Een minimumgrootte van 48×48 pixels voor tikdoelen
- Minimaal 8 pixels ruimte tussen tikdoelen
Het verbeteren van het ontwerp van tikdoelen kan uw PageSpeed Insights-score in het gedeelte 'Mobiele bruikbaarheid' verhogen, wat bijdraagt aan betere algemene prestatiebeoordelingen en mogelijk hogere zoekresultaten.
- Een minimumgrootte van 48×48 pixels voor tikdoelen
- Minimaal 8 pixels ruimte tussen tikdoelen
Het verbeteren van het ontwerp van tikdoelen kan uw PageSpeed Insights-score in het gedeelte 'Mobiele bruikbaarheid' verhogen, wat bijdraagt aan betere algemene prestatiebeoordelingen en mogelijk hogere zoekresultaten.
Blijf lezen: snelste WordPress-thema's in (met PageSpeed-scores)
Zorgen voor optimale bruikbaarheid met tikdoelen van 48 bij 48 pixels
De 48px bij 48px-richtlijn voor tikdoelen is een algemeen aanvaarde standaard in mobiel webontwerp. Dit is waarom dit formaat belangrijk is en hoe het bijdraagt aan een optimale bruikbaarheid:
- Vingervriendelijk ontwerp: De gemiddelde vingertop van volwassenen is ongeveer 10 mm breed, wat zich op veel mobiele apparaten vertaalt naar ongeveer 48 pixels. Dit formaat zorgt ervoor dat de meeste gebruikers comfortabel op knoppen en links kunnen tikken zonder per ongeluk aangrenzende elementen te raken.
- Lagere foutpercentages: Grotere tikdoelen verminderen de kans op verkeerde tikken, waardoor de nauwkeurigheid van de gebruiker wordt verbeterd en frustratie wordt verminderd. Dit is vooral belangrijk voor taken die nauwkeurige interactie vereisen, zoals het invullen van formulieren of navigatie.
- Naleving van toegankelijkheid: het formaat van 48px komt overeen met de Web Content Accessibility Guidelines (WCAG) , waardoor uw site beter bruikbaar is voor mensen met motorische beperkingen of grotere vingers.
- Verbeterde mobiele ervaring: op kleinere schermen dragen voldoende grote tikdoelen aanzienlijk bij aan een soepele, frustratievrije mobiele ervaring, waardoor langere sitebezoeken en een betere betrokkenheid worden gestimuleerd.
- Consistentie tussen apparaten: dit formaat werkt goed op verschillende apparaatformaten en resoluties, waardoor een consistente gebruikerservaring wordt gegarandeerd, van kleine smartphones tot grotere tablets.
- Aanraak- versus muisoptimalisatie: Hoewel muisaanwijzers nauwkeurig op kleinere doelen kunnen klikken, vereisen aanraakinteracties grotere doelen voor comfortabel gebruik, waardoor 48px voor beide een goed compromis is.
- Visuele helderheid: Grotere tikdoelen zorgen vaak voor duidelijkere, beter leesbare tekst en pictogrammen binnen knoppen en links, waardoor de algehele visuele communicatie wordt verbeterd.
Implementatietips:
- Gebruik CSS om minimale breedtes en hoogtes voor interactieve elementen in te stellen.
- Zorg voor voldoende afstand tussen de tikdoelen (minstens 8px) om onbedoelde tikken op aangrenzende elementen te voorkomen.
- Overweeg het gebruik van opvulling om het tikbare gebied te vergroten zonder noodzakelijkerwijs de visuele grootte van de elementen te vergroten.
Door u aan de 48px by 48px-richtlijn te houden, creëert u een gebruiksvriendelijkere, toegankelijkere en efficiëntere mobiele interface, wat leidt tot een grotere gebruikerstevredenheid en mogelijk betere conversiepercentages.
Hoe u de grootte van knoppen in WordPress kunt vergroten via de customizer
De WordPress-aanpasser biedt een gebruiksvriendelijke manier om het uiterlijk van uw site aan te passen, inclusief de knopgroottes. Hier is een stapsgewijze handleiding:
- Begin met het openen van de WordPress-aanpasser, waarmee u live wijzigingen kunt aanbrengen in het uiterlijk van uw site:
- Log in op uw WordPress-beheerdersdashboard
- Navigeer naar Vormgeving > Aanpassen in de linkerzijbalk
- De Aanpasser wordt geopend en toont een live voorbeeld van uw site
- Zoek vervolgens de specifieke instellingen voor knoppen, die u in verschillende secties kunt vinden, afhankelijk van uw thema:
- Zoek naar secties met het label Knoppen of Typografie
- Vink Globale stijlen of thema-opties aan als deze niet onmiddellijk zichtbaar zijn
- Houd er rekening mee dat de exacte locaties per thema kunnen variëren
Lees meer : WordPress volledige sitebewerking: complete beginnershandleiding
- Zodra u de knopinstellingen heeft gevonden, kunt u verschillende eigenschappen aanpassen om de grootte ervan te vergroten:
- Gewicht: vergroot de tekstdikte, waardoor knoppen prominenter worden
- Lijnhoogte: Past de verticale ruimte aan, waardoor knoppen mogelijk groter worden
- Letterafstand: Wijzigt de horizontale ruimte tussen tekens, waardoor de knoppen breder worden
- Opvulling: Vergroot, indien beschikbaar, de ruimte rond de tekst, waardoor de hele knop wordt vergroot
- Let tijdens het aanbrengen van wijzigingen op de live preview om er zeker van te zijn dat de nieuwe formaten er goed uitzien:
- Controleer de knoppen op verschillende pagina's van uw site
- Controleer of grotere formaten uw algehele lay-out niet verstoren
- Zorg ervoor dat de tekst gecentreerd en leesbaar blijft binnen de knoppen
- Nadat u de instellingen naar tevredenheid heeft aangepast, past u de wijzigingen toe om ze live te maken:
- Bekijk alle wijzigingen nog een laatste keer
- Klik op de Publiceren of Opslaan en publiceren , meestal bovenaan de Aanpasser
- Uw nieuwe, grotere knoppen zijn nu zichtbaar voor alle sitebezoekers
Blijf lezen: maak vanaf nul aangepaste WordPress-thema's
De grootte van links in WordPress vergroten om ervoor te zorgen dat ze gemakkelijk klikbaar zijn
Het gemakkelijker maken om op uw links te klikken is een eenvoudig maar cruciaal aspect van de gebruikerservaring. Grotere links vallen beter op en zijn gemakkelijker voor bezoekers om mee te communiceren, waardoor de algehele navigatie wordt verbeterd. WordPress biedt verschillende manieren om dit te bereiken.
- Selecteer de link en wijzig het kopniveau naar H1 of H2 om de grootte onmiddellijk te vergroten.
- Gebruik de Blokinstellingen onder het gedeelte Typografie voor een nauwkeurigere controle over de linkgrootte.
- Zorg voor uniformiteit tussen alle links om een consistent ontwerp en een naadloze gebruikerservaring te creëren.
Blijf lezen: stapsgewijze handleiding voor het maken van aangepaste blokken in WordPress
Hoe u regelhoogte en letterafstand kunt gebruiken om tikdoelen toegankelijker te maken
Tikdoelen zoals knoppen en links moeten voor iedereen gemakkelijk te klikken zijn, ongeacht het apparaat of fysieke beperkingen. Door de lijnhoogte en de letterafstand aan te passen, kunnen tikdoelen beter toegankelijk worden zonder dat dit ten koste gaat van het uiterlijk van uw ontwerp.
- Verhoog de lijnhoogte om meer verticale ruimte te creëren, waardoor tikdoelen gemakkelijker te tikken zijn.
- Pas de letterafstand aan om het klikbare gebied horizontaal te vergroten.
- Gebruik deze aanpassingen om de toegankelijkheid in evenwicht te brengen met een visueel aantrekkelijk ontwerp.
Controleer ook: welke invloed heeft X-hoogte op een lettertypeontwerp?
Zorg voor consistentie door de tikdoelgroottes op alle pagina's van uw website te controleren
Zodra u de omvang van uw tikdoelen heeft vergroot, is het van cruciaal belang ervoor te zorgen dat deze wijzigingen consistent op uw hele site worden toegepast. Inconsistente tikdoelformaten kunnen de gebruikerservaring verstoren en tot frustratie leiden.
- Controleer alle pagina's, inclusief blogposts, startpagina en productpagina's, voor uniforme tikdoelgroottes.
- Zorg voor consistentie in de afmetingen van links en knoppen om verwarring bij gebruikers te voorkomen.
- Handhaaf uniformiteit om een voorspelbare en gebruiksvriendelijke interface te creëren.
Lees meer: Gutenberg 14.8 heeft de interface van de site-editor vernieuwd en een stijlboek toegevoegd
Betrouwbare ondersteuningsservices dringend nodig voor uw WordPress-site?
Pak problemen aan zoals langzaam laden, verouderde WP-versie, web-downtime en beveiligingsproblemen voor slechts $ 59/uur.
Vergroot de afstand tussen tikdoelen door de opvullingseigenschap in WordPress aan te passen
Naast het vergroten van de doelgrootte is een goede afstand noodzakelijk om de bruikbaarheid te garanderen. Door de opvulling rond knoppen en links aan te passen, kunt u onbedoelde klikken verminderen en de gebruikerservaring verbeteren.
- Gebruik de Padding-instelling in de WordPress-aanpasser om ruimte rond links en knoppen toe te voegen.
- Begin met minimaal 10 pixels aan opvulling aan alle kanten voor een optimale afstand.
- Pas de opvulling aan op basis van uw ontwerp en gebruikersbehoeften, waarbij u ruimte en lay-outintegriteit in balans houdt.
Voeg extra ruimte toe tussen tikdoelen met behulp van het WordPress Spacer Block
Als knoppen of links te dicht bij elkaar staan, kan het toevoegen van extra ruimte ze bruikbaarder maken. Het WordPress Spacer-blok is een eenvoudige manier om lege ruimte tussen elementen in te voegen zonder het ontwerp te verstoren.
- Plaats een afstandsblok tussen dicht bij elkaar geplaatste tikdoelen.
- Pas de hoogte van het afstandsblok aan om een beter ademend ontwerp te creëren.
- Gebruik deze methode voor gestapelde elementen of gebieden waar opvullingswijzigingen de lay-out zouden beïnvloeden.
Bekijk een voorbeeld van de wijzigingen op verschillende apparaten om ervoor te zorgen dat de tikdoelen de juiste grootte en afstand hebben
Nadat u wijzigingen heeft aangebracht in de doelgroottes en -afstanden, is het essentieel om ze op meerdere apparaten te testen. Wat er geweldig uitziet op een desktop, werkt misschien niet goed op een smartphone of tablet.
- Bekijk een voorbeeld van uw site op mobiele telefoons, tablets en desktops om ervoor te zorgen dat tikdoelen klikbaar blijven.
- Gebruik de responsieve preview van WordPress of test op echte apparaten voor een nauwkeurige weergave.
- Breng de nodige aanpassingen aan op basis van hoe de tikdoelen op verschillende schermformaten verschijnen.
Blijf lezen: de beste voorstelsjablonen voor websiteontwikkeling die aan uw behoeften voldoen
Test uw website met Google PageSpeed Insights om te bevestigen dat de oplossing succesvol is
Om te valideren dat uw wijzigingen de bruikbaarheid hebben verbeterd, voert u uw website uit via Google PageSpeed Insights. Deze tool kan controleren of uw tikdoelen voldoen aan de normen van Google voor mobielvriendelijkheid.
- Voer uw site uit via Google PageSpeed Insights om de tikdoelgroottes te testen.
- Controleer of de Tap-doelen niet de juiste maat hebben voor het auditresultaat.
- Als het probleem is opgelost, zijn uw aanpassingen gelukt.
- Als dit niet het geval is, kijk dan opnieuw naar de doelgroottes en -afstanden en pas deze indien nodig aan totdat het probleem is opgelost.
Blijf lezen: de beste website-audittools voor SEO
Conclusie
Het mobielvriendelijker maken van uw website door het probleem 'Tapdoelen hebben niet de juiste afmetingen' op te lossen, gaat niet alleen over het tevredenstellen van Google; het gaat om het creëren van een soepelere, meer intuïtieve ervaring voor elke bezoeker.
Door prioriteit te geven aan de gebruikerservaring door middel van eenvoudige aanpassingen, zoals het vergroten van de tikdoelgroottes en -afstanden, blijft uw site op alle apparaten toegankelijk, boeiend en functioneel. Uiteindelijk kan de moeite die u in deze optimalisaties steekt, zijn vruchten afwerpen in verbeterde conversies en een hogere gebruikerstevredenheid.
