نقشه‌های حرارتی در تحلیل برنامه‌ها: چیست، انواع و اصل کار

نقشه حرارتی چیست؟

نقشه حرارتی (heatmap) — روشی برای تجسم داده‌ها است که در آن مقادیر متریک با رنگ نمایش داده می‌شوند: از آبی یا سبز (حداقل فعالیت) از طریق زرد تا قرمز (حداکثر فعالیت). در زمینه تحلیل موبایل، heatmap نشان می‌دهد کاربران بیشتر روی کدام عناصر رابط کلیک می‌کنند و کدام یک نادیده گرفته می‌شوند.

بر خلاف گزارش‌های عددی، نقشه حرارتی درک بصری فوری از الگوهای رفتاری ارائه می‌دهد. به گزارش NN Group (2024)، heatmap زمان تحلیل رفتار کاربر را در مقایسه با داده‌های جدولی ۶۰٪ کاهش می‌دهد. این آن را به ابزاری ضروری برای محققان UX و طراحان محصول تبدیل می‌کند.

انواع نقشه‌های حرارتی در تحلیل

Click Heatmap (نقشه کلیک)

Click Heatmap — رایج‌ترین نوع، که نقاط لمس و کلیک روی صفحه را نمایش می‌دهد. هرچه رنگ گرم‌تر باشد، تعامل در این ناحیه بیشتر است. برای آزمایش فرضیه‌ها استفاده می‌شود: اگر دکمه «خرید» در ناحیه سرد قرار دارد، باید آن را بالاتر ببرید یا طراحی آن را تغییر دهید. Click Heatmap همچنین کلیک‌های کاذب را آشکار می‌کند — زمانی که کاربران روی عناصر غیرقابل کلیک کلیک می‌کنند و انتظار واکنش دارند.

Scroll Heatmap (نقشه اسکرول)

Scroll Heatmap نشان می‌دهد چه درصدی از کاربران به هر بخش از صفحه یا نمایشگر اسکرول کرده‌اند. بخش بالایی — ۱۰۰٪، پایین‌تر — کاهش. اگر در ۵۰٪ ارتفاع صفحه کمتر از ۳۰٪ کاربران باقی بمانند، محتوای حیاتی باید بالاتر برده شود. به گزارش Crazy Egg (2024)، ۶۵٪ کاربران در برنامه‌های موبایل با فرم‌های طولانی از صفحه اول پایین‌تر اسکرول نمی‌کنند.

Move Heatmap (نقشه حرکت)

Move Heatmap — مسیر حرکت مکان‌نمای ماوس را (روی دسکتاپ) ردیابی می‌کند. تحقیقات Nielsen Norman Group همبستگی بالایی (۰٫۸۵–۰٫۹۰) بین حرکت مکان‌نما و جهت نگاه کاربر نشان می‌دهد. در برنامه‌های موبایل، معادل آن نقشه‌های لمسی هستند که نه تنها کلیک‌ها، بلکه لمس‌های طولانی و سوایپ‌ها را نیز نشان می‌دهند.

نقشه‌های حرارتی چگونه کار می‌کنند

اصل کار نقشه حرارتی بر اساس جمع‌آوری مختصات هر تعامل کاربر با صفحه است. SDK پلتفرم تحلیلی (Hotjar, Smartlook, UXCam) مختصات X و Y هر کلیک یا لمس را همراه با وضوح صفحه و نوع دستگاه ثبت می‌کند. این داده‌ها تجمیع شده و به صورت رویه روی اسکرین‌شات صفحه قرار می‌گیرند.

نمایش رنگ از گرادیان استفاده می‌کند: از آبی (۰–۵٪ از حداکثر تعداد تعاملات) از طریق سبز و زرد تا قرمز (۹۵–۱۰۰٪). هر نقطه یک یا چند تعامل است. پلتفرم‌های مدرن همچنین اعداد مطلق کلیک‌ها را هنگام اشاره روی ناحیه نشان می‌دهند.

برای داده‌های قابل اعتماد حداقل ۱۰۰–۲۰۰ جلسه در یک صفحه یا نمایشگر نیاز است. به گزارش Hotjar (2025)، ۵۰۰ جلسه خطای کمتر از ۵٪ می‌دهد و برای تصمیم‌گیری‌های طراحی از نظر آماری معنی‌دار در نظر گرفته می‌شود.

چگونه از داده‌های نقشه‌های حرارتی استفاده کنیم

داده‌های نقشه‌های حرارتی در سه سناریو کاربرد دارند: بهینه‌سازی تبدیل، بهبود قابلیت استفاده و اعتبارسنجی تصمیم‌های طراحی. در حالت اول، heatmap نشان می‌دهد آیا کاربران روی دکمه CTA کلیک می‌کنند — اگر نه، دکمه بالاتر برده می‌شود یا رنگ آن تغییر می‌کند. در حالت دوم — عناصری که کاربران به اشتباه تعاملی فرض می‌کنند شناسایی می‌شوند.

در سناریوی اعتبارسنجی، نقشه‌های حرارتی قبل و بعد از بازطراحی صفحه را مقایسه کنید. اگر ناحیه داغ به عنصر هدف (مثلاً دکمه «افزودن به سبد خرید») منتقل شده باشد، بازطراحی موفق است. به گزارش VWO (2024)، ۷۰٪ از تست‌های A/B مبتنی بر داده‌های heatmap بهبود آماری معنی‌دار در تبدیل نشان می‌دهند.

فقط به نقشه‌های حرارتی تکیه نکنید — آنها را با ضبط جلسات و تحلیل کمی ترکیب کنید. Heatmap نشان می‌دهد «کجا»، اما به سوال «چرا» پاسخ نمی‌دهد — برای این کار تحلیل کیفی رفتار لازم است.

نقشه‌های حرارتی برای برنامه‌های موبایل و دسکتاپ

نقشه‌های حرارتی موبایل از چند جهت با نقشه‌های دسکتاپ تفاوت دارند. در دستگاه‌های موبایل مکان‌نما وجود ندارد، بنابراین Move Heatmap با Touch Heatmap — نقشه لمسی که علاوه بر این فشار (3D Touch) و مدت زمان را ثبت می‌کند — جایگزین می‌شود. Scroll Heatmap در دستگاه‌های موبایل به دلیل اندازه محدود صفحه حیاتی است: محتوای «پایین تا» (below the fold) ممکن است ۷۰٪ کاربران نبینند.

نقشه‌های حرارتی دسکتاپ از حرکت مکان‌نما به عنوان نماینده توجه استفاده می‌کنند — همبستگی بین موقعیت مکان‌نما و تمرکز نگاه به ۰٫۸۵ می‌رسد. در دستگاه‌های موبایل چنین همبستگی وجود ندارد، بنابراین برای تحلیل توجه از نقشه‌های تثبیت نگاه (eye-tracking) یا لمس‌های طولانی استفاده می‌شود. به گزارش UXCam (2024)، heatmapهای موبایل به دلیل تنوع اندازه‌های صفحه به ۴۰٪ جلسات بیشتر برای معنی‌داری آماری نیاز دارند.

هنگام تنظیم نقشه‌های حرارتی برای برنامه‌های چندپلتفرمی، heatmapهای جداگانه برای iOS و Android ایجاد کنید — تفاوت در ناوبری (حرکات در مقابل دکمه‌ها) می‌تواند توزیع کلیک‌ها را به طور اساسی تغییر دهد. همچنین بر اساس نسخه سیستم‌عامل فیلتر کنید: عناصر رابط در Android 12+ با Material You ممکن است متفاوت از Android 11 به نظر برسند و قرار گیرند.

نمونه پیاده‌سازی نقشه حرارتی

برای ردیابی کلیک‌ها در برنامه موبایل روی Android از کد Kotlin زیر استفاده کنید. این کد مختصات لمس را ضبط کرده و برای ساخت نقشه حرارتی به سیستم تحلیلی ارسال می‌کند.

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
        }
    }
}

پس از جمع‌آوری داده‌ها، نقشه حرارتی را در ابزار BI بسازید یا از پلتفرم آماده‌ای مانند UXCam برای تجسم خودکار استفاده کنید.

مقایسه پلتفرم‌های نقشه‌های حرارتی

پلتفرم‌های نقشه‌های حرارتی از نظر عملکرد، قیمت و عمق یکپارچه‌سازی با SDKهای موبایل متفاوت هستند. Hotjar — محبوب‌ترین ابزار برای نقشه‌های حرارتی وب با رابط ساده و طرح رایگان تا ۳۵ جلسه در روز. با این حال Hotjar از برنامه‌های موبایل پشتیبانی نمی‌کند — فقط نسخه‌های وب و PWA. برای برنامه‌های موبایل از Smartlook یا UXCam با SDKهای بومی استفاده کنید.

UXCam — پیشرو در نقشه‌های حرارتی موبایل: از Android و iOS، فیلتر خودکار بر اساس کلاس دستگاه، حالت overlay برای تست‌های A/B و تشخیص ناهنجاری ML پشتیبانی می‌کند. Smartlook تعداد نامحدودی ضبط در طرح Growth ارائه می‌دهد و هم نقشه‌های حرارتی موبایل و هم وب را در یک پروژه پشتیبانی می‌کند. Microsoft Clarity — جایگزین رایگان برای پروژه‌های وب با ترافیک نامحدود، اما بدون پشتیبانی از SDK موبایل.

هنگام انتخاب پلتفرم، تعداد دفعات به‌روزرسانی داده، عمق فیلتر و امکان خروجی مختصات خام کلیک‌ها برای تحلیل سفارشی را در نظر بگیرید. به گزارش G2 Reviews (2025)، UXCam بالاترین امتیاز (۴٫۶/۵) را در میان راه‌حل‌های heatmap موبایل و Hotjar (۴٫۴/۵) را در میان راه‌حل‌های وب دریافت می‌کند.

اشتباهات رایج در تحلیل نقشه‌های حرارتی

اشتباه اول — تحلیل نقشه حرارتی بدون فیلتر کردن بر اساس دستگاه. وضوح صفحه به شدت بر موقعیت عناصر تأثیر می‌گذارد: آنچه در iPhone 15 Pro در بالا قرار دارد، در Android ارزان‌قیمت ممکن است در وسط باشد. همیشه heatmap را بر اساس مدل دستگاه یا اندازه صفحه فیلتر کنید.

اشتباه دوم — اشتباه گرفتن تعداد مطلق و نسبی کلیک‌ها. ناحیه قرمز ممکن است نه به دلیل تبدیل بالا، بلکه به این دلیل که عنصر ۵۰٪ از صفحه را اشغال می‌کند داغ باشد. از نقشه‌های حرارتی نرمال‌شده استفاده کنید که در آن رنگ درصد نسبت به اندازه عنصر را نشان می‌دهد.

اشتباه سوم — نادیده گرفتن زمان صرف شده روی صفحه. اگر کاربران زمان کمی را روی صفحه بگذرانند، نقشه حرارتی نه به دلیل طراحی بد، بلکه به دلیل علاقه کم «سرد» خواهد بود. Heatmap را همراه با معیارهای تعامل — Time on Screen و Session Duration — تحلیل کنید.