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

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

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

ادامه خواندن هیت مپ(Heat Map) را چگونه تحلیل کنیم؟

در A/B Testing به چه نکاتى توجه کنیم؟

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

قطعا ما با هم کنار نمیایم(!) برای همین اون از مسیر همیشگی رفت و من از مسیر جدید، من ۵ دقیقه دیرتر به شرکت رسیدم. اگر هر کدوم کوتاه میامدیم و باهم هم مسیر می‌شدیم دیگر متوجه نمی‌شدیم کدوم مسیر بهتر است و همیشه به هم غر می‌زدیم که نه اون یکی مسیر بهتر بود!

این یک مثال روزمره از شیوه‌ی آزمایش A/B Testing بود که در ادامه دقیق‌تر درموردش صحبت می‌کنیم. اما یک سوال مطرح می‌کنم در موردش فکر کنید و بعد از خوندن مقاله جواب سوال را بدهید. بنظرتون راه محمد بهتر بود یا راه من، که ۵ دقیقه دیرتر رسیدم به کار؟

ادامه خواندن در A/B Testing به چه نکاتى توجه کنیم؟

چشم طراح، چشم حقیقت بین

یک سوال مهم وجود داره این که دیزاین یعنی چی و چطور میشه آن را یاد گرفت؟

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

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

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

ادامه خواندن چشم طراح، چشم حقیقت بین

ساختارمندتر کردن پروژه‌های CSS با استفاده از ویژگی Extend

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

یکی از این کارهای موثر، پیاده‌سازی مفاهیم Object Oriented CSS است که به طور خیلی ساده، OOCSS یعنی جدا کردن قسمت‌های مختلف: ساختار، طراحی و … و پرهیز از تکرار کد‌ها.
خیلی وقت‌ها پیش می‌آید که قسمت زیادی در کد‌ها و یا حتی پروژه‌های مختلف تکرار می‌شود. این موضوع اصلی این مطلب هست که روش‌های مختلفی برای حل این مسله داریم.

دو راه حل کلی برای حذف تکرار کدهای CSS وجود دارد:

  1. ایجاد تغییرات در نام‌های کلاس‌ها در فایل HTML
  2. تغیر در ساختار نوشتار CSS

یک مثال ساده مطرح میکنم: من برای نمایش لوگو سایت‌ها عکس را به عنوان بکگراند المان(در هدر مثلا h1 و در فوتر span) قرار می‌دهم و با این کار میتونم نام سایت را هم درون تگ HTML بنویسم. و سپس با استفاده از CSS آن نام را از نمایش کاربر مخفی نگه می‌دارم و تنها برای موتور‌های جستجو خوانایی دارد.
خب برای هر عکسی که بخواهم این کار را بکنم (لوگو هدر، لوگو فوتر و …) باید این کد‌ HTMLنوشته:

ادامه خواندن ساختارمندتر کردن پروژه‌های CSS با استفاده از ویژگی Extend

چجوری با SASS یکبار کد بزنیم و دو خروجی RTL و LTR بگیریم؟

یکی از مشکلاتی که همیشه در طراحی سایت درگیرش بودیم و ساعت‌ها وقتمون را در شرکت می‌گرفت طراحی سایت‌های دو زبانه و ماجرای RTL کردن بود. اما با استفاده از Sass و ایده گرفتن از روشی که Foundation برای راست به چپ کردن استفاده کرده به روشی رسیدم که به راحتی می‌توانید یکبار کد بزنید اما با تغییر مقدار یک متغیر خروجی متفاوتی از فایل CSS خود بگیرید.

کد زیر بر همین اساس نوشته شده:

// Choose your site direction. LTR or RTL?
$text-direction: ltr;

// We equal $text-direction to $dir, you can use both of them in your code
@import "direction-controller";

body {
    direction: $dir;
    text-align: $left;

    // For different image in your code, you can use this solution. Use
    background-image: url(../img/#{$dir}/bg.png);
    background-position: $left top;

	@include if-ltr {
		line-height: 18px;
	}
	@include if-rtl {
		line-height: 22px;
		h1 {
			line-height: 25px;
		}
	}
}

#container {
    float: $left;
    line-height: dir-check(52px, 30px);
    padding: dir-values(1px 2px 3px 0);
}

#sidebar {
    float: $right;
    margin-#{$left}: 50px;
}
.next {
	content: dir-check('>', '<');
}
.br {
	border-radius: br-values(0 0 25px 0);
}

همانطور که میبینید فقط کافی است یکسری قوانین را در نوشتن رعایت کنید. برای گرفتن خروجی rtl یا ltr مقدار متغیر text-direction را تغییر دهد.(خروجی را ببینید: RTL، LTR)

روش استفاده

یک مجموعه توابع و میکسین نوشتم که پس از متغیر text-direction آن را import می‌کنیم. نگاهی به این فایل بیاندازید.

متغیر‌ها

در این فایل دو متغیر right و left تعریف شده که این دو بر اساس rtl بودن یا نبودن مقدار آن‌ها تغییر می‌کند:

ادامه خواندن چجوری با SASS یکبار کد بزنیم و دو خروجی RTL و LTR بگیریم؟

Sass چی داره که Less نداره؟

امیدوارم از مطلب قبل تا الان با Sass کار کرده باشید، چطور بود؟ به مشکلی بر نخوردید؟ اگر چیزی بوده توی کامنت‌ها بگید تا در موردش بحث کنیم.

Sass ابزار‌های قدرتمندی در اختیار میذاره که هیجان کار و سر و کله زدن با آن ها را بالا می‌بره:

 

Mixin Directives

Mixinها یکی از قدرت‌ترین ویژگی‌هایی است که از تکرار کد جلوگیری کرده و باعث تمیز شدن کد می‌شود. در واقع کد را یکبار نوشته و چندجا استفاده می‌کنید. مثال زیر را ببینید:

ادامه خواندن Sass چی داره که Less نداره؟