7 règles d'or du design de menu mobile

Un menu mobile n'est pas un menu desktop rétréci. Le petit écran, la connexion souvent lente et l'usage à une main imposent leurs propres décisions de design. Ces sept règles affectent directement le ticket moyen et la satisfaction client.

1. Corps jamais sous 16 px

16 px (1 rem) est le seuil. En dessous, le client zoome manuellement, ce qui casse la navigation. Recommandation : corps 16-18 px, nom produit 18-22 px, titre catégorie 22-28 px.

2. Cibles tactiles minimum 44 × 44 px

Apple HIG et Google Material exigent 44 × 44 px. Plus petit = 15-23% d'erreurs en plus. Entre les onglets, au moins 8 px d'écart.

3. Hiérarchie en F-pattern

La lecture mobile est verticale. Mettez les recommandations tout en haut, fixez la barre de catégories en haut. Si la logique du menu n'est pas claire en 5 secondes, le bouton retour gagne.

4. WebP/AVIF et lazy loading

WebP est 30% plus léger que PNG. AVIF encore 15-20% en moins. Les images d'une catégorie ne se chargent qu'à son ouverture — <img loading="lazy">.

5. Règle des trois secondes

LCP sous 3 s. Testez en 3G limité — le Wi-Fi du café est rarement meilleur. Bundle JavaScript sous 150 KB.

6. Palette maximum 4-5 couleurs

Couleur de marque + secondaire + accent + noir + blanc. Icônes allergènes par forme ET couleur — 1 homme sur 12 est daltonien rouge-vert.

7. Test à une main

Placez les actions critiques dans la moitié basse — règle de la zone du pouce. Des plateformes mobile-first comme thMenu appliquent ces motifs par défaut ; vérifiez si vous personnalisez.

Un menu mobile bien réglé augmente les commandes de 12-18%. Mal réglé, il renvoie le client vers le serveur et annule l'avantage du numérique.

Cet article vous a été utile ? Partagez-le.