Corrigez les «cibles de tapage ne sont pas de taille appropriée»

Si vous avez déjà reçu l'avertissement « Les cibles tactiles ne sont pas correctement dimensionnées » de Google PageSpeed ​​Insights , vous n'êtes pas seul. Ce problème signifie que vos liens, boutons ou autres éléments cliquables sont trop petits ou trop rapprochés, ce qui les rend difficiles à exploiter pour les utilisateurs, en particulier sur les appareils mobiles. Cela peut nuire à la convivialité de votre site et avoir un impact sur votre d'optimisation mobile .

Heureusement, il est possible de le réparer. Vous devrez ajuster la taille de vos cibles tactiles et ajouter un espacement entre elles. Cela facilite non seulement les tests d'optimisation mobile de Google, mais améliore également l'expérience globale des visiteurs sur tous les appareils . Passons en revue quelques moyens simples de résoudre ce problème.

Qu'est-ce que le problème de pages de la dimension «TAP n'est pas dimensionné»?

Le problème PageSpeed ​​« Les cibles de pression ne sont pas dimensionnées de manière appropriée » est un problème courant qui affecte l'expérience utilisateur des sites Web, en particulier sur les appareils mobiles. Ce problème survient lorsque les éléments interactifs d'une page Web, tels que les boutons, les liens et les entrées de formulaire (collectivement appelés « cibles d'appui »), sont trop petits ou trop rapprochés pour être touchés facilement et avec précision avec un doigt sur un appareil à écran tactile. Une façon de résoudre ce problème consiste à faire appel à des services d’optimisation de la vitesse du site .

Dans la conception WordPress , il est crucial de prendre en compte les différentes tailles d'écran et méthodes de saisie utilisées par les visiteurs. Alors qu'un utilisateur d'ordinateur de bureau équipé d'une souris peut facilement cliquer sur des éléments petits ou rapprochés, les utilisateurs mobiles s'appuient sur leurs doigts, qui sont moins précis. L'avertissement « Les cibles tactiles ne sont pas dimensionnées de manière appropriée » indique que la mise peut être difficile à naviguer et à interagir efficacement pour les utilisateurs mobiles.

Pourquoi les cibles de petits clics entraînent de la frustration et des conversions perdues

Pour les utilisateurs mobiles, les cibles tactiles petites ou encombrées peuvent entraîner des problèmes d'utilisation importants. Lorsque les éléments interactifs sont difficiles à exploiter, les utilisateurs peuvent accidentellement cliquer sur le mauvais bouton, avoir du mal à sélectionner l'option souhaitée ou devoir zoomer pour interagir avec la page. Ces frustrations peuvent entraîner une expérience utilisateur dégradée, des taux de rebond et des conversions perdues.

PageSpeed ​​Insights de Google signale ce problème car la convivialité mobile est essentielle. La majorité du trafic Web provenant d'appareils mobiles, il est essentiel de concevoir des sites faciles à naviguer sur de petits écrans.

Lisez attentivement : Édition complète du site WordPress : Guide complet du débutant

Résoudre le problème « La correction des cibles tactiles n'est pas correctement dimensionnée : problème de PageSpeed »

La résolution du problème « Les cibles tactiles ne sont pas dimensionnées de manière appropriée » consiste à améliorer la convivialité mobile. En ajustant la taille et l'espacement des éléments interactifs, vous pouvez garantir que les utilisateurs peuvent facilement appuyer sur les boutons, les liens et les formulaires sans frustration. 

Voici comment commencer à optimiser votre site Web pour une meilleure expérience mobile.

Comprendre ce que sont les cibles tactiles et pourquoi elles sont importantes pour PageSpeed ​​Insights

Les cibles tactiles sont les zones d'une page Web avec lesquelles les utilisateurs peuvent interagir, telles que les boutons, les liens et les contrôles de formulaire. Dans une conception adaptée aux appareils mobiles, ces éléments doivent être suffisamment grands et espacés de manière adéquate pour garantir une interaction facile sans appuis accidentels.

Pourquoi les cibles Tap sont importantes pour PageSpeed ​​Insights :

• Expérience utilisateur : des cibles tactiles correctement dimensionnées améliorent la navigation et réduisent la frustration des utilisateurs, en particulier sur les appareils mobiles.

• Convivialité mobile : PageSpeed ​​Insights considère la convivialité mobile comme un facteur de classement, et la taille de la cible d'appui en est un élément clé.

• Accessibilité : une taille et un espacement adéquats des cibles de frappe rendent les sites Web plus accessibles aux utilisateurs souffrant de déficiences motrices ou de doigts plus gros.

• Perception des performances : même si elle n'affecte pas directement la vitesse de chargement des pages , une bonne conception de la cible tactile contribue aux performances globales perçues et à la convivialité d'un site.

Pourquoi les cibles Tap sont importantes pour PageSpeed ​​Insights :

• Expérience utilisateur : des cibles tactiles correctement dimensionnées améliorent la navigation et réduisent la frustration des utilisateurs, en particulier sur les appareils mobiles.

• Convivialité mobile : PageSpeed ​​Insights considère la convivialité mobile comme un facteur de classement, et la taille de la cible d'appui en est un élément clé.

• Accessibilité : une taille et un espacement adéquats des cibles de frappe rendent les sites Web plus accessibles aux utilisateurs souffrant de déficiences motrices ou de doigts plus gros.

• Perception des performances : même si elle n'affecte pas directement la vitesse de chargement des pages , une bonne conception de la cible tactile contribue aux performances globales perçues et à la convivialité d'un site.

PageSpeed ​​Insights évalue les cibles tactiles en fonction de leur taille et de leur proximité. Il recommande :

• Une taille minimale de 48 × 48 pixels pour les cibles tactiles
• Au moins 8 pixels d'espace entre les cibles tactiles

L'amélioration de la conception des cibles tactiles peut augmenter votre score PageSpeed ​​Insights dans la section « Utilisation mobile », contribuant ainsi à de meilleures notes de performances globales et à des classements de recherche potentiellement plus élevés.

• Une taille minimale de 48 × 48 pixels pour les cibles tactiles
• Au moins 8 pixels d'espace entre les cibles tactiles

L'amélioration de la conception des cibles tactiles peut augmenter votre score PageSpeed ​​Insights dans la section « Utilisation mobile », contribuant ainsi à de meilleures notes de performances globales et à des classements de recherche potentiellement plus élevés.

Continuez à lire : Thèmes WordPress les plus rapides (avec les scores PageSpeed)

Assurer une utilisation optimale avec des cibles tactiles de 48 x 48 px

La directive de 48 px sur 48 px pour les cibles tactiles est une norme largement acceptée dans la conception de sites Web mobiles. Voici pourquoi cette taille est importante et comment elle contribue à une utilisation optimale :

• Conception adaptée aux doigts : le bout du doigt d'un adulte moyen mesure environ 10 mm de large, ce qui correspond à environ 48 pixels sur de nombreux appareils mobiles. Cette taille garantit que la plupart des utilisateurs peuvent appuyer confortablement sur les boutons et les liens sans toucher accidentellement les éléments adjacents.

• Taux d'erreur réduits : des cibles de frappe plus grandes diminuent le risque d'erreurs de frappe, améliorant ainsi la précision de l'utilisateur et réduisant la frustration. Ceci est particulièrement important pour les tâches nécessitant des interactions précises, telles que le remplissage de formulaires ou la navigation.

• Conformité en matière d'accessibilité : la taille de 48 px est conforme aux directives pour l'accessibilité du contenu Web (WCAG) , ce qui rend votre site plus utilisable pour les personnes ayant une déficience motrice ou des doigts plus gros.

• Expérience mobile améliorée : sur des écrans plus petits, des cibles tactiles de taille adéquate contribuent de manière significative à une expérience mobile fluide et sans frustration, encourageant des visites de sites plus longues et un meilleur engagement.

• Cohérence entre appareils : cette taille fonctionne bien sur différentes tailles et résolutions d'appareils, garantissant une expérience utilisateur cohérente, des petits smartphones aux tablettes plus grandes.

• Optimisation du toucher par rapport à la souris : alors que les pointeurs de la souris peuvent cliquer avec précision sur des cibles plus petites, les interactions tactiles nécessitent des cibles plus grandes pour une utilisation confortable, ce qui fait de 48 px un bon compromis pour les deux.

• Clarté visuelle : des cibles d'appui plus grandes permettent souvent d'afficher un texte et des icônes plus clairs et plus lisibles dans les boutons et les liens, améliorant ainsi la communication visuelle globale.

Conseils de mise en œuvre :

• Utilisez CSS pour définir les largeurs et hauteurs minimales des éléments interactifs.
• Assurez un espacement adéquat entre les cibles de pression (au moins 8 px) pour éviter les pressions accidentelles sur les éléments adjacents.
• Pensez à utiliser un remplissage pour augmenter la zone exploitable sans nécessairement augmenter la taille visuelle des éléments.

En adhérant à la directive 48 x 48 px, vous créez une interface mobile plus conviviale, accessible et efficace, conduisant à une meilleure satisfaction des utilisateurs et potentiellement à de meilleurs taux de conversion.

Comment augmenter la taille des boutons dans WordPress via le personnalisateur

Le personnalisateur WordPress offre un moyen convivial de modifier l'apparence de votre site, y compris la taille des boutons. Voici un guide étape par étape :

Commencez par accéder au WordPress Customizer, qui vous permet d'apporter des modifications en direct à l'apparence de votre site :

• Connectez-vous à votre tableau de bord d'administration WordPress
• Accédez à l'apparence ⟶ Personnaliser dans la barre latérale gauche
• Le personnalisateur s'ouvrira, affichant un aperçu en direct de votre site

Localisez ensuite les paramètres spécifiques aux boutons, qui peuvent se retrouver dans différentes sections en fonction de votre thème :

• Recherchez les sections intitulées Boutons ou Typographie
• Vérifiez les styles globaux ou les options de thème s'ils ne sont pas immédiatement visibles.
• N'oubliez pas que les emplacements exacts peuvent varier selon les thèmes

Lire la suite : Édition complète du site WordPress : guide complet du débutant

Une fois que vous avez trouvé les paramètres du bouton, vous pouvez ajuster diverses propriétés pour augmenter leur taille :

• Poids : augmente l'épaisseur du texte, rendant les boutons plus visibles
• Hauteur de la ligne : ajuste l'espace vertical, rendant potentiellement les boutons plus hauts
• Espacement des lettres : modifie l'espace horizontal entre les caractères et élargit les boutons.
• Rembourrage : si disponible, augmente l'espace autour du texte, agrandissant ainsi l'intégralité du bouton.

Lorsque vous apportez des modifications, faites attention à l'aperçu en direct pour vous assurer que les nouvelles tailles sont correctes :

• Vérifiez les boutons sur différentes pages de votre site
• Vérifiez que l'augmentation des tailles ne perturbe pas votre mise en page globale
• Assurez-vous que le texte reste centré et lisible dans les boutons

Après avoir ajusté les paramètres à votre satisfaction, appliquez les modifications pour les rendre opérationnels :

• Revoir toutes les modifications une dernière fois
• Cliquez sur le Publier ou Enregistrer et publier , généralement situé en haut du personnalisateur.
• Vos nouveaux boutons plus grands sont désormais visibles par tous les visiteurs du site

Continuez à lire : créez des thèmes WordPress personnalisés à partir de zéro

Augmenter la taille des liens dans WordPress pour garantir qu'ils sont facilement cliquables

Rendre vos liens plus faciles à cliquer est un aspect simple mais crucial de l'expérience utilisateur. Les liens plus grands sont plus visibles et avec lesquels les visiteurs peuvent interagir plus facilement, améliorant ainsi la navigation globale. WordPress propose plusieurs façons d’y parvenir.

• Sélectionnez le lien et modifiez son niveau de titre en H1 ou H2 pour une augmentation instantanée de la taille.
• Utilisez les paramètres de bloc sous la section Typographie pour un contrôle plus précis sur la taille des liens.
• Garantissez l’uniformité entre tous les liens pour créer une conception cohérente et une expérience utilisateur transparente.

Continuez à lire: guide étape par étape pour créer des blocs personnalisés dans WordPress

Comment utiliser la hauteur des lignes et l'espacement des lettres pour rendre les cibles tactiles plus accessibles

Les cibles tactiles telles que les boutons et les liens doivent être faciles à cliquer pour tout le monde, quel que soit l'appareil ou les limitations physiques. L'ajustement de la hauteur des lignes et de l'espacement des lettres peut rendre les cibles tactiles plus accessibles sans sacrifier l'apparence de votre conception.

• Augmentez la hauteur de la ligne pour créer plus d’espace vertical, ce qui rend les cibles plus faciles à exploiter.
• Ajustez l’espacement des lettres pour élargir la zone cliquable horizontalement.
• Utilisez ces ajustements pour équilibrer l’accessibilité avec un design visuellement attrayant.

Vérifiez également: comment X-Height affecte-t-il une conception de police

Assurez la cohérence en vérifiant les tailles des cibles de pression sur toutes les pages de votre site Web

Une fois que vous avez augmenté la taille de vos cibles tactiles, il est essentiel de vous assurer que ces modifications sont appliquées de manière cohérente sur l’ensemble de votre site. Des tailles de cibles d'appui incohérentes peuvent perturber l'expérience utilisateur et entraîner de la frustration.

• Examinez toutes les pages, y compris les articles de blog, la page d'accueil et les pages de produits, pour obtenir des tailles de cible d'appui uniformes.
• Assurez la cohérence des tailles des liens et des boutons pour éviter de dérouter les utilisateurs.
• Maintenez l’uniformité pour créer une interface prévisible et conviviale.

Lire la suite : Gutenberg 14.8 révise l'interface de l'éditeur de site et ajoute un livre de style

Augmentez l'espacement entre les cibles tactiles en ajustant la propriété Padding dans WordPress

En plus d'augmenter la taille de la cible du robinet, un espacement approprié est nécessaire pour garantir la facilité d'utilisation. L'ajustement du remplissage autour des boutons et des liens peut contribuer à réduire les clics accidentels et à améliorer l'expérience utilisateur.

• Utilisez le paramètre Remplissage dans WordPress Customizer pour ajouter de l'espace autour des liens et des boutons.
• Commencez avec au moins 10 pixels de remplissage de tous les côtés pour un espacement optimal.
• Ajustez le rembourrage en fonction de votre conception et des besoins de l'utilisateur, en équilibrant l'espace et l'intégrité de la mise en page.

Ajoutez un espace supplémentaire entre les cibles tactiles à l'aide du bloc d'espacement WordPress

Si les boutons ou les liens sont trop rapprochés, l’ajout d’espace supplémentaire peut les rendre plus utilisables. Le bloc WordPress Spacer est un moyen simple d’insérer un espace vide entre des éléments sans perturber la conception.

• Insérez un bloc d'espacement entre des cibles de frappe rapprochées.
• Ajustez la hauteur du bloc d'espacement pour créer un design plus respirant.
• Utilisez cette méthode pour les éléments empilés ou les zones où les modifications de remplissage affecteraient la disposition.

Prévisualisez les modifications sur différents appareils pour garantir que les cibles tactiles sont correctement dimensionnées et espacées.

Après avoir modifié la taille et l'espacement des cibles de frappe, il est essentiel de les tester sur plusieurs appareils. Ce qui a fière allure sur un ordinateur de bureau peut ne pas fonctionner correctement sur un smartphone ou une tablette.

• Prévisualisez votre site sur les téléphones mobiles, les tablettes et les ordinateurs de bureau pour vous assurer que les cibles tactiles restent cliquables.
• Utilisez l'aperçu réactif de WordPress ou testez sur des appareils réels pour une représentation précise.
• Effectuez les ajustements nécessaires en fonction de la façon dont les cibles tactiles apparaissent sur différentes tailles d'écran.

Continuez à lire : Meilleurs modèles de proposition de développement de sites Web pour répondre à vos besoins

Testez votre site Web à l'aide de Google Pagespeed Insights pour confirmer que le correctif est réussi

Pour valider que vos modifications ont amélioré la convivialité, exécutez votre site Web via Google PageSpeed ​​Insights. Cet outil peut vérifier si vos cibles tactiles répondent aux normes de Google en matière de convivialité mobile.

• Exécutez votre site via Google PageSpeed ​​Insights pour tester les tailles des cibles tactiles.
• Vérifiez que les cibles Tap ne sont pas dimensionnées de manière appropriée, résultat de l'audit.
• Si le problème est résolu, vos ajustements ont réussi.
• Sinon, revisitez et ajustez la taille et l'espacement de vos cibles de frappe selon vos besoins jusqu'à ce que le problème soit résolu.

Continuez à lire : Meilleurs outils d’audit de sites Web pour le référencement

Conclusion

Rendre votre site Web plus adapté aux mobiles en résolvant le problème « Les cibles de pression ne sont pas dimensionnées de manière appropriée » ne consiste pas seulement à apaiser Google ; il s'agit de créer une expérience plus fluide et plus intuitive pour chaque visiteur. 

Donner la priorité à l'expérience utilisateur grâce à des ajustements simples tels que l'augmentation de la taille et de l'espacement des cibles d'appui permet de garder votre site accessible, attrayant et fonctionnel sur tous les appareils. En fin de compte, les efforts que vous consacrez à ces optimisations peuvent se traduire par de meilleures conversions et une plus grande satisfaction des utilisateurs.