کاربرت چیکار میکنه وقتی نگاهش نمیکنی؟!

آشنایی با Microsoft Clarity ابزاری که رفتار واقعی کاربر رو نشون میده

یه لحظه هست که هر دیزاینری باهاش آشناست: PM میگه: طراحی خوبه اما داده‌ها میگن کاربرا میان و میرن، مشکل از کجاست؟؟
PM میدونه کجای funnel مشکل داره. صفحه محصول. ولی نمیدونه چرا؟ اینجاست که کار تو به عنوان دیزاینر شروع میشه!
جواب دادن بدون داده یعنی حدس زدن و حدس، پایه‌ای برای تصمیم طراحی نیست. یکی از ابزارهایی که اینجا بهت کمک میکنه Microsoft Clarity هست.

Clarity چیه و چه جایگاهی داره؟

Microsoft Clarity یه ابزار رایگان برای تحلیل رفتار کاربره. فرقش با گوگل آنالیتیکس چیه؟

Google Analytics میگه چند نفر اومدن و کجا رفتن (اعداد و آمار)

Microsoft Clarity میگه چطور رفتار کردن (ویدیو و تصویر)

GA میگه کدوم صفحه مشکل داره، Clarity میگه مشکل دقیقاً چیه. 

سه قابلیت اصلی Clarity
Session Recording تمام حرکات موس، کلیک‌ها، و اسکرول‌های یه کاربر واقعی رو ضبط میکنه. میتونی ببینی کاربر دقیقاً چی دیده و چیکار کرده.
Heatmap داده های کلیک هزاران کاربر رو روی هم میذاره و نشون میده کدوم قسمت‌های صفحه داغه و کدوم سرد. سه نوع داره: Click، Scroll، و Attention
Insights خودکار یعنی خودش رفتارهای مشکل‌دار رو شناسایی میکنه. با چیا؟

Rage clicks، Dead clicks، Excessive scrolling، و Quick backs 

این مفاهیم رو با یه مثال توضیح میدم چون یادگیری ابزار بدون تمرین فراموش کردنه!

تصور کن درخواست PM رو گرفتی. میری سراغ Clarity و Overview داشبورد رو میبینی:

چهارتا عدد توجهت رو جلب میکنه

Add to cart CTR: 12%

Scroll depth: 60%

Rage clicks: 18%

Dead clicks: 23%

این ۴ پارامتر رو بشناس:

Add to cart CTR  از هر ۱۰۰ نفری که وارد صفحه محصول شدن، فقط ۱۲ نفر دکمه افزودن به سبد رو زدن

Scroll depth کاربرا به طور میانگین تا ۶۰٪ صفحه رو اسکرول کردن. یعنی ۴۰٪ پایین صفحه رو اکثراً ندیدن

Rage Click  کاربر از سر ناامیدی چند بار روی یه چیز کلیک میکنه. انتظار داشته کلیک‌پذیر باشه ولی نبوده

Dead Click  کلیک روی چیزی که interactive نیست. کاربر انتظار داشته اتفاقی بیفته ولی نیفتاده

این اعداد میگن «مشکل داریم» ولی نمیگن کجا؟ Rage Click 18% یعنی یه جایی روی صفحه کاربر ناامید میشه. Dead Click 23% یعنی یه چیزی رو کلیک‌پذیر فرض کرده که نیست. ولی کجا؟ کدوم المان؟ برای جواب این سوال باید بری سراغ Heatmap.

Heatmap سه تا چیز نشون میده:
بیشترین کلیک‌ها روی عکس محصوله: کاربرا میخوان زوم کنن ولی نمیشه. این همون منشأ Rage Click 18%ه. کاربر چند بار روی عکس میکوبه، چیزی نمیشه، و ناامید میره
کلیک زیاد روی نام برند: ولی لینک نیست. این Dead Click 23%ه. کاربر انتظار داره بره صفحه برند، ولی هیچ اتفاقی نمی‌افته
بخش نظرات تقریباً صفر کلیک دریافت میکنه: چون فقط 12% کاربرا اصلاً به اون پایین صفحه میرسن!

از داده به راهکار طراحی

۱. عکس زوم‌پذیر نیست برای این باید یه راهکار پیدا کنی مثلا یه راهکار  gesture-based zoom برای موبایل، pinch-to-zoom و double-tap
اجرا با developer هست، تعریف با تو! 
۲.نام برند Dead Click میخوره
دو راه داری: لینکش کنی به صفحه برند، یا استایلش رو طوری عوض کنی که شبیه لینک نباشه. رنگ و فونت عوض کردن بدون تصمیم درباره interaction مشکل رو حل نمیکنه!
۳.نظرات دیده نمیشن
نظرات رو بیاری بالا؟ خب اینجا مفهوم Hierarchy یک صفحه بهت میگه که جای منطقی نظرات پایین صفحه هست. پس دنبال یه راهکار میگردی!
مثلا یه راهکار: یه خلاصه rating بالای صفحه، کنار قیمت اضافه کن! ⭐ 3.7 (300 نظر). کاربر بدون اسکرول اینو میبینه!

سه تا مشکل پیدا کردی. حالا وقتشه بری پیش PM.  ولی فقط مشکلات رو نگو!

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

فرق دیزاینری که حدس میزنه با دیزاینری که داده میخونه اینه که دومی میتونه از تصمیمش دفاع کنه!