نقشه ی حرارتی یا هیت مپ(Heat Map) چیست و چگونه تحلیل کنیم؟

هیت مپ (Heat Map)، نقشه‌های حرارتی داده‌های گرافیکی و رنگی هستند که ما را قادر می‌سازند تا رفتار کاربرانمان را شناسایی کنیم. در واقع نقشه حرارتی (هیت مپ) یکی از تست های تجربه کاربری است که به ما یک دید بصری از رفتار و واکنشات بازدیدکنندگان را نمایش می‌دهد و به ما کمک می‌کند تا محصول را در راستای اهداف خود بهبود دهیم.

هیت مپ (Heat Map) یکى از ابزارهاى در دسترس براى بررسى رفتار کاربران است و نقشه‌ای است حرارتی که نشان می‌دهد در کدام قسمت صفحه، کاربران تعامل بیشتری داشته‌اند. با اینکه نقشه‌ی حرارتی می‌تواند حالت‌های مختلفی را از قبیلClick، Scroll ،‌ Mouse Movement،‌ User Attention و … نشان دهد اما در این مطلب تمرکز بر روی انتقال تجربه‌ی تحلیل هیت مپ از روی سرویس CrazyEgg و بهبود تجربه کاربرى به کمک آن است.

 

تاریخچه هیت مپتاریخچه هیت مپ

برای اولین بار هیت مپ در سال ۱۸۷۹ میلادی پژوهشگر فرانسوی به این نکته پی برد که مردم در هنگام مطالعه بر روی قسمتی از کلمات توقف می‌نمایند درحالیکه از برخی کلمات دیگر به سرعت عبور می‌کنند. بعدها دستگاهی به نام Eye Tracker ساخته شد که حرکات چشم را در زمان مطالعه زیر نظر می‌گرفت.

در سال ۱۹۸۰ میلادی از این روش برای بررسی توجه مردم به تبلیغات روزنامه‌ها و مجلات استفاده شد. هر چند که انجام این کار نیازمند صرف هزینه زیادی بود ولی آمار و اطلاعات به دست آمده باعث شد که روزنامه‌ها و مجلات با تغییر ساختار و طراحی خود بیش‌ترین بازدهی از تبلیغات را داشته باشند. بنابراین به‌کارگیری هیت مپ ها بسیار مهم و پرطرفدار شد.

آیا نشانگر ماوس معادل نگاه کاربر است؟

بر اساس تحقیقی که در دانشگاه کارنگی ملون انجام شد و نتیجه به دست آمده نشان می‌داد که بیشتر از ۸۸ درصد حرکات ماوس بر روی صفحات سایت ها با محل نگاه چشم به صفحه مطابقت می‌کند. بنابراین اگر حرکات و رفتار کاربران بر روی صفحات سایت را دنبال کنیم به اطلاعات ارزشمندی و مفیدی خواهیم رسید و یک هیت مپ تا اندازه‌ای دقیق در اختیار خواهیم داشت.

۵ روش بررسی Heat Map به شرح زیر می‌باشد:

توجه کنید استفاده از هیت مپ براى بررسى مواردى که در ادامه گفته شده است شاید بهترین راه حل نباشد، اما مطالب گفته شده در راستای تحلیل هیت مپ‌ها نگاه کاربردی شما را گسترده‌تر می‌کند.

۱. کشف جذاب‌ترین بخش صفحه

بدیهى‌ترین داده‌ای که در Heat Map به چشم میخورد، میزان توجه کاربران به بخش‌هاى مختلف صفحه است که از آن می‌توانید بفهمید که کدام بخش بیشترین تعامل را با کاربران ایجاد کرده است.

به عنوان مثال، بررسى هیت مپ صفحه‌ى سوالات متداول، بزرگترین سوال ذهن کاربران را نشان خواهد داد(البته اگر آن سوال داخل سوالات متداول باشد!) این سوال حاکی از یک کمبود در طراحی است که نمود پاسخ به این سوال در طراحی مجدد، وب‌سایت و یا اپلیکیشن شما را بهبود می‌بخشد.

هیت مپ‌ها در صفحات کمیپن‌ها و یا به طور کلی صفحاتی که حاوی چند پیام مختلف هستند نشان می‌دهند که کدام بخش از صفحه‌ى شما براى کاربران جذاب‌تر است. این جذابیت می‌تواند بخاطر طراحى خوب، ارزشی که به کاربران می‌دهید، نوع نوشتار و یا دکمه‌های فراخوان اثرگذار (CTA) بوجود آمده باشد.

هیت مپ سایت فیلیمو

این هیت مپ صفحه‌ی خرید سایت فیلیمو است. همانطور که انتظار می‌رود نسخه‌ی رایگان بیشترین طرفدار را دارد.

آیا هرجا توجه بیشتر بود یعنى جذاب تر است؟

هیت مپ خرید لباس

تصویر سمت راست هیت مپ کلیک و سمت چپ هیت مپ اسکرول است

لزوما نه! به هیت مپ بالا نگاه کنید، بخش گالری تصاویر محصول از شدت گرما داره میسوزه، اما وقتی این بخش را بررسی کردم متوجه مشکلی در طراحی شدم: کاربران مجبورند برای بزرگ کردن تصاویر، اول روی یک تصویر کلیک کرده بعد تصویر را ببندند و تصویر بعدی را باز کنند. در این مورد اگر بعد از باز شدن تصویر بزرگتر، تمامی تصاویر نیز دیده می‌شدند، کاربران به راحتی می‌توانستند تصاویر را عوض کنند. برای حل این مسئله می‌توان با کلیک روی هر تصویر، این مدل را پیشنهاد کرد.

هیت مپ لباس

۲. مقایسه عناصر مشترک در صفحات مختلف

جذابیت و قدرت تحلیل تجربه کاربری(User Experience) وقتی است که بتوانید داده‌های مختلف را باهم مقایسه و ترکیب کنید تا به درک جدیدی از کاربران برسیم.
گاهی وقت‌ها باید هیت مپ صفحات مختلف را باهم مقایسه کنید، این مقایسه اطلاعات زیادی از اهمیت عناصر مشترک در صفحات مختلف به شما خواهد داد. به تصویر زیر توجه کنید:

هیت مپ خبرنامه

این دو هیت مپ از خبرنامه‌ی یک سایت فروشگاهی است که در دو صفحه‌ی اول و صفحه‌ی محصول گرفته شده. بررسی عناصر مشترک در صفحات مختلف به ما نشان می‌دهد که در هر صفحه کاربران دنبال چه چیزی هستند و ما باید روی چه موضوعی در طراحی آن صفحات تمرکز کنیم.
همانطور که از این هیت مپ مشخص است کاربران علاقه‌ای به خبرنامه در صفحه‌ی محصول ندارند و همانطور که در مثال قبل دیدیم، کاربران در صفحه‌ی محصول علاقه زیادی به تصاویر و اطلاعات محصول دارند و شاید با حذف خبرنامه در این صفحه تمرکز کاربران بیشتر به سمت تکمیل خرید برود.

۳. مقایسه رفتار کاربران جدید و کاربران قدیمى

مقایسه‌ی کاربرانی که برای اولین بار به سایت ما آمده‌اند با کاربران قدیمی هم اطلاعات زیادی به ما می‌دهد. ممکن است یک تغیری برای کاربران جدید مفید و تاثیرگذار باشد اما برای کاربران قدیمی باعث تغییر عادت بشود و مشکل ایجاد کند.

مقایسه هیت مپ خبرنامه اینترنتی

مقایسه هیت مپ خبرنامه در حالت New Users و Returning Users

به بررسی خبرنامه برگردیم و از نظر New Users و Returning Users بررسی کنیم.
همانطور که در تصویر مشاهده می‌کنید خبرنامه فقط برای کاربران جدید مفید است و تنها ۱۰٪ از کل کسانی که از خبرنامه استفاده می‌کنند Returning Users هستند. می‌توانیم با حذف خبرنامه برای کاربران قدیمی و استفاده از فضای ایجاد شده تعامل کاربران قدیمی را افزایش دهیم.

۴. کشف اشتباهات در طراحی عناصر صفحه

در طراحی با اضافه کردن عناصر گرافیکی اضافی که معمولا مورد علاقه گرافیست‌ها و تیم‌های مارکتینگ است، حواس کاربران را از هدف اصلی پرت می‌کنیم و باعث ضعیف شدن دکمه‌های فراخوان و قوی شدن بی‌مورد برخی از عناصر خواهیم شد که نه به تجارت ما و نه به راحتی کاربران کمکی خواهد کرد.

مثال:در این رابطه از طراحی فرم خبرنامه‌‌ایست که از اول نوشته همراه ما بود:

هیت مپ ثبت نام در خبرنامه

این خبرنامه دکمه‌ی ثبت اطلاعات ندارد و دکمه‌ی زن و مرد، هم نقش تشخیص جنسیت کاربران و هم نقش ثبت اطلاعات را به عهده دارد. در نگاه اول بنظر جذاب میاد و شاید فکر کنیم چقدر کاربردی که کاربر یک حرکت کمتر برای ثبت در خبرنامه باید انجام بدهد. اما با بررسی Heat Map نتیجه دیگه‌ای خواهیم گرفت:

هیت مپ و نرخ کلیک ثبت نام در خبر نامه

عداد کلیک روی دکمه‌های زن و مرد ۴ برابر(!) بیشتر از کلیک روی ایمیل است و این نشان می‌دهد که خیلی از کاربران این نوع ساختار را متوجه نشده‌اند. و بدتر اینکه با دیدن ویدیو‌های MouseFlow متوجه شدم خیلی از کاربران موبایل در صفحه‌ی ثبت‌نام دکمه‌های زن و مرد خبرنامه را به عنوان بخشی از فرم ثبت‌نام انتخاب می‌کنند و از مسیر ثبت‌نام خارج می‌شوند.

۵. استفاده از هیت مپ در A/B Testingها و بهبود طرح‌ها

هیت مپ‌ها در A/B Testing هم خیلی کمک کننده ‌هستند. در تست‌ها همیشه یکی برنده است اما برنده بودن یک طرح به معنی بد بودن تمامی بخش‌های طرح قبل نیست. اگر در A/B Testing از Heat Map استفاده کنیم، مشکلات طراحی‌ها را خواهیم فهمید و حتی می‌توانیم طرح برنده را با استفاده از نقاط قوت طرح بازنده تقویت کنیم. سعی می‌کنم در نوشته‌ای دیگر در مورد استفاده از Heat Map در A/B Testing بگم و مثال‌هایی را بررسی کنیم.

 

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

این نکته را به یاد داشته باشید هر چه زمان بیشتری را صرف جمع‌آوری اطلاعات از کاربران سایت خود کنید هیت مپ سایت شما دقیق تر خواهد بود. هنگامی که هیت مپ سایت شما ایجاد می‌شود،الگویی را در دسترس خواهید داشت که معمولاً نقاط زرد و قرمز نشان‌دهنده توجه بیشتر کاربران به آن قسمت ها است.

باید نهایت استفاده از این نقاط استفاده کنید زیرا این داده‌ها به شما کمک می‌کند که در طراحی و چینش بخش های مختلف صحیح تصمیم گیرید. مطالب مهم یا تبلیغات را در نقاط صحیح قرار دهید. هنگامی که بدانید که کدام نقاط سایت شما بیشتر مورد توجه قرار می‌گیرد،تصمیم‌گیری برای بهبود سایت بسیار راحت و آسان خواهد بود.

بیشتر از نقشه حرارتی برای قرار دادن تبلیغات در مکان های بهتر و استفاده می‌شود. بررسی و تحلیل هیت مپ سایت های گوناگون نشان می‌دهد که سمت چپ بالای سایت یکی از بهترین مکان ها برای قرار دادن تبلیغات است. سمت راست هم توجه زیادی را به سوی خود جذب می‌کند و در خصوص هیت مپ های به دست آمده از موبایل ها و تبلت ها نیز صادق است.

با بررسی هیت مپ آگاه خواهید شد که نرخ کلیک در کدام بخش از سایت شما بیشتر است. اگر فروشگاه دارید بهتر است دکمه سبد خرید و پرداخت یا پیشنهاد های ویژه را در آنجا قرار دهید. قسمت های که توجه کمتری دارند را شناسایی کرده و اصلاح نماید.

کاربرد نقشه حرارتی تنها مختص سایت ها نیست. اگر اپلیکیشن نیز طراحی می‌کنید باید به هیت مپ توجه کنید و بخش های مهم تر را در نقاط که توجه بیشتری جلب می‌کند قرار دهید.

ابزارهای برای ایجاد HeatMap

یکی از ابزار های که می‌توانید به کمک آن نقشه حرارتی برای سایت خود ایجاد نماید سایت Hotjar است. کافی است در سایت ثبت‌نام کرده و کد آن را در داخل سایت خود قرار دهید و بعد از آن مانیتورینگ سایت آغاز خواهد شد. در راهنمای سایت Hotjar هشت تست نقشه حرارتی به همراه راه حل هر یک از آن ها ارائه شده است که توسط ۳ نوع هیت مپ زیر قابل انجام است.

Click and Tap Heatmaps

هیت مپ کلیک و لمس

نشان می‌دهد که بازدیدکنندگان از طریق سیستم دسکتاپ بر روی کدام ناحیه بیش‌ترین کلیک را انجام کرده اند. و یا از طریق موبایل یا تبلت کدام بخش های صفحه را بیشتر لمس کرده‌اند.

Move HeatMaps

هیت مپ حرکت ماوس

تنها برای سیستم های دسکتاپ مورد استفاده قرار می‌گیرد و با بررسی حرکات موس به شما نشان می‌دهد که کاربران به چه بخش های بیشتر توجه کرده‌اند.

هیت مپ اسکرول یا پیمایش

نشان می‌دهد که تا کجای صفحه بیشتر اسکرول می‌شود. هنگامی که تعداد زیادی از بازدیدکنندگان تا انتهای صفحه اسکرول می‌کنند و به دنبال هدف مورد نظر خود هستند به معنای این است که محتوای مهم سایت به خوبی در معرض دید قرار ندارد.

3 دیدگاه ها
  1. djsnowman میگوید

    دست شما درد نکنه
    خسته نباشید

  2. zahra kamran میگوید

    سلام ممنون از مقاله خوبتون.. چجور ما میتونیم هیت مپ سایر سایت ها را داشته باشیم؟ مگر نه اینکه باید اسکریپت hotjor رو داخل سایتمون قرار بدیم تا اطلاعات رو داشته باشیم.. برای بقیه سایت ها روند به چه شکله؟

    1. mohsen میگوید

      شما نمیتونید هیت مپ سایر سایت ها رو داشته باشید. همانطور که نمیتونید آنالیتیکس سایر سایت ها رو داشته باشید. با تشکر.
      خوشحال میشم با نظرات تخصصی oxteam به ارتقای وب سایت من کمک کنید.

پاسخی دهید

آدرس ایمیل شما منتشر نخواهد شد.

دو × پنج =

تماس از خطوط ثابت کل کشور: ۷۰۷۰۷۰۱۲-۰۲۱

پاسخگویی از ۸ صبح تا ۱ شب حتی ایام تعطیل

پاسخی دهید

آدرس ایمیل شما منتشر نخواهد شد.

دو × 1 =

تماس از خطوط ثابت کل کشور: ۷۰۷۰۷۰۱۲-۰۲۱

پاسخگویی از ۸ صبح تا ۱ شب حتی ایام تعطیل