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

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

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

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

طراحی بر مبنای رفتار کاربر – روز جهانی کاربردپذیری ۱۳۹۵

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

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

موضوعات مورد بحث:

  • چرا باید به سمت واقع گرایی پیش برویم؟
  • راهکار عملی تغیر مسیر حدس و گمان به طراحی بر مبنای رفتار کاربران نهایی
  • معرفی چند ابزار و شیوه‌های ارزیابی طراحی
  • نکاتی در مورد A/B Testing و اهمیت استفاده از این روش
  • جایگاه خلاقیت در طراحی بر اساس اطلاعات

اگر شما هم نگران آینده محصولاتتان هستید، این ارائه به شما کمک خواهد کرد تا مسیر طراحی و تجربه‌ی کاربری محصولاتتان را بهبود ببخشید:

Continue reading طراحی بر مبنای رفتار کاربر – روز جهانی کاربردپذیری ۱۳۹۵

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

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

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

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

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

ابزارهای بررسی رفتار کاربر: معرفی Google Tag Manager

قصد دارم ابزار‌ها و تکنیک‌هایی که روزانه با آن‌ها مشغول بررسی رفتار کاربران هستم را معرفی کنم تا بتوانیم با این تبادل اطلاعات و به کمک نظرات شما کارایی محصولاتمان را افزایش بدیم.

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

GTM یا همان Google Tag Manger یک Tag management system است که کمک می‌کند به راحتی و بدون نیاز به دسترسی به کد برنامه، بتوانیم کد‌هایی را به سایت و حتی اپلیکیشن موبایل(iOS و Android) اضافه کنیم. این کد‌ها قطعا کد‌های اصلی برنامه نیستن و کد‌های جانبی هستند که معمولا برای ثبت آمار و رفتار کاربران از آن‌ها استفاده میکنیم. کد‌های سرویس‌هایی همچون Google Analytics، Optimizely, MouseFlow, CrazyEgg و …

Continue reading ابزارهای بررسی رفتار کاربر: معرفی Google Tag Manager

طراحی و توسعه براساس کاربران نهایی محصول (بررسى آمار بازدید کنندگان آپارات)

مهمترین عامل تعیین کننده اولویت‌ها، کاربران یا همان مشتریان هستند، آن ها تعیین میکنند که شما باید اول نسخه موبایل وبسایتتان را آماده کنید یا نسخه دسکتاپ را.

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

خوشبختانه مجموعه آپارات در یک سال گذشته شروع به ارایه آمارهایی به طور رسمى و غیر رسمى در شبکه هاى اجتماعى کرده است و این هفته به مناسبت “عبور از مرز ٧.۵ میلیون نمایش موفق ویدیو در روز“، اطلاعات کاربردی را منتشر کردند. آمارى که شامل بخش بزرگى از ترافیک ایران می‌شود. این آمار و اطلاعات به شما کمک می‌کند تا در مسیر درست منابع خود را صرف کنید.

اما بیاید کمی جزیی‌تر به این آمار نگاه کنیم:

Continue reading طراحی و توسعه براساس کاربران نهایی محصول (بررسى آمار بازدید کنندگان آپارات)

هفت اصل فعال‌کننده‌های دستی در ریز‌تعامل‌ها / Microinteractions Manual Triggers

در مطلب قبل به معرفی ریزتعال‌ها / Microinteractions پرداختیم و گفتیم ریز‌تعامل‌ها آن جزییاتی از طراحی هستند که شاید دیده نشوند اما به خوبی حس می‌شوند و یک تجربه بی‌نظیر در ذهن کاربر به جا می‌ذارند. این جزییات به اندازه‌ی تصویر کلی محصول مهم هستند. اگر محصول ما یک امکان خیلی خوب داشته باشه ولی به جزییات ارائه آن دقت نکنیم، قطعا آن امکان خوبی که ساخته‌ایم به اندازه کافی مورد توجه قرار نخواهد گرفت.

بهترین تعامل با کاربر از درک کاربر ومحیط شروع می‌شود، یعنی اینکه ما بدونیم کاربر می‌خواد چیکار کنه؟ کی قرار این کار انجام بشه؟ کجا قرار این ریز‌تعامل اتفاق بیافته؟ Continue reading هفت اصل فعال‌کننده‌های دستی در ریز‌تعامل‌ها / Microinteractions Manual Triggers

مقدمه‌ای بر Microinteractions یا جزییات دوست‌داشتنی در طراحی

پنج‌شنبه هفته پیش در ریحون ارایه‌هایی داشتیم در مورد Whitespace، Node.js و من هم در مورد Microinteractions صبحت کردم که در این مطلب قصد دارم در موردش بنویسم.

در مطلب قبلی(چشم طراح، چشم حقیقت بین) در مورد طراحی صحبت کردیم که ما نیاز به دو چشم داریم چشمی که جزییات را ببیند و چشمی که مانند کاربر طرح را حس کند در این مطلب می‌خوام در مورد آن بخش احساسی صبحت کنم و اینکه چه چیزی باعث میشه به کاربر حس خوبی داده بشه. ویدیو زیر را ببینید:

The details are not the details. They make the design.
~ Charles Eames

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

Microinteractions آن جزییاتی از طراحی است که کاربر معمولا نمیبینه ولی حسش میکنه و حتی ممکن یادش هم نمونه که آن Microinteractionsی که دیده چه بوده، اما قطعا آن برنامه را یادش میمونه و میگه “من عاشق این اپلیکیشن هستم!”

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

Continue reading مقدمه‌ای بر Microinteractions یا جزییات دوست‌داشتنی در طراحی

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

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

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

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

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

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

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

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

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

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

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

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

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

ساختار تعریف و استفاده از Media Queries در Sass

برای راحت‌تر شدن طراحی واکشگرا(Responsive) ابزار‌، فریمورک و روش‌های بسیاری آمده که در همین رابطه قصد دارم ساختاری که برای تعریف مدیا کوئری‌ها در Sass استفاده میکنم را شرح دهم. در انتها این مطلب با مفاهیم زیر آشنا می‌شوید:

  • Interpolation – #{}
  • @content
  • nth()
  • length()
  • @warn

من طرفدار فریمورک Zurb Foundation هستم، پس اول به روش فاندیشن متغیر‌های مربوط به مدیا کوئری را تعریف میکنم.
اولین سری متغیرها مشخص کننده محدوده‌ی مدیا کوئری‌ها هستند که به پنج قسمت تقسیم شدند(شما میتونید این محدوده‌ها و تعدادشون را بر اساس نیاز خودتون تغییر بدهید):

Continue reading ساختار تعریف و استفاده از Media Queries در Sass