Ce que vous saurez faire
À l’issue de ce tutoriel, vous saurez concevoir des interfaces mobiles tactiles modernes qui respectent les standards iOS et Android tout en étant optimisées pour les usages spécifiques du marché sénégalais et ouest-africain. Vous maîtriserez les tailles de cibles tactiles, les grilles fluides, les patterns de navigation, les micro-interactions visuelles, et les adaptations pour écrans de petite taille. Cette compétence est centrale pour toute PME qui veut transformer son site en application mobile rentable : une application de livraison de repas à Dakar, un service de recharge de compteur Woyofal, un catalogue de pagnes wax, ou un outil de gestion de tontine. À Dakar, 85 pourcent des connexions Internet se font depuis un mobile, souvent sur un écran de 5 à 6 pouces. Un designer capable de créer des interfaces mobiles de qualité peut facturer entre 500 000 et 2 000 000 FCFA une conception complète d’application, selon le nombre d’écrans et la complexité fonctionnelle.
Pourquoi le mobile-first est une obligation, pas une option
Au Sénégal comme dans la plupart des pays d’Afrique de l’Ouest, le smartphone est l’ordinateur de la grande majorité des utilisateurs. Des PME qui vendent des tissus aux marchés HLM, des écoles de Ouakam qui communiquent avec les parents, des coopératives agricoles de Fatick qui organisent les ventes : tous passent par WhatsApp, Facebook, et des applications Android. Concevoir pour mobile d’abord, c’est concevoir pour la majorité. En plus, une interface pensée pour le tactile et les petits écrans devient souvent plus claire et plus utilisable une fois agrandie pour desktop. L’inverse n’est presque jamais vrai.
Étape 1 : Configurer un fichier Figma adapté au mobile
Ouvrez Figma et créez un nouveau fichier via Menu Fichier > Nouveau fichier de design. Dans la barre d’outils, cliquez sur l’icône Frame (raccourci F) et dans le panneau de droite, sous Design, choisissez la section Phone. Sélectionnez iPhone 14 Pro (393 par 852) ou Android Small (360 par 800) selon votre cible principale. Pour une application destinée à Dakar, choisissez plutôt l’Android Small car la majorité des utilisateurs ont des téléphones Android entrée ou milieu de gamme, avec des écrans souvent inférieurs à 6 pouces.
Étape 2 : Activer une grille adaptée
Sélectionnez votre frame et, dans le panneau de droite, cherchez la section « Layout grid » et cliquez sur le bouton plus. Ajoutez une grille de type « Columns » avec 4 colonnes, un gutter de 16 et une marge de 16. Cette grille de 4 colonnes est le standard mobile, permettant de composer des listes à une colonne, des paires d’éléments à deux colonnes, ou des grilles produits à deux colonnes avec espacement harmonieux. Ajoutez aussi une seconde grille de type « Rows » avec des lignes de 8 pixels pour maintenir un rythme vertical cohérent.
Étape 3 : Définir les zones tactiles
Apple recommande 44 par 44 points pour tout élément cliquable, Google recommande 48 par 48 dp. Retenez la règle simple : aucun bouton, icône ou lien cliquable ne doit faire moins de 44 par 44 pixels. Pour le vérifier, créez un carré de 44 par 44 et posez-le mentalement sur chaque élément interactif de votre maquette. Pour le marché sénégalais où beaucoup d’utilisateurs ont des doigts d’adultes qui utilisent leur téléphone parfois sous la pluie ou en transport, je recommande même 48 par 48 minimum pour plus de confort.
Étape 4 : Construire la zone pouce
Les études d’ergonomie montrent que 75 pourcent des interactions mobiles se font au pouce. Avec la taille croissante des smartphones, le haut de l’écran devient difficilement atteignable. Dans Figma, dessinez un rectangle arrondi semi-transparent dans le tiers inférieur de votre frame : c’est la zone de confort. Placez-y les actions principales comme le bouton « Commander », « Appeler », « Envoyer ». Le haut de l’écran est réservé aux informations de contexte (titre de page, retour, notifications) et non aux actions critiques.
Étape 5 : Créer la barre de statut et la top bar
En haut de votre frame, ajoutez une zone de 44 pixels de haut pour la barre de statut système (heure, batterie). Utilisez le plugin « Mobile Mockups » ou importez directement une image de barre de statut. En dessous, créez une top bar de 56 pixels contenant un titre centré, une icône retour à gauche, et éventuellement une action à droite. Utilisez des icônes de 24 par 24 pixels avec des zones cliquables de 48 par 48. Pour une PME sénégalaise, ajoutez discrètement l’icône d’un drapeau ou une touche de wax pour l’identité locale.
Étape 6 : Dessiner la tab bar du bas
En bas de votre frame, créez une zone de 80 pixels de haut (48 de navigation plus 32 de safe area pour les iPhones récents). Placez 3 à 5 onglets maximum, chacun composé d’une icône de 24 par 24 au-dessus d’un label de 11 à 12 pixels. Pour une application de livraison à Dakar, les onglets classiques sont : Accueil, Restaurants, Panier, Profil. Utilisez un système de couleur actif/inactif clair : l’onglet actif en orange #F26A21, les inactifs en gris #999. Le label sous l’icône aide les utilisateurs moins expérimentés, nombreux sur le marché émergent.
Étape 7 : Construire des cards produits tactiles
Au centre de la page, créez des cards produits adaptées au tactile. Chaque card fait la largeur de deux colonnes (environ 168 pixels), avec une image carrée en haut, un titre de produit en Inter Medium 14px, un prix en Inter Bold 16px (en FCFA, par exemple « 2 500 F »), et un petit bouton plus de 32 par 32 en bas à droite pour ajouter au panier. L’ensemble de la card doit être cliquable pour aller vers la fiche produit, tandis que le bouton plus est une action secondaire. Espacez les cards de 12 pixels pour éviter les clics accidentels.
Étape 8 : Concevoir des formulaires tactiles
Sur une nouvelle page, dessinez un écran de connexion. Chaque champ doit faire 56 pixels de haut minimum, avec un padding horizontal de 16, un border de 1px, un border radius de 8, et un label au-dessus en 14px. Laissez 16 pixels d’espace entre les champs. Utilisez des types de clavier appropriés : email ouvrira un clavier avec arobase, phone ouvrira un pavé numérique. Pour un service Orange Money ou Wave qui demande un numéro de téléphone, affichez le préfixe « +221 » en gris à l’intérieur du champ pour guider les utilisateurs.
Étape 9 : Ajouter des états visuels aux éléments interactifs
Sélectionnez votre bouton principal et créez plusieurs variantes via le panneau Properties à droite : default, hover, pressed, disabled, loading. L’état pressed est particulièrement important en mobile : quand l’utilisateur touche un bouton, il doit voir un feedback visuel immédiat (couleur assombrie de 10 pourcent, légère mise à l’échelle à 0.95). Sans cela, en cas de connexion lente fréquente au Sénégal, l’utilisateur peut cliquer plusieurs fois croyant que rien ne se passe.
Étape 10 : Créer une navigation par gestes
Les applications mobiles modernes utilisent les gestes : swipe pour revenir en arrière, swipe horizontal pour parcourir des produits, pull-to-refresh pour actualiser. Dans Figma, vous ne pouvez pas prototyper les gestes complexes, mais vous pouvez les suggérer visuellement. Ajoutez une petite barre de 40px de large et 4px de haut centrée au bas des écrans modaux (handle), ajoutez des indicateurs de dots (3 points en bas) pour les carrousels, et laissez des marges de 16px sur les bords pour que l’utilisateur puisse faire un swipe horizontal sans déclencher d’action accidentelle.
Étape 11 : Designer les états vides et de chargement
Sur une nouvelle page, créez les écrans d’états spéciaux. L’écran vide « Aucun produit » avec une illustration centrée, un titre et un bouton CTA. L’écran de chargement avec un spinner ou des skeleton loaders (formes grises animées). L’écran d’erreur « Pas de connexion » avec une illustration d’un wifi barré et un bouton « Réessayer ». Ces écrans sont cruciaux au Sénégal où la connexion est souvent instable, surtout en dehors de Dakar. Une PME qui néglige ces états perd des utilisateurs.
Étape 12 : Intégrer les notifications et dialogues
Dessinez un système de toast (notification temporaire en haut ou bas d’écran, 48 à 64px de haut, fond sombre, texte blanc). Dessinez aussi une modale de confirmation (fond semi-transparent avec une boite centrale de 280 par environ 180px, titre, description, deux boutons côte à côte). Utilisez ces éléments pour informer l’utilisateur « Produit ajouté au panier », pour confirmer « Voulez-vous vraiment supprimer ? », ou pour signaler une erreur. Ne surchargez pas l’utilisateur : une action critique ne doit pas nécessiter plus d’une confirmation.
Étape 13 : Adapter pour Android avec Material Design 3
Si votre cible principale est Android (cas le plus fréquent au Sénégal), créez une version Material Design. Téléchargez le kit Material 3 depuis le menu Ressources > Plugins > Material Design Kit de Figma. Adaptez vos composants aux guidelines Material : les boutons ont des ripple effects, les textfields sont de type outlined ou filled, la navigation inférieure utilise le Navigation Bar Material 3 avec des badges de notifications. Cette adaptation, même subtile, améliore drastiquement l’expérience perçue par les utilisateurs Android.
Étape 14 : Prototyper et tester avec l’application Figma
Une fois vos écrans prêts, liez-les en mode Prototype via l’onglet Prototype du panneau de droite. Sélectionnez un bouton, tirez une flèche vers l’écran cible, choisissez l’animation « Slide in » pour un écran détail ou « Push » pour une navigation standard. Installez ensuite l’application Figma sur votre smartphone, ouvrez votre fichier, et cliquez sur Present. Testez votre prototype en conditions réelles, au pouce, dans différentes positions (debout, assis, en marchant). C’est là que vous découvrez les problèmes : boutons trop petits, textes illisibles, gestes conflictuels. Itérez jusqu’à ce que l’utilisation soit fluide sur un vrai téléphone.
Erreurs
La première erreur consiste à designer directement depuis un grand écran sans tester sur mobile. Ce qui semble lisible sur un écran 27 pouces est souvent illisible sur un Android de 5 pouces. Testez systématiquement sur téléphone réel. La deuxième erreur est d’utiliser des polices trop petites : en dessous de 14px pour le texte courant et 12px pour les captions, la lisibilité s’effondre, surtout pour les utilisateurs de plus de 40 ans ou avec des lunettes. La troisième erreur consiste à mettre trop d’actions sur un même écran, créant de la paralysie. Un écran mobile doit avoir une action principale évidente et deux ou trois actions secondaires maximum. La quatrième erreur concerne les contrastes insuffisants : un gris clair sur blanc devient invisible sous le soleil dakarois, qui tape souvent fort. Testez vos écrans en pleine lumière. La cinquième erreur est d’oublier les cas de connexion lente ou absente, très fréquents en Afrique de l’Ouest : prévoyez toujours des états de chargement, des caches, et des messages d’erreur explicites. Enfin, ne copiez pas servilement les applications occidentales : une application sénégalaise qui intègre la langue wolof, les paiements Wave et Orange Money, ou les références culturelles locales se démarque et fidélise ses utilisateurs.
Checklist
Avant de livrer une maquette d’application mobile à votre client PME, validez les points suivants. Tous les éléments cliquables mesurent au minimum 44 par 44 pixels, idéalement 48 par 48. La police du texte courant est d’au moins 14 pixels, 16 pixels préférablement. Les actions principales sont placées dans le tiers inférieur de l’écran pour être atteignables au pouce. Chaque écran principal suit un rythme vertical de 8px et utilise 4 colonnes de grille avec 16px de marge. Tous les boutons ont au moins 3 états visuels (default, pressed, disabled). Les formulaires ont des types de clavier appropriés et un espacement généreux entre champs. Les états vides, de chargement et d’erreur sont designés pour chaque écran de contenu dynamique. Le prototype a été testé sur au moins un téléphone Android réel, de préférence entrée ou milieu de gamme. Les contrastes respectent WCAG AA (ratio minimum 4.5:1 pour texte normal). L’application s’adapte correctement aux écrans de 360 à 414 pixels de large. Les icônes sont claires même en 24px et accompagnées de labels quand c’est possible. Les parcours d’achat, de paiement et de contact sont particulièrement soignés (moins de 4 écrans entre intention et conversion). Une fois cette checklist validée, vous disposez d’un design mobile solide que vous pouvez livrer à une PME sénégalaise ou à une agence, en facturant entre 600 000 et 2 500 000 FCFA selon le nombre d’écrans et la profondeur du travail.