Optimisez l'UX mobile : nos conseils pour un site agréable sur smartphone

Un visiteur qui consulte votre site sur smartphone n’est pas dans la même situation que devant un ordinateur. Il tient son téléphone d’une main, il est peut-être dans la rue, sur un chantier ou dans les transports, avec une connexion variable. S’il doit zoomer pour lire, viser un lien minuscule ou remplir un formulaire interminable, il abandonne et va voir ailleurs.

D’après le Baromètre du numérique 2026 réalisé par le CRÉDOC pour l’Arcep, 91 % des personnes de 12 ans et plus possèdent un smartphone, et 7 % ne se connectent à internet que par le réseau mobile. Pour une TPE, c’est souvent le principal écran par lequel les clients découvrent le site.

Cet article se concentre sur l’expérience utilisateur du site web sur mobile : ce que vit le visiteur. Pour la partie référencement (indexation mobile, design responsive vu par Google), consultez notre article dédié au SEO mobile.

Concevoir pour le pouce

Des zones tactiles assez grandes

Un doigt est bien moins précis qu’un curseur de souris. Selon web.dev, le site de ressources de Google pour les développeurs, une zone tactile devrait mesurer au moins 48 × 48 pixels, soit environ 9 mm, la taille de la pulpe du doigt, et les éléments devraient être espacés d’environ 8 pixels. Les règles d’accessibilité WCAG 2.2 fixent, elles, un minimum de 24 × 24 pixels CSS, et recommandent 44 × 44 pixels pour les commandes importantes.

Concrètement : boutons généreux, liens du menu bien espacés, icônes entourées d’une zone cliquable plus grande que le dessin.

Les actions principales à portée de main

Sur un grand téléphone tenu d’une main, le haut de l’écran est difficile à atteindre. Placez les actions fréquentes (appeler, demander un devis) là où le pouce arrive facilement, par exemple dans une barre fixée en bas de l’écran, ou répétez le bouton dans le corps de la page.

Un contenu lisible sans effort

• Une taille de texte confortable : le visiteur ne doit jamais avoir à zoomer pour lire.
• Des contrastes suffisants : un texte gris clair sur fond blanc devient illisible en plein soleil. Les règles WCAG demandent un rapport de contraste d’au moins 4,5:1 pour le texte courant.
• Des paragraphes courts et des intertitres fréquents : sur mobile, un paragraphe de dix lignes devient un mur de texte.
• L’essentiel en premier : ce que vous faites, où, et comment vous contacter doivent apparaître sans faire défiler longtemps.

Des formulaires pensés pour le mobile

Le formulaire est souvent le moment où l’on perd le plus de visiteurs sur smartphone. Quelques réglages font une grande différence :

• Le bon clavier : un champ « téléphone » doit afficher le pavé numérique, un champ « e-mail » un clavier avec l’arobase. C’est le rôle des types de champs HTML et de l’attribut inputmode, documenté par MDN.
• Le remplissage automatique : l’attribut autocomplete indique au navigateur quel type d’information est attendu (nom, e-mail, téléphone, code postal) pour qu’il propose de compléter le champ en un geste.
• Le minimum de champs : pour une demande de rappel, un nom, un téléphone et un message suffisent.
• Des libellés visibles au-dessus des champs, plutôt qu’un texte d’exemple qui disparaît dès qu’on commence à taper.
• Des erreurs claires, affichées à côté du champ concerné, avec un message et pas seulement une couleur.

Contacter en un geste

Sur mobile, beaucoup de visiteurs préfèrent appeler plutôt qu’écrire. Rendez votre numéro cliquable partout où il apparaît, ajoutez un lien vers l’itinéraire si vous recevez du public, et proposez éventuellement un lien direct vers votre messagerie. Pour un artisan, ce simple bouton « Appeler » est souvent le chemin le plus direct vers un nouveau client (voir notre article sur le site internet d’artisan, votre commercial disponible 7 j/7).

Une navigation simple

• Un menu court : cinq à sept entrées principales, avec des intitulés explicites (« Nos services » plutôt que « Univers »).
• Un menu « burger » bien signalé, qui s’ouvre de façon fluide et se referme facilement.
• Un bouton retour en haut ou un en-tête qui réapparaît au défilement sur les pages longues.
• Pas de contenu caché indispensable dans des onglets ou accordéons que personne n’ouvrira.

Nos principes d’organisation des pages sont détaillés dans l’article sur la navigation intuitive.

Pas de fenêtre qui masque le contenu

Sur un petit écran, une fenêtre surgissante qui couvre toute la page (inscription à la newsletter, promotion) est particulièrement pénible. Google le rappelle dans sa documentation sur les interstitiels et boîtes de dialogue : ces éléments empêchent de voir le contenu et nuisent à la confiance. Préférez une bannière discrète. Le bandeau cookies, obligatoire dans certains cas, doit lui aussi rester compact et facile à fermer.

Un site rapide, même avec une connexion moyenne

Sur mobile, la connexion n’est pas toujours bonne et les téléphones ne sont pas tous puissants. Un site lent fait fuir, comme l’explique notre article sur la vitesse de votre site qui fait fuir vos clients. Les leviers principaux :

• des images compressées et adaptées à la taille de l’écran (voir notre guide pour optimiser vos images) ;
• peu de scripts tiers (chat, widgets, traceurs) ;
• une mise en cache efficace, détaillée dans notre guide sur l’optimisation du cache ;
• des boutons qui réagissent immédiatement au toucher, ce que Google mesure avec l’INP, l’un des Core Web Vitals.

Les petits retours visuels au toucher (bouton qui change d’aspect, confirmation d’envoi) rassurent aussi l’utilisateur : c’est le sujet de notre article sur les micro-interactions.

Tester sur un vrai téléphone

Le mode « mobile » des outils de développement du navigateur est utile, mais ne remplace pas un vrai téléphone. Prenez l’habitude de :

1. Parcourir votre site sur votre propre smartphone, d’une seule main, en 4G plutôt qu’en wifi.
2. Réaliser les tâches clés : trouver un service, appeler, envoyer une demande de devis.
3. Demander à deux ou trois personnes de votre entourage de faire de même, sans les guider, et noter où elles hésitent.
4. Tester sur un appareil d’entrée de gamme si vous en avez un : c’est là que les lenteurs se voient.
5. Recommencer après chaque modification importante du site.

Ces tests simples révèlent souvent des problèmes invisibles sur ordinateur : un bouton caché par le bandeau cookies, un menu qui ne se ferme pas, un champ masqué par le clavier.

Les erreurs fréquentes sur mobile

• Un numéro de téléphone affiché en image, donc impossible à cliquer.
• Des boutons trop petits ou trop serrés.
• Un formulaire qui affiche le clavier alphabétique pour un numéro de téléphone.
• Une fenêtre de promotion impossible à fermer.
• Des tableaux ou des images qui débordent et obligent à faire défiler horizontalement.
• Une vidéo lourde en lecture automatique en haut de la page d’accueil.

Si vous voulez savoir où en est votre site sur ces points, un audit de site internet permet de les passer en revue.

Questions fréquentes