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

۵ شیوه‌ی بررسی Heat Map:

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

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

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

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

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

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

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

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

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

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

آیا هر عنصری که توجه کاربران به آن کم بود باید حذف شود؟

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

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

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

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

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

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

در این مورد، همیشه مسئله عناصر گرافیکی نیست. در تجربه‌ی اخیری که داشتیم، تیم مارکتینگ خواست کاری کنیم که تاریخ پایان کمپین به چشم بیاید و ما هم UI Pattern رایج را رعایت نکردیم و با عجله رنگ زمینه تاریخ را تغییر دادیم.

نتیجه: مارکتینگ راضی از دیده شدن تاریخ، ما خوشحال از حل شدن مسئله و کاربران بیچاره خسته از کلیک‌های بی‌فایده بر روی تاریخ شرکت در قرعه‌کشی!:(

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

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

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

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

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

در روز‌های اول روی صفحه هیت مپ گذاشتیم و با فهمیدن مشکل از این موقعیت استفاده کرده و همان قسمت را با کمی تغییر در متن تبدیل به تاثیرگذارترین دکمه‌ی فراخوان صفحه کردیم! :)

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

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