Les cartes de chaleur dans l'analyse d'applications : ce qu'elles sont, types et principe de fonctionnement

Qu'est-ce qu'une carte de chaleur ?

Une carte de chaleur est une méthode de visualisation de données dans laquelle les valeurs des métriques sont affichées en couleur : du bleu ou vert (activité minimale) en passant par le jaune jusqu'au rouge (activité maximale). Dans le contexte de l'analyse mobile, une heatmap montre sur quels éléments d'interface les utilisateurs cliquent le plus souvent et lesquels passent inaperçus.

Contrairement aux rapports numériques, une carte de chaleur offre une compréhension visuelle instantanée des modèles de comportement. Selon NN Group (2024), les heatmaps réduisent le temps d'analyse du comportement des utilisateurs de 60 % par rapport aux données tabulaires. Cela en fait un outil indispensable pour les chercheurs UX et les concepteurs de produits.

Types de cartes de chaleur en analyse

Click Heatmap (carte des clics)

Click Heatmap est le type le plus courant, affichant les points de contact et les clics sur un écran. Plus la couleur est chaude, plus il y a d'interactions dans cette zone. Il est utilisé pour tester des hypothèses : si un bouton « Acheter » se trouve dans une zone froide, il doit être déplacé plus haut ou son design modifié. Click Heatmap révèle également les faux clics — lorsque les utilisateurs cliquent sur des éléments non cliquables en attendant une réaction.

Scroll Heatmap (carte de défilement)

Scroll Heatmap montre quel pourcentage d'utilisateurs a défilé jusqu'à chaque section d'un écran ou d'une page. La partie supérieure est à 100 %, diminuant vers le bas. Si à 50 % de la hauteur de l'écran il reste moins de 30 % des utilisateurs, le contenu critique doit être remonté. Selon Crazy Egg (2024), 65 % des utilisateurs ne défilent pas en dessous du premier écran dans les applications mobiles avec des formulaires longs.

Move Heatmap (carte de mouvement)

Move Heatmap suit la trajectoire du mouvement du curseur de la souris (sur desktop). Les recherches du Nielsen Norman Group montrent une corrélation élevée (0,85–0,90) entre le mouvement du curseur et la direction du regard de l'utilisateur. Dans les applications mobiles, l'équivalent est la carte tactile, qui montre non seulement les clics mais aussi les pressions longues et les balayages.

Comment fonctionnent les cartes de chaleur

Le principe de fonctionnement d'une carte de chaleur est basé sur la collecte des coordonnées de chaque interaction de l'utilisateur avec l'écran. Le SDK de la plateforme analytique (Hotjar, Smartlook, UXCam) enregistre les coordonnées X et Y de chaque clic ou touche avec la résolution d'écran et le type d'appareil. Ces données sont agrégées et superposées sur une capture d'écran sous forme de calque.

Le rendu des couleurs utilise un dégradé : du bleu (0–5 % du nombre maximum d'interactions) en passant par le vert et le jaune jusqu'au rouge (95–100 %). Chaque point représente une ou plusieurs interactions. Les plateformes modernes affichent également les nombres absolus de clics lors du survol d'une zone.

Pour des données fiables, un minimum de 100–200 sessions par page ou écran est requis. Selon Hotjar (2025), 500 sessions offrent une marge d'erreur inférieure à 5 % et sont considérées comme statistiquement significatives pour la prise de décisions de conception.

Comment utiliser les données des cartes de chaleur

Les données des cartes de chaleur sont utilisées dans trois scénarios : l'optimisation des conversions, l'amélioration de l'utilisabilité et la validation des décisions de conception. Dans le premier cas, une heatmap montre si les utilisateurs cliquent sur le bouton CTA — si ce n'est pas le cas, le bouton est déplacé plus haut ou sa couleur est changée. Dans le second, les éléments que les utilisateurs prennent à tort pour interactifs sont identifiés.

Dans le scénario de validation, comparez les cartes de chaleur avant et après le redesign d'un écran. Si la zone chaude s'est déplacée vers l'élément cible (par exemple, le bouton « Ajouter au panier »), le redesign est réussi. Selon VWO (2024), 70 % des tests A/B basés sur des données de heatmap montrent une amélioration statistiquement significative de la conversion.

Ne vous fiez pas uniquement aux cartes de chaleur — combinez-les avec des enregistrements de sessions et des analyses quantitatives. La heatmap montre « où » mais ne répond pas à la question « pourquoi » — cela nécessite une analyse qualitative du comportement.

Cartes de chaleur pour applications mobiles et desktop

Les cartes de chaleur mobiles diffèrent de celles de desktop sur plusieurs paramètres. Sur les appareils mobiles, il n'y a pas de curseur, donc Move Heatmap est remplacé par Touch Heatmap — une carte tactile qui enregistre en plus la force de pression (3D Touch) et la durée. Scroll Heatmap sur les appareils mobiles est particulièrement importante en raison de la taille limitée de l'écran : le contenu « sous la ligne de flottaison » (below the fold) peut ne pas être vu par 70 % des utilisateurs.

Les cartes de chaleur desktop utilisent le mouvement du curseur comme proxy d'attention — la corrélation entre la position du curseur et le focus du regard atteint 0,85 selon le Nielsen Norman Group. Sur les appareils mobiles, une telle corrélation n'existe pas, donc l'analyse de l'attention utilise des cartes d'eye-tracking ou des cartes de pressions longues. Selon UXCam (2024), les heatmaps mobiles nécessitent 40 % de sessions supplémentaires pour la significativité statistique en raison de la variabilité des tailles d'écran.

Lors de la configuration de cartes de chaleur pour une application multiplateforme, créez des heatmaps séparées pour iOS et Android — les différences de navigation (gestes vs boutons) peuvent radicalement modifier la répartition des clics. Filtrez également par version d'OS : les éléments d'interface sur Android 12+ avec Material You peuvent apparaître et être positionnés différemment que sur Android 11.

Exemple d'implémentation d'une carte de chaleur

Pour suivre les clics dans une application mobile sur Android, utilisez le code Kotlin ci-dessous. Il intercepte les coordonnées tactiles et les envoie au système d'analyse pour construire une carte de chaleur.

class HeatmapTracker {
    fun trackEvent(activity: Activity) {
        activity.window.decorView.setOnTouchListener { _, event ->
            if (event.action == MotionEvent.ACTION_UP) {
                val bundle = Bundle().apply {
                    putFloat("x", event.x)
                    putFloat("y", event.y)
                    putInt("screen_width", resources.displayMetrics.widthPixels)
                }
                Firebase.analytics.logEvent("touch_heatmap", bundle)
            }
            false
        }
    }
}

Après la collecte des données, construisez une carte de chaleur dans un outil BI ou utilisez une plateforme prête à l'emploi comme UXCam pour une visualisation automatique.

Comparaison des plateformes de cartes de chaleur

Les plateformes de cartes de chaleur diffèrent par leurs fonctionnalités, leur prix et leur profondeur d'intégration avec les SDK mobiles. Hotjar est l'outil le plus populaire pour les heatmaps web avec une interface simple et un forfait gratuit jusqu'à 35 sessions par jour. Cependant, Hotjar ne prend pas en charge les applications mobiles — seulement les versions web et les PWA. Pour les applications mobiles, utilisez Smartlook ou UXCam avec des SDK natifs.

UXCam est le leader des heatmaps mobiles : il prend en charge Android et iOS, le filtrage automatique par classe d'appareil, le mode superposition pour les tests A/B et la détection d'anomalies par ML. Smartlook propose des enregistrements illimités sur le forfait Growth et prend en charge à la fois les heatmaps mobiles et web dans un seul projet. Microsoft Clarity est une alternative gratuite pour les projets web avec un trafic illimité, mais sans prise en charge des SDK mobiles.

Lors du choix d'une plateforme, tenez compte de la fréquence de mise à jour des données, de la profondeur de filtrage et de la possibilité d'exporter les coordonnées brutes des clics pour des analyses personnalisées. Selon G2 Reviews (2025), UXCam obtient les meilleures notes (4,6/5) parmi les solutions de heatmap mobiles, et Hotjar parmi les solutions web (4,4/5).

Erreurs fréquentes dans l'analyse des cartes de chaleur

La première erreur est d'analyser une carte de chaleur sans filtrer par appareil. La résolution de l'écran affecte fortement l'emplacement des éléments : ce qui est en haut sur un iPhone 15 Pro peut être au milieu sur un Android économique. Filtrez toujours les heatmaps par modèle d'appareil ou taille d'écran.

La deuxième erreur est de confondre le nombre absolu et relatif de clics. Une zone rouge peut être chaude non pas à cause d'un taux de conversion élevé, mais parce que l'élément occupe 50 % de l'écran. Utilisez des cartes de chaleur normalisées, où la couleur montre le pourcentage par rapport à la taille de l'élément.

La troisième erreur est d'ignorer le temps passé à l'écran. Si les utilisateurs passent peu de temps sur un écran, la carte de chaleur sera « froide » non pas à cause d'un mauvais design, mais par manque d'intérêt. Analysez les heatmaps avec des métriques d'engagement — Time on Screen et Session Duration.