Guide : Le design d’interface mobile (UI mobile)

Design d’interface mobile (UI) : créer des interfaces que vos utilisateurs adorent

Le design d’interface mobile est une discipline à part entière. On ne réduit pas un design desktop pour le mettre sur mobile — on conçoit une expérience native pour l’écran tactile, le pouce, et les conditions d’utilisation réelles de vos utilisateurs sénégalais.

Ce guide couvre les patterns UI mobiles éprouvés, les composants standards, et les spécificités de design pour le marché ouest-africain.

Les fondamentaux du design UI mobile

Mobile-first n’est pas un choix, c’est une obligation

Quand 85%+ de votre trafic vient du mobile, designer d’abord pour le desktop puis « adapter » au mobile est une stratégie perdante. Le mobile-first signifie :

• Concevoir les écrans mobiles en premier dans Figma, avant même de penser au desktop
• Prioriser impitoyablement — L’espace mobile force à ne garder que l’essentiel. C’est une contrainte positive
• Penser en parcours — Sur mobile, chaque écran est une étape d’un parcours linéaire, pas une page autonome
• Tester sur mobile d’abord — Votre design doit fonctionner parfaitement sur un Samsung Galaxy A avec un écran de 6 pouces

Les contraintes qui définissent le design mobile

• Écran petit — 360-414px de large en moyenne. Chaque pixel compte
• Interaction tactile — Le doigt est imprécis (zone de contact ~7mm). Les cibles de 48px minimum sont obligatoires
• Attention fragmentée — L’utilisateur est en mouvement, multi-tâche. L’information doit être digestible instantanément
• Connexion variable — Le design doit anticiper les chargements lents (skeletons, états de chargement)
• Luminosité variable — De l’intérieur sombre au soleil direct de Dakar. Le contraste est critique

Patterns de navigation mobile

1. Tab bar (barre d’onglets en bas)

Le pattern le plus utilisé et le plus efficace. Utilisé par WhatsApp, Wave, Instagram, et la majorité des apps populaires au Sénégal.

• 3 à 5 onglets maximum — Au-delà, les icônes deviennent trop petites
• Icône + label — L’icône seule est souvent ambiguë. Ajoutez toujours un texte court
• État actif visible — Couleur d’accent, icône remplie (vs outline pour les inactifs)
• Position fixe — La barre reste en bas lors du scroll pour un accès permanent

2. Navigation par geste (swipe)

Le swipe horizontal entre des écrans ou catégories. Familier grâce à Instagram (stories) et TikTok (feed).

• Indicateur de pagination — Points ou barre de progression pour montrer où on se situe
• Onglets en haut — Les titres des sections swipables, scrollables horizontalement
• Feedback haptique — Une légère vibration au changement de section renforce le feedback

3. Menu hamburger (à utiliser avec précaution)

Le menu hamburger cache la navigation — ce qui réduit la découvrabilité. Réservez-le pour les options secondaires (paramètrès, aide, à propos). Ne cachez pas votre navigation principale dans un hamburger.

Composants UI mobiles essentiels

Cards (cartes)

Le composant le plus universel du design mobile. Une carte regroupe des informations liées dans un conteneur visuel distinct :

• Pleine largeur sur mobile — Une seule carte par ligne, avec marges latérales de 16px
• Image en haut — Ratio 16:9 ou 4:3 pour une image d’aperçu
• Titre + description courte — 2-3 lignes maximum
• Action claire — Un lien ou bouton, pas une zone cliquable invisible
• Espacement entre cartes — 12-16px pour distinguer clairement chaque élément

Bottom sheet (panneau coulissant)

Un panneau qui glisse depuis le bas de l’écran. C’est le remplaçant mobile des modales et des menus déroulants desktop :

• Quand l’utiliser — Filtres, options de partage, détails supplémentaires, sélection d’éléments
• Handle visible — Une petite barre en haut pour indiquer que le panneau est glissable
• Hauteur variable — Le panneau s’adapté à son contenu. Peut être mi-hauteur ou plein écran
• Overlay sombre — Le fond s’assombrit pour focaliser l’attention sur le bottom sheet

Listes et feeds

Le scroll vertical infini est le pattern dominant sur mobile :

• Pull-to-refresh — Tirer vers le bas pour actualiser. Geste universel compris par tous les utilisateurs
• Infinite scroll — Charger plus de contenu automatiquement en bas de liste. Mieux que la pagination sur mobile
• Skeleton loading — Pendant le chargement, affichez des formes grises animées à la place du contenu. Plus professionnel qu’un spinner
• Empty state — Quand la liste est vide, affichez un message utile avec une illustration et une action (« Aucune formation trouvée. Essayez une autre recherche. »)

Formulaires mobiles

• Un champ par ligne — Jamais de colonnes sur mobile
• Label au-dessus du champ — Toujours visible, même pendant la saisie
• Clavier adapté — inputmode="tel" pour les téléphones, inputmode="email" pour les emails
• Bouton submit pleine largeur — En bas de l’écran, dans la zone de pouce
• Progression visible — Pour les formulaires longs, une barre ou des étapes numérotées

Systèmes de design mobile

Espacements et grille

Un système d’espacement cohérent est la base d’un design professionnel :

• Unité de base : 8px — Tous les espacements sont des multiples de 8 : 8, 16, 24, 32, 48, 64
• Marges de page : 16px — Espace entre le contenu et les bords de l’écran
• Espacement entre composants : 16-24px
• Espacement interne des cartes : 16px
• Grille mobile : 4 colonnes avec gouttières de 16px

Typographie mobile

• Titre de page : 24-28px, bold
• Titre de section : 20-22px, semibold
• Titre de carte : 16-18px, semibold
• Corps de texte : 16px, regular (jamais en dessous)
• Texte secondaire : 14px, regular, couleur atténuée
• Caption/label : 12px, medium (utilisez avec parcimonie)

Couleurs et contrastes

• Fond principal : #FFFFFF (mode clair) ou #121212 (mode sombre)
• Fond de carte : #FFFFFF avec ombre légère (clair) ou #1E1E1E (sombre)
• Couleur d’accent : Votre couleur de marque pour les CTA et éléments interactifs
• Texte principal : #1A1A2E (clair) ou rgba(255,255,255,0.87) (sombre)
• Contraste minimum : 4.5:1 pour le texte, 3:1 pour les éléments interactifs

Design pour le contexte sénégalais

• Intégration Wave/Orange Money — Les boutons de paiement mobile doivent être proéminents et reconnaissables. Utilisez les couleurs officielles de Wave (bleu) et OM (orange)
• Partage WhatsApp — Ajoutez un bouton de partage WhatsApp visible. C’est le premier réflexe des utilisateurs sénégalais pour partager du contenu
• Mode data-saving — Proposez une option pour charger les images en basse qualité. Vos utilisateurs apprécieront la considération pour leur forfait data
• Numéros de téléphone cliquables — tel:+221XXXXXXXX pour permettre l’appel direct. L’appel téléphonique reste le mode de contact préféré pour beaucoup de Sénégalais
• Support hors-ligne basique — Permettez au moins la consultation des pages déjà visitées sans connexion

Prototyper votre UI mobile dans Figma

1. Frame iPhone/Android — 375×812 (iPhone) ou 360×800 (Android standard)
2. Auto-layout sur tout — Chaque composant doit utiliser auto-layout pour s’adapter naturellement au contenu
3. Composants réutilisables — Créez des composants pour : boutons, cartes, headers, tab bars, champs de formulaire
4. Variants — Chaque composant a des variantes (état normal, hover/pressed, disabled, loading)
5. Prototype interactif — Connectez les frames pour simuler la navigation. Testez le parcours complet

Erreurs UI mobile courantes

• Cibles trop petites — Un lien texte de 12px sans padding est impossible à taper. Minimum 48x48px de zone tactile
• Pop-ups intrusifs — Google pénalise les interstitiels qui bloquent le contenu sur mobile. Évitez les pop-ups plein écran
• Texte trop petit — Si l’utilisateur doit zoomer pour lire, votre design a échoué. 16px minimum
• Scroll horizontal — Un signe que votre layout déborde. Le scroll doit être uniquement vertical
• Navigation cachée — Si les utilisateurs ne trouvent pas votre navigation, ils quittent le site plutôt que de chercher
• Ignorer les safe areas — Les encoches (notch) et barres de navigation système mangent de l’espace. Utilisez env(safe-area-inset-bottom)

Devenez expert en UI mobile

Le design d’interface mobile est la compétence la plus demandée du marché web en 2026. Chaque entreprise a besoin d’une présence mobile de qualité, et les designers capables de créer des interfaces mobiles professionnelles sont rares au Sénégal — c’est votre opportunité.

Chez ITSkillsCenter, nos formations en UI/UX design consacrent une part importante au design mobile. Vous apprenez à utiliser Figma pour créer des systèmes de composants mobiles, prototyper des parcours interactifs, et tester avec de vrais utilisateurs sur des appareils réels. Chaque projet pratique est évalué sur sa qualité mobile d’abord.

Exercice : installez l’app Figma Mirror sur votre téléphone. Créez un écran d’accueil mobile dans Figma et visualisez-le en temps réel sur votre appareil. Cette pratique du preview constant est ce qui distingue les bons designers mobile des amateurs.