https://virgool.io/UIUXcourse/feed آموزش طراحی تجربه کاربری (UX Design) و کمی هم رابط کاربری (UI Design) در قالب مقاله، ویدئو و دوره‌ی آموزشی UI UX fa 2026-06-18 00:20:27 https://files.virgool.io/upload/publication/hmtrxp6laxav/flxdzo.jpeg https://virgool.io/UIUXcourse https://virgool.io/UIUXcourse/inclusive-design-%DA%86%DB%8C%D8%B3%D8%AA-wddvgo8wnhbe دنیا برای مردِ سالمِ سفید پوستِ راست دستِ ۱۷۵ سانتی‌متری با وزن ۷۷ کیلیوگرم طراحی شده. این به این معنی است که اگر شما قد بلندتر از نورمال باشید برای استفاده از هر وسیله‌ی نقلیه‌ای با مشکل مواجه هستید.حتی برای خرید تخت‌خواب هم شاید مجبور بشین نسخه کاستومایز شده و طبیعتا گرون‌تر رو بخرید. تقریبا هر ویژگی که در مورد شما از حد نورمال کمتر یا بیشتر باشد با مشکل مواجه می‌شوید.جالب اینه که حتی به نظر می‌رسه خانم‌ها رو هم نه به عنوان یه ماهیت جدا بلکه تنها به عنوان یک پارامتر متغییر از مردِ سفید پوست راست دستِ ۱۷۵ سانتی‌متری با وزن ۷۷ کیلیوگرم محاسبه می‌کنن.اولین بار با این اصطلاح در اپیزود زنان نامرئی بی‌پلاس مواجه شدم و باید بگم به عنوان یک آنتی فمنیست هم با شنیدن این قسمت متوجه شدم که چقدر زنها در طراحی فراموش شدن و تنها به عنوان یه متغییر به حساب اومدن.جالب اینه که حتی اگر در جایی مثل تست امنیت ماشین هم خواستن از عروسک‌های تصادف مشابه آناتومی بدن زنان استفاده کنن به جای استفاده از وزن متوسط خانم‌ها از عروسکی استفاده کردن که از ۹۵٪ درصد جامعه کوچیکتره. (اونچه مرد، از بدن زن انتظار داره نه اونچه که واقعا هست)فرد متوسط وجود ندارداگر بخواهیم فردی رو پیدا کنیم که در تمامی پارامترها در متوسط جامعه قرار بگیره اون فرد وجود خارجی نداره.در تحقیقی، ۴.۰۶۳ نفر رو به صورت تصادفی انتخاب کردن و از بین اونها افرادی که قد متوسط جامعه رو داشتن جدا کردن. تعداد این افراد ۱.۰۵۵ نفر بوده. از بین این افراد، افرادی رو که دور سینه برابر با متوسط جامعه داشتن رو جدا کردن. عدد رسیده به ۳۰۲ نفر. یعنی اگر بخواهیم فقط بر اساس ۲ مولفه تعداد افراد متوسط یه جامعه رو اندازه بگیریم، با تغریب خوبی تنها ۷.۴٪ جامعه در این دسته‌بندی قرار می‌گیرن. هر چه تعداد مولفه‌ها بیشتر بشه این درصد کمتر می‌شه تا جایی که با ۱۰ مولفه به صفر میل می‌کنیم.طراحی فراگیر (Inclusive Design)در نتیجه در زمان طراحی نباید تنها به مولفه‌های متوسط توجه کنیم بلکه باید تمامی افراد به خصوص افرادی که از متوسط جامعه فاصله‌ی زیادی دارند رو هم مورد توجه قرار بدیم که تعداد بیشتری بتونن از محصولات و خدمات ما استفاده کنند. https://www.youtube.com/watch?v=PlMepK9_CcU&list=PLT4L2_8BD6pmYfYtecPltD0JAB7yRpppb&index=27 تو ویدئوی یوتیوب یک فرد نابینا چطور با Screen Reader کار می‌کند؟ که با امید هاشمی عزیز در مورد دسترس‌پذیری داشتم توجه منو به نکته‌ی مهمی از طراحی فراگیر (Inclusive Design) جلب کرد که تا قبل از اون اینجوری ندیده بودمش.در تعریف طراحی فراگیر (Inclusive Design) که بهش طراحی جهان‌شمول (Universal Design) هم می‌گن اینجوره اومده که:طراحی فراگیر یک فرآیند طراحی است که در آن یک محصول، خدمت یا محیط برای بسیاری از افراد بدون نیاز به سازگاری‌های ویژه قابل استفاده باشد.تفاوت Inclusive Design و A11Yبه نظر میاد درک طراحی فراگیر با مشخص کردن تفاوت اصلی Inclusive Design و Accessibility راحت‌تر امکان‌پذیره.این تفاوت در این جمله نهفته‌ است که هر گاه صحبت از دسترس‌پذیری می‌شه به تفاوت بین فرد معلول و نرمال نگاه می‌شه در حالی که همونطور که بالاتر گفتیم اصلا چیزی تحت عنوان فرد متوسط نداریم و این تفاوت اصلی طراحی فراگیره.به علاوه در صحبتم با امید متوجه شدم دلیل ارجهیت طراحی فراگیر به A11Y اینه که افراد دارای معلولیت نباید حس متفاوت و خاص بودن داشته باشن در نتیجه اینکه در زمان طراحی، گروهی رو به عنوان معیار قرار ندیم و برای همه با هر مدل تفاوتی طراحی بکنیم از اهمیت بسیاری برخورداره.در انتها پیشنهاد می‌دم که مقاله‌‌های طراحی فراگیر(Inclusive Design) راهی ساده برای طراحی محصول و بیاید یکبار از زاویه دید «صداها» به تجربه کاربر نگاه کنیم(VUI/VUX) رو هم بخونین که دید بهتری از این موضوع پیدا کنین.خوشحال می‌شم نظر شما رو هم در این باره بدونم و یا در موردش در شبکه‌های اجتماعی صحبت کنین که این موضوع به گوش افراد بیشتری هم خورده باشه.قسمت دوم مصاحبه با امید رو هم با نام وب اپ‌ها از دید صفحه خوان ها رو می‌تونین تو یوتیوب ببینین. (فیلتر شکن نیازه) آموزش UI UX امیر تقی آبادی Tue, 13 Jul 2021 16:21:01 +0430 https://virgool.io/UIUXcourse/ui-style-guide-%DA%86%DB%8C%D8%B3%D8%AA-fg4ua1axbvkd استایل گاید مجموعه‌ای از استانداردهای نوشتاری،‌ طراحی، گریدبندی و ... است که کمک می‌کند سرعت و انسجام در طراحی بیشتر شود. یک نمونه استایل گایدمعمولا استایل گاید رو در ابتدای شروع طراحی می‌سازن. این کار کمک می‌کنه طراحی در ادامه شبیه کار با ابزارهای پیش‌ساخته و حتی لگو بازی بشهمزایای استایل گایددر مورد اهمیت استایل گاید هر چقدر هم که بگم تا زمانی که در یک پروژه واقعی باهاش مواجه نشین متوجه اهمیتش نمی‌شین اما موارد زیر شاید بتونه شما به اندازه‌ی کافی از استایل گاید نداشتن بترسونه.انسجاممن تا الان در بسیاری از مقالات و ویدئوها در مورد اهمیت Consistency صحبت کردم و به عنوان یکی از اصول ۱۰ گانه Heuristic Evaluation هم بهش پرداختم. در همه‌ی این موارد صحبت بر لزوم انسجام بوده. این اولین باره احتمالا که دارم راهکار مدونی برای پیاده‌سازی این استانداردسازی هم ارائه می‌کنم.استایل گاید کمک می‌کنه با استاندارسازی اولیه در طراحی، هماهنگی و انسجام نهایی رو بیشتر کنیم. از اونجایی که در ابتدای طراحی میاییم و یه سری استاندارد برای تایپوگرافی، رنگ، آیکن، گریدبندی و افکت‌ها آماده می‌کنیم و در طول دیزاین اونها رو رعایت می‌کنیم باعث می‌شه در نهایت طرح نهایی انسجام لازم رو داشته باشه.زبان مشترکاز آنجا که دولوپرها هم در شروع برنامه‌نویسی ابتدا این استایل گاید را پیاده سازی می‌کنند اگر نام‌گذاری المان‌های استایل گاید به درستی انجام شده باشه تیم دیزاین و برنامه‌نویسی می‌تونن تعاملات بهتری داشته باشند.مثلا تنها کافیه برای اصلاح رنگ وضعیت یک دکمه طراح به برنامه‌نویس بگه که در حالت Hover رنگ این دکمه باید Primary Light باشه و از استایل فونت Button استفاده بشه. اینجوری هر دو تیم با زبان مشترک با هم ارتباط می‌گیرن که سرعت کار رو در نهایت بیشتر می‌کنه.بروزرسانی در لحظهخوبیه بزرگ طراحی کامل بر مبنای المان‌های استایل‌گاید اینه که هر زمانی که لازم باشه طراحی رو با فونت و رنگ دیگه‌ای هم ببینیم فقط کافیه که در استایل گاید این تغییرات رو بدیم و اینجوری این تغییرات بر کل طراحی اعمال می‌شه.اینجوری در جلسه بعدی که سر این بحث می‌شه که بهتر بود از زنگ X به جای Y استفاده کنیم به جای بحث‌های طولانی می‌شه این این تغییرات رو در چشم به هم زدنی اعمال کرد و حالا با دیتا در مورد گزینه‌هامون صحبت کنیم.ساده کردن کارهامعمولا پروژه‌های بزرگ و پیچیده هر چقدر که جلوتر بریم بر حجم این پیچیدگی افزوده می‌شه و از یه جایی به بعد اگر استایل گایدی وجود نداشته باشه درک موقعیت سخت می‌شه برای همین استاندارهای توی استایل گاید کمک می‌کنه در زمان طراحی هر المان جدید بشه به راحتی با بررسی مجدد اون قوانین اولیه تصمیمات منسجم و مبتنی بر منطق گرفت.کار یکبارههر چند ساخت اولین استایل گاید کار بسیار سختیه اما خوبیش اینه که یه بار که بسازیش در بسیاری از پروژه می‌تونی با تغییرات مختصری استفادش کنی یا حتی ساخت یه استایل گاید جدید ۱۰ برابر سریعتر از اولین استایل گاید زمان‌بره.تکمیل به مروردرسته طراحی اولین استایل گاید می‌تونه سخت باشه اما از اونجا که می‌شه استایل گاید رو به مرور تکمیل کرد می‌تونیم به راحتی از پایه‌ای ترین چیزها شروع کنیم و همینطور که در طراحی پیش می‌ریم و به استاندارهای جدیدی نیاز داریم اونها رو ایجاد کنیم.استایل گاید شامل چه مواردی است؟مهمترین المان موجود معمولا تایپگرافی و رنگ‌های موجود در استایل گاید است که برخی از طراحان در طراحی تنها به این دو مورد اکتفا می‌کنند اما یک استایل‌گاید کامل معمولا شامل این موارد است.تایپوگرافیپالت رنگیگریدبندی، فاصله و سایزهاآیکنوگرافیسایه‌ها و افکت‌هاممکنه در برخی منابع، المان‌های طراحی (UI Element) رو هم تو استایل گاید دسته بندی کنن اما اکثر منابع به اتفاق اونها رو در ماهیت دیگری با نام UI Kit دسته‌بندی می‌کنند و استایل گاید رو بخشی از UI Kit می‌دونن.از اسامی که بگذریم به هر حال گام بعدی پس از طراحی استایل گاید تکمیل کردن UI Kit با افزوده المان‌های طراحی است. https://www.youtube.com/watch?v=r82YpvkOrUE&list=PLT4L2_8BD6pmYfYtecPltD0JAB7yRpppb&index=19 همینطور که گفتم طراحی استایل گاید کار سخت و زمانبریه و من در این ویدئوی یوتیوب ساخت استایل گاید در فیگما که بخشی از دوره UI/UX مقدماتی من تو یوتیوبه یه استایل گاید رو از صفر طراحی کردم.نکاتی در مورد تماشای این ویدئو این ویدئو در یوتیوبه پس برای دیدن اون نیاز به VPN دارید.از اونجا که طراحی Style Guide زمانبره در نتیجه مدت این فیلم هم زیاده و چون من روش اصطلاحا بلند بلند فکر کردم نمی‌شد کمترش کرد اما شما می‌تونین رو دور تند ببینید.این ویدئو یه سری پیشنیاز داره که بهتره قبل یا بلافاصله بعد از این ویدئو اونها رو ببینین.یادتون نره سابسکرایب کنین و با لایک و کامنت حمایت آموزش UI UX امیر تقی آبادی Sun, 20 Jun 2021 14:08:00 +0430 https://virgool.io/UIUXcourse/ux-writing-%DA%86%DB%8C%D8%B3%D8%AA-v5jvuydvdsa1 تو این مقاله می‌خواستم در مورد UX Writing صحبت کنم، قبلش تو وب فارسی کنکاش کردم و دیدم اتفاقا منابع فارسی خوبی در این مورد هست و گفتن دوباره‌ی من تکرار مکرارته. در نتیجه تصمیم گرفتم به مواردی که به نظرم بهتره اضافه بشه یا تاکید بشه روشون بپردازم.کلمه‌ی UX Writing رو احتمالا شنیدین. شاید یه دید کلی داشته باشین از اینکه چیه و یه UX Writer چیکار می‌کنه و محتوای فارسی خوبی هم در این مورد وجود داره که پیشنهاد می‌کنم قبل از خوندن ادامه متن من بهشون سری بزنین.همه چیز دربارۀ نویسنده تجربه کاربر+راهنمای کار یو ایکس رایتر و یو ایکس رایتینگگزارشی از ورکشاپِ UX Writing در تیم آپاراتمحتوا در مسیر تجربه کاربری + UX Writing چیست؟ UX Writer کیست؟چطور متن تجربه کاربری بنویسیم |۱۰ اصل اساسی در UX Writingمواردی که در زیر نوشتم بابت تاکید بیشتر رو بعضی مطالب مقالات بالا و بعضا تکمیل اونهاست.انسجام (Consistency) داشته باشیدتو مقاله‌ی کوتاه در مورد Heuristic Evaluation در مورد اهمیت این موضوع صحبت کردم دیگه اینجا تکرارش نمی‌کنم. اگر حوصله خوندنشو ندارین در این حد بگم که هماهنگی و انسجام بین تمامی نوشته‌ها و طراحی‌ها مهمه. لازمه در تمامی مسیر خلق تجربه کاربری انسجام داشته باشیم. به عنوان مثال تصمیم بگیرین خودتون رو اول شخص مفرد صدا بزنین یا اول شخص جمع و در مقابل کاربر رو هم دوم شخص مفرد حساب کنین یا جمع.مثلا همه‌ی این جملات پایین می‌تونه در صفحه‌ی Callback پرداخت موفق بیاد.ازت ممنونم که به من اعتماد کردی.ازت ممنونیم که به ما اعتماد کردی.از شما ممنونیم که به من اعتماد کردین.از شما ممنونیم که به ما اعتماد کردین.هر تصمیمی گرفتین یادتون باشه که برای همه‌ی اپلیکیشن بهش پایبند باشین. همچنین تو این انسجام باید تصمیم بگیرین قراره با مخاطب خودمونی صحبت کنین یا رسمی و این موضوع رو همیشه رعایت کنین.به جایگاه کلمه دقت کنیدمدتی قبل دنبال معادل فارسی skip بودم و توی تویتر مطرح کردم و این پیشنهادات اومد. معادل فارسی Skipهمینطور که می‌بینین کلمات زیادی رو می‌شه استفاده کرد که جدای از لحن و بیان به موقعیت استفاده هم مربوطه. مثلا زمانی که می‌خواهیم برای Walkthrough از معادل skip استفاده کنیم می‌تونیم از بلدم استفاده کنیم در حالی که در موقعیت‌های دیگه معادل‌های بهتری وجود داره.کاربرا نمی‌خونن اسکن می‌کننبر اساس تئوری Information Foraging افراد همونطوری دنبال اطلاعات می‌گردن که حیوانات دنبال غذا. این که دنبال کدوم منبع بگردن رابط مستقیمی با راحتی دسترسی و مقدار انرژی ( فوایدی) که این منابع تولید می‌کنن داره.یک معیار مهم برای شناخت بهترین یو ایکس رایتینگ «ناپیدایی» است. زمانی می‌توان گفت یو ایکس رایتر کارش را خوب انجام داده که حضور کلمات و نوشته‌هایش اصلا حس نشود. به بیان دیگر: کاربر نباید دو بار یک کلمه را بخواند یا اصلاً در فهم جمله دچار تردید یا دست‌انداز شود. - منبعدر نتیجه مطالب رو برای خونده نشودن بنویسین. در زمان نوشتن کاربر بی‌حوصله‌ای رو تصور کنین که بی‌هدف یا با انگیزه کم وارد صفحه شده و می‌خواد با یه نگاه سرسری تصمیم بگیره آیا این صفحه ارزش وقت گذاشتن داره یا نه.مختصر بنویسیدهرچند کوتاه‌نویسی خیلی خوبه اما به شدت در تضاد با رسوندن مفهومه و بسیار پیش میاد که لازمه برای رسوندن مفوم درست به کاربر طولانی بنویسید. در مقاله‌ی کوتاه در مورد Recognition Over Recall گفتم که هر چقدر سرنخ‌های بیشتری به کاربر بدیم که مجبور نباشه از حافظش استفاده کنه. برقراری تعادل بین مختصر نویسی و رسوندن پیام کار خیلی سختیه و اگر جایی مختصر نویسی باعث گیجی کاربر می‌شد از اینکه این موضوع رو نغض کنید هیچ ابایی نداشته باشید.وَمَا أَرْسَلْنَا مِنْ رَسُولٍ إِلَّا بِلِسَانِ قَوْمِهِاحتمالا این جمله براتون آشنا باشه اما اگر نشنیده باشین و عربیتون هم خوب نیست، معنیش می‌شه:"و ما هیچ رسولی در میان قومی نفرستادیم مگر به زبان آن قوم"شاید مهمترین موضوعی که یه نویسنده UX نیازه بدونه اینه که باید به زبان کاربر صحبت کنه. نه اون چیزی که درسته. تو مقاله‌ی بزار هر تور دوس داشتِ باشم بنویسم گفتم که به نظر من غلط مصطلح درسته.این یعنی اگر پرسنای شما معنی کلمه پرسنا رو می‌دونه نیاز نیست به جاش بگی کاربرنما که فقط فارسی صحبت کنی و در مقابل هزینه شناختی کاربر رو ببری بالا.شما به عنوان UX Writer مسئول موفقیت بیزنسی نه زنده نگه داشتن زبان فارسی.اما اگر پرسنای شما با ا اصطلاحات تخصصی (jargon) آشنا نیست بهتره با ساده‌ترین کلمات اونها رو توضیح بدین. کاربر عمومی احتمالا حتی معنی خطای ۴۰۴ رو هم نمی‌فهمه پس بهتره در کنار نمایش عدد ۴۰۴ برای حرفه‌ای‌ها برای عموم به نحوی معنای این خطا و اینکه حالا باید چیکار کنن رو خیلی واضح توضیح بدین.شکل کلمات از املاش مهمترهتو مقاله‌ی ملت حوصله‌ی خواندن ندارند! احسان مفهومی به نام بوما (Bouma) رو معرفی می‌کنه که می‌گه ما شکل کلمات رو تفصیر می‌کنیم و نه حرف به حرف برای همینه که وقتی املای یک کلمه رو اشتباه می‌نویسیم بهمون حس درست بودن نمی‌ده. برای خود من اینجوریه که وقتی املای یک کلمه رو بلد نیستم، می‌نویسمش، شکلش بهم می‌گه درسته یا نه. به نظرم کلمه "بزار" از "بذار" حس درست بودن بیشتری می‌ده برای همینه خیلیا به این صورت می‌نویسنش.به همین دلیل مهمه که از فونتی استفاده کنیم که حروف تفاوت شکلی زیادی با هم داشته باشن که هزینه شناختی کاربر رو تا جای ممکن کم کنیم.تایپوگرافی(Typography)ممکنه شما هم مثل خیلی از دوستان معتقد باشین که یه UX Writer نیازی نداره (بهتره اما بایدی نیست) در مورد اصول تایپوگرافی بدونه. اما به نظر من این جمله درستی نیست.به عنوان مثال تو کتاب ۱۰۰ چیزی که هر طراح باید بداند نویسنده می‌گه که افراد متن با طول خط بلند را سریع‌تر می‌خوانند، اما متنی با طول خط کوتاه را ترجیح می‌دهند. دونستن این موضوع به یه نویسنده تجربه کاربری کمک می‌کنه که طول خطوط رو بهینه در نظر بگیره که سرعت و دقت خوانایی رو افزایش بده.سلسله مراتب اطلاعات (Hierarchy)از طرفی نویسنده تجربه کاربری باید به اصول هایراکی اطلاعات و فضای سفید هم مشرف باشه که کاربر برای خوندن متن دچار مشکل نشه.مثلا این تصویر مقاله‌ی چطور متن تجربه کاربری بنویسیم |۱۰ اصل اساسی در UX Writing رو ببینین که چقدر نوشته‌ها تو هم و شلوغه. همینطور که در مقاله‌ی کوتاه در مورد The Blurry-eye Test گفتم سلسله‌مراتب (Hierarchy) متن باید به نحوی باشه که حتی اگر کاربر عینکشو نزده بود هم بتونه بفهمه هر موضوع کجا شروع و تمام شده.این موضوع به خصوص در متن‌های طولانی و مقالات مهمه. برای خود من اینجوریه که هر مقاله‌ی جدیدی که می‌خوام بخونم اول یه بار تا ته صفحه اسکرول می‌کنم تا موضوعات مهم رو خیلی سرسری ببینم و اگر برام جذاب بود شروع به خوندن کلمه به کلمه متن می‌کنم. شلوغ بودن و مجزا نبودن بخش‌ها باعث می‌شه برای این نگاه سرسری به مشکل بخورم و متوجه موضوعات مهم نشم.اگر تو ویرگول می‌نویسین، ویرگول این باگ رو داره که خودش میاد و یه خط بالای عنوان رو حذف می‌کنه و باعث می‌شه نوشتتون شلوغ بشه در نتیجه دو خط فاصله بندازین و بعد از انتشار هم مجددا بررسیش کنین.تست کنیددر نهایت فراموش نکنین که هر چقدر هم برای کاربر نوشته باشین ممکنه تصور درستی از رفتار و نگرش کاربر نداشته باشیت و بهتره برای انتخاب بهترین کلمات نظر دیگران رو بپرسید و یا به کمک تست گوریلا و یا حتی A/B Test تصمیمات خودتون رو بررسی کنید.نمی‌شه توی وبسایت و اپلیکیشن قسمتی رو پیدا کرد که نیازی به UX Writing نداشته باشه. تعدادی از قسمت‌های مهم رو این زیر نوشتم که وقتی می‌خواهین اصطلاحات و کلمات داخل محصولتون رو نهایی کنین به این لیست به عنوان چک‌لیست نگاه کنین که چیزی از یادتون نره. چون اگر همه رو با هم انجام ندین ممکنه نتونین انسجام مورد نظر رو به خوبی در بیارین.متن دکمه‌هاپیغام‌های ‌خطاصفحات Empty stateصفحات No Resultصفحات Callback بانکصفحه ثبت‌نامصفحات خطاصفحات Onboardingمتن پیام‌های Notificationتوضیحات آیکن‌های Tab Barصفحه تنظیماتمنوی ناوبرینوشته‌های مودال‌هااعلان‌هاراهنمامتن place holderتوصیه‌نامه‌ها (Testimonial)فرم‌هاصفحات فرود (Landing Page)صفحه قیمت‌گذاری(Pricing Page)منابع:Be Succinct! (Writing for the Web)How Users Read on the WebEverything you need to know when optimizing your mobile app’s UX writingاز این دست کوتاه مقاله‌ها:کوتاه در مورد تفاوت طراحی Responsive و Adaptiveکوتاه در مورد Recognition Over Recallکوتاه در مورد Heuristic Evaluationکوتاه در مورد Responsive breakpointsکوتاه در مورد System Usability Scaleکوتاه در مورد Mental Designکوتاه در مورد User Flowکوتاه در مورد 5Second Usability Testکوتاه در مورد The Blurry-eye Test کوتاه در مورد Interaction Designکوتاه در مورد UX Writing - در حال مطالعه آموزش UI UX امیر تقی آبادی Thu, 18 Mar 2021 20:46:11 +0330 https://virgool.io/UIUXcourse/finger-friendly-design-touch-targets-%DA%86%DB%8C%D8%B3%D8%AA-hapuvf8umcep حتی اگه در فرآیند طراحی تجربه و رابط کاربی (UI/UX)، طراحی برای معلولین در اولویت شرکت نیست، احتمالا با استفاده از این مقاله بتونین مدیر محصول رو قانع کنین که طراحی Finger-Friendly و توجه به دسترس‌پذیری (Accessibility) نه تنها برای افراد با معلولیت حرکتی بلکه برای تمامی کاربران خوشاینده.تصویر خانمی با ناخن‌های بلند در حال تایپ کردنبه عنوان مثال خانمی که ناخون‌های بلند داره عملا نمی‌تونه از سر انگشت برای تاچ کردن استفاده کنه. این موضوع به قدر شایعه که محصولی برای این دسته از خانم‌ها توی آمازون وجود داره.تصویر تابلوی آفرینش میکل آنژ در حالی که یک موبایل در دست گرفتهاین موضوع فقط محدود به خانم‌ها نمی‌شه. در حقیقت بر اساس تحقیقی، متوسط عرض ناخن انگشت اشاره اشاره بین ۱۶ تا ۲۰ میلیمتر (۴۵ تا ۵۷ پیکسل) است و بنا به ویکیپدیا متوسط اندازه عرض انگشت شست ۲۵ میلیمتر (۷۲ پیکسل) است.وقتی صحبت از متوسط می‌کنیم معنیش اینه که افرادی با عرض کمتر و بیشتر از این اعداد هم وجود دارند. به عبارتی وقتی پرسنای ما فردی است که کار یدی، مثل کشاورزی داره بهتره محدوده‌ی تاچ (Touch Targets) رو حتی بیشتر از حداقل‌های ارائه شده در دیزاین‌سیتم‌ها در نظر بگیریم.وقتی اندازه‌ی دکمه رو کم در نظر بگیریم موقع لمس کردن دکمه، نمی‌تونیم زیر دکمه رو ببینیم که این موضوع از ۲ جهت مشکل داره. ۱. زمانی که نیازه تغییر حالت دکمه رو به کاربر اطلاع بدیم چون زیر انگشته دیده نمی‌شه که با Visibility of system status ارزیابی اکتشافی در تضاده. ۲. اگر دکمه‌ها مارجین کافی با هم نداشته باشند احتمال خطا افزایش پیدا می‌کنه.از طرفی با توجه به Fitt’s Law هر چه دکمه کوچیکتر باشه زمان رسیدن به دکمه طولانی‌تر می‌شه.علاوه بر اینها، به احتمال زیاد می‌دونین که در ۴۹ درصد مواقع داریم از یک دست برای کار کردن با اپلیکیشن استفاده می‌کنیم پس بهتره که قسمت‌های قابل کلکیک رو Thumb-Friendly طراحی کنیم، اما موضوع اینجاست که به دلیل محدود بودن فضای صفحه‌ی موبایل عملا نمی‌شه ۷۲ پیکسل رو به عنوان حداقل اندازه دکمه در نظر گرفت. به علاوه که کاربر می‌تونه از کنار انگشت شصت استفاده کنه برای لمس کردن دکمه استفاده کنه.در نتیجه گوگل متریال حداقل اندازه‌ی ۴۸ پیکسل رو برای طول و عرض دکمه پیشنهاد داده و برای جلوگیری از خطا هم پیشنهاد داده که از حداقل ۸ پیکسل برای مارجین صفحه استفاده کنیم.دقت کنید که حتی اگر اندازه‌ی دکمه‌ها بر اساس حجم محتوای داخلش ممکنه کم و زیاد بشه این ابعاد حداقل رو براشون درنظر بگیریم. توی اندروید با کدهای android:minWidth و android:minHeight می‌تونیم برای این موضوع استفاده کنیم. https://www.youtube.com/watch?v=WRhAV0cnMyY ابتدا ویدئوی یوتیوب بررسی دسترس‌پذیری اپلیکیشن به کمک نرم‌افزار رو ببینین و بعد ادامه‌ی مقاله رو بخونین.یه مشکلی که در بزرگ کردن محدوده‌ی تاچ Toggle button ها داشتیم این بود که وقتی یه المان دیگه روش می‌انداختیم با چنین خطای دسترس‌پذیری مواجه شدیم. در حین تحقیق برای نوشتن این مقاله متوجه شدم که باید برای بزرگ کردن منطقه قابل لمس دکمه‌ها در اندروید از TouchDelegate استفاده کنیم که به این مشکل بر نخوردیم.فرضیه‌ی مندر این بین خودم به یه فرضیه‌ای رسیدم که دوست دارم نظر شما رو در موردش بدونم.اگر به زمان کار کردن افراد به موبالشون دقت کنین متوجه می‌شین که وقتی با یه دست دارن کار می‌کنن برای دکمه‌های پایین صفحه، انگشت شست تقریبا عمود می‌شه به صفحه و با نوک انگشت لمس‌ها اتفاق می‌افته اما برای قسمت‌های بالایی صفحه موبایل انگشت شست تقریبا مماس صفحه می‌شه و کل محدوده‌ی اثر انگشت با صفحه تماس برقرار می‌کنه.این موضوع باعث می‌شه در قسمت بالایی صفحه ماسکه کردن دکمه بیشتر بشه. در نتیجه اگر ناچار به انتخاب کوچک کردن بعضی از دکمه‌های داخل صفحه هستیم شاید با این تعبیر، کوچک‌کردن دکمه‌های پایین موبایل منطقی‌تر باشه.راستی تو وبینار طراحی UI/UX پلیر پخش فیلم قراره در مورد Touch Targets هم حرف بزنم. اونجا می‌بینمتون.منابع:Accessibility Scanner resultsTouch target sizeFinger-Friendly Design: Ideal Mobile Touchscreen Target SizesTouch Targets on TouchscreensA COMPREHENSIVE GUIDE TO DESIGNING A THUMB-FRIENDLY USER EXPERIENCE آموزش UI UX امیر تقی آبادی Wed, 03 Feb 2021 16:10:02 +0330 https://virgool.io/UIUXcourse/context-of-use-%DA%86%DB%8C%D8%B3%D8%AA-ubqkdy8vslgp تو دوره‌های طراحی تجربه و رابط کاربری به User Research که می‌رسیم معمولا به بستر زمینه‌ای (Context of use) هم اشاره گذرایی می شه و رد می‌شیم. اینجا خوبه کمی بیشتر توش عمیق بشیم.نکته‌ی کنکوری درک Context of Use اینه که بفهمیم کاربر در چه شرایطی از اپلیکیشن ما استفاده می‌کنیم.بزارین با یه مثال ساده شروع کنیم.کاربر کِی داره از Waze، بلد و نشان استفاده می‌کنه؟ جواب به این سوال سخت نیست. معمولا زمانی که در حال رانندگیه و خوب این شرایط با حالت عادی استفاده از موبایل فرق داره.قبل اینکه ادامه رو بخونین فکر کنین که چه تفاوت‌هایی داره؟１. در این حالت روی موبایل مسلط نیست و فاصله‌اش با صفحه‌ی موبایل بیشتر از حالت عادیه.２. تمرکزش روی رانندگی یا حتی صحبت با سرنشینان داخل ماشینه نه موبایل.３. احتمالا طولانی مدت تعاملی متقابلی با اپلیکیشن نداره.４. در حال حرکت و با تمرکز/دقت کمتر از موبایل استفاده می‌کند.５. ممکنه در حالت Portrait یا Landscape استفاده کنه.６. ممکنه نور بیوفته روی صفحه موبایل ( به خصوص برای راننده موتوری)７. ممکنه در حین آدرس دهی با کاربر تماس گرفته بشه.８. شاید مدت زیادی در راه باشه.فکر کردن به هر کدوم از این شرایط باعث شده طراحی به راه‌حل به خصوصی همگرا بشه. هر شماره پایین نتیجه پاسخ طراحانه به موضوع متناظرش در بالاست.１. بهتره ابعاد نوشته‌ها و المان‌های بصری بزرگتر باشه.２. فقط وقتی نیاز به توجه است باید با اعلان‌های صوتی/تصویری اطلاعات مهم را در اختیار کاربر قرار دهیم.３. نباید اجازه بدیم در زمان باز بودن اپلیکیشن، صفحه‌ی گوشی خاموش بشه مگر به درخواست کاربر.４. محدوده‌ی لمس (Touch Target) باید از حالت عادی بزرگتر باشه و مارجین بیشتری هم با سایر دکمه‌ها داشته باشه.５. اپلیکیشن باید برای هر دو حالت عمودی و افقی طراحی بشه.６. کنتراست رنگ‌ها باید در بیشترین حالت ممکن باشه.７. بهتره مسیر در حال پیمایش، ذخیره بشه که اگر تماس موجب قطع شدن 4G شد همچنان مسیر رو نشان بده.８. مصرف باتری باید در بهینه ترین حالت ممکن باشه.شاید معتقدین که اگر شما هم به جای طراح این محصولات بودین حتما این موارد رو در اولین تلاش رعایت می‌کردین. اجازه بدین سر این موضوع توافق نداشته باشیم و بگم که معما چون حل شود آسان شود. اصطلاحا شما دچار اثر Hindsight Bias شدین.سوگیری پس‌نگر (Hindsight Bias) به این موضوع اشاره داره که پس از وقوع یک واقعه، افراد معتقدند که رخداد این اتفاق کاملا معلوم بوده و اگر به زمان قبل از رخداد برگردن می‌تونستن به راحتی این نتیجه رو پیش‌بینی کنن.فکر کنم با این مثال متوجه شده باشین که Context of Use داره به چی اشاره می‌کنه. به زمینه استفاده (Context of Use) باید به دید یک عامل مهم در طراحی تجربه کاربری نگاه کرد.Mobile Context Model البته فقط محدود به این ملاحظات فیزیکی نیست و چیزهای دیگری نظیر زمینه‌ی فرهنگی/مذهبی، معلولیت موقت/دائمی، محدودیت‌های قانونی شهر/کشور و Mental Model کاربر رو هم در بر بگیره.در مورد منتال مدل قبلا بارها گفتم و هر لحظه که جلوتر می‌رم بیشتر به این نتیجه می‌رسم که باید بیشتر تاکید کنم که بهش توجه کنین.در این بین یکی از بخش‌های مهم Device کاربره که بدونیم داره از چه ابزاری استفاده می‌کنه. تلویزون، لپ‌تاپ و موبایل هر کدوم مدل خاصی از تعامل کاربر رو با خودش داره. توی تلویزیون و دسکتاپ مفهوم Hover رو (کمی متفاوت از هم) داریم در حالی که تو موبایل (ابزارهای لمسی) معمولا نداریم. از طرفی تو موبایل Gestureها و Rotation رو داریم و تو دسکتاپ، موس و کیبورد رو داریم. تو تلویزیون هم Remote control رو داریم و نقش (Voice-User Interface (VUI پررنگ‌تر از بقیه ابزارهاست.تو لحظه‌ی 1:28:10 ویدئوی دوره طراحی تجربه و رابط کاربری به طراحی کنترل تلویزیون هوشمند شیائومی پرداختم که چطور Context of Use رو لحاظ کردن. https://youtu.be/KFtZlyqYypk?t=5290 ویدئوی یوتیوب ( VPN خود را روشن کنید)همچنین یه وبینار طراحی UI/UX پلیر پخش فیلم رو قراره ۲۷ خرداد برگزار کنم. اونجا می‌بینمتون. آموزش UI UX امیر تقی آبادی Wed, 27 Jan 2021 12:47:10 +0330 https://virgool.io/UIUXcourse/dark-design-patterns-%DA%86%DB%8C%D8%B3%D8%AA-mp8cx4qvaicr قبلا در قسمت طراحی کاربر محور در مقابل طراحی بیزینس محور تو یوتیوب گفتم که درسته که ما سعی می‌کنیم کاربر محور طراحی کنیم اما این کاربر محور به این معنی نیست که ما چون کاربر رو دوست داریم در مرکز طراحی قرارش می‌دیم. اتفاقا چون بیزینس و پول در آوردن برامون اولویت داره User-centered Design طراحی می‌کنیم. https://www.youtube.com/watch?v=Ud7kV37ZZVc&t=3s خوبیش اینه که در اکثر مواقع این دو موضوع هم راستا با هم هستن اما گاهی اوقات که در تقابل با هم قرار می‌گیرن معمولا کارفرما تمایل داره که اهداف بیزینسی خودش رو مقدم بر اهداف و نیازهای کاربر بدونه. در این شرایط در اصطلاحات تخصصی طراحی تجربه و رابط کاربری (UX/UI) مفهومی به نام Dark Pattern ساخته می‌شه که تلاشش اینه با سخت‌تر کردن یا گول زدن کاربر و یا طراحی اغواگر (Persuasive Design) هدف بیزینس رو به کاربر تحمیل کنه و اونو مجبور به کاری کنه که در حالت عادی تمایلی به انجامش نداره.سخت کردن فرایندهای ناخواستههر زمانی که دارک پترن مطرح می‌شه یکی از اولین و قابل‌فهم‌ترین مثال‌هایی که زده می‌شه سخت‌ کردن امکان حذف یا غیرفعال (Deactive) کردن حساب کاربریه. بیزینس‌ها هیچ‌جوره نمی‌خوان کاربری رو که با صرف هزینه تبلیغاتی به دست آوردن از دست بدن. مثلا شما تا چند وقت پیش از طریق اپلیکیشن اینستاگرام نمی‌تونستین دیلیت اکانت کنین و حتما باید از وبسایت استفاده می‌کردین. احتمالا به دلیل واکنش‌های جمعی اینستاگرام مجبور شده این قابلیت رو داخل اپلیکیشن هم بیاره اما پیدا کردن این گزینه این رو انقدر سخت کرده که به احتمال زیاد مجبور به گوگل کردن این موضوع هستین.صفحه تنظیمات اینستاگرامبه عنوان نمونه تو اینستاگرام شاید احساس کنین که برای دی‌اکتیو کردن حساب باید برین داخل قسمت Accounts اما در حقیقت باید برین داخل Help.اسپاتیفایاسپاتیفای حتی کار رو از اینم سخت‌تر کرده و از کاربر می‌خواد که باهاشون تماس بگیره تا حساب کاربری‌شو ببنده.تو وبسایت‌های ایرانی اصلا چیزی به عنوان حذف اکانت کاربری نداریم در نتیجه مثالی در این مورد نمی‌تونیم پیدا کنیم اما از اونجایی که حتی log out هم دلخواه بیزینس نیست سعی می‌کنن فرآیند خروج از حساب رو کمی سخت‌تر کنند.تو مقاله‌ی چک لیست طراحی صفحه‌ی تنظیمات در بخش آیتم‌های مخرب در دوردست در مورد این موضوع مثال آوردم.مثلا ما Target Touch دکمه‌ی خروج از حساب کاربری رو کمتر از استاندارد گرفتیم که کاربری اشتباهی روی خروج نزنه. :دیمحدوده‌ی تاچ (Touch targets) اصطلاحا باید finger-friendly باشه. یعنی تقریبا 1cm در 1cm باشه که انگشت بتونه به راحتی و بدون خطا لمسش کنه. این چیزیه که در دکمه‌ی بستن تبلیغات عامدانه رعایت نمی‌شه تا احتمال کلیک رو حتی به غلط بالاتر ببرن و در نتیجه درآمد شرکت رو افزایش بدن.متریال دیزاین حداقل ابعاد دکمه رو ۴۸ پیکسل و اپل، ۴۰ پیکسل در نظر گرفته که با رعایت این حداقل‌‌ها می‌تونین مطمئن باشیم طرحمون به Accessibility یا دسترس‌پذیری نزدیکتره.تبلیغات همسان (Native Ads)یکی از نمونه‌‌‌هایی که کمتر به عنوان دارک پترن شناخته می‌شه تبلیغات همسانه.تبلیغات همسان سایت دیجیاتوتو این مدل، تبلیغات از نظر طراحی، جایگذاری و ارتباطش با موضوع صفحه به حدی شبیه به صفحه طراحی می‌شه که کاربر متوجه تبلیغ بودنش نشه و اینجوری نرخ کلیک شدگی (CTR) رو برای اون تبلیغ زیاد می‌کنند.از اونجایی که ما دچار کوری تبلیغات (Ad Blindness) هستیم. این مدل تبلیغ، باعث می‌شه که فریب بخوریم و توجه بیشتری به تبلیغ بکنیم.یه نمونه‌ی ایرانی رو در توییت زیر ببینید. ( فیلترشکن نیاز دارید) https://twitter.com/mreza_azali/status/1360584454755012615?s=20 گردونه شانس با ضرایب شانس متفاوتگردونه شانس به خودی خود دارک پترن محسوب نمی‌شه و اتفاقا یکی از ابزارهای خیلی خوبه گیمیفیکیشنه. (حالا اینکه اصلا گیمیفیکیشن اخلاقی هست یا نه تو این لایو در موردش صحبت کردیم) چرخونه باسلاممشکل از جایی شروع می‌شه که بیایم و ضرایب شانس قسمت‌های مختلف رو متفاوت از ظاهر بصریش نشون بدیم. مثلا احتمال شانس تخفیف بیشتر ( یا حتی پوچ) رو صفر کنیم. اینجوری با کاربر صادق نبودیم و صادق نبودن در هر مدلی یکی از انواع دارک پترن محسوب می‌شه.این موضوع فقط محدود به گردونه شانس (wheel of fortune) و هر مدلی از گیمیفیشن که کاربر رو به نحوی گول بزنیم به عنوان دارک پترن شناخته می‌شه. https://twitter.com/amirtaqiabadi/status/1330549987982372865?s=20 مبلغ اضافه در فاکتور نهاییتا الان رستورانی رفتین که بعد از اینکه غذا خوردین صورت حسابی که براتون میارن شامل حق سرویس و مالیات بر ارزش افزوده و ... باشه. چه احساسی داشتین؟هزینه بسته بندی، قاشق و چنگال و ... در اسنپ فوددر بعضی رستوران‌های اسنپ فود بعد از اینکه غذا رو ثبت می‌کنین هزینه بسته‌بندی هم جدا تو فاکتور اومده یا اینکه بعد از انتخاب غذا برای اضافه کردن قاشق و چنگال هزینه جدا درخواست می‌کنه.این هم یکی دیگه از موارد دارک پترن محسوب می‌شه. در حقیقت رستوران با این روش قیمت اولیه رو کمتر و رقابتی‌تر نشون می‌ده که کاربر رقبت بیشتری به خرید داشته باشه و وقتی که دیگه تصمیم به سفارش گرفته احتمال کمتری داره که بیخیال سفارش بشه و تا انتها مسیر خرید رو می‌ره.چینش اطلاعاتاگر خاطرتون باشه قدیم‌ترها نمودار قیمت دیجیکالا خیلی تو چشم بود. الان اما برای اینکه جلب توجه نکنه در جایی قرارش داده که شاید خیلی‌ها نتونن به راحتی پیداش کنن.یا ممکنه یه وبسایتی با اطلاعات کم اهمیت و بدون دسته‌بندی انقدر صفحه‌ی یک محصول رو شلوغ کنه که شما متوجه ضعف‌های محصول نشین.یا حتی نظریات منفی رو سانسور کنه یا در انتهای لیست نظرات قرار بده که شما نبینن و اینجوری با بمباران اطلاعات مورد نظر خود شما رو ترغیب به خرید کنه.بماند که ساخت نظرات تقلبی هم دیگه ته بی اخلاقی محسوب می‌شه.شارژ حساب بدون اعلاندر مقاله‌ی 10 خطای شناختی اثرگذار در طراحی Pricing Page در مورد سوگیری دگرگون گریزی صحبت کردم. گفتم که اگر افراد در یک سیستم اشتراک ماهیانه ثبت‌نام کرده باشند. تمایل بیشتری به تغییر ندادن آن دارند. مثلا در ایران اگر شما از مخابرات اینترنت گرفته باشین و حتی استفاده نکنین به دلیل سخت بودن فرآیند غیرفعال کردن آن ممکن است ماهیانه مبلغ رو پرداخت کنین چون وقت نمی‌کنین که مراحل غیرفعال‌سازی رو انجام بدین.با توجه به سیستم بانکی ایران هنوز قابلیت برداشت مستمر از حساب فعال نشده است اما شبیه این مورد رو در خدمات ارزش افزوده زیاد دیده‌ایم. کاربر با فریب یا سهوا عضو سیستم ارزش افزوده شده و اپراتورها هیچوقت اطلاعات درستی از میزان و نحوه‌ی غیر فعال‌سازی خدمات ارزش افزوده ارائه نمی‌کردند تا زمانی که در نهایت با قانون ملزم به چنین اقدامی شدند.با توجه به اینکه این مدل پرداخت ماهیانه هم در ایران در حال پیاده‌سازی است دور از ذهن نیست که شاهد این دارک پترن در بیزینس‌های ایرانی باشیم.طراحی رفتاریبا این توضیحات حتی می‌شه تکنیک‌هایی که در سری مقاله‌های طراحی رفتاری در موردشون صحبت کردم رو هم نوعی از دارک پترن دونست. البته باید دقت داشت که دارک پترن در حقیقت یک طیف از خاکستری رو شامل می‌شه و ممکنه برخی کارها کمتر یا بیشتر دارک پترن باشه.شناخت خطاهای شناختی در تجربه کاربری۱۰ خطای شناختی مهم در زندگی۸ خطای شناختی معروف در طراحی Progress Bar۱۰ خطای شناختی اثرگذار در طراحی Pricing Pageتاثیر ۵ خطای شناختی بر رفتارهای جمعی۸ سوگیری شناختی تاثیر گذار بر HRقوانین گشتالت در طراحی UI۷ اثر روانشناسی تاثیرگذار بر Iconography۹ اثر روانشناسی تاثیرگذار بر طراحی Walkthroughاصول روانشناسی حاکم بر فرآیندهای زمانبر۶ اثر روانشناسی مهم در قیمت‌گذاری۷ خطای شناختی تاثیرگذار در منابع انسانیچرا ۴۹ هزار تومان بیشتر از ۴۵.۰۰۰ تومان می‌فروشه؟شما هم اگر نمونه‌ای از این دارک پترن‌ها در بیزینس‌های ایرانی یا خارجی دیدین لطفا کامنت کنین که بقیه هم استفاده کنند.منبع:Dark Patterns in Your Everyday Apps آموزش UI UX امیر تقی آبادی Thu, 03 Dec 2020 17:25:59 +0330 https://virgool.io/UIUXcourse/poka-yoke-%DA%86%DB%8C%D8%B3%D8%AA-yqya9mi0ff0p قبلا توی مقاله‌ی کوتاه در مورد Heuristic Evaluation در مورد پیشگیری از خطا (Error prevention) و شفافیت در بیان خطا و ارائه‌ی راه‌حل (Help users recognize, diagnose, and recover from errors) صحبت کردم و مهرداد هم تو مقاله‌ی چک لیست طراحی Error States یه سری نکات عالی گفته که باعث می‌شه طراح تجربه بهتری بشین. اما جدیدا من با اصطلاح پوکا-یوکه آشنا شدم که به نظرم خیلی بدیهی میاد ولی شناختش باعث شده بیشتر روی دور و برم حساس بشم و بگردم مصداق عینی براش پیدا کنم و به نظرم این توی طراحی‌های آیندم می‌تونه تاثیر بذاره.پوکا-یوکه (Poka-yoke) با نام خطا ناپذیرسازی (Mistake proofing) در حالت ایده‌آلش منجر به حذف هر گونه اشتباهی می‌شه. واضح‌ترین مثال این نو خطا طراحی پریز و دو شاخه تلفنه.این استوانه پلاستیکی وسط دوشاخه تلفن هیچ دلیل کارکردی نداره و تنها به این دلیله که اشتباهی اونو توی پریز برق نکنین به خصوص که اگر پریز برق و تلفن کنار هم باشن. اگر مثل من یه تلفن رو به این دلیل سوزونده باشین خوب درک می‌کنین که اون میله پلاستیکی به ظاهر بی‌مصرف چقدر می‌تونه کاربردی باشه.تقریبا هر جایی که سوکتی هست این اصل رعایت شده. از اینکه مجبورین ۳ بار تلاش کنین تا USB رو وصل کنین تا اینکه مموری و سیم کارت و کابل VGA و ... رو نمی‌تونین اشتباه وارد کنین یا حتی به یه ورودی دیگه بزنین باعث می‌شه که جلوی خطای شما رو بگیره.توی استفاده از رویکرد طراحی پوکایوکه تلاش می‌کنن محصول برای همه (با هر ضریب هوشی یا توانایی) قابل استفاده (Accessibility) باشهنصب و راه‌اندازی آسون باشه که بدون نیاز به دفترچه راهنما هم قابل اجرا باشهنیاز به متوجه مدوام کاربر نداشته باشهمانع بروز اشتباه بشه و یا در سریعترین و بهینه‌ترین زمان اصلاحش کنهبرای پیاده‌سازی پوکایوکه می‌تونیم از سنسورها کمک بگیریم همینطور که تو ترموستات اتو ازش استفاده کردیم. یا می‌تونیم به نمایش خطا رو بیاریم مثل زمانی لپ‌تاپ به برق وصل نیست و باتری در شروف تموم شدنه و خبرمون می‌کنه.ما آدم‌های فراموش‌کاری هستیم به خصوص اگر یه کار روتین رو قرار باشه بارها و بارها انجام بدیم. برای همین چیزهایی مثل چک‌لیست‌ها به ما کمک می‌کنه که دچار خطای کمتری بشیم.اما حد اعلای پوکایوکه زمانی که با ایجاد تغییراتی (معمولا وضع محدودیت) مانع بروز خطا می‌شیم. مثلا ویندوز و اندروید زمانی که دستگاه به اندازه کافی شارژ نداشته باشه و به برق هم وصل نباشه اجازه آپدیت‌های کلیدی رو نمی‌ده به این دلیل که اگر وسطش خاموش بشه عملا شما با مشکل بزرگی روبرو می‌شین.اگر Poka-yoke رو گوگل کنین مثال‌های جالبی می‌بینین. مثلا این سطل بازیافت بر اساس شکل محصول بازیافتی دهانه‌های مختلفی رو طراحی کرده.خیلی چیزها دیگه الان به قدری برامون بدیهی شده که به عنوان مثال پوکایوکه نمی‌بینیمشون اما هنوز کلی چیز اون بیرون وجود داره که می‌تونه با این روش بهتر بشه. مثلا DVD توی دستگاه از هر دو طرف وارد می‌شه یا یه مداد تیز رو هم هنوز می‌شه تو مدادتراش تراشید.توی طراحی‌هامون هم اگر این رویکرد رو داشته باشیم باعث می‌شه بتونیم تا جای ممکن جلوی خطا رو بگیریم یا راه سریعی برای اصلاح خطا ایجاد کنیم.شما هم اگر دور و برتون از این مثال‌ها دیدین خوشحال می‌شم که کامنت کنین که همه استفاده کنیم. https://twitter.com/amirtaqiabadi/status/1331487413391200258?s=20 آموزش UI UX امیر تقی آبادی Wed, 29 Jul 2020 15:05:04 +0430 https://virgool.io/UIUXcourse/network-effect-%DA%86%DB%8C%D8%B3%D8%AA-j2t15aykmkka در مقاله‌ی تاثیر 5 خطای شناختی بر رفتارهای جمعی من باب مدل راه‌اندازی یک جنبش اجتماعی صحبت کردم. در این مقاله می‌خوام در مورد اثر شبکه‌ای و اقتصاد شبکه‌ای صحبت کنم.در علم اقتصاد و کسب‌وکار، اثر شبکه‌ای تأثیری ست که یک استفاده کننده از یک کالا یا خدمات، بر ارزش آن دارد. وقتی اثر شبکه‌ای وجود داشته باشد، ارزش یک محصول یا خدمت به تعداد استفاده‌کنندگان آن بستگی دارد. - ویکیپدیافرض کنید شما اولین نفری هستین که تلفن خریدین. این تلفن تا زمانی که فرد دیگری برای ارتباط گرفتن نباشه، هیچ ارزشی نداره. به محض اینکه نفری بعدی هم تلفن بخره حالا تلفن شما ارزش دارد و به همین ترتیب با اضافه شدن هر نفر دیگه ارزش تلفن شما بیشتر می‌شه و در حقیقت ارزش کل شبکه بیشتر می‌شه.یا اگر بخواهین بین خرید Xbox و PlayStation تصمیم بگیرین. اینکه دوستان دور و برتون چی دارن روی خرید شما تاثیر می‌زاره. چون می‌توین راحتتر با هم بازی کنین، بازی مشترک بازی کنین و بازی به هم امانت بدین.بر اساس قانون متکالف ارزش یک شبکه با مجذور کاربرانش افزایش میابد(n2). هر چند در بستر شبکه‌های اجتماعی، بسیاری از جمله خود متکالف و reed و Odlyzko، پیشنهاد مدل اصلاح شده با استفاده از خط تناسب لگاریتمی و نه تناسب مربع را دادند(n log n). - ویکیپدیادقیقا به همین دلیله که پیام‌رسان‌ها و شبکه‌های اجتماعی ایرانی هیچ وقت نمی‌تونند موفق بشن. برای شروع نیاز به مشتریان آغازین (Early adopters) داریم که معمولا به هیچ عنوان اعتمادی به سیستم‌های ایرانی برای حفاظت از اطلاعات شخصی ندارند و در نتیجه گرایشی به آن پیدا نمی‌کنند و در نتیجه ارزش شبکه هیچ وقت به حدی نمی‌رسه که برای افراد جذاب بشه.کوچ دسته جمعی کاربران ایرانی از وایبر به تلگرام رو به خاطر بیارین. مدت‌ها قبل از فیلتر شدن وایبر تلگرام وجود داشت و تعدادی هم توش بودن اما هیچوقت اینجور نبود که کسی که توش نباشه چیزی رو از دست بده تا جایی رسید که هر روز به تعداد کاربران ایرانی تلگرام اضافه شد و دیگه نپیوستن بهش سخت بود.در حقیقت با هر نفر جدیدی که به تلگرام اضافه می‌شد ارزش کل شبکه بیشتر می‌شد. این موضوع تنها معطوف به شبکه‌های اجتماعی نیست. مثلا در مدل تاکسی‌های اینترنتی هر مسافر جدیدی که اضافه می‌شه ارزش شبکه برای راننده‌ها بیشتر می‌شه چون تعداد بیشتری سفر می‌تونن برن و حق انتخاب بیشتری هم دارن. از اونطرف چون ارزش شبکه برای راننده‌ها بیشتر می‌شه راننده‌های بیشتری به سامانه ملحق می‌شن که باعث می‌شه ارزش شبکه برای مسافران بیشتر بشه و سریع‌تر بتونن ماشین بگیرن. این موضوع توی یه سیکل افزایشی میافته که باعث می‌شه هر روز تعداد بیشتری مسافر و راننده به اسنپ و تپسی اضافه بشه.اما به همین سادگی‌ها هم نیست. برای اینکه یه کسب و کار مبتنی بر شبکه توی این سیکل افزایشی بیوفته مسیر سختی رو باید طی کنه که معمولا هزینه‌ی فراوانی داره تا بتونه از Critical mass tipping point رد بشه. اولین کاربرانی که به یه وبسایت شبکه‌ای اضافه می‌شن نقش بسیار تاثیر گذاری بر روی بقیه دارن. کسب‌وکار باید توی این مرحله اقداماتی انجام بده که کاربران آغازین دوستان خودشون رو هم به مجموعه اضافه کنن.برای این کار، راه‌هایی وجود دراه که به فراخور بیزینس ممکنه بعضی‌هاشون کارامدی بیشتری داشته باشن.مثلا کسب‌وکارهایی که توشون همکاری (Collaboration) وجود داره یعنی افراد برای انجام یه کاری نیاز به همکاری سایر دوستانشون دارن باعث می‌شه که فقط جذب اولین نفر مهم باشه.مثلا سیستم‌های مدیریت پروژه مثل notion که مبنای همکاری دارن می‌تونن با مدل Freemium باعث جذب اولین نفر بشن که اون اولین نفر سایر افراد رو همراه خودش بیاره.یا توی برخی کسب‌وکارها مثل اسنپ Referral marketing خلی بهتر جواب می‌ده. یعنی به کاربران به ازای معرفی کاربران جدید پاداش بدیم. این موضوع هزینه زیادی داره اما باعث می‌شه بتونیم زودتر از رقبا از Critical mass رد بشیم.از طرفی بعضی بیزینس‌های دو سویه مثل استارتاپ‌های حوزه املاک این توانایی رو دارن که به صورت دستی یه سویه کاربران رو تکمیل کنند و اینجوری ارزش شبکه رو برای دسته دیگه کاربران افزایش بدن تا در نهایت این Network Effect برای هر دو سویه کاربران ایجاد بشه.اجازه بدین این موضوع رو کمی بازتر کنم. کسب و کارهای حوزه املاک مثل Address.ir دوست‌داشتنی یه مشکل اساسی دارن. مالک برای اینکه بخواد ملکش رو توی این سامانه وارد کنه باید مطمئن باشه که زودتر از روش‌های جایگزین ملکش رو می‌تونه اجاره بده یا به فروش برسونه. تا زمانی که تعداد مشتریان کم باشن این اتفاق نمی‌افته. از طرفی تا زمانی که ملک زیادی توی سایت نباشه هم کاربر مطمئن نیست که بتونه راحت ملکش رو پیدا کنه و هیچ وقت به عنوان گزینه‌ی اول بهش سر نمی‌زنه.در نتیجه اگر بخواهیم منتظر رشد ارگانیک باشیم هیچ وقت این کسب و کار موفق نمی‌شه. برای همین آدرسی‌ها میان و خودشون ملک‌ها رو از جاهای مختلف پیدا می‌کنن. با مالک تماس می‌گیرن. برای عکاسی رایگان با مالک تماس می‌گیرن تا در نهایت سمت مالک‌ها به این نحو و به صورت دستی تکمیل بشه که کاربر بتونه ملک موردنظرش رو پیدا کنه تا در نهایت ارزش شبکه رخ بده.البته سختی اصلی این کسب و کارها اینکه ملک‌ها تاریخ انقضا داره و اگر مالک به هدفش برسه آگهیشو بر می‌داره. برای همین مدام باید ملک‌های جدید به مجموعه اضافه بشه. از اونطرف هم کاربران معمولا سالی یکبار (یک بازه زمانی) از سایت استفاده می‌کنند و در نتیجه سایت مجبوره همیشه کاربران جدیدی رو به مجموعه بیاره.اینجاست که یه تجربه کاربری خوب می‌تونه باعث تبلیغات دهان به دهان (Word of mouth) بشه و هزینه جذب مشتری رو برای مجموعه کم کنه. https://blog.akhbarrasmi.com/%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1-%D8%AC%D8%B0%D8%A8-%D9%85%D8%B4%D8%AA%D8%B1%DB%8C-%D8%AF%D8%B1-%D8%A7%DB%8C%D8%B1%D8%A7%D9%86/ آموزش UI UX امیر تقی آبادی Mon, 29 Jun 2020 14:50:22 +0430 https://virgool.io/UIUXcourse/disability-first-mobile-1st-content-first-%DA%86%DB%8C%D8%B3%D8%AA-gos5783oyphd اولین مقاله‌ای که در مورد UX نوشتم رو توی لینکدین با عنوان برای احمق‌ها طراحی کنید منتشر کردم و بعدش مهاجرت کردم به ویرگول.بارها می‌خواستم اون مقاله رو با بروزرسانی‌هایی منتقلش کنم به اینجا اما خوب با خودم می‌گفتم من یه بار در موردش نوشتم دیگه. این سری اگر قراره بروزش کنم بهتره بستر عرضه‌ش رو هم تغییر بدم.خلاصه اینکه اون مقاله رو با تغییراتی توی یوتیوب منتشر کردم و در ادامه هم در مورد ۴ موضوع Mobile 1st، Small Size 1st، Content 1st و Disability 1st نوشتم که بدونین توی ویدئو چی در انتظارتونه. https://youtu.be/mfkWYLJPPHA Mobile 1stبین ۷۰ تا ۸۰ درصد وب‌گردی کاربران ایرانی در حال حاضر توسط موبایل انجام می‌شه. این یعنی نسخه‌ی مناسب موبایل وبسایت‌ها اهمیت بیشتری از نسخه‌ی دسکتاپ داره. علم به این موضوع یعنی اگر خواستین یه وبسایت Responsive طراحی کنین ابتدا نسخه‌ی موبایل رو طراحی کنین و بعد به سراغ نسخه‌ی دسکتاپ برین.اضافه کردن خیلی راحت‌تر از کم کردنه.Small Size 1stیکی از نقدهایی که من همیشه به طراحان می‌گیرم اینه که برای طراحی رابط کاربری می‌رن سراغ ابعاد Iphone که طرح توش خوب می‌شینه در حالی که به همون دلیل Mobile 1st اگر شما ابتدا برای ابعاد بزرگ طراحی کنین کوچیک کردنش خیلی سخته.حداقل عرض مطلوب برای شروع طراحی ۳۶۰ پیکسله اما ۶٪ کاربران موبایلی با عرض ۳۲۰ پیکسل دارند. اگر می‌خواهین اون ۶٪ درصد رو که موبایل‌های قدیمی هم دارند از دست ندین پایه طراحی رو روی ۳۲۰ پیکسل بزارین که البته کار بسیار سختیه.Progressive enhancementرویکرد طراحی Mobile 1st در حقیقت ادامه‌ی رویکرد progressive enhancement است.رویکرد Progressive enhancement به معنی طراحی بر اساس ویژگی‌های مشترک و ابتدایی مرورگرهای مختلف است که امکان استفاده برای تعداد بیشتری از کاربران رو فراهم می‌کنه.در این رویکرد می‌بایست امکانات و تکنولوژی وبسایت/اپلیکیشن بر اساس حداقل ورژن انتخاب و پیاده‌سازی بشه.یکی از تصمیم‌گیری‌های مهم در طراحی اپلیکیشن، مشخص کردن حداقل ورژن اندروید/ iOS است. در این انتخاب، عوامل مهمی تاثیرگذاراند. کاربرنما (Persona) یکی از مهمترین این عوامل است.Content 1stشکی در این نیست که محتوا پاداشاه اصلی اینترنت است و هر چه در طراحی، اولویت بیشتری برای محتوا قائل بشیم؛ کاربر هم با Retention Rate (نرخ بازگشت) و Conversion Rate (نرخ تبدیل) بیشتر قدردان خواهد بود.در مورد Content 1st زیاد توی همین ویرگول صحبت شده که می‌تونین پیدا کنین. خلاصه بگم که قبل از شروع طراحی حتما باید بدونین چه محتوایی توی هر کامپوننت قراره قرار بگیره که این محتوا روی ابعاد کامپوننت‌ها بسیار تاثیر می‌زاره.فلذا بیخیال لورم ایپسوم بشین.Disability 1stتوی این ویدئوی TED خانم آلیس روی در مورد این موضوع با مثال توضیحات جالبی می‌ده. خلاصش اینکه اگر شما در طراحی از ابتدا تمرکزتون رو روی افراد معلول و کم توان ( مثل افراد مسن یا دور از تکنولوژی) قرار بدین در نهایت محصولی که خلق می‌شه افراد عادی هم به راحتی می‌تونن ازش استفاده کنن و اینجوری جامعه‌ی بزرگتری رو به دست میارین.اگر برای دسترسی به یوتیوب مشکل دارین می‌ونین تو آپارات یا IGTV اینستاگرام هم این ویدئو رو ببینین. فارغ از اینکه کجا می‌بینین فالو و سابسکرایب کمک می‌کنه ارتباط بهتری با هم داشته باشیم. https://twitter.com/amirtaqiabadi/status/1361292127490236420?s=20 معمولا - مثل توییت بالا - چیزهای جدید رو ابتدا در تویترم منتشر می‌کنم. آموزش UI UX امیر تقی آبادی Tue, 23 Jun 2020 10:54:32 +0430 https://virgool.io/UIUXcourse/interaction-cost-%DA%86%DB%8C%D8%B3%D8%AA-dp2rj9oyaxvg بعضی مفاهیم رو می‌شه تجربه کرد اما نمی‌شه توضیح داد. مثلا اصطلاح Interaction Design یکی از این مفاهیمه که اهل فنش می‌دونن چیه اما بخوان یه جوری توضیح بدن که تفاوتش با Experience Design برای یه تازه کار مشهود بشه تقریبا نشدنیه. یا حداقل من کسی رو ندیدم که بتونه چنین مفهومی رو درست منتقل کنه.بعضی چیزها هم هست که می‌شه داستانش رو گفت اما نمی‌شه نوشتش. هزینه تعامل برای من جز این دستس. بارها شده می‌خواستم در موردش بنویسم اما دستم به کیبورد نرفته. چون دوست دارم تعریفش کنم. اونجایی که مهمتره رو صدامو ببرم بالاتر نه اینکه متن رو Bold کنم. این مقدمه رو گفتم که برسم به اینجا که بالاخره اولین قسمت یوتیوب رو با موضوع Interaction Cost آماده کردم که می‌تونین این زیر ببینین. یادتون نره که تو یوتیوب فالو کنین چون باید به ۱۰۰ نفر برسم که بتونم اسم انتخاب کنم برای کانالم. ? https://www.youtube.com/watch?v=vcvKDTqXPVE&t=442s یه توضیح مختصری در زیر می‌دم اما بهتره که ویدئوشو توی یوتیوب ببینین. نگران نباشین قصه گوی خوبیم. یه ذره ترس از دروبینمم بریزه بهترم می‌شم. ?بهتره اول رجوع کنیم به تعریف NN/g در مورد Interaction Designهزینه تعامل شامل تمامی تلاش‌های فیزیکی و ذهنی کاربر برای رسیدن به هدف خود در وبسایت و اپلیکیشن است. - NN/gفهوای کلام اینکه هر کاری که کاربر برای تعامل با وبسایت یا اپلیکیشن ما انجام می‌ده یه هزینه‌ای داره. برای اینکه بتونیم تجربه کاربری بهتری خلق کنیم بهتره تمامی این هزینه‌ها رو بشناسیم که بتونیم تا حد امکان حذفش کنیم یا با یه روش جایگزین ساده‌ترش بکینم.مثلا توی این ویدئوی یوتیوب من برای اینکه شما موبایل رو نچرخونین، به صورت پورتره فیلم‌برداری کردم. تو این مثال Rotation رو به عنوان یه تعامل حذف کردم که شما با صرف هزینه کمتری بتونین به هدفتون که دیدن ویدئو برسین.یا مثلا تو مقاله‌ی بررسی موردی طراحی Login Page پف‌فیلم گفتم که تو صفحه ثبت‌نام اومدمو شماره موبایل کاربر رو یه جوری نشون دادم که خوندن و درک کردنش ساده‌تر و بار شناختیش (Cognitive Load) کمتر بشه. یعنی حذف نکردم بلکه ساده‌ترش کردم.اصلی‌ترین تعاملات با اپلیکیشن رو این زیر آوردم و توضیح هر کدوم رو توی ویديوی یوتیوب ارايه دادم.خوندن اسکرول کردنگشتندرک کردنکلیک کردن ( یا Tap کردن در موبایل)حرکت موسچرخوندن گوشیجِسچرهاتایپ کردنانتظار کشیدن ( برای باز شن صفحه یا انجام کار کاربر)تغییر توجهاستفاده از حافظه ( به خاطر سپردن و به یاد آوردن)موضوع مهم اینه که اینها به یک اندازه هزینه ندارن. مثلا تو مقاله‌ی کوتاه در مورد Recognition Over Recall گفتم واضحه که وقتی بخواهی یه چیزی رو از حافظه به یاد بیاری خیلی سخت‌تر از زمانیه که بخواهی انتخاب کنی.یا حتی جالبه که بدونین اسکرول عمودی برای کاربر ساده‌تر از اسکرول افقیه. پس اگر یه زمانی خواستین اپلیکیشن ۷۸۰ رو بازطراحی کنین خوبه که بدونین بهتره اینه که تمام امکانات رو با اسکرول عمودی نشون بدین تا مثل الان که صفحه‌بندی شدست. از طرفی تو موبایل تپ کردن هم در شرایطی به خصوص اگر دکمه توی Thumb zone باشه از هر دو راحت‌تره و تو دسکتاپ اسکرول کردن راحت‌تر از کلیک کردنه حتی اگر دکمه (مثل دکمه Start در ویندوز) در گوشه‌ها باشه. https://virgool.io/@amirtaqiabadi/infinite-scrolling-vs-pagination-fvezgkr03cxt یه موضوع دیگه هم که تو ویدئو اشاره کردم اینه که همیشه کم کردن Interaction Cost مطلوب ما و کاربر نیست.مثلا توی Zeplin برای اینکه بتونین یه پروژه رو حذف کنین حتما باید اسم کامل پروژه رو بنویسین. اینکار باعث می‌شه که از حذف اشتباهی پروژه جلوگیری بشه و این به نفع کاربره.یا شبکه‌های اجتماعی عامدانه Deactive کردن روی سخت می‌کنن که کاربر به راحتی نتونه دی‌اکتیو کنه و شاید به همین دلیل سخت بودن بیخیال بشه و این به نفع بیزینسه.اگر برای دیدن یوتیوب مشکل دارین این ویديو رو توی IGTV اینستاگرام هم گذاشتم که می‌تونین اونجا ببینین. https://www.instagram.com/p/CBROHWCgkj9/ از این دست کوتاه مقاله‌ها:کوتاه در مورد تفاوت طراحی Responsive و Adaptiveکوتاه در مورد Recognition Over Recallکوتاه در مورد Heuristic Evaluationکوتاه در مورد Responsive breakpointsکوتاه در مورد System Usability Scaleکوتاه در مورد Mental Designکوتاه در مورد User Flowکوتاه در مورد 5Second Usability Testکوتاه در مورد The Blurry-eye Test کوتاه در مورد Interaction Design - در حال مطالعه آموزش UI UX امیر تقی آبادی Thu, 11 Jun 2020 15:23:27 +0430 https://virgool.io/UIUXcourse/blur-usability-test-%DA%86%DB%8C%D8%B3%D8%AA-sspcndi26cv8 در بخش دید پیرامونی بیشتر از دید مرکزی استفاده می‌شود کتاب ۱۰۰ چیزی که هر طراح باید بداند توضیح داده است که ما زمانی که بر روی یک موضوع متمرکزیم همزمان تصویری مات از حوالی آن نقطه‌ی تمرکز رو برای بررسی ناخودآگاه به مغز می‌فرستیم.تحقیقات دانشگاه کانزاس نشان می‌دهد که دید پیرامونی برای درک دنیای اطراف ما مهم‌تر از آن چیزی است که تابه‌حال فکر می‌کردیم. به نظر می‌رسد درک اینکه در چه فضایی قرارگرفته‌ایم با دید پیرامونی انجام می‌شود.این کار باعث می‌شه ارتباط بین اجزا و BigPicture در مغز شکل بگیره که به تصمیم‌گیری بهتر کمک می‌کنه. در نتیجه مهمه که تصویر مبهمی که چشم به مغز می‌فرسته هم حاوی اطلاعات مفیدی باشه.برای رعایت بهتر این موضوع بهتره UI نهایی رو به صورت تار نیز تماشا کنیم تا ببینین آیا روابط و اولویت بین المان‌ها در این شرایط رعایت شده یا نه.ساختار بصریآیا سلسله‌مراتب (hierarchy) بصری در طراحی رعایت شده؟ آیا کاربر می‌تونه وقتی تمرکزش روی متن نیست همچنان روابط پدر و فرزندی بین اطلاعات رو درک کنه؟تار شده به کمک سایت pixlr.comدر تصویر بالا می‌بینید که حتی وقتی تصویر محو شده، همچنان می‌تونید متوجه ساختار اطلاعات بشین. اینکار باعث می‌شه ساختار اطلاعات به درستی نشون داده بشه و کاربر سریعتر به هدفش برسه. اولویت بصریآیا مهمترین المان صفحه متمایز است؟بارها در مقالات مختلف از جمله مقاله‌ی چک‌لیست طراحی User Onboarding اپلیکیشن گفتم که کاربرها نمی‌خونن بلکه اسکن می‌کنند. باید طراحی برای این نگاه سرسری طراحی شده باشه و المان‌های اصلی صفحه متمایز باشند. به کمک Blur کردن تصویر می‌شه متوجه شد که آیا اکشن اصلی صفحه توجه لازم رو به خودش می‌کشه یا نه.به نظرم اگر طراحی مثل اینستاگرام پر از عکس باشه این اولیت دهی بصری به درستی اتفاق نمی‌افته برای همین اینستا Call to Action اضافه کردن پست رو که احتمالا مهمترین المان صفحه است رو متمایز نکرده چون به هر حال به خاطر عکس‌های زیاد توجه لازم رو جلب نمی‌کنه. در حالی که تویتر که بیشتر شبکه‌ی متن محوره توییت کردن رو به صورت بصری حتی در اپلیکیشن متمایز کرده.گروه‌بندی بصریبر اساس اصل مجاورت (Proximity) قوانین گشتالت مغز ما اجزای کنار هم رو تو یه دسته‌بندی قرار می‌ده. بر این اساس استفاده از فضای سفید بهینه برای جدا کردن گروه‌های مرتبط به هم بهترین روشه. بانی‌مودیکی از بهترین راه‌ها برای اینکه ببینین آیا گروه‌ها به اندازه‌ی کافی با هم فاصله دارن یا نه، استفاده از Blur Usability Test. مثلا در تصویر بالا که از صفحه‌ی اصلی سایت بانی‌مد انتخاب شده مرز بین سه شخص سمت چپ مشهود نیست. در این حالت بهتره فواصل بین این سه تصویر رو بیشتر کنند.برای تست این موضوع یک راه سریع هست. فقط کافیه مثل تصویر بالا گوشه‌های چشمتون رو بکشین تا تصویر تار بشه. اگر نمی‌خواهین مثل من قیافتون عجیب بشه می‌تونین از افکت Blur فتوشاپ یا این ابزار آنلاین استفاده کنید.منبع: https://uxdesign.cc/the-blurry-eye-test-1bd12bc6c3f8http://learnwebdesign.ir/UX/100Things/Things/2از این دست کوتاه مقاله‌ها:کوتاه در مورد تفاوت طراحی Responsive و Adaptiveکوتاه در مورد Recognition Over Recallکوتاه در مورد Heuristic Evaluationکوتاه در مورد Responsive breakpointsکوتاه در مورد System Usability Scaleکوتاه در مورد Mental Designکوتاه در مورد User Flowکوتاه در مورد 5Second Usability Test کوتاه در مورد The Blurry-eye Test - در حال مطالعه آموزش UI UX امیر تقی آبادی Wed, 08 Apr 2020 19:41:28 +0430 https://virgool.io/UIUXcourse/5-second-usability-test-%DA%86%DB%8C%D8%B3%D8%AA-pr4klrryxjfw تست کاربردپذیری ۵ ثانیه به ما کمک می‌کنه که برداشت اول (first impressions) کاربر رو در مورد طراحیمون بدونیم. برداشت اولیه ما از یک سایت می‌تونه بر قضاوت بلند مدت ما در مورد یک سایت تاثیر بزاره و این تاثیر ناخوداگاه می‌تونه باعث علاقه/عدم علاقه به استفاده از اون محصول بشه.برداشت اولیه‌ی که تنها در ۵ ثانیه‌ی ابتدایی مواجه با سایت این تاثیر ناخودآگاه اما بلند مدت رو می‌زاره.هر چند جایی من ندیدم که این قید رو گفته باشن اما بدیهی به نظر می‌رسه که این تست فقط بر روی UI و طرح نهایی انجام می‌شه و به درد اسکچ و وایرفریم نمی‌خوره.روند کار این تست این جوریه که تصویر وبسایت یا اپلیکیشن (معمولا صفحه‌ی اول یا landing page) رو تنها به مدت ۵ ثانیه نشون کاربر می‌دیم و بعد ازش می‌خواهیم که با چیزهایی که به یاد میاره به سوالاتمون جواب بده.این لیست سوالاتیه که توی این تست می‌تونین بپرسین.چه چیزهایی از این اپلیکیشن را به یاد دارید؟این اپلیکیشن چه کار می‌کند؟اسم اپلیکیشن چیست؟به نظرتون مخاطب این اپلیکیشن چه کسانی هستند؟به نظرتون این اپلیکیشن چقدر قابل اعتماد است؟ (انتخاب از بازه)به نظرتون این اپلیکیشن چقدر زیباست؟ (انتخاب از بازه)به نظرتون کار با این اپلیکیشن چقدر ساده است؟ (انتخاب از بازه)به فراخور نیازتون می‌تونین سوالات دیگری رو هم به این تست اضافه کنین یا تعدادی رو کم کنین.یه نکته مهم اینکه به کاربران نگوین که باید چیزی را در تصویر به خاطر بیاورند و یا دقت کنند. اینجوری توجهشون بیشتر از حالتی که سایت شما را با یک نگاه اسکن می‌کنند جلب می‌شه و نمی‌شه به نتیجه‌ی تست خیلی مطمئن بود.به عنوان متن خوش‌آمدگویی از حضورشون در این تست تشکر کنید و بگین که به تصویر نگاه کنید و چند سوال رو پاسخ دهید. https://usabilityhub.com/ توی این سایت می‌تونین این تست و چند تا تست دیگه رو انجام بدین که البته نسخه‌ رایگان نداره اصلا. اگر راهکاری دارین که بشه این تست رو به صورت آنلاین برگزار کرد لطفا به منم بگین.مشکل اصلی تو محدود کردن زمان نمایش عکسه وگرنه پرشنامه‌های آنلاین زیادی هست که بشه ازشون استفاده کرد. https://www.youtube.com/watch?v=X0FG0jCqLYQ&vl=en از این دست کوتاه مقاله‌ها:کوتاه در مورد تفاوت طراحی Responsive و Adaptiveکوتاه در مورد Recognition Over Recallکوتاه در مورد Heuristic Evaluationکوتاه در مورد Responsive breakpointsکوتاه در مورد System Usability Scaleکوتاه در مورد Mental Designکوتاه در مورد User Flow کوتاه در مورد 5Second Usability Test - در حال مطالعه آموزش UI UX امیر تقی آبادی Sat, 04 Apr 2020 16:43:49 +0430 https://virgool.io/UIUXcourse/user-flow-%DA%86%DB%8C%D8%B3%D8%AA-ztgwtkpnunih اگر از قبل با User Flow آشنایی دارید بخش اول این مقاله رو لازم نیست بخونید، تکراریه براتون و وقتتون بیشتر از خوندن چیزهای تکراری ارزش داره.اگر ایده‌آل گرا هستید و دوست دارید کامل بخونید جلوتونو نمی‌گیرم اما مطمئن باشید چیزی رو از دست نمی‌دین.بخش اول: User Flow چیست؟برای آشنایی با User Flow بهتره اول با مفهوم Flow Chart آشنا بشیم. اگر با این مفهوم آنشا نیستین ویدئوی زیر رو ببینید. سعی کردم به زبان ساده توضیحش بدم. https://www.aparat.com/v/czU1K/%D8%A2%D9%85%D9%88%D8%B2%D8%B4_%DA%A9%D8%A7%D8%AA%D9%84%DB%8C%D9%86_-_%D8%A7%D9%84%DA%AF%D9%88%D8%B1%DB%8C%D8%AA%D9%85_%D9%88_%D9%81%D9%84%D9%88%DA%86%D8%A7%D8%B1%D8%AA حالا که با مفهوم فلوچارت آشنا بودین/شدین بهتره بریم سراغ User Flow.به زبان ساده User Flow مسیریه که داخل سایت/اپلیکیشن برای کاربر در نظر می‌گیریم که کاربر با طی کردن اون مسیر به هدف نهایش/نهاییمون برسه. این مسیر هر چقدر ساده‌تر و مطابق با Mental Model کاربر باشه، کاربر با Cognitive Load کمتری به هدفش/هدفهمون می‌رسه و تجربه بهتری هم ادراک می‌کنه.برای آشنایی با بار شناختی (Cognitive Load ) به مقاله‌ی ۹ اثر روانشناسی تاثیرگذار بر طراحی Walkthrough رجوع کنید.بخش دوم: شروع طراحی User Flowخوب یه راست بپریم داخل موضوع.مثلا فرض کنید می‌خواهیم برای یک سایت چاپ کارهای چاپی مثل کارت ویزیت، پوستر، بنر، سالنامه و ... مسیر کاربر رو مشخص کنیم.هدف کاربر تو این سایت اینه که سفارش چاپ کار چاپیشو ثبت کنه.۱. برای طراحی از Task Flow شروع کنیدبرای طراحی User Flow اول از همه با Task Flow شروع می‌کنیم. فرض می‌کنیم که کاربر فقط یک هدف داره و اون ثبت سفارشه و در ساده‌ترین و سر راست‌ترین حالت یه چیزی شبیه تصویر زیر ترسیمش می‌کنیم.به مرور شروع می‌کنیم بست دادن User Flow. مثلا اولین مستطیل (کاربر وارد می‌شود) را در نظر بگیرید. اگر کاربر قبلا از سایت استفاده کرده باشه و لاگین باشه دیگه نیازی نیست که این مرحله رو رد کنه برای همین اینجا مثل تصویر زیر یک شرط اضافه می‌شه که آیا کاربر در سیستم لاگین است یا نه که اگر لاگین باشه به صورت سیستمی به مرحله‌ی دوم می‌ره و اگر نباشه وارد صفحه‌ی لاگین می‌شه.و دوباره اینجا سوال می‌شه که آیا کاربر قبلا توی سایت/اپلیکیشن حساب کاربری داره یا نه که اگر نداره باید مثل تصویر زیر وارد صفحه‌ی ثبت‌نام بشه و اگر داره وارد صفحه‌ی Log-in بشه.یا به فراخور بیزینس شاید بتونیم مثل تصویر زیر این دو صفحه رو برای سادگی بیشتر یکی کنیم و با گرفتن شماره موبایل و ارسال کد تایید کاربر رو لاگین کنیم.یا شاید هم همونطور که در مقاله‌ی چک لیست طراحی فرم ثبت‌نام یا این IGTV توضیح دادم و به کرات تاکید کردم که تا قبل نمایش دادن ارزش کلیدی سیستم به کاربر، اون رو مجبور به ثبت‌نام نکنید تصمیم بگیریم که مثل تصویر زیر Login Check رو بزاریم بعد از انتخاب خدمت مورد نظر کاربر یا حتی بهتر از اون ببریمش در خلال ثبت سفارش که همینطور که داره سفارشش رو تکمیل می‌کنه ثبت‌نام و لاگین هم بشه.هر کدوم از این تفکرات و سوالات رو باید برای موارد مختلف در نظر بگیریم. مثلا در مرحله‌ی "کاربر خدمت مورد نظر خود را انتخاب می‌کند" اینکه کاربر با جستجو، فیلتر کردن، navigation یا حتی نمایش خدمات محبوب در صفحه‌ی اصلی به خدمت مورد نظر می‌رسه یا نه باعث شاخه‌دارتر شدن این User Flow می‌شود.اکیدا پیشنهاد می‌کنم این مقاله را هم بخونید. https://virgool.io/@r.kakavand70/%D8%A7%D8%B1%D8%AA%D8%A8%D8%A7%D8%B7-%D8%A8%DB%8C%D9%86-navigation-%D9%88-in-site-search-xz1wf8bihxxh یا همینطور که در مقاله‌ی کوتاه در مورد Mental Design گفتم ممکنه گاهی محدودیدت‌های بیزینسی ما رو مجبور کنه در اولین گام آدرس رو بگیریم و بعد خدمات مرتبط رو نمایش بدیم که این باعث جابه‌جایی مراحل می‌شه.مثلا User Flow تصویر بالا تنها با دو مستطیل ثبت‌نام و خرید اشتراک شروع شد و شرایط مختلف رو که به مرور براش در نظر گرفتیم به این گستردگی که می‌بینین رسیده.۲. به تفاوت User Flow اولین بار استفاده توجه کنیدبدیهیه که اولین باری که کاربر وارد سایت/اپلیکیشن می‌شه با استفاده‌های بعدی تفاوت‌هایی داره. مثلا در اولین بار استفاده از اپلیکیشن کاربر لاگین می‌کنه و در نتیجه در استفاده‌های بعدی نیازی به لاگین کردن نیست در نتیجه User Flow اولین استفاده احتمالا متفاوت با User Flow استفاده‌های بعدیه.موارد زیر چیزهاییه که باید برای اولین استفاده‌ی کاربر مدنظر قرار بدین.نمایش User On-boardingثبت‌نام/ورود کاربرنمایش Guided tourدرخواست دسترسی‌های حساس نظیر دسترسی به دوربین (در صورت تاثیر در کارکرد اصلی)ثبت آدرس یا اطلاعات کاربری نظیر عکس پروفایل، نام، شماره شبا و ... (در صورت تاثیر در کارکرد اصلی)نسخه‌ی Demo یا Free Tryشما هم اگر به موردی برخوردید که بهتر است در این لیست اضافه بشه لطفا در کامنت‌ها اعلام کنین.۳. استفاده از اشکال استاندارد در طراحی User Flowچون این User Flow برای پیاده‌سازی معماری سایت/اپلیکیشن تحویل تیم فنی می‌شه بهتره که از اشکال استاندار Flow Chart برای طراحی User Flow استفاده کنین.این موارد بالا اشکال استاندارد طراحی User Flow هستند. اگر برای نمایش نظر یا توضیحات بیشتر نیاز به چیزی داشتین دستتون بازه که از چیزهای دیگه هم انتخاب کنید فقط مهمه که Consistency رو رعایت کنین. این توضیحات تکمیلی به خودتون هم برای طراحی Wire Flow کمک می‌کنه که چیزی رو از قلم نندازین.۴. صفحات را نام‌گذاری کنیدمعمولا چیزهایی که در مستطیل‌ها قرار می‌گیره تبدیل می‌شن به اسم صفحه. مثلا صفحه‌ی کاربر سفارش خود را بررسی و نهایی می‌کند بهتر است با نام Invoice یا Checkout مشخص شود که به عنوان کلیدواژه‌ی مشترک بین تیم طراحی و توسعه استفاده شود.بخش سه: معرفی ابزارفارغ از قلم و کاغذ، ابزارهای آنلاین خوبی رو می‌تونید با کلیدواژه‌ی User Flow Maker در گوگل جستجو و استفاده کنید.من خودم معمولا برای شروع از قلم و کاغذ استفاده می‌کنم و به مرور که یه مقدار شاکلش در اومد می‌برمش توی Flowmapp.من چند تایی رو امتحان کردم مثل Timblee ،Wireflow ،Whimsical و حتی Miro که عشقمه اما برای طراحی User Flow و حتی Site Map پیشنهادم به شما Flowmapp که آخرین تصویر این مقاله رو به کمک اون زدم.در انتها نظرتون با یک وبینار پروژه محور طراحی User Flow چیه؟اگر موافقین توی کامنت اعلام کنین و یک راه دسترسی معرفی کنین که زمانشو بهتون اطلاع‌رسانی کنم.الوعدا وفالینک وبینار طراحی User Flow که قولشو داده بودم.از این دست کوتاه مقاله‌ها:کوتاه در مورد تفاوت طراحی Responsive و Adaptiveکوتاه در مورد Recognition Over Recallکوتاه در مورد Heuristic Evaluationکوتاه در مورد Responsive breakpointsکوتاه در مورد System Usability Scaleکوتاه در مورد Mental Designکوتاه در مورد User Flow - در حال مطالعه آموزش UI UX امیر تقی آبادی Thu, 19 Mar 2020 17:34:10 +0330 https://virgool.io/UIUXcourse/mental-design-o2ehfnbwcxzz در ابتدای کلاس‌های UI/UX معمولا از دانشجوها می‌خوام که Task Flow یک اپلیکیشن تحویل فوری لوازم بهداشتی در تهران نظیر کاندوم، نوار بهداشتی، قرص اورژانسی و ... را به صورت فعل به فعل یا Flow Chart ترسیم کنند و بعد ازشون می‌خوام که همونو تبدیل به Wireframe کنند.نتیجه‌ی کار بچه‌ها رو می‌تونید در این لینک ببینید. این ترسیم‎ها قبل از اینه که آموزشی داده بشه. خروجی بچه‌ها رو اگر ببینید متوجه یک الگوی تکراری می‌شین. اکثرا مسیری که طی کردن شبیه Flow دیجیکالاست. یعنی کاربر از انتخاب محصول شروع می‌کنه و تا پرداخت و تحویل کالا پیش می‌ره.به این می‌گن Mental Model. به زبان ساده چیزی که کاربر قبل از مواجه با سایت/اپ فقط با فهمیدن کارکرد اصلیش در موردش فکر می‌کنه. هر چقدر طراحی نهایی به این Mental Model نزدیک‌تر باشه کاربر راحت‌تر و با آموزش کمتری می‌تونه باهاش کار کنه و در نتیجه تجربه کاربری بهتری خلق کردیم.اما معمولا به این راحتی نیست. برگردیم به مثال بالا.وقتی در مورد تحویل فوری لوازم بهداشتی صحبت می‌کنیم یعنی حداکثر ظرف چه مدتی باید این محصولات رو به دست مشتری برسونیم؟اگر نظر شما بیشتر از یکساعته باید بگم تا حالا به چنین مورد اورژانسی نخوردین.در حقیقت در بسیار موارد حتی ۱ ساعت هم زیاده اما فعلا همون ۱ ساعت رو ملاک قرار بدیم. آیا با یک شعبه در تهران می‌شه سفارش مشتری رو در هر جای تهران کمتر از یک ساعت به دستش رسوند؟قطعا خیرپس برای یک چنین اپلیکیشنی احتیاج به چند شعبه در تهران داریم. حالا فرض کنید با همون User Flow مشابه دیجیکالا کاربر اومده سفارش داده و سفارش به نزدیکترین شعبه ارجاع می‌شه که متوجه می‌شیم موجودی شعبه برای پذیرش این سفارش کافی نیست. اگر خوش شانس باشیم از شعبه‌ی دیگری بتونیم زیر ۱ ساعت ارسال کنیم اونم در شرایطی که احتمالا تا الان ۱۰ دقیقش گذشته و فقط ۵۰ دقیقه باقی مونده. اگر نه هم مجبوریم با کاربر تماس بگیریم که سفارششو عوض کنه.حالا کاربر ممکنه به خاطر تابوهای اجتماعی در شرایط صحبت کردن نباشه یا از نگرانی و استرس قادر به انتخاب کالا نباشه.این حالت رو خیلی از ما با چیلیوری و اسنپ‌فود و ... داشتیم. با کلی صرف زمان سفارش دادیم و منتظریم بیارن که تماس می گیرن می گن سفارشتونو نداریم به جاش فلان بفرستیم. چه احساس داشتین؟در نتیجه Flow درست متناسب با بیزینس ما اینه که ابتدا از کاربر لوکیشن بخواهیم و بعد محصولات موجود در نزدیکترین شعبه رو بهش نشون بدیم. اسم این مدل رو می‌زاریم Implementation Model به معنی مدل اجرایی. یعنی مدلی که بیزینس ما اون مدلی بهتر کار می‌کنه.هنر یک طراح اینه که این Implementation Model رو تا حد ممکن به Mental Model نزدیک کنه که کاربر احساس بهتری از کارکردن باهاش داشته باشه و Learn-ability ،Efficiency ،Memorability و User Satisfaction رو افزایش بده.مدل ذهنی از کجا میاد؟در مقاله‌ی کوتاه در مورد Heuristic Evaluation در مورد اصل هماهنگی سیستم با جهان واقعی (Match between system and the real world) گفتم کهسیستم باید با زبان کاربر صحبت کند. با کلمات و مفاهیمی که کاربر با آنها آشناست. از آیتم‌های رایج استفاده کند. اطلاعات را به نحوی ارائه کند که با Mental Model افراد هم‌خوانی داشته باشد. از آیکون‌ها و تصاویری استفاده کند که تا حد امکان شبیه اشیا دنیای واقعی باشد.همینطور که در این مقاله هم گفتم توجه به این اصل هم ارز توجه به Interaction Design هم هست.مثلا در تصویر بالا تصور ما از یک فروشگاه کتاب در دنیای واقعی می‌تونه توی طراحی نهایی یک اپلیکیشن هم تاثیر بزاره.از طرفی در مقاله‌ی ۷ اثر روانشناسی تاثیرگذار بر Iconography در مورد اثر جیکوب (Jakob’s Law) توضیح دادم کهکاربران بیشتر زمان خود را در سایت‌های دیگران می‌گذرانند در نتیجه ترجیح می‌دهند به همان روشی که تعامل با دیگر سایت‌ها را آموخته‌اند با سایت شما هم کار کنند و مجددا نیاز به یادگیری نباشد.مدل ذهنی بر اساس حقایق نیست بلکه حاصل تجربیات قبلی و ادراکش از سیستم شکل گرفته و به مرور هم به روز می‌شه. در نتیجه کاربران انتظاراتشون رو که از کار کردن با سایت‌ها و اپلیکیشن‌های مشابه به دست آوردن رو به سایت/اپ جدید هم میارن و انتظار دارند که اونجوری کار کنه. با این توضیح الان اگر خواستین یه چیزی شبیه اسنپ و تپسی و ... بزنید در نظر بگیرید که کاربران از یک اپلیکیشن مشابه، انتظار چه چیزی رو دارند.الگوهای ذهنی ما تحت تاثیر محل زندگی، خانواده دوستان، تاریخ، فرهنگ و موقعیت‌های اجتماعیمون شکل می‌گیره در نتیجه اولین شرط طراحی متناسب با Mental Model شناخت بستر زمینه‌ای کاربرمونه.حتی تغییر و تحولات تکاملیمون هم می‌تونه تاثیر گذار باشه. همینطور که در مقاله‌ی قوانین گشتالت در طراحی UI گفتم اینکه ما جهان رو چه طور دسته‌بندی می‌کنیم حاصل یک فرآیند تکاملی طولانی مدته که الان دیگه در ژنوم ما نهفته شده و شناختش می‌تونه به طراحی بهتر و نزدیک‌تر به Mental Model کمک کنه.ممکنه پرسوناهای مختلف، Mental Modelهای متفاوتی هم داشته باشند. مثلا در ادامه‌ی تحقیقات شخصی مربوط به مقاله‌ی چک لیست طراحی Search Box متوجه شدم که افرادی که زبان گوشیشون فارسیه معمولا تصور ذهنیشون از جایگاه Search Box قرینه است یا اونطوری که در مقاله‌ی چه پترن‌هایی در زبان فارسی قرینه می‌شوند؟ گفتم تصورشون اینه که مثل تصویر بالا دکمه‌ی تایید سمت چپه و دکمه‌ی منفی سمت راسته.یه نگاهی هم بکنیم به اعمال بدون فکر (Thoughtless acts). یه سری محصولات هستند که هر چند که برای اون کار طراحی نشدن اما ما برای اون کار استفادشون می‌کنیم. مثلا ماژیک هایلایت طراحی نشده که صفحه‌ی کتاب در حال خوندن رو نگه داره یا صندلی برای فیلم‌ها طراحی نشده که دری که قفل نمی‌شه رو مانع باز شدنش بشه اما استفاده می‌شه.توی طراحیمون باید دقت کنیم که هر چیزی که ما طراحی می‌کنیم کاربر ممکنه خودآگاه یا ناخودآگاه استفاده‌ی دیگری ازش بکنه. مثلا من خودم از دکمه‌ی لایک ویرگول برای نگه داشتن مقالاتی که یه بار خوندم اما حدس می‌زنم ممکنه دوباره لازمم بشه استفاده می‌کنم یا زمانی که یه جمله‌ی خاص رو از یک مقاله بخوام ذخیره کنم با وجود کلی ابزار یکی از گزینه‌هام تیوتره، هر چند که برای اینکار طراحی نشده.هر چقدر هم ما تلاش کنیم که بر اساس Mental Model طراحی کنیم باز هم ممکنه کاربر استفاده‌ی دیگه‌ای از اون محصول بکنه که تا قبل اتفاق افتادنش اصلا برای ما قابل پیش‌بینی نبوده و در این مرحله باید تنها ازش درس بگیریم و شاید حتی بتونیم ازش استفاده کنیم. https://twitter.com/amirtaqiabadi/status/1173233321968656386?s=20 به طور خلاصه Mental Model بر اساس اینها ساخته می‌شه:تجربه ادراک جهان واقعیتاریخچه تکاملیتجربه از کار با ابزارهای دیجیتالتجربه اپلیکیشن‌های مشابهبینش و معلوماتفرهنگ، جامعه، دوستان و ... چیزی که کاربر در مورد اپلیکیشن شنیده یا خوندهتجربه قبلی کار با اپلیکیشن (برای بازطراحی)اعمال بدون فکرشناخت این موارد کمک می‌کنه که بتونیم بهتر Mental Design کنیم.اما راه سریعتر اینه که شخص طراحی رو پیدا کنیم که خودش پرسنای ما باشه. اینجوری هر چیزی که اون در مورد جامعه فکر می‌کنه رو می‌شه با تقریب خوبی به کاربران نسبت داد. توی مقاله‌ی برای احمق‌ها طراحی کنید در این مورد یه پیشنهاداتی دادم.در انتها یک نکته رو بگم که طراحی بر اساس Mental Model در ظاهر با نوآوری در تضاده اما خوبی مدل ذهنی اینه که در گذر زمان می‌تونه تکامل و گسترش پیدا کنه اما کار خیلی سختیه چون وقتی کاربر با محصولی روبرو می‌شه که مدل‌های ذهنیشو به چالش می‌کشه ممکنه بیخال محصول جدید بشه.راه حل دم دستی اینه که نوآوری شما فقط باید یک پله از چیزهای فعلی بالاتر باشه. یعنی طرف کلی مشابهت ببینه و یک یا دو چیز نوآورانه. اینجوری نسبت بهش گارد نمی‌گیره. این موضوع به قانون مایا معروفه.همچنین این موضوع به نحوی با طرحواره (Schema) هم همبستگی داره که دونستنش خالی از لطف نیست.طرحواره یک چارچوب یا مفهوم شناختی است که به ما کمک می کند اطلاعات را سازمان دهی و تفسیر کنیم.قرار بود مقاله کوتاهی بشه ولی متاسفانه در عین مختصر نویسی طولانی شد اما هنوز در دسته‌ی مقالات کوتاه من قرار می‌گیره. در زیر بقیش رو بخونین.کوتاه در مورد تفاوت طراحی Responsive و Adaptiveکوتاه در مورد Recognition Over Recallکوتاه در مورد Heuristic Evaluationکوتاه در مورد Responsive breakpointsکوتاه در مورد System Usability Scaleکوتاه در مورد Mental Design - در حال مطالعهکوتاه در مورد User Flowمنابع:تفکرات شخصیWhat is a mental model and how does it relate to user experience?UX knowledge base sketch آموزش UI UX امیر تقی آبادی Wed, 26 Feb 2020 16:30:34 +0330 https://virgool.io/UIUXcourse/system-usability-scale-%DA%86%DB%8C%D8%B3%D8%AA-etonmzj3mhqg تست System Usability Scale را فعلا مقیاس کاربردپذیری سیستم ترجمه می‌کنم تا نام بهتری پیشنهاد شود. در این مقاله برای راحتی از نام اختصاری آن یعنی SUS استفاده می‌کنم.تست SUS یک پرسشنامه‌ی ۱۰ سوالی مقیاس لیکرت است که به تعبیری می‌توان آن را نمونه‌ی کمی شده تجربه‌ی کیفی کاربر در نظر گرفت و چون ارزان و سریع قابل انجام است از محبوبیت زیادی برخوردار است.لیست این ۱۰ سوال در زبان انگلیسی به قرار زیر است.I think that I would like to use this system frequently.I found the system unnecessarily complex.I thought the system was easy to use.I think that I would need the support of a technical person to be able to use this system.I found the various functions in this system were well integrated.I thought there was too much inconsistency in this system.I would imagine that most people would learn to use this system very quickly.I found the system very cumbersome to use.I felt very confident using the system.I needed to learn a lot of things before I could get going with this system.هر سوال مانند تصویر بالا با ۵ گزینه از قویا موافق تا قویا مخالف از کاربر پرسیده می‌شود که باید تنها یک گزینه انتخاب شود. برای همین در پرسشنامه ترجمه‌شده‌ی زیر از Radio Button به جای Check Box استفاده کرده‌ام.برای استفاده از آن، هم می‌توانید از پرسشنامه‌های آنلاین نظیر Porsline یا حتی Google Forms استفاده کنید و هم می‌توان از نسخه‌ی چاپی آن استفاده کرد. برای دریافت نسخه‌ی چاپی فارسی پرسشنامه و پاسخنامه فقط کافی است ایمیل خود را کامنت کنید تا برای شما ارسال کنم یا در تویتر به آی‌دی @amirtaqiabadi پیام بدهید.برای محاسبه‌ی آن باید مطابق برگه‌ی سمت چپ تصویر بالا به هر جواب امتیاز داده و امتیازها را با هم جمع و در نهایت ضربدر ۲.۵ کنیم. هر چه عدد حاصل به ۱۰۰ نزدیکتر باشد سایت و اپلیکیشن مورد تست امتیاز بالاتری در این مقیاس کسب می‌کند.نکته بسیار مـــــــــــــــــــــــــــــــهم: من در ابتدا اشتباها نوشته بودم ضربدر ۴ که اصلاح شد و دو تا از سوالات ترجمه اشتباهی کرده بودم. برای دوستانی که ایمیل کرده بودم مجددا ارسال شد. اگر شما از ترجمه روی عکس استفاده کردین پیام بدین که بگم چیکار کنین که مجبور به تکرار آزمایش نشین.ممنون از اشکان آشوری دوست داشتنی که این اشتباه فاحش رو برام مشخص کرد.نکته‌ی بسیار مهم اینکه از این تست هم برای بررسی محصول فعلی و هم A/B Test بین دو طراحی متفاوت می‌توان بهره برد.البته هر چند این پرسشنامه بسیار محبوب و سریع است، وحی منزل نیست و شما می‌توانید به فراخور کسب و کار خود آن را بهینه‌سازی کنید.پنل توسعه دهندگان کافه‌بازاربه عنوان مثال پنل توسعه دهندگان کافه‌بازار تنها با یک سوال تجربه‌ی کاربری شما رو با اسمایلی‌های مختلف پرسیده و پس از آن برای بررسی بازطراحی وبسایت خود، از شما می‌خواهد که دلیل آن را ذکر کنید و اجازه می‌دهد که یک المان در صفحه را انتخاب کنید و نظر خود را در مورد آن درج کنید.یکی دیگر از تست‌های خوب برای بررسی اولیه تجربه‌ی کاربر از کل سرویس تست Net Promoter Score است که آن را در فارسی به شاخص خالص ترویج کنندگان ترجمه کرده‌اند.تست NPS تنها یک سوال دارد با ده گزینه:آیا شما حاضر هستید ما را به فرد یا سازمان دیگری معرفی کنید؟برای محاسبه و آشنایی بیشتر با این شاخص به این مقاله در متمم مراجعه کنید.از این دست کوتاه مقاله‌ها:کوتاه در مورد تفاوت طراحی Responsive و Adaptiveکوتاه در مورد Recognition Over Recallکوتاه در مورد Heuristic Evaluationکوتاه در مورد Responsive breakpointsکوتاه در مورد System Usability Scale - در حال مطالعهکوتاه در مورد Mental Design آموزش UI UX امیر تقی آبادی Thu, 09 Jan 2020 13:12:50 +0330 https://virgool.io/UIUXcourse/responsive-breakpoints-vjswfdkv1qkx در مقاله‌ی کوتاه در مورد تفاوت طراحی Responsive و Adaptive من باب طراحی واکنشگرا ( Responsive ) صحبت کردم. امکان برنامه‌نویسی همزمان برای تمامی ابزارهای هوشمند (از ساعت گرفته تا تلویزیون) طراحی واکنشگرا را عقلانی و اقتصادی‌تر کرده است.پراکندگی ابعاد و نسبت نمایشگرهامتاسفانه تنوع زیاد ابعاد نمایشگر ابزارهای هوشمند متصل به وب، طراحی واکنشگرا را بسیار سخت کرده است و نمی‌توان تنها به طراحی برای موبایل و دسکتاپ اکتفا کرد و لازم است برای تناسب بیشتر با این تنوع بسیار زیاد برای حالات بیشتری طراحی کرد. این ابعاد مرجع با مرزهایی از هم جدا می‌شوند که به آنها Breakpoint گفته می‌شود.در مقاله‌ی اسکرول بینهایت در مقابل صفحه‌بندی گفتم که پیمایش عمودی معمول‌تر است. لذا در قالب‌بندی صفحات عرض صفحه پارامتر مهمتری نسبت به ارتفاع است و برای در نظر گرفتن Breakpoints تنها به عرض صفحه توجه می‌کنیم.منابع مختلف پیشنهادات متفاوتی برای این موضوع ارائه می‌دهند.android breakpointsبه عنوان مثال تصویر بالا نقاط شکست طراحی بر اساس طراحی متریال اندروید است که در گسسته‌ترین حالت 13 حالت و در کمترین حالت 4 مدل طراحی را پیشنهاد می‌دهد.Responsive web design Cheatsheetسایت UXPin هم با ارائه‌ی تصویر بالا بین 4 تا 9 حالت را پیشنهاد می‌دهد. جهانس هول هم با انتشار این عکس 5 نقطه شکست را برای طراحی معرفی کرده است.فراوانی ابعاد نمایشگر در ایرانبا این توضیحات، من برای یک پروژه‌ی VOD و با توجه به فراونی ابزارهای هوشمند موجود در ایران و تحلیل‌های در ادامه به مدل 5تایی زیر رسیدم.درصد فراوانی موبایل‌های هوشمند کمتر از 320px به قدری کم است که نیازی به طراحی نیست.هر چند فراوانی نمایشگرهای 320px کمتر از 3% است اما چون iPhone 3,4,4s را شامل می‌شود و معمولا احتمال خرید در کاربران iOS بیشتر است، ارزش طراحی دارد.برای طراحی هر بازه بهتر است از رویکرد Small size 1st استفاده شود در نتیجه حداقل ابعاد هر بازه برای طراحی انتخاب شد.با توجه به شلوغی طرح تصمیم گرفته شد قابلیت rotate در اپلیکیشن برای ابعاد کمتر از 360px محدود شود.برای هماهنگی بیشتر بین اپلیکیشن و وب‌سایت، از ویژگی hover کردن صرف نظر شد.همچنین رویکرد دیگر طراحی واکنشگرا استفاده از Variable breakpoints برای هر قسمت سایت است.در این روش برای هر بخش سایت، breakpoints مجزا در نظر گرفته می‌شود که کار را تا حدود زیاده راحتتر کرده اما برای ترازبندی بین اشیا صفحه را ممکن است خراب کند. https://www.youtube.com/watch?v=eXMiN7Qg7I0&list=PLT4L2_8BD6pmYfYtecPltD0JAB7yRpppb&index=16 در این ویدئوی یوتیوب توضیحاتی تکمیلی در مورد گریدبندی و ریسپانسیو ارائه کردم که پیشنهاد می‌کنم در ادامه ببینید.از این دست کوتاه مقاله‌ها:کوتاه در مورد تفاوت طراحی Responsive و Adaptiveکوتاه در مورد Recognition Over Recallکوتاه در مورد Heuristic Evaluationکوتاه در مورد Responsive breakpoints - در حال مطالعهکوتاه در مورد System Usability Scaleکوتاه در مورد Mental Design آموزش UI UX امیر تقی آبادی Mon, 07 Oct 2019 15:42:00 +0330 https://virgool.io/UIUXcourse/recognition-over-recall-%DA%86%DB%8C%D8%B3%D8%AA-npw9tytoyvav یکی از موارد مبهم آزمون Usability Heuristics برای من Recognition Over Recall بود. شاید به دلیل اینکه خیلی بدیهی و ساده به نظر می رسید و به نظر میومد قطعا نمی‌تونه آنقدر ساده باشه و حتما یه نکته‌ی ظریفی داره که من درک نکردم.خبر خوش اینکه نداره و دقیقا همون چیزیه که برداشت کردین و در یک جملهو اما توضیحات بیشتر با توجه به مقاله‌ی NNgroupبرای اینکه این موضوع رو بهتر درک کنیم لازمه قبلش نگاهی به ساختار مغز داشته باشیم.مغز از قسمت های حافظه‌ای به نام chunk تشکیل شده که به وسیله‌ی association به هم مربوط‌اند و هر زمان که نیاز به یادآوری داریم، chunkهای مربوطه که اطلاعات را در خود نگه می‌دارند فراخوانده می‌شوند.ساختار دیکشنری رو در نظر بگیرید. حرف اول کلمه که تایپ می‌شه تعداد گزینه‌ها محدود می‌شه اما هنوز کلی کلمه وجود داره.با تایپ هر کارکتر این تعداد محدود می شه تا در نهایت، گزینه‌ها تا جایی که کلمه ی مورد نظر در دیدرس انتخاب قرار بگیره، محدود بشه.ساختار حافظه هم تقریبا شبیه همین مثاله.این رشته سوالات رو در نظر بگیرید و برای هر سوال تمامی جواب‌های مدنظرتون رو بنویسین.اون بازیگر زن خوشگله اسمش چی بود؟اون بازیگر زن خوشگله که تو فیلم برد پیت بازی می‌کرد اسمش چی‌بود؟اون بازیگر زن خوشگله که تو فیلم همسر برد پیت بود اسمش چی‌بود؟اون بازیگر زن خوشگله که تو فیلم همسر برد پیت بود و جاسوس بود اسمش چی‌بود؟حتی تا اینجا که انقدر سرنخ دادم و ذهنتون در هر مرحله chunkهای مربوطه رو فراخوانی کرد احتمالا به دو جواب رسیدین.آنجلینا جولی در آقا و خانم اسمیت ماریون کوتیار در فیلم متفقینالبته احتمالا شما در خلال سوالات بیشتر یاد آنجلینا جولی افتادین، شاید چون فیلم Allied رو ندیدین یا شاید هم چون با گزینه‌ی اول زمینه‌ی داستانی محکم‌تری دارین و مکرراً هم در موردش شنیدین.این دقیقا ساختار حافظه رو نشون می ده. برای رسیدن به chunkهایی که جدیدا یا مکرراً ازشون استفاده نکردیم یا زمینه‌ی داستانی محکمی (مثل علاقه، نفرت، ارتباط به یک داستان دیگر و ...) برای یادآوریش نداریم نیاز به سرنخ‌های بیشتری داریم که به خاطرش بیاریم‌.تفاوت عملکرد مغز با دیکشنری در اینه که، دیکشنری لیست تمامی کلماتی که با این چند حرف زده رو می‌تونه ارائه بده اما مغز ما نمی‌تونه تمامی جواب‌های ممکن رو ببینه.به علاوه نتایج با ورودی یکسان برای همه‌ی دیکشنری‌ها یکسانه اما برای انسان‌ها ورودی‌های یکسان می‌تونه نتایج مختلفی رو ارائه کنه.مطابق شکل ذیل تشخیص به جای یادآوری را یک دو قطبی در نظر بگیرید.در نتیجه هر چقدر بخواهید بیشتر به سمت Recognition حرکت کنیم باید سرنخ‌های بیشتری ارائه کنیم. مثلا دقت کردین که گاهی افراد برای به خاطرآوری یک شماره موبایل به شماره‌گیر موبایلشون دقت می‌کنن که مسیر حرکت دستشون روی گوشی رو به یاد بیارن. ارائه‌ی سرنخ برای یادآوری رمز عبور در ویندوز در صفحه‌ی ورود ویندوز Password hint یک سرنخ برای حرکت به سمت Recognition محسوب می‌شه.مطابق تصویر بالا، زمانی که به کاربر چند گزینه داده می‌شه که از بین آنها انتخاب کنه احتمال اینکه سریعتر بتونه به جواب برسه بیشتر، تا زمانی که هیچ سرنخی ندادین و کاربر رو مجبور می‌کنین که از حافظش کار بیشتری بکشه.در نتیجه استفاده از Checkbox، Radio Button و Drop-down List چون گزینه‌ها مشخص است (سرنخ بیشتری ارائه شده) نسبت به Text Box مطلوب‌تر است.در این مثال هم استفاده از آیکون خانه (تصویر وسط) نسبت به آیکون خانه‌ی اسکیموها (تصویر سمت راست) سرنخ بهتری محسوب می‌شه و استفاده از عنوان هم در کنار عکس سرنخ بیشتری ارائه می‌کنه.در مقاله‌ی 7 اثر روانشناسی تاثیرگذار بر Iconography در مورد خطاهای شناختی موثر در طراحی آیکن صحبت کردم. https://twitter.com/macromediax/status/1077290237645254657?s=20 از این دست کوتاه مقاله‌ها:کوتاه در مورد تفاوت طراحی Responsive و Adaptiveکوتاه در مورد Recognition Over Recall - در حال مطالعهکوتاه در مورد Heuristic Evaluationکوتاه در مورد Responsive breakpointsکوتاه در مورد System Usability Scaleکوتاه در مورد Mental Designکوتاه در مورد User Flow آموزش UI UX امیر تقی آبادی Fri, 31 May 2019 19:52:34 +0430 https://virgool.io/UIUXcourse/responsive-vs-adaptive-design-neai9mu0qfep Responsive Design VS Adaptive Designبا توجه به رشد اینترنت‌گردی موبایلی و در نتیجه ضرورت بهینه‌سازی وب‌سایت‌ها برای مرورگرهای موبایلی، رویکرد طراحی واکنشگرا و سازگار در حال حاضر بسیار شایع است.طراحی واکنشگرا - Responsive Designدر طراحی Responsive یا واکنشگرا، المان‌ها به صورت شناور و درصدی جایگیری و اندازه‌دهی می‌شوند و مطابق تصویر بالا در صورت تغییر اندازه‌ی مرورگر،معمولا ابعاد آلمان‌ها تغییر کرده و محل قرارگیری آن‌ها ممکن است از قرارگیری افقی به عمودی تغییر کند و حتی تعدادی از آیتم‌های منو و Sidebar در منوی همبرگری یا اشکال دیگر پنهان شوند.طراحی سازگار - Adaptive Designطراحی Adaptive سایت DigiStyle در طراحی سازگار یا Adaptive Design مشابه تصویر سایت دیجی‌استایل، معمولا اندازه‌دهی به صورت مقدار عددی ثابت است و مهم‌تر اینکه برای صفحات مختلف طراحی‌های مختلفی انجام می‌شود و ممکن است در نسخه‌ی موبایلی تعدادی از اقلام کم اهمیت‌تر حذف شود و ویژگی‌های دیگری مثل تماس تلفنی مستقیم، دانلود اپلیکیشن و ... در اولویت بصری قرار گیرد.از این دست کوتاه مقاله‌ها:کوتاه در مورد تفاوت طراحی Responsive و Adaptive - در حال مطالعهکوتاه در مورد Recognition Over Recallکوتاه در مورد Heuristic Evaluationکوتاه در مورد Responsive breakpointsکوتاه در مورد System Usability Scaleکوتاه در مورد Mental Designکوتاه در مورد User Flow آموزش UI UX امیر تقی آبادی Thu, 11 Apr 2019 14:25:38 +0430