نقشه ی حرارتی یا هیت مپ(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
تنها برای سیستم های دسکتاپ مورد استفاده قرار میگیرد و با بررسی حرکات موس به شما نشان میدهد که کاربران به چه بخش های بیشتر توجه کردهاند.
نشان میدهد که تا کجای صفحه بیشتر اسکرول میشود. هنگامی که تعداد زیادی از بازدیدکنندگان تا انتهای صفحه اسکرول میکنند و به دنبال هدف مورد نظر خود هستند به معنای این است که محتوای مهم سایت به خوبی در معرض دید قرار ندارد.
دست شما درد نکنه
خسته نباشید
سلام ممنون از مقاله خوبتون.. چجور ما میتونیم هیت مپ سایر سایت ها را داشته باشیم؟ مگر نه اینکه باید اسکریپت hotjor رو داخل سایتمون قرار بدیم تا اطلاعات رو داشته باشیم.. برای بقیه سایت ها روند به چه شکله؟
شما نمیتونید هیت مپ سایر سایت ها رو داشته باشید. همانطور که نمیتونید آنالیتیکس سایر سایت ها رو داشته باشید. با تشکر.
خوشحال میشم با نظرات تخصصی oxteam به ارتقای وب سایت من کمک کنید.