Audit UX mobile e-commerce : le cas du site Lelit

Contexte

J'ai découvert le site de Lelit grâce à une publicité sur Facebook. Je ne connaissais pas la marque : c'était donc une première visite, exactement comme pour un nouveau client.

Après un parcours rapide, il m'a semblé que ce site ferait une bonne étude de cas pour parler d'UX mobile sur petits écrans.

Pourquoi ? Les écrans de téléphone grandissent d'année en année, et beaucoup de marques en viennent à penser que tout le monde possède le dernier iPhone à 1 600 €. Or les écrans plus petits restent un enjeu d'accessibilité et d'UX pour énormément de clients. C'est ce que cette étude de cas va montrer.

Méthodologie

• Téléphone : OnePlus 10 Pro, sorti en 2022.
• Résolution de l'écran : 360 × 672 px avec la barre d'état affichée, 360 × 728 px sans.
• Navigateur : Google Chrome 155.0.
• Outil : Viewport Resizer, pour réaliser les captures à différentes largeurs.
• Périmètre : page d'accueil, menu, page catégorie « Promotions », filtres, comparateur, pages marque.

Résolutions d'écran mobile en France : les petits écrans pèsent lourd

Source : Statcounter, septembre 2026

Les cinq résolutions dont la largeur est inférieure à 390 px (384, 360 et 375 px) représentent à elles seules plus de 28 % des visites mobiles en France, sans compter la catégorie « Autres ». Ce ne sont donc pas des cas marginaux.

Bouton Axeptio flottant : il masque le lien « Se connecter »

Constats.

Je constate souvent des conflits de z-index entre les bannières de cookies et les éléments flottants. Ici, le même problème se répète : le bouton flottant qui rouvre Axeptio se place pile au-dessus de l'élément « Se connecter » dans le menu principal.

Le même chevauchement apparaît lorsque l'on utilise la comparaison de produits :

Pourquoi c'est un problème.

Un élément interactif recouvert par un autre devient difficile, voire impossible, à toucher. Le W3C rappelle d'ailleurs que le contenu doit rester utilisable sans perte d'information ni de fonctionnalité lorsque la largeur d'affichage se réduit.

Ma recommandation.

Ce type de conflit naît rarement d'une seule règle CSS : il vient de valeurs de z-index ajoutées au fil du temps, sans vue d'ensemble. La solution est une question d'organisation :

1. Maintenir une liste de tous les z-index utilisés sur le site, avec les endroits où ils s'appliquent (menu, bannière de cookies, bouton flottant, modales, panneau de filtres, etc.).
2. Regrouper ces valeurs dans un seul fichier CSS, sous forme de variables, plutôt que de les écrire en dur dans chaque composant.

:root {
    --z-sticky: 100;
    --z-header: 200;
    --z-floating: 300;   /* bouton Axeptio, chat */
    --z-drawer: 400;     /* menu mobile, panneau de filtres */
    --z-modal: 500;
}

.axeptio-button { z-index: var(--z-floating); }
.mobile-menu    { z-index: var(--z-drawer); }

L'ordre des couches devient alors lisible d'un coup d'œil, et ajouter un nouvel élément flottant oblige à se demander à quelle couche il appartient. Il reste à tester chaque écran avec le bouton affiché, pas seulement la page d'accueil.

Défilement horizontal sur les écrans de moins de 390 px

Constats.

J'ai remarqué immédiatement une barre de défilement parasite, signe qu'un ou plusieurs éléments dépassent du viewport. En descendant légèrement, on voit que la liste <ul> des collections mises en avant déborde :

Un petit changement de CSS permet de confirmer la cause :

.featured-collections .featured-collections__headings_container {
    align-items: center;
    display: flex;
    /* flex-flow: nowrap; <----- Valeur actuelle */
    flex-flow: wrap;
    gap: 4.8rem;
    justify-content: center;
    margin-bottom: 4.8rem;
    padding: 0;
}

Et le problème disparaît.

Pourquoi c'est un problème.

Ce défaut touche tous les visiteurs dont l'écran est plus étroit que 390 px, soit plus de 28 % des visites mobiles d'après le tableau ci-dessus. Sur la page d'accueil, il donne dès la première seconde une impression de site mal fini.

Côté accessibilité, le critère WCAG 1.4.10 (Reflow) demande qu'une page puisse s'afficher sans défilement dans deux dimensions à une largeur équivalente à 320 px. Mon écran fait 360 px et le débordement apparaît déjà : il est très probablement plus marqué à 320 px, largeur que je n'ai pas testée.

Ma recommandation.

Autoriser le retour à la ligne (flex-flow: wrap) sur ce conteneur, puis tester la page à 320, 360 et 375 px. Un test de chaque page type sur ces largeurs doit faire partie de la recette.

Carrousel produits : les flèches ne répondent pas avant le premier balayage

Constats.

Chaque produit affiche une flèche gauche et une flèche droite, signe qu'il dispose de plusieurs images.

Le balayage tactile fonctionne, mais les flèches gauche et droite ne répondent pas au toucher. Elles ne fonctionnent qu'après un premier slide effectué manuellement, par balayage. Tant que le visiteur n'a pas balayé une première fois, un appui sur une flèche ne produit aucun effet. Le problème est global : il touche aussi les pages catégories.

Pourquoi c'est un problème.

Les flèches sont un signal visible : elles promettent une action. Quand elles ne répondent pas, le visiteur pense à un bug, ou conclut qu'il n'y a pas d'autres images. Les tests d'utilisabilité de Baymard montrent que les internautes sur mobile utilisent presque systématiquement le balayage dans les galeries d'images produit : celui qui balaie s'en sortira, mais celui qui touche la flèche, non.

Ma recommandation.

Corriger l'initialisation du slider pour que les flèches répondent dès le premier appui, sans interaction préalable. Tester le comportement sur plusieurs modèles de téléphones et au chargement de chaque page catégorie.

Offre « Jours anniversaire » : le visiteur perd le contexte

Constats.

Sur la page d'accueil, la bannière annonce : « Jours anniversaire, jusqu'à -50 % sur la literie ».

Le lien pointe vers /collections/promotions :

• Title : « Nos promotions literie - Bons plans literie – Lelit.fr »
• Description : « Découvrez le lit idéal en promotion sur lelit.fr. Profitez de remises exceptionnelles et de la livraison gratuite pour un confort sans compromis. »

Le problème n'est pas évident au premier regard : selon son point d'entrée, le visiteur perd le contexte de l'offre, ou ne la voit pas du tout. Depuis Google, par exemple, ni « Jours anniversaire » ni « -50 % » n'apparaissent dans le résultat. Sur desktop, l'offre est affichée en en-tête de toutes les pages catégories, mais sans lien.

Pourquoi c'est un problème.

Un visiteur choisit où cliquer à partir d'indices : libellé du lien, contexte, attentes. C'est ce que le Nielsen Norman Group appelle l'information scent. Quand la promesse du clic (bannière, publicité, résultat Google) disparaît sur la page d'arrivée, le visiteur doute d'avoir cliqué au bon endroit.

Côté SEO, Google s'appuie sur la balise title, mais aussi sur les titres de page et les textes visuellement proéminents pour construire le titre affiché dans les résultats. Un H1 « Promotions » générique ne porte donc aucun mot-clé saisonnier.

Ma recommandation.

Renommer l'encart « Promotions » en « Jours anniversaire » avec le sous-titre « Jusqu'à -50 % sur la literie ». Le contexte est alors visible quelle que soit l'origine de la visite. Reprendre la même formule dans le title (par exemple « Jours anniversaire : jusqu'à -50 % sur la literie | Lelit ») et la meta description, et prévoir de la retirer à la fin de l'opération.

Un encart promotionnel qui renvoie vers lui-même

Dans cette même catégorie, un encart fait la promotion… de la catégorie :

Le lien pointe sur la page elle-même. Le visiteur se demande s'il existe une autre catégorie, s'il n'est pas sur la bonne page. Il clique, se retrouve au même endroit, et doit recommencer à faire défiler.

Ce défaut est connu de longue date : Jakob Nielsen décrit trois problèmes liés aux liens qui pointent vers la page courante : un clic inutile, un doute sur sa position, et une confusion quand la page remonte en haut.

Recommandation : supprimer le lien de l'encart sur cette page, ou le faire pointer vers une sous-catégorie précise (par exemple « Matelas -50 % »).

Page catégorie : un mélange de lits et de matelas

Un comparateur qui compare l'incomparable

Il est possible de comparer un lit avec un matelas, ce qui ne donne aucun résultat exploitable :

La catégorie mélange les types de produits, et rien ne l'indique : il n'y a ni sous-catégories ni filtre de type. Le client ne comprend pas pourquoi la comparaison échoue.

Baymard relève que les internautes ont de sérieuses difficultés avec les comparateurs, notamment à cause de caractéristiques stockées ou formatées de façon incohérente.

Recommandation : n'autoriser la comparaison qu'entre produits du même type, ou créer des sous-catégories « Lits » et « Matelas ».

Des filtres qui ne se mettent pas à jour

Le seul moyen de filtrer par type consiste à utiliser un filtre propre à chaque type : « Dimensions » pour les lits, « Couchage » pour les matelas.

C'est difficile à comprendre, car la liste des filtres ne se met pas à jour. J'ai sélectionné « 80x200 », une valeur qui cible les matelas, et il me reste pourtant 11 filtres. Après vérification, 7 d'entre eux n'ont que des valeurs grisées, donc inutiles. L'exaspération est assurée.

Le nombre de produits évolue en arrière-plan sans aucun retour visuel. Le bouton « Voir la sélection » n'affiche pas le nombre de résultats et n'est pas immédiatement visible.

Pourquoi c'est un problème. Baymard indique que, lorsque le nombre de résultats n'est pas affiché, les utilisateurs ne savent pas quel effet auront leurs filtres. Le guide de design d'eBay recommande, sur mobile, un bouton principal qui affiche le nombre de résultats (« Voir 120 résultats »). Baymard conseille par ailleurs un bouton « Appliquer » sur mobile pour éviter de ralentir les sélections multiples : le bouton existe donc, mais il manque l'essentiel.

Recommandation : rendre le bouton sticky en bas de l'écran, avec le nombre de produits (« Voir les 24 produits »), et masquer ou désactiver les filtres qui ne s'appliquent pas au type sélectionné.

Des valeurs de filtre qui apparaissent ailleurs

Autre problème avec le filtre « Dimensions » : cliquer sur « Autres options disponibles » fait apparaître de nouvelles valeurs, dans « Dimensions » et dans « Couchage ».

Si le filtre « Couchage » est fermé, ou si l'on ne clique pas sur « Autres options disponibles », ces valeurs restent invisibles. Un visiteur peut croire à tort que le catalogue contient moins de produits que prévu.

Recommandation : afficher toutes les valeurs disponibles dès l'ouverture du filtre, ou indiquer clairement qu'un clic en révèle d'autres.

Pas de tri par prix sur mobile

Contrairement à la version desktop, la version mobile ne permet pas de trier les produits par prix (prix croissant ou décroissant). Pour une page catégorie de 108 produits, c'est un manque important : les visiteurs ne peuvent pas organiser la liste selon leur budget et doivent faire défiler les produits un par un.

D'après Baymard, le tri par prix est le tri le plus utilisé, aussi bien sur desktop que sur mobile.

Recommandation : ajouter les deux tris par prix dans la version mobile, avec un accès direct depuis la barre au-dessus de la liste.

Des infobulles qui déclenchent une redirection

Les infobulles qui expliquent les informations produit (« Technologie », « Confort ») ne fonctionnent pas correctement sur mobile. Un appui sur l'infobulle déclenche aussi le clic de l'élément parent <a>, ce qui provoque une redirection non désirée.

Recommandation : empêcher la propagation du clic (event.stopPropagation() et preventDefault()) sur le déclencheur de l'infobulle, ou sortir l'infobulle du lien parent.

Pages marque : des étiquettes qui masquent la photo produit

Constats.

Les pages marque sont bien mises en avant : présentes dans le menu, avec la marque affichée sur tous les produits. Mais la liste de produits y est différente des autres pages : deux colonnes au lieu d'une.

Pourquoi c'est un problème.

Dans cette mise en page, les étiquettes « Livraison en 72h » et « Meilleure vente » ainsi que la flèche droite du slider recouvrent presque toute la photo du produit. Or pour un produit de literie, l'image est le premier argument de vente.

Ma recommandation.

Revenir à une colonne unique sur les écrans étroits, ou regrouper les étiquettes sous la photo et réduire leur taille. Utiliser le même gabarit de liste sur toutes les pages catégories.

Synthèse des constats

Conclusion

Aucun de ces défauts n'empêche un acheteur déterminé de commander. Mis bout à bout, ils créent pourtant de la friction à chaque étape d'un parcours mobile : arrivée sur l'accueil, lecture de l'offre, recherche d'un produit, comparaison. Baymard estime d'ailleurs que près de 78 % des sites e-commerce mobiles offrent une expérience de liste de produits médiocre ou mauvaise : Lelit n'est pas un cas isolé.

Trois vérifications simples permettraient de repérer la plupart de ces erreurs avant chaque mise en production :

1. Tester les pages types à 320, 360 et 375 px, avec tous les éléments flottants (cookies, chat) affichés.
2. Essayer chaque interaction avec le doigt, pas avec la souris : balayage, infobulles, filtres, tri.
3. Arriver sur les pages promotionnelles depuis une publicité ou depuis Google, et vérifier que l'offre est visible dès le premier écran et dans les balises title et H1.

J'espère que cette étude de cas vous a donné un aperçu concret de ma démarche d'audit. Vous voulez savoir comment votre boutique se comporte sur les petits écrans ? Découvrez mes prestations d'audit UX et SEO e-commerce.