Testez les tâches complètes sur un vrai téléphone. Une belle capture d’écran ne peut pas dire si un visiteur peut trouver, lire et utiliser la page.
Faites en sorte que le premier écran mérite sa place
Un hero doit expliquer l’offre assez vite pour que le visiteur sache s’il doit continuer. Gardez un titre parlant, une brève explication et une action principale claire. Une grande image décorative n’est utile que si elle renforce cette explication.
Si le hero est conçu pour occuper tout l’écran, tenez compte des contrôles du navigateur qui changent sur le téléphone et de la hauteur réelle du contenu. Ne forcez pas une hauteur fixe qui coupe l’action sur un petit téléphone ou en mode paysage. Testez aussi avec un texte plus grand. Une mise en page doit pouvoir s’agrandir quand le lecteur a besoin de plus d’espace.
Demandez à quelqu’un de lire le premier écran sans aucune explication de votre part. Puis demandez-lui ce que fait l’entreprise et sur quoi il cliquerait ensuite. S’il faut faire défiler la page juste pour découvrir l’offre, revoyez le texte et la mise en page avant d’ajouter de l’animation.
Testez un formulaire avec le clavier ouvert
Touchez chaque champ et complétez le formulaire. Vérifiez que les libellés restent visibles, que le clavier correspond au champ et que les erreurs expliquent comment corriger le problème. Une barre de contact fixe ou un assistant ne doit pas couvrir le champ, le texte de consentement ou le bouton d’envoi.
- Utilisez une vraie adresse email et un format de numéro de téléphone que vos clients utilisent.
- Essayez un long nom d’entreprise et un message de plusieurs paragraphes.
- Laissez les champs obligatoires vides et lisez les messages d’erreur.
- Vérifiez si l’action d’envoi confirme ce qui s’est passé.
- Essayez les liens de contact depuis un téléphone où les applications nécessaires sont installées.
Un rédacteur email et un lien WhatsApp sont différents d’un formulaire qui envoie directement un message. L’interface doit indiquer au visiteur ce qui s’ouvre ensuite pour qu’il puisse terminer l’action.
Mesurez plus que la page d’accueil
De grandes photos, des scripts inutiles et des mouvements visuels peuvent rendre un site soigné inconfortable à utiliser. Redimensionnez les images selon leur taille d’affichage, donnez-leur des dimensions pour réserver l’espace et chargez les images sous le premier écran seulement quand c’est nécessaire. Gardez l’image principale visible prête à se charger rapidement.
Vérifiez aussi une page de service, une page de projet et un formulaire, pas seulement la page d’accueil. PageSpeed Insights peut aider à repérer les problèmes de chargement et d’interaction. Ses résultats de labo décrivent un test ; les données de terrain disponibles décrivent des visites réelles. Considérez les deux comme des preuves à examiner, pas comme un score à afficher sur le site.
Les Core Web Vitals de Google évaluent le chargement, la réactivité et la stabilité de la mise en page. Les seuils actuels à viser sont LCP en moins de 2,5 secondes, INP en moins de 200 millisecondes et CLS à 0,1 ou moins, mesurés au 75e percentile des visites. Un aperçu local ne peut pas prouver qu’un site en ligne respecte ces seuils de terrain.
Le contrôle téléphone en dix minutes
- Ouvrez la page sur un petit écran et en mode paysage.
- Expliquez l’offre dès le premier écran.
- Ouvrez et fermez le menu avec le toucher et le clavier.
- Lisez une page de service complète sans défilement horizontal.
- Trouvez un projet, lisez son contexte et revenez au service.
- Remplissez un formulaire avec le clavier ouvert.
- Essayez d’appeler ou d’envoyer un message et confirmez la bonne destination.
- Augmentez la taille du texte et vérifiez que les commandes restent utilisables.
- Essayez le mouvement réduit si la page utilise des animations.
- Répétez la tâche clé sur une connexion plus lente.
Pour aller plus loin
Documentation officielle derrière les conseils techniques de cet article.
