Un bon design d'interface mobile n'est pas une version réduite d'une maquette pour ordinateur ; c'est une expérience utilisée avec le doigt, tenue d'une seule main dans un environnement distrayant et lue sous une lumière changeante. L'utilisateur regarde souvent l'écran en marchant, en plein soleil ou avec une attention partielle. C'est pourquoi un design mobile qui fonctionne vraiment repose sur trois fondations : des zones tactiles assez grandes, une navigation que le pouce atteint confortablement, et une typographie qui reste lisible sur un petit écran. Cet article détaille ces trois principes avec des chiffres concrets et des règles applicables.
Taille des zones tactiles et espacement
Le bout du doigt est un pointeur bien plus grossier que la souris. La zone de contact d'un doigt adulte mesure environ 8 à 10 mm, donc les petits boutons provoquent des erreurs de toucher permanentes. Les guides des plateformes donnent des recommandations claires :
- Apple Human Interface Guidelines : les cibles tactiles doivent faire au moins
44×44 pt. - Google Material Design : au moins
48×48 dp, avec au moins 8 dp d'espace entre les cibles. - WCAG 2.2 (2.5.8) : une taille minimale de 24×24 pixels CSS — mais c'est un seuil absolu, pas un confort.
Même si l'icône visible est petite, vous pouvez agrandir la zone cliquable. Sur le web, cela se fait avec du padding ou une zone d'extension invisible :
.icon-button {
min-width: 48px;
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
}L'espacement entre les cibles compte autant que leur taille. Si vous serrez deux boutons côte à côte, l'utilisateur touchera le mauvais même s'ils ont la bonne taille. Conservez un rythme vertical dans les listes et les champs de formulaire.
La zone du pouce et la navigation
La plupart des gens utilisent leur téléphone d'une seule main, avec le pouce. Le bas-centre de l'écran est la zone la plus facile à atteindre, tandis que les coins supérieurs — surtout sur les grands téléphones — sont difficiles pour le pouce. C'est pourquoi placer les actions principales en bas de l'écran est une pierre angulaire du design mobile moderne :
- Barre d'onglets inférieure : idéale pour 3 à 5 sections principales ; toujours visible et accessible au pouce.
- Bouton d'action principal : gardez les actions clés comme « Envoyer » ou « Ajouter au panier » ancrées en bas, et éloignez les actions destructrices (supprimer).
- Menu hamburger : pratique pour les liens secondaires mais peu repérable ; n'y cachez pas votre navigation principale.
Gardez les actions fréquentes — revenir en arrière, faire défiler, changer d'onglet — là où le système a habitué les utilisateurs à les trouver. Le balayage depuis le bord gauche pour revenir en arrière sur iOS et le geste système de retour sur Android sont des comportements connus par mémoire musculaire ; ne les cassez pas.
Typographie et lisibilité
La lisibilité sur petit écran dépend du contraste et de la longueur de ligne autant que de la taille de police. Valeurs de départ pratiques :
- Texte courant : au moins
16px(les champs sous 16px déclenchent un zoom indésirable dans iOS Safari). - Interligne : 1,4 à 1,6 pour le corps de texte ; des lignes serrées fatiguent l'œil sur mobile.
- Longueur de ligne : idéalement 35 à 45 caractères ; la colonne étant déjà étroite sur mobile, gardez des marges latérales généreuses.
- Contraste : WCAG AA exige au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte.
Respectez la mise à l'échelle de police du système. Utiliser des unités évolutives et rem au lieu de px absolus permet à l'interface de s'adapter sans casser quand l'utilisateur agrandit son texte :
html { font-size: 100%; } /* respecte le réglage utilisateur */
body { font-size: 1rem; line-height: 1.5; }
h1 { font-size: clamp(1.5rem, 5vw, 2.25rem); }Mise en page responsive et zones sûres
Les téléphones modernes ont des encoches, des coins arrondis et une barre de geste inférieure. Pour éviter que le contenu ne se cache sous ces zones, utilisez les variables safe-area-inset :
.app-bar {
padding-top: env(safe-area-inset-top);
}
.bottom-nav {
padding-bottom: env(safe-area-inset-bottom);
}Adaptez la mise en page au contenu, pas aux appareils. Au lieu de grilles en pixels fixes, utilisez des flexbox/grid flexibles et min()/max()/clamp(). Limitez les images avec max-width: 100% et optimisez les carrousels tactiles pour le balayage.
La performance et le retour visuel sont aussi du design
Sur mobile, la vitesse perçue l'emporte sur le vernis visuel. Sur les réseaux lents, les utilisateurs abandonnent après quelques secondes d'attente. Quelques points pratiques :
- Donnez un retour visible à chaque toucher — état pressé, petite animation ou vibration haptique.
- Les écrans squelettes pendant le chargement créent moins d'anxiété qu'une page blanche.
- Compressez les images, utilisez
loading="lazy"et affichez vite la zone visible au chargement. - Ne bloquez pas la réponse tactile ; déplacez les traitements lourds hors du thread principal.
Le design n'est pas terminé sans tests
Testez le design mobile non seulement dans un émulateur de navigateur, mais sur un vrai appareil tenu en main. L'émulateur ne montre ni les erreurs de toucher, ni la portée à une main, ni le contraste en plein soleil. Essayez avec votre propre doigt, idéalement sur plusieurs tailles d'écran et sur iOS comme Android.
Questions fréquentes
Quelle est exactement la taille minimale d'une zone tactile en pixels ?
Apple recommande 44×44 pt, Google 48×48 dp ; WCAG donne 24×24 pixels CSS comme seuil absolu. Règle pratique sûre : même si l'icône visible est petite, gardez la zone cliquable à au moins 48px et laissez au moins 8px entre les cibles.
Dois-je utiliser une navigation inférieure ou un menu hamburger ?
Avec 3 à 5 sections principales, une barre d'onglets inférieure est plus repérable et adaptée au pouce. Un menu hamburger convient pour davantage de liens ou des liens secondaires — mais n'enterrez pas le parcours principal de votre application dans le menu.
Quelle est la plus petite taille de police pour le texte courant ?
16px est le seuil sûr pour le texte courant. Dans iOS Safari, les champs de formulaire inférieurs à 16px zooment au focus, gardez donc aussi les champs à au moins 16px.
Vous voulez rendre votre interface mobile plus utilisable et plus rapide ? Des zones tactiles à la navigation et à la performance, je peux revoir votre interface de bout en bout. Contactez-moi et parlons de votre projet.