Qu'est-ce que la 'thumb zone' et comment l'utiliser ?

La réponse courte

La thumb zone (zone du pouce) est la zone de l’écran mobile facilement atteignable avec le pouce quand on tient son téléphone d’une main.

Placer vos CTA dans cette zone augmente les conversions de 43%.

Comment les gens tiennent leur téléphone

Position	% utilisateurs
Une main (pouce)	49%
Cradle (une main, index)	36%
Deux mains	15%

Conclusion : Optimisez pour l’usage à une main.

Les zones de l’écran

Carte de la thumb zone

┌─────────────────────────────────────┐
│  ⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛  │ Rouge : Difficile
│  ⬛⬛🟨🟨🟨🟨🟨🟨🟨🟨🟨⬛⬛  │
│  ⬛🟨🟨🟨🟨🟨🟨🟨🟨🟨🟨🟨⬛  │ Jaune : Moyen
│  🟨🟨🟨🟩🟩🟩🟩🟩🟩🟩🟨🟨🟨  │
│  🟨🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟨  │ Vert : Facile
│  🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩  │
│  🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩  │
│  🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩  │
└─────────────────────────────────────┘
            [Bouton Home]

Ce que ça signifie

Zone	Position	Ce qu’il faut y mettre
Verte (facile)	Bas et centre	CTA principal, navigation
Jaune (moyen)	Milieu, côtés	Contenu, images
Rouge (difficile)	Coins supérieurs	Logo, éléments secondaires

Éléments à placer dans la thumb zone

Navigation principale

┌─────────────────────────────────────┐
│                                     │
│         [Contenu]                   │
│                                     │
│                                     │
│                                     │
├─────────────────────────────────────┤
│  🏠    🔍    ➕    ❤️    👤        │ ← Navigation ici
└─────────────────────────────────────┘

CTA principal

┌─────────────────────────────────────┐
│         [Image produit]             │
│                                     │
│  Titre du produit                   │
│  89,00€                             │
│                                     │
├─────────────────────────────────────┤
│  [    AJOUTER AU PANIER    ]        │ ← CTA ici
└─────────────────────────────────────┘

Actions fréquentes

• Bouton recherche
• Icône panier
• Bouton filtrer
• Bouton retour

Impact sur les conversions

Placement CTA	Taux de clic
Haut de page (hors zone)	Référence
Milieu de page	+15%
Bas de page (thumb zone)	+43%

Exemples d’apps qui l’utilisent

App	Ce qui est dans la thumb zone
Instagram	Navigation, actions (like, comment)
TikTok	Like, commentaire, partage
Uber	Bouton commander
Amazon	Navigation bottom
Spotify	Player, navigation

Implémentation pratique

CSS pour navigation bottom

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: white;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 100;
}

.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
}

CTA sticky bottom

.sticky-cta {
  position: fixed;
  bottom: 70px; /* Au-dessus de la nav */
  left: 0;
  right: 0;
  padding: 15px 20px;
  background: white;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

.sticky-cta button {
  width: 100%;
  padding: 15px;
  font-size: 16px;
}

Adaptation pour grands écrans

Sur les iPhone Plus/Max et grands Android, la zone accessible est encore plus réduite.

Solution : Interface “reachable” ou glisser pour accéder aux éléments hauts.

Erreurs courantes

1. Menu hamburger en haut à gauche : Zone la plus difficile
2. CTA en haut de page : Nécessite de remonter le pouce
3. Boutons trop petits : Difficiles à toucher
4. Actions aux coins supérieurs : Presque impossibles d’une main

Checklist thumb zone

• Navigation en bas de l’écran
• CTA principal dans la zone verte
• Boutons ≥ 44px
• Actions fréquentes accessibles
• Éléments secondaires en haut
• Test sur vrais appareils