UX mobile e-commerce : vendre plus sur smartphone
L'UX mobile e-commerce consiste à concevoir chaque étape de l'achat pour un écran de 6 pouces manipulé au pouce : une recherche visible, des filtres simples, une fiche produit qui montre prix, stock et livraison sans défiler, un bouton d'ajout au panier toujours accessible, un checkout court avec paiement express, et une boutique rapide. Ce n'est pas une version réduite du site desktop, c'est un parcours à part entière.
Le smartphone est devenu le premier point d'entrée des boutiques en ligne, en Tunisie comme en Europe. Pourtant, le dernier benchmark mobile du Baymard Institute, mis à jour en juillet 2026 sur plus de 150 grands sites marchands, classe 75 % d'entre eux dans la catégorie « médiocre » pour l'expérience mobile, et aucun n'atteint la note maximale. Si les leaders du secteur en sont là, les petites et moyennes boutiques ont une vraie marge de progression.
Ce guide s'adresse aux propriétaires de boutiques, aux startups et aux équipes marketing qui utilisent WooCommerce, Shopify ou Webflow. Il complète notre méthode CRO pour augmenter le taux de conversion en se concentrant sur ce qui est propre au mobile.
Pourquoi l'UX mobile décide de vos ventes
Sur mobile, chaque friction coûte plus cher que sur ordinateur : l'écran est petit, la connexion parfois instable, l'attention fragmentée et la saisie au clavier pénible. Un menu mal conçu ou un champ de formulaire trop petit suffit à faire abandonner un panier.
Le mobile pèse aussi sur votre référencement. Google explore et indexe désormais les sites avec son robot smartphone, comme l'a confirmé l'équipe Search Central dans son annonce sur l'indexation mobile-first. Concrètement, si un contenu, un lien ou un balisage n'existe que sur la version desktop de votre boutique, il est invisible pour Google.
| Étape du parcours | Problème mobile fréquent | Conséquence |
|---|---|---|
| Accueil et navigation | Menu à quatre niveaux, recherche cachée derrière une icône | Le visiteur ne trouve pas la catégorie et repart |
| Liste de produits | Filtres en pleine page, aucun récapitulatif des filtres actifs | Résultats incompris, navigation abandonnée |
| Fiche produit | Prix et délai de livraison sous trois écrans de texte | Doute sur le coût total, sortie vers un concurrent |
| Checkout | Création de compte obligatoire, clavier inadapté aux champs | Abandon de panier au dernier moment |
Navigation et recherche : les 3 premières bonnes pratiques UX mobile
1. Une barre de recherche visible dès l'accueil
Sur mobile, beaucoup de visiteurs cherchent au lieu de naviguer. Affichez un vrai champ de recherche en haut de page plutôt qu'une simple loupe, avec un bouton de validation à côté du champ. Ajoutez des suggestions qui tolèrent les fautes de frappe et proposent des catégories : « clim » doit trouver « climatiseur », et « robe ete » doit trouver les robes d'été.
2. Un menu court et des catégories claires
Limitez le menu principal à deux niveaux visibles, indiquez la catégorie dans laquelle se trouve l'utilisateur et proposez un lien « Voir tout » à chaque niveau. Évitez les carrousels qui défilent automatiquement sur la page d'accueil : sur écran tactile, ils gênent plus qu'ils n'aident.
3. Des zones tactiles assez grandes
La norme WCAG 2.2, critère 2.5.8 fixe une taille minimale de 24 × 24 pixels CSS pour les cibles tactiles, ou un espacement suffisant entre elles. Pour les actions importantes (ajout au panier, choix de taille, quantité), visez plus grand : 44 à 48 pixels est un confort reconnu. Ce point compte aussi pour la conformité à l'accessibilité, détaillée dans notre guide sur l'European Accessibility Act pour les sites e-commerce.
Listes de produits et filtres sur mobile
4. Des filtres en panneau, avec un récapitulatif visible
Ouvrez les filtres dans un panneau latéral ou un tiroir en bas d'écran, et affichez le nombre de résultats avant validation. Une fois les filtres appliqués, montrez-les sous forme de pastilles supprimables en haut de la liste. Selon Baymard, 66 % des sites mobiles testés n'affichent pas ce récapitulatif des filtres actifs, ce qui désoriente les acheteurs.
5. Des cartes produits lisibles en un coup d'œil
Sur une carte produit mobile, l'essentiel tient en quatre éléments : une photo nette, un nom court, le prix et l'information clé (couleurs disponibles, note, livraison gratuite). Regroupez les déclinaisons d'un même produit sur une seule carte plutôt que d'afficher dix fois le même tee-shirt dans des couleurs différentes.
Fiche produit mobile : ce qui doit apparaître sans défiler
6. Une galerie au swipe et des images légères
Les photos se parcourent d'un geste de balayage, avec des points ou des miniatures qui indiquent la position. Le zoom doit fonctionner au pincement. Servez des images en WebP ou AVIF dimensionnées pour mobile : notre guide d'optimisation des images produits détaille la méthode.
7. Prix, disponibilité et livraison au-dessus du pli
Le premier écran d'une fiche produit doit répondre à trois questions : combien ça coûte, est-ce en stock, quand vais-je le recevoir. En Tunisie, précisez aussi les modes de paiement acceptés (carte, Konnect, Flouci, paiement à la livraison) : c'est souvent ce qui rassure le plus. Les longues descriptions peuvent être repliées en accordéons sous ce bloc.
8. Un bouton « Ajouter au panier » collant
Lorsque le visiteur fait défiler la description ou les avis, le bouton principal disparaît. Une barre fixe en bas d'écran, dans la zone naturelle du pouce, garde l'action à portée de main. Elle doit rappeler le prix et, pour un produit variable, ouvrir le choix de taille ou de couleur au lieu d'afficher une erreur.
Panier et checkout mobile : réduire la saisie
9. Achat sans compte et paiement express
Proposez toujours la commande en invité. Ajoutez des boutons de paiement express (Apple Pay, Google Pay, Shop Pay, PayPal selon votre marché) dès la fiche produit ou le panier : ils remplissent l'adresse et le paiement en une seule validation, ce qui change tout sur un écran de téléphone. Notre article sur le checkout WooCommerce détaille les autres leviers contre l'abandon de panier.
10. Le bon clavier pour chaque champ
C'est un détail technique au gros impact. Les attributs HTML type="tel", type="email", inputmode="numeric" et autocomplete affichent le clavier adapté et permettent au téléphone de pré-remplir nom, adresse et numéro. Pour une boutique tunisienne, un menu déroulant des gouvernorats et un champ téléphone à 8 chiffres avec l'indicatif +216 pré-affiché évitent la plupart des erreurs de livraison.
11. Des messages d'erreur utiles, au bon endroit
Validez chaque champ dès sa saisie et placez le message juste sous le champ concerné, avec une consigne claire (« Le numéro doit contenir 8 chiffres ») plutôt qu'un « Champ invalide » affiché en haut de page, hors de l'écran.
Vitesse et réactivité : la 12e bonne pratique UX mobile
12. Des Core Web Vitals au vert sur mobile
Une boutique lente est une mauvaise expérience mobile, quelle que soit la qualité de son design. Google mesure trois indicateurs, les Core Web Vitals, et utilise les données de vrais utilisateurs. Depuis mars 2024, l'INP (Interaction to Next Paint) mesure la réactivité aux clics et aux appuis : c'est souvent lui qui pénalise les boutiques chargées de scripts.
| Indicateur | Ce qu'il mesure | Seuil « bon » | Cause fréquente sur mobile |
|---|---|---|---|
| LCP | Affichage du contenu principal | 2,5 s maximum | Image produit trop lourde, hébergement lent |
| INP | Réactivité aux interactions | 200 ms maximum | Trop de scripts d'applications, de tracking et de chat |
| CLS | Stabilité visuelle | 0,1 maximum | Bannières et pop-ups insérés après le chargement |
Mesurez vos pages clés avec PageSpeed Insights en mode mobile. Pour aller plus loin, suivez nos guides pour accélérer un site WooCommerce et accélérer une boutique Shopify.
WooCommerce, Shopify, Webflow : l'UX mobile selon la plateforme
Les trois plateformes permettent une excellente expérience mobile, mais pas avec les mêmes efforts.
| Point UX mobile | WooCommerce | Shopify | Webflow |
|---|---|---|---|
| Thème mobile | Dépend du thème choisi, souvent à retravailler | Thèmes officiels solides sur mobile | Design sur mesure, contrôle total des points de rupture |
| Paiement express | Via WooPayments, Stripe ou PayPal | Boutons de paiement dynamiques et Shop Pay natifs | Apple Pay, Google Pay et PayPal disponibles |
| Checkout | Entièrement personnalisable | Optimisé, personnalisation encadrée | Personnalisable dans les limites de Webflow E-commerce |
| Risque principal | Extensions qui alourdissent chaque page | Applications qui ajoutent des scripts | Animations et interactions trop lourdes |
Pour choisir la bonne base, consultez notre comparatif Shopify ou WooCommerce et notre analyse de Webflow E-commerce.
Comment auditer l'UX mobile de votre boutique en une journée
- Analysez vos données. Dans Google Analytics, comparez le taux de conversion mobile et desktop, puis repérez l'étape du tunnel où l'écart se creuse.
- Testez sur de vrais téléphones. Un Android d'entrée de gamme en 4G révèle des problèmes que l'émulateur de votre navigateur ne montre pas.
- Passez une commande complète d'une main. Recherche, filtre, fiche produit, panier, paiement : notez chaque hésitation et chaque zoom involontaire.
- Mesurez la performance. Lancez PageSpeed Insights sur l'accueil, une catégorie, une fiche produit et le panier, et consultez le rapport Core Web Vitals de la Search Console.
- Priorisez. Corrigez d'abord ce qui bloque l'achat (checkout, bouton panier, erreurs), puis ce qui ralentit la découverte (recherche, filtres).
Exemple : une boutique de prêt-à-porter WooCommerce à Sousse
Prenons un cas illustratif : une marque de prêt-à-porter de Sousse dont la grande majorité du trafic, venu d'Instagram et de Facebook, arrive sur mobile, mais dont les commandes se font surtout sur ordinateur. L'audit montre une fiche produit où le guide des tailles s'ouvre dans un nouvel onglet, un bouton d'ajout au panier qui disparaît sous la description, un formulaire de commande qui affiche un clavier texte pour le téléphone et un message d'erreur en haut de page.
Le plan de correction tient en quelques chantiers : guide des tailles dans un tiroir, barre d'achat collante, gouvernorats en liste déroulante, champs type="tel" avec autocomplétion, suppression de deux extensions qui chargeaient leurs scripts sur toutes les pages. L'effet se mesure ensuite en suivant le taux de conversion mobile semaine après semaine, idéalement avec un test A/B sur les changements les plus importants.
Conclusion : concevoir d'abord pour le pouce
Une bonne UX mobile e-commerce ne repose pas sur une astuce, mais sur une série de décisions cohérentes : trouver vite, comprendre l'offre en un écran, ajouter au panier sans chercher le bouton, payer sans taper son adresse et ne jamais attendre. Chaque friction supprimée sur mobile profite aussi à vos visiteurs sur ordinateur et à votre référencement.
Notre équipe conçoit et optimise des boutiques WooCommerce, Shopify et Webflow pensées pour le mobile, en Tunisie comme pour des marques européennes : audit UX mobile, refonte de fiches produits et de checkout, optimisation de la vitesse. Découvrez notre offre de création de site e-commerce, nos services de refonte de site web, ou demandez un audit gratuit de votre boutique sur mobile.