Comment identifier les zones cliquables difficiles sur mobile ?

La réponse courte

Les zones cliquables difficiles sont :

• Les coins supérieurs de l’écran
• Les éléments plus petits que 44px
• Les éléments trop proches les uns des autres
• Les zones hors de la thumb zone

Méthodes d’identification

1. Analyse de la thumb zone

┌─────────────────────────────────────┐
│  ⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛  │ ← DIFFICILE
│  ⬛⬛🟨🟨🟨🟨🟨🟨🟨🟨🟨⬛⬛  │
│  ⬛🟨🟨🟨🟨🟨🟨🟨🟨🟨🟨🟨⬛  │ ← MOYEN
│  🟨🟨🟨🟩🟩🟩🟩🟩🟩🟩🟨🟨🟨  │
│  🟨🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟨  │ ← FACILE
│  🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩  │
│  🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩  │
└─────────────────────────────────────┘

Tout élément interactif dans la zone rouge est potentiellement difficile d’accès.

2. Heatmaps tactiles

Outil	Fonctionnalité
Hotjar	Heatmaps clics/taps
Clarity (Microsoft)	Gratuit, heatmaps
Crazy Egg	Heatmaps + recordings
FullStory	Sessions complètes

Ce qu’il faut chercher :

• Zones avec beaucoup de clics manqués
• Clics répétés (signe de frustration)
• Zones ignorées malgré des CTA

3. Session recordings

Les enregistrements de session révèlent :

Signal	Problème potentiel
Multiples taps au même endroit	Bouton trop petit
Taps à côté du bouton	Zone de clic mal définie
Hésitation avant clic	Élément pas clairement cliquable
Scrolls frustrés	Contenu inaccessible

4. Chrome DevTools

1. Ouvrir DevTools (F12)
2. Toggle device toolbar (Ctrl+Shift+M)
3. Choisir un appareil mobile
4. Inspecter les éléments
5. Vérifier les dimensions

Vérifications :

• Boutons < 44px ? Problème
• Padding insuffisant sur les liens ? Problème
• Espacement < 8px entre éléments ? Problème

5. Test utilisateurs réel

Le plus efficace : observer 5 personnes utiliser votre site sur leur téléphone.

Questions à poser :

• “Où cliqueriez-vous pour acheter ?”
• “Comment accéderiez-vous à votre panier ?”
• “Pouvez-vous changer la taille du produit ?”

Zones problématiques courantes

1. Coin supérieur gauche

┌─────────────────────────────────────┐
│ [≡]                                 │ ← Très difficile
│                                     │

Solution : Déplacer la navigation en bas.

2. Coin supérieur droit

┌─────────────────────────────────────┐
│                           [🛒] [👤] │ ← Difficile
│                                     │

Solution : Ajouter ces éléments aussi en bottom bar.

3. Liens texte sans padding

<!-- ❌ Problème -->
<a href="/cgv">CGV</a> | <a href="/mentions">Mentions</a>

<!-- ✅ Solution -->
<a href="/cgv" class="touch-target">CGV</a>

.touch-target {
  display: inline-block;
  padding: 12px;
  min-height: 44px;
  min-width: 44px;
}

4. Boutons de quantité

❌ [-] 1 [+]  (boutons 20px)
✅ [ - ]  1  [ + ]  (boutons 44px avec espacement)

5. Sélecteurs de taille/couleur

❌ [S][M][L][XL]  (collés, 30px)
✅ [S]  [M]  [L]  [XL]  (44px, 8px d'écart)

Outils de diagnostic automatique

Lighthouse

1. Chrome DevTools > Lighthouse
2. Sélectionner "Mobile"
3. Cocher "Accessibility"
4. Générer le rapport
5. Chercher "Tap targets"

axe DevTools (extension)

Détecte automatiquement :

• Touch targets trop petits
• Éléments trop proches
• Contraste insuffisant

Accessibility Insights

Extension Microsoft qui superpose les zones de clic sur votre page.

Checklist d’audit

Éléments à vérifier

Élément	Taille min	Espacement min
Boutons CTA	48px	12px
Boutons secondaires	44px	8px
Icônes cliquables	44px (touch target)	8px
Liens de navigation	44px hauteur	8px
Cases à cocher	44px	8px
Sélecteurs (taille, couleur)	44px	8px

Questions à se poser

• Tous les éléments cliquables font-ils ≥ 44px ?
• Y a-t-il ≥ 8px entre les éléments ?
• Les CTA principaux sont-ils dans la thumb zone ?
• Les éléments sont-ils clairement identifiables comme cliquables ?
• Le site fonctionne-t-il bien sur petit écran (iPhone SE) ?

Solutions pour chaque problème

Problème	Solution
Bouton trop petit	Augmenter padding ou min-height
Touch target invisible	Étendre la zone cliquable via padding
Éléments trop proches	Ajouter gap/margin
CTA hors thumb zone	Déplacer ou ajouter sticky CTA
Menu inaccessible	Navigation bottom bar