ITSkillsCenter
Design & UX

Comment optimiser l’expérience utilisateur sur mobile

9 دقائق للقراءة

Optimiser l’expérience utilisateur sur mobile : guide essentiel pour le marché sénégalais

Au Sénégal, plus de 85% du trafic web provient des smartphones. Le mobile n’est pas un écran secondaire — c’est l’écran principal de vos utilisateurs. Un site qui n’est pas optimisé pour mobile perd la grande majorité de son audience avant même que le contenu ne s’affiche.

Ce guide va au-delà du simple responsive design pour couvrir l’ensemble des optimisations nécessaires à une expérience mobile excellente dans le contexte ouest-africain.

Le contexte mobile au Sénégal : comprendre votre audience

Avant d’optimiser, comprenez les conditions réelles d’utilisation :

  • Appareils d’entrée de gamme — La majorité des smartphones au Sénégal sont des Tecno, Infinix, Samsung Galaxy A, avec 2-4 Go de RAM. Votre site doit fonctionner parfaitement sur ces appareils, pas seulement sur le dernier iPhone
  • Connexion variable — Alternance entre 4G en centre-ville, 3G en banlieue, et 2G en zone rurale. Les coupures de réseau sont fréquentes
  • Forfaits data limités — La plupart des utilisateurs ont des forfaits data restreints (500 Mo à 2 Go/mois). Chaque Mo téléchargé par votre site a un coût réel pour l’utilisateur
  • Soleil intense — L’écran est souvent difficile à lire en plein soleil. Le contraste et la taille du texte sont critiques
  • Utilisation en multitâche — Vos utilisateurs naviguent en marchant, dans les transports, en faisant autre chose. L’attention est fragmentée

Performance : le facteur UX numéro 1 sur mobile

Un site qui met plus de 3 secondes à charger perd 53% de ses visiteurs mobiles. Sur une connexion 3G au Sénégal, ce seuil est encore plus critique.

Objectifs de performance

  • First Contentful Paint (FCP) — Moins de 1.8 secondes. L’utilisateur doit voir quelque chose rapidement
  • Largest Contentful Paint (LCP) — Moins de 2.5 secondes. Le contenu principal doit être visible
  • Cumulative Layout Shift (CLS) — Moins de 0.1. Rien ne doit sauter ou se déplacer pendant le chargement
  • Total Blocking Time (TBT) — Moins de 200ms. L’interface doit rester réactivé
  • Poids total de page — Moins de 1 Mo idéalement, 2 Mo maximum

Optimisations critiques

<!-- 1. Préchargement des ressources critiques -->
<link rel="preload" href="font.woff2" as="font" 
      type="font/woff2" crossorigin>
<link rel="preload" href="hero.webp" as="image">
<link rel="preconnect" href="https://fonts.googleapis.com">

<!-- 2. Images responsives et formats modernes -->
<picture>
  <source srcset="hero-mobile.avif 400w, hero-desktop.avif 1200w"
          type="image/avif" sizes="100vw">
  <source srcset="hero-mobile.webp 400w, hero-desktop.webp 1200w"
          type="image/webp" sizes="100vw">
  <img src="hero-mobile.jpg" alt="Description" 
       loading="eager" fetchpriority="high"
       width="400" height="250">
</picture>

<!-- 3. Lazy loading pour tout ce qui est hors écran -->
<img src="photo.webp" loading="lazy" width="800" height="600">

<!-- 4. Dimensions explicites pour éviter le CLS -->
<img src="photo.webp" width="400" height="300" 
     style="aspect-ratio: 4/3; width: 100%; height: auto;">
/* CSS critique : minimiser le render-blocking */

/* Polices système d'abord, polices custom en fallback */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 
               system-ui, sans-serif;
}

/* Si vous utilisez des polices custom */
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* Affiche le texte immédiatement */
}

/* Limiter les polices : 2 maximum */
/* Chaque police ajoute 20-50 Ko de téléchargement */

Design d’interface mobile : les fondamentaux

Zones de pouce (thumb zones)

L’utilisateur tient son téléphone d’une main et navigue avec le pouce. Les zones accessibles varient selon la taille de l’écran :

  • Zone confortable (bas-centre de l’écran) — Placez ici les actions principales : boutons CTA, navigation, actions fréquentes
  • Zone d’étirement (haut et coins) — Placez ici les actions secondaires : menu, paramètrès, recherche
  • Zone difficile (coin supérieur opposé au pouce) — Évitez d’y placer des actions critiques
/* Navigation en bas — plus accessible que le menu burger en haut */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
  padding: 8px 0 env(safe-area-inset-bottom); /* iPhone notch */
  z-index: 100;
}

.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-decoration: none;
  min-width: 64px;
  min-height: 48px; /* Zone de tap minimum */
}

.bottom-nav a.activé {
  color: var(--primary);
}

/* Espace pour la bottom nav dans le contenu */
body {
  padding-bottom: 72px;
}

Tailles de cibles tactiles

Le doigt est un outil de pointage imprécis. Les recommandations WCAG et Apple/Google sont claires :

  • Taille minimale — 44×44 pixels (Apple) / 48×48 dp (Google Material)
  • Espacement entre cibles — 8px minimum entre deux éléments cliquables
  • Boutons principaux — 48-56px de hauteur, pleine largeur ou quasi sur mobile
/* Bouton mobile-friendly */
.btn-mobile {
  display: block;
  width: 100%;
  padding: 16px 24px;
  font-size: 1rem;
  min-height: 48px;
  border-radius: 12px;
  text-align: center;
  -webkit-tap-highlight-color: transparent; /* Retire le flash bleu */
}

/* Lien dans une liste — zone de tap étendue */
.list-item a {
  display: flex;
  align-items: center;
  padding: 16px;
  min-height: 48px;
  text-decoration: none;
}

/* Checkbox/Radio plus grand sur mobile */
input[type="checkbox"],
input[type="radio"] {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}

Typographie mobile

/* Tailles de texte adaptées au mobile */
body {
  font-size: 16px; /* MINIMUM — jamais en dessous */
  line-height: 1.6;
  -webkit-text-size-adjust: 100%; /* Empêche le zoom auto iOS */
}

h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
h2 { font-size: clamp(1.375rem, 4vw, 2rem); }
h3 { font-size: clamp(1.125rem, 3vw, 1.5rem); }

/* clamp() crée une typographie fluide :
   - Valeur minimum (mobile)
   - Valeur préférée (relative au viewport)
   - Valeur maximum (desktop) */

/* Espacement des paragraphes sur mobile */
p {
  margin-bottom: 1.25em;
  max-width: 65ch; /* Largeur de ligne optimale */
}

Formulaires optimisés pour le mobile

Les formulaires sont le point de friction principal sur mobile. Chaque seconde gagnée augmente le taux de complétion :

<!-- Clavier numérique pour les numéros de téléphone -->
<input type="tel" inputmode="tel" autocomplete="tel"
       pattern="[0-9+\s\-]+"
       placeholder="+221 77 123 45 67">

<!-- Clavier email avec @ visible -->
<input type="email" inputmode="email" autocomplete="email"
       placeholder="nom@domaine.com">

<!-- Clavier numérique pour les montants -->
<input type="text" inputmode="decimal" 
       placeholder="Montant en FCFA">

<!-- Clavier URL -->
<input type="url" inputmode="url" autocomplete="url">

<!-- Autocomplete pour remplissage rapide -->
<input type="text" autocomplete="name" name="name">
<input type="text" autocomplete="given-name">
<input type="text" autocomplete="family-name">
<input type="text" autocomplete="street-address">
  • inputmode — Affiche le bon type de clavier sans changer la validation du champ
  • autocomplete — Permet au navigateur de pré-remplir les champs connus. Gain de temps énorme sur mobile
  • Un champ par ligne — Jamais deux champs côte à côte sur mobile
  • Labels toujours visibles — Pas de placeholder-only. Le label reste visible quand l’utilisateur tape

Navigation mobile

Au-delà du menu hamburger

Le menu hamburger cache la navigation — ce qui signifie que les utilisateurs ne voient pas les options disponibles. Alternatives plus performantes :

  • Bottom navigation — 3 à 5 icônes en bas de l’écran. Le pattern le plus accessible et le plus utilisé (Instagram, WhatsApp, Wave)
  • Navigation scrollable — Onglets horizontaux qu’on peut scroller. Bon pour les catégories (exemple : les filtres de produits)
  • Menu prioritaire — Affichez les 3-4 liens les plus importants, regroupez le reste dans un « Plus »
/* Navigation par onglets scrollable */
.tabs-nav {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  gap: 4px;
  padding: 0 16px;
}

.tabs-nav::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.tab {
  flex-shrink: 0;
  padding: 12px 20px;
  border-radius: 24px;
  white-space: nowrap;
  font-size: 0.875rem;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: none;
}

.tab.activé {
  background: var(--primary);
  color: white;
}

Gestion du mode hors-ligne

Les coupures de connexion sont courantes au Sénégal. Un minimum de gestion hors-ligne améliore drastiquement l’expérience :

// Service Worker basique pour le cache hors-ligne
// sw.js
const CACHE_NAME = 'itskillscenter-v1';
const OFFLINE_URLS = [
  '/',
  '/styles.css',
  '/app.js',
  '/offline.html'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(OFFLINE_URLS);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      // Retourne le cache si disponible, sinon le réseau
      return response || fetch(event.request).catch(() => {
        // Si le réseau échoue, affiche la page hors-ligne
        if (event.request.mode === 'navigate') {
          return caches.match('/offline.html');
        }
      });
    })
  );
});

Tests sur appareils réels

Les outils de simulation (Chrome DevTools responsive mode) sont utiles mais ne remplacent pas les tests réels :

  • Testez sur un appareil d’entrée de gamme — Un Tecno ou Samsung Galaxy A à 40 000-60 000 FCFA est l’appareil type de votre audience sénégalaise
  • Testez en 3G — Chrome DevTools → Network → Slow 3G simule les conditions réelles hors des centres urbains
  • Testez en plein soleil — Sortez avec votre téléphone et vérifiez la lisibilité de votre site
  • Testez avec une seule main — Pouvez-vous accomplir les actions clés en tenant le téléphone d’une main ?
  • Testez la batterie — Votre site ne doit pas faire chauffer l’appareil ni vider la batterie (animations excessives, scripts lourds)

Checklist UX mobile

  • Viewport meta tag présent et correct
  • Texte lisible sans zoom (16px minimum)
  • Cibles tactiles de 48px minimum
  • Pas de scroll horizontal involontaire
  • Formulaires avec les bons inputmode et autocomplete
  • Images responsives avec srcset et lazy loading
  • Page complète sous 1-2 Mo
  • LCP sous 2.5 secondes en 3G
  • Navigation accessible au pouce
  • Contenu lisible en plein soleil (contraste suffisant)
  • Safe areas gérées pour les appareils à encoche

Le mobile d’abord, toujours

Optimiser pour le mobile au Sénégal n’est pas une option — c’est la condition de base pour que votre site serve réellement son audience. Un site rapide, léger et intuitif sur un smartphone d’entrée de gamme avec une connexion 3G est la définition d’un bon site web dans notre contexte.

Chez ITSkillsCenter, toutes nos formations en développement web adoptent l’approche mobile-first. Vous apprenez à concevoir, coder et tester pour le mobile avant le desktop, avec des appareils réels disponibles en cours pour tester dans les conditions du marché sénégalais. Nos projets pratiques sont évalués sur leur performance mobile — pas seulement leur apparence sur un écran de bureau.

Premier test : ouvrez votre site actuel sur votre téléphone en connexion 3G. Chronométrez le temps de chargement. Essayez de compléter l’action principale (inscription, achat, contact) avec une seule main. Les résultats vous diront exactement quoi améliorer en priorité.

#navigation #optimisation #ux mobile
Besoin d'un site web ?

Confiez-nous la Création de Votre Site Web

Site vitrine, e-commerce ou application web — nous transformons votre vision en réalité digitale. Accompagnement personnalisé de A à Z.

À partir de 250.000 FCFA
Parlons de Votre Projet
Publicité