https://virgool.io/feed/@amirtaqiabadi راوی تجربه کاربری در #ویرگول و مدرس در #یوتیوب https://www.youtube.com/c/AmirTaqiabadi fa 2026-04-14 10:55:17 https://files.virgool.io/upload/users/30078/avatar/4BUd2S.jpg?height=120&width=120 https://virgool.io/@amirtaqiabadi https://virgool.io/dgshahr/%D9%86%DA%A9%D8%A7%D8%AA%DB%8C-%DA%A9%D9%87-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AB%D8%A8%D8%AA-%D8%B3%D9%81%D8%A7%D8%B1%D8%B4-%D8%AF%D8%B1-%D9%86%D8%B8%D8%B1-%DA%AF%D8%B1%D9%81%D8%AA-bnoembgpxqsw زمانی که یک سفارش در فروشگاه قراره ثبت بشه موارد خیلی زیادی هست که باید در نظر گرفته بشه. موجودیتراکنش‌های مالیکد تخفیفظرفیت ارسال...اولین سوالی که باید بهش پاسخ داده بشه اینه که سبد خرید در کدام نقطه باید تبدیل به سفارش بشه. سه تا از بزرگترین فروشگاه های ایرانی سه پاسخ مختلف برای این سوال دارند.قبل از ورود به درگاهدر لحظه ورود به درگاهپس از پرداخت موفقبه عنوان نکته‌ی کنکوری بگم بهترین گزینه در لحظه ورود به درگاهه و این فروشگاه‌ها به خاطر تصمیم متفاوت اولیه و هزینه‌ بالای ریفکتور همچنان دارن با وضعیت فعلیشون خودشون رو وفق می‌دن.اما به هر حال هر کدوم یه خوبی‌هایی دارند. مثلا اینکه بعد از پرداخت، سفارش ساخته بشه باعث می شه که کالا رزرو در انتظار پرداخت باقی نمونه و در نتیجه تعدادکالاهای موجود وبسایت کم بشه که مانع فروش بشه. این مورد به خصوص برای فروشگاه‌هایی که جشنواره‌های بزرگ زیاد دارن مزیت محصوب می‌شه و فروش رو زیاد می کنه. بدی این حالت اینه که ممکنه کاربر کالایی رو پرداخت موفق کنه که قبلا توسط کاربر دیگری خریداری شده و در نتیجه فروشگاه مجبور به لغو کلی یا جزيي سفارش می شه و در نتیجه نارضایتی کاربر رو به همراه داره.از اونطرف حالت قبل از ورود به درگاه هم هرچند نارضایی اضافه فروشی رو نداره باعث می شه تعداد بسیار زیادی کالا رزرو بشن و مانع فروش بشه. خوبی اندک این حالت هم اینه که کدنویسش کمی راحتتره.خوب حالا ببینیم وقتی کاربر روی دکمه‌ی پرداخت می زنه چه اتفاقاتی باید بیوفته:تمامی شروط سفارش اعم از موجودی و قیمت کالا، شروط کد تخفیف و ظرفیت ارسال باید مجددا چک بشه و بعد سفارش ساخته بشه و کاربر بع درگاه منقل بشهموجودی قابل فروش کالا (تخفیف/ظرفیت ارسال) اون سفارش کم بشه و به همون تعداد به موجودی رزرو پرداخت اضافه بشهمبلغ قابل استفاده از کیف پول از کیف پول کم بشهممکنه بهتون بگن که از کیف پول کم نکنیم و این حرفها و ممکنه دلایل خوبی هم بیارن اما just don'tمبلغ اولیه سفارش و تخفیف رو یه جایی به عنوان لاگ ذخیره کنید و در صورت لغو جزئی یا کلی سفارش تغییرش ندین. از این مقادیر می‌تونید بعدا برای کنترل سلامت کیف پول استفاده کنید.حتما لاگ تغییرات موجودی و وضعیت سفارش رو نگه دارید. لغو سفارش پرداخت نشدههر تغییر وضعیتی تو سفارش، ملاحظات بسیار زیادی داره. به عنوان مثال زمانی که می خواهیم سفارش در وضعیت در انتظار پرداخت که رها شده رو لغو کنیم و به وضعیت پرداخت نشده ببریم جدای از معکوس کردن تمامی ظرفیت‌ها و تراکنش‌های لحظه‌ی ثبت سفارش باید به نکته زیر هم توجه کرد:فرض کنید قراره بعد از یکساعت سفارش در انتظار پرداخت رو لغو کنیم. اگر مطابق تصویر کاربر دقیقه ۵۹ بره درگاه و ما دقیقه ۶۰ سفارش رو لغو کنیم و همه‌ی ظرفیت‌ها و تراکنش ها رو معکوس کرده باشیم. کاربر سفارش رو ۱۰ دقیقه در درگاه وقت داره که پرداخت کنه و وقتی که پرداخت می‌کنه میاد می بینه سفارشش لغو شده و کلی مشکل ایجاد می‌شه.برای اینکه جلوی این خطا رو بگیریم باید امکان رفتن کاربر به درگاه رو ۱۱ دقیقه قبل از لغو کردن سفارش محدود کنیم. یادتون باشه جلوی این موضوع رو هم تو فرانت و هم بک بگیرید چون اگر تنها محدود به فرانت بشه ممکنه به دلیل اشتباه ساعت سیستم کاربر یا ... باز هم این مشکل رخ بده و اگر تنها تو بک جلوشو بگیرید کاربر رو دکمه پرداخت مجدد می زنه و خطا می ده و تجربه بدیه. به جاش بهتره به کاربر دکمه پرداخت مجدد رو در این بازه (دقیقه ۴۹ تا ۶۰) نشون ندیم.از این دست موارد بسیار زیاده و اگر دوست دارین بیشتر از این ریز نکات بدونیم پیشنهاد می‌کنم تو رویداد دورهمی مدیران محصول ایکامرس که قراره پنجشنبه ۱۳ دی برگزار بشه ثبت نام کنید. دورهمی مدیران محصول ایکامرستا اون موقع به این فکر کنین که اگر مبلغ سفارش، بیشتر از سقف خرید اینترنتی (۲۰۰ میلیون تومان) باشه چه راهکارهایی وجود داره؟ تو کامنت ها نظرتون رو بدین. امیر تقی آبادی امیر تقی آبادی Mon, 30 Dec 2024 16:24:52 +0330 https://virgool.io/@amirtaqiabadi/%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%DB%8C-%D8%A8%D8%A7%D8%B2%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8%D8%B3%D8%A7%DB%8C%D8%AA-%D9%81%D9%88%D9%86%D8%AA-%D8%A7%DB%8C%D8%B1%D8%A7%D9%86-atrg0lxynxsd اگر جدیدا به وبسایت فونت‌ایران سر زده باشین متوجه طراحی جدید و زیبای این وبسایت شدین. شاید هم مقاله‌ی "در وبسایت جدید فونت‌ایران چه چیزهایی تازه است؟" رو خونده باشین و متوجه عکس من در انتهای این مقاله با عنوان امیر تقی‌آبادی (طراح UX) شده باشین. راستش این توصیف درستی نیست و این مقاله رو از این جهت می‌نویسم که هم چند تا شفاف سازی کنم و هم از این تجربه‌ی جذاب بگم.اول بگم این خاطرم از این پروژه خیلی دستخوش گذر زمان شد و ممکنه یه چیزهایی یادم رفته باشه ولی خوب بهتره زودتر بنویسم تا بیشتر از این دچار فراموشی نشدم:))داستان از اینجا شروع شد که مسلم ابراهیمی که من خیلی دوستش دارم۲،۳ سالپیش در مورد بازطراحی وبسایت فونت ایران باهام صحبت کرد و من همون موقع قرار بود یک دوره‌ی حرفه‌ای UX Design برگزار کنم و در نتیجه به بچه‌ها پیشنهاد دادم که به عنوان پروژه دوره روی یک پروژه‌ی واقعی کار کنیم و خوب بطبع اونها هم پذیرفتن و در نتیجه کار رو شروع کردیم.با توجه به اینکه دوره‌ی حرفه‌ای بود و نمی‌خواستم لازم باشه مقدمات رو دوباره بگم برای ورود به دوره یک آزمون برگزار کردم که تنها تعداد انگشت شماری تونستن اون آزمون رو قبول بشن.از طرفی چون دیگه پروژه واقعی بود و من در موردش مسئول بودم افرادی که نمی‌خواستن یا نمی‌خواستن که وقت زیادی بذارن رو هم کنار گذاشتم و در نهایت با سه نفر پروژه رو شروع کردیم.جلسات ایجوری بود که من به بچه‌ها تسک می‌دادم و اونها ابتدا فردی و سپس در تیم باید به نتیجه می‌رسیدن و سپس در یک جلسه که منم حضور داشتم در موردش صحبت می‌کردیم و اصلاحات و تسک بعدی انجام می‌شد.من تو این جلسات ۵ تا کلاه داشتم.کلاه مدرسکلاه مربیکلاه هم‌تیمیکلاه مدیر پروژهکلاه کارفرماهر زمان می‌خواستم به عنوان یه نقش دیگه صحبت کنم به صورت پانتومیم کلاهمو عوض می‌کردم که بچه‌ بدونن الان که دارم این حرف رو می‌زنم در چه نقشی هستم.سعی کردیم مثل یک پروژه واقعی بهش نگاه کنیم و از تئوری و اکادمیک فاصله بگیریم. به عنوان مثال اصلا پرسونا در نیاوردیم. مصاحبه کردیم و دانش به دست اومده با هم به اشتراک گذاشتیم اما persona در نیاوردیم. سعی کردیم بنچ مارک کنیم اما مدل فروش فونت ایران کمی متفاوت با وبسایت‌های خارجی و ایرانی بود در نتیجه تنها می‌بایست با آنچه که اونروز فونت ایران بود و جایی که می‌خواست بهش برسه فکر می‌کردیم.تو پروژه‌های ریدیزاین یکی از مباحث مهم migrate دیتا به نسخه‌ی جدیده. قرار بر این بود برای محتوای تبلیغاتی و سطح‌ فونت‌های جدید یه دستورالعملی بزاریم اما خوب سوال بزرگی که باید بهش جواب می‌دادیم این بود که قبلی‌ها رو چیکار کنیم؟از اونطرف اولین تجربه‌ی جدی بچه‌ها بود و با نه‌ها بسیاری موجه می‌شدن و باید کمکشون می‌کردم که انگیزشون رو از دست ندن.به عنوان مثال از اونجایی که مسلم هم خودش دیزاینر قابلیه و به تجربه خیلی بهتر از هر کدوم از ما می‌دونست که مشتریانش چه رفتاری دارن، سر طراحی صفحه محصول که مهمترین و پیچیده‌ترین صفحه بود، بچه‌ها ۶ تا طرح دیزاین کرده بودن اما نتیجه‌ی نهایی همونطور که در تصویر می‌بینن با دیزاین‌های اولیه فرق داره.من هر وقت صحبت فونت دانا می‌شه یه شوخی شوهر عمه‌ای دارم که می‌گم من انقدر این فونت رو دوست دارم که اگر یه روزی پول جعل کنم خیلی سریع می‌گیرنم چون اسکناس رو با فونت دانا می‌زنم. در ادامه یه چند تا شات از وایرفریم و طرح نهایی پیاده‌سازی شده را می‌زارم که یه مفهومی رو بگم.سبد خریدمنو موبایلمنو موبایلسوالات متداولهمینطور که می‌بینین طرح نهایی تفاوت‌هایی با وارفریم‌ها داره. این موضوع چند تا دلیل داره. مهمتر از همه زمانی که UI Designer دست به کار می‌شه بر اساس ملاحظات و محدودیت‌هایی که داره ناچار می شه تغییراتی ایجاد کنه.گذار زمان نیازها و خواسته‌های بیزینس و مشتریان رو تغییر می‌ده در نتیجه چیزی که ۲ ۳ سال پیش طراحی شده لزوما مناسب شرایط امروز نیست. خاصیت دیزاین پویایی اونه.ما به عنوان طراح لزوما بهترین طراحی رو نداشتیم.در نهایت که تو این پروژه کلی خوش گذروندیم و کلی چیزهای جدید یاد گرفتیم. امیر تقی آبادی امیر تقی آبادی Fri, 02 Jun 2023 15:07:11 +0330 https://virgool.io/@amirtaqiabadi/dod-dor-%D9%88-acceptance-criteria-%DA%86%DB%8C%D8%B3%D8%AA-l0fetamcuzji ابتدا می‌خواستم در سه مقاله جدا این سه مفهوم رو توضیح بدم اما به نظرم اگر این سه مفهوم رو در کنار هم و با مقایسه‌ی با هم توضیح بدیم درکش خیلی ساده‌تره.Acceptance Criteriaمعیارهای پذیرش (AC) شرایطی‌اند که یک محصول نرم افزاری برای پذیرش توسط کاربر، مشتری یا سایر سیستم‌ها باید رعایت کند. معیارهای پذیرش که به خوبی نوشته شده باشند کمک می‌کند به جای اینکه در پایان فرآیند توسعه، شاهد نتایج غیرمنتظره باشیم بتوانیم همه‌ی ذینفعان و کاربران را راضی نگه داریم. در نتیجه بسیار مهمه که ACها قبل از شروع کار تیم توسعه، تعریف شده باشند. در غیر این صورت، خیلی محتمله که نتیجه‌ی نهایی نیازها و انتظارات مشتری را برآورده نکنند.معیارهای پذیرش چطور کمک می‌کند؟شفاف کردن User Story برای طرفین ( مالک محصول، تیم فنی و ذینفعان)مبنایی برای نگارش و انجام Acceptance Testingکمک به Planning و Estimation دقیق‌ترتشریح Negative Scenarios و نحوه‌ی مواجهه سیستم با آنانواع قالب‌های نگارش معیارهای پذیرش:الگوی Given/When/Then (GWT)این الگو از فریمورک Behavior-driven development (BDD) نشات گرفته و با ارائه‌ی یک ساختار ثابت به QAها کمک می‌کند که زمان درک Use Case و Test Case را کاهش دهند زیرا رفتار سیستم از قبل توضیح داده شده است.نمونه:من به عنوان کاربر می‌خواهم زمانی که درخواست تسویه حساب ‌می‌کنم آنگاه درخواست تسویه من ثبت شده و یک شماره پیگیری و زمان حدودی واریز وجه به من اعلام و پیامک شود.الگوی چک لیستهر چند که الگوی GWT ساختارمند و کمک کننده است بسیاری از مواقع نوشتن آن بسیار سخت، زمانبر و در مواردی نشدنی است در نتیجه استفاده از چک لیست می‌تواند بسیار کمک کننده باشد.نمونه:✅ محصول نهایی کاملا Responsive باشد.✅ فیلدهایی که یک عدد از کاربر می‌گیرند با تمامی کیبوردهای انگلیسی، فارسی و عربی کار کنند اما اطلاعات به انگلیسی در دیتابیس قرار گیرد.✅ داده‌های مربوطه به Google analytics ارسال شود.الگوی سفارشیالگوهای GWT و Checklist قالب‌های مرسوم‌تری هستند اما اگر قالب بخصوصی با محصول و تیم شما سازگار است از امتحان کردن آن نترسید.با وجود اینکه PO معمولا مسئول AC است اما از آنجایی که در نهایت برنامه‌نویس مسئول کدنویسی و (Quality Assurance (QA مسئول تست بر اساس این Acceptance criteria است بهتر است تا جای ممکن از کمک آنها هم استفاده کرد. به هر حال هر کدام زاویه نگاهی دارند که کمک می‌کند PBI کمتر دچار رفت و برگشت به تیم فنی شود. AC را می‌توان در جلسات مختص بحث در مورد داستان کاربر بعد از Sprint Planning کامل‌تر کرد.Definition of Doneمفهوم DoD یک داکیومنت معمولا به شکل چک لیست است که مشخص می‌کند یک (PBI) Product backlog item چه زمانی تمام شده اطلاق می‌شود. DoD را می‌توان یک لیست عمومی از Acceptance Criteria ها در نظر گرفت که برای جلوگیری از تکرار و فراموشی موارد آن، آنها را در DoD قرار می‌دهیم که برای تمامی PBI ها لحاظ شود.مفهوم Done در DoD یعنی هیچ کار دیگری برای deliver کردن داستان کاربر نیاز نیست انجام شود و کد آماده‌ی دلیور کردن است. (لازم نیست حتما دلیور شده باشد) در نتیجه اگر تیم توسعه بگوید کار تمام شده است فقط تست آن مانده است یا فقط مرج نشده است یا ... این به معنی اتمام کار نیست.نمونه:✅ تمامی تست‌های نرم‌افزاری مثل End to end testing (E2E testing)، Unit testing و ... پاس شده باشد.✅ کد Refactor و Review شده باشد.✅ کد با برنچ اصلی Integrate شده باشد.✅ توضیح تغییرات این نسخه در Git شفاف و کامل نوشته شده باشد.✅ Internal QA testing انجام شده باشد.✅ در صورت امکان User Acceptance Testing (UAT) توسط Stakeholder انجام شده باشد.✅ اگر نیار به تغییرات دیتابیسی است تغییرات آماده انجام باشد.✅ تایید Product owner را برای رفتن به Production داشته باشد.✅ داکیومنت‌های مورد نیاز جلسه Sprint Review (Demo) آماده شده باشد.نکته‌ی مهم در مورد این چک لیست اینه که به مرور تکمیل می‌شه و در انواع جلسات اسکرام به خصوص Retrospective Meeting بسته به تجربه‌ و آموخته‌های تیم توسعه مواردی به این لیست اضافه یا کم می‌شه.Definition of Readyمفهوم DoR یک داکیومنت معمولا به شکل چک لیست است که کارهایی که باید قبل از شروع کدنویسی تیم توسعه برای یک PBI انجام شود را مشخص می‌کند. DoR به زبان ساده یک چک لیست است که مشخص می‌کند آیا یک PBI آماده شروع در اسپرینت است یا نه. DoR را به تعبیری می‌توان DoD مالک محصول در نظر گرفت به این معنی که تیم توسعه تنها زمانی یک PBI را می‌پذیرد که کار PO به طور کامل Done شده باشد و هیچ اما یا فقط ی باقی نمانده باشد.برعکس DoD و AC مفهوم DoR در دستورالعمل اسکرام نیامده است و به مرور برخی افراد و تیم‌ها این مفهوم را به صلاحدید خود توسعه داده‌اند و برخی هم با آن زاویه دارند و مخالف اجرای آن هستند.نمونه:✅ تمامی Dependency های User story شناسایی و تکمیل شده باشد.✅ تخمین حجم کار User Story به اجماع PO و Dev team رسیده باشد.✅ User Story می‌بایست INVEST و قابل اجرا در یک اسپرینت باشد.✅ معیار پذیرش (AC) آماده شده باشد.✅ دیزاین صفحات نهایی شده باشد.✅ Flow بین صفحات مشخص باشد.✅ اگر برای Launch یا Rollback دستورالعمل، ملاحظات یا پیش‌نیاز و پس‌نیازی وجود دارد داکیومنت شده باشد.✅ Performance Indicators های مهم برای اندازه‌گیری موفقیت این PBI مشخص و اندازه‌گیری شده باشد.✅ سطح دسترسی Access-control list مشخص باشد.مشابه DoD این چک لیست هم به مرور تکمیل می‌شه و در انواع جلسات اسکرام بسته به تجربه‌ و آموخته‌های تیم توسعه مواردی به این لیست اضافه یا کم می‌شه.نکته کلیدی:مفهوم Acceptance Criteria که به اختصار به آن AC هم می گوییم یک چک لیست منحصر به فرد برای هر آیتم بک لاگ است که قرار است وارد اسپرینت شود در حالی که DoD و DoR یک چک لیست عمومی است که بر روی تمامی آیتم‌ها بررسی می‌شود. امیر تقی آبادی امیر تقی آبادی Wed, 01 Mar 2023 18:13:44 +0330 https://virgool.io/@amirtaqiabadi/%D8%A7%D9%88%D9%84%DB%8C%D9%86-%DB%B1%DB%B0%DB%B0-%D8%AF%D9%84%D8%A7%D8%B1-%D9%85%D9%86-%D8%A7%D8%B2-%DB%8C%D9%88%D8%AA%DB%8C%D9%88%D8%A8-e3faust8fyhg ۷ ام فبریه اولین ۱۰۰ دلارم رو از یوتیوب درآوردم و از اون موقع می‌خواستم براتون بنویسم که چرا باید یوتیوب رو همین امروز شروع کنین. https://twitter.com/amirtaqiabadi/status/1490583770675613699?s=20&t=s1K6Hc9f0Y7cTXDusGlcWw قبلا تو مقاله‌ی "اولین درآمد دلاری من از Medium" از دلایلم برای نوشتن در مدیوم گفته بودم خوبه به اون هم نگاه کنین و شاید از بین اون دلایل دلیل خودتون برای شروع کردن تولید محتوا رو پیدا کنید. https://virgool.io/@amirtaqiabadi/%D8%A7%D9%88%D9%84%DB%8C%D9%86-%D8%AF%D8%B1%D8%A2%D9%85%D8%AF-%D8%AF%D9%84%D8%A7%D8%B1%DB%8C-%D9%85%D9%86-%D8%A7%D8%B2-medium-cqxdkfhsejls خیلی وقت‌ها که تو جمع‌های دوستانه صحبت یوتیوب من می‌شه بقیه رو هم دعوت می‌کنم به اینکه یوتیوب شروع کنن و معمولا در توجیح صحبت دلایل زیر رو می‌گم. در ادامه این دلایل رو یه جا جمع کردم که بتونم بعد از این به جای تکرار حرفهام همین مقاله رو ارجاع بدم. ۱. مانیتایز شدن زمان‌بر استاز اونجایی که مانیتایز شدن به طور متوسط یک سال زمان می‌بره بهتر اینه که چه دلایل بعدی براتون make sense می‌کنه چه نمی‌کنه هر چه سریعتر یوتیوب رو شروع کنین. اول شروع کنین بعد سر تقویم محتوایی و این چیزها برنامه‌ریزی کنین.هر گزینه‌ای بهتر از اینه که یکساله دیگه هم بگذره و شما هنوز شروع نکرده باشیناحتمالا اصلی ترین مانع برای خیلی از شمایی که دارین این مقاله رو می‌خونین ایده‌آل گراییه، توی مقاله‌ی "رحایی از ایده‌آل‌گرایی" در مورد اینکه من چطور به این ترس غلبه کردم نوشتم. فکر کنم برای شما هم مفید باشه. https://virgool.io/@amirtaqiabadi/perfectionism-%D8%B1%D9%87%D8%A7%DB%8C%DB%8C-%D8%A7%D8%B2-tsvncsklmp4c ۲. یوتیوب شما را پولدار نمی‌کند، اما ...خیلی بعیده که شما با یوتیوب بتونین BMW بخرین اما یوتیوب می‌تونه یک منبع درآمد پایدار برای شما باشه که بتونین رو مخارج ضروری زندگی روش حساب کنین و اینجوری ریسک‌پذیریه شما رو بیشتر می‌کنه. تا زمانی که ما درگیر خرج و مخارج روزانه باشیم نه تنها ریسک‌پذیریمون کمتر می‌شه بلکه به قول کتاب فقر احمق می‌کند قدرت تصمیم‌گیری و حتی ضریب هوشی ما هم دچار اختلال می‌شه. درآمد یوتیوب حتی می‌تونه روی مذاکره حقوق شما هم تاثیر مستقیم داشته باشه. دلیلش هم خیلی ساده است وقتی شما یک گزینه‌ی جایگزین خوب داشته باشین هم با اعتماد به نفس بیشتری در مذاکره شرکت می‌کنین و هم طرف مقابلتون می‌دونه شما نیازمند این شغل نیستید و این در روند مذاکره بسیار اثر بخشه.۳. یوتیوب به دیده شدن شما کمک می‌کنهاز دل برود هر آنکه از دیده رودنمی‌دونم شاعر این شعر می‌دونسته که داره غیر مستقیم به یک خطای شناختی معروف که الان اسمشو یادم نیست اشاره می‌کنه یا نه اما خیلی بدیهیه که برای اینکه بتونین موقعیت‌های کاری بیشتری سمتتون بیاد باید بیشتر تو چشم باشین.بارها شده من دنبال یک نیروی کار می‌گشتم و ذهنم تنها محدود به آدم‌هایی بوده که اخیرن یک فعالیتی ازش تو شبکه‌های اجتماعی دیدم. مثلا یک برنامه‌نویس می‌خواستم و اون لحظه فلان برنامه‌نویس که یه چیزی پست می‌کنه و من می‌بینم احتمال بیشتری داره که این موقعیت شلغی رو بهش پیشنهاد بدم.تو مقاله‌ی "چرا می‌گم موفقیت شانسیه؟" گفتم که اگر می‌خواین شانس موفقیت‌تون رو بیشتر کنین باید تعداد دفعاتی که قرار تاس بندازین رو بیشتر کنین. اینجوری احتمال بیشتری هست که جفت شیش بیارین. https://virgool.io/@amirtaqiabadi/%DA%86%D8%B1%D8%A7-%D9%85%DB%8C%DA%AF%D9%85-%D9%85%D9%88%D9%81%D9%82%DB%8C%D8%AA-%D8%B4%D8%A7%D9%86%D8%B3%DB%8C%D9%87-%D8%AF%D8%B1%DA%AF%D9%88%D8%B4%DB%8C-%DB%B4-jykfvnobe4br ۴. یوتیوب به شما احساس خوب می دههمه‌ی دلایلی که تا اینجا گفتم رو می‌شه به نحوی تفسیر ریالی کرد اما دلخوش به این مقدار نباشید. یوتیوب زندگی روحی/احساسی شما رو هم می‌تونه بهتر کنه.مایی که تمام روز رو پای سیستم هستیم و عملا رابطمون را با دنیای فیزیکی از دست دادیم نیاز داریم به ساختن یک چیز معنا دار، یک چیزی که تنها برای خودمون باشه و حیاط و مماتش به ما ربط داشته باشه. وقتی در قالب یک تیم داری کار می‌کنی، خروجی حاصل زحمت همه است و اون احساس خوب خلق کردن و مالکیت رو بهت نمی‌ده. اینو وقتی بهتر درک کردم که رفتم نجاری خانه زرافه و یک قاب ایستاده آینه ساختم. https://twitter.com/amirtaqiabadi/status/1301514508058480642?s=20&t=jFqWMdN0uqDt87gAan1HMg یوتیوب به من کمک کرد این احساس خوشایند رو در طول زمان داشته باشم و از این بابت ۵. یوتیوبری یک شغل استیوتیوب می‌تونه گپ‌های رزومه‌ی شما رو پر کنه. احتمالا دیدین خیلیا اینجورین که وقتی یک فاصله‌ی زمانی توی رزومه‌ی کاریشون ایجاد می‌شه می زنن فریلنس و اینجوری این گپ رو پر می‌کنند. به یوتیوب به عنوان این گپ پر کن هم می‌تونین نگاه کنین.۶. مهارت نرم و سختیوتیوب می‌تونه مهارت‌های نرم شما رو بهبود بده و حتی خیلی محتمله که براش برین فتوشاپ، پریمیر و نرم‌افزارهای از این دست رو یاد بگیرین. امیر تقی آبادی امیر تقی آبادی Wed, 20 Jul 2022 10:49:31 +0430 https://virgool.io/@amirtaqiabadi/%D8%AC%D8%B9%D8%A8%D9%87-%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1-usability-testing-avzzzynrpsoy احتمالا شما هم این جمله معروف رو شنیده باشین کهاگر تنها ابزارت “چکش” باشه، همه چیز رو شکل “میخ” میبینی!به نظرم این خیلی جمله‌ی درستیه. اگر ما تنها با یک ابزار، متود یا رویکرد آشنا باشیم احتمال خیلی زیادی وجود داره که بخواهیم همه مسائل طراحی رو با همین یک ابزار حل کنیم.چکش مازلوما به عنوان طراح لازمه که در هر حوزه‌ای، اگر نگیم همه، حداقل با پرکاربردترین و معروف‌ترین ابزارها آشنا باشیم که بتونیم به فراخر نیاز و کارکرد بهترین روش و ابزار رو انتخاب کنیم.این موضوع محدود به طراحی تجربه و رابط کاربری نیست اما تو UI UX که فرآیند حل مسئله مهمترین المانه، خیلی پررنگ‌تر از مابقی مواقع است.فرآیند طراحی UI UX شامل مراحل مختلفیه که هر بخشش نیازمند جعبه ابزار مخصوص به خودشه. به عنوان مثال برای انجام تست کاربردپذیری ما انواع و اقسام روش‌ها رو داریم که می‌بایست بر اساس اینکه چه فرضیه‌ای رو قراره با چه حد خطا صحت‌سنجی کنیم ازشون استفاده کنیم.تا الان من در مورد این سه مدل تست تو ویرگول نوشتم براتون:کوتاه در مورد 5Second Usability Testکوتاه در مورد The Blurry-eye Testکوتاه در مورد System Usability Scaleاگر علاقه‌مندین که با تعداد بیشتری از این تست‌های کاربردپذیری آشنا بشین پیشنهاد می‌کنم در وبینار جعبه ابزار Usability testing که ۱۹ آبان برگزار می‌شه شرکت کنین. https://eseminar.tv/webinar/%D8%A7%D9%86%D9%88%D8%A7%D8%B9-%D8%AA%D8%B3%D8%AA-%D9%87%D8%A7%DB%8C-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%D9%BE%D8%B0%DB%8C%D8%B1%DB%8C وبینار جعبه ابزار تست کاربردپذیری امیر تقی آبادی امیر تقی آبادی Tue, 19 Oct 2021 17:52:27 +0330 https://virgool.io/@amirtaqiabadi/%D8%A7%D9%88%D9%84%DB%8C%D9%86-%D8%AF%D8%B1%D8%A2%D9%85%D8%AF-%D8%AF%D9%84%D8%A7%D8%B1%DB%8C-%D9%85%D9%86-%D8%A7%D8%B2-medium-cqxdkfhsejls بعد از طرح موسوم به صیانت که شما بخونین خیانت من هم عزم به مهاجرت کردم و برای این موضوع تصمیم گرفتم زبانمو تقویت کنم و یه درآمد دلاری برای خودم درست کنم فلذا چیزی که به ذهنم رسید مدیوم و یوتیوب بود و به این چهار دلیل شروع کردم به نوشتن در مدویم: شبکه‌ی ارتباطی انگلیسی زبان من رو گسترش می‌ده.مهارت رایتینگ و گرامری خودمو بهتر کنم.درآمد دلاری داشته باشم.احتمال اینکه بتونم پروژه دلاری بگیرم رو بیشتر می‌کنه.چون همه‌ی اینها خیلی اهداف بلندمدتیه یه گیمیفیکشن ریزی هم برای خودم درست کردم که ناامید نشم از ادامه دادن که تو مقاله‌ی Gamifying Medium helps keep me motivated در موردش نوشتم که شدیدا پیشنهاد می‌کنم بخونین چون در تمام ابعاد زندگیتون می‌تونه تاثیر گذار باشه. https://uxplanet.org/gamifying-medium-helps-keep-me-motivated-b394b355a93f درآمد دلاری۵ام آگوست حساب مدیومم رو مانیتاز کردم و تو این مدت ۸ تا مقاله نوشتم که در این تقریبا ۱ ماه نزدیک به ۱۴ دلار برای من درآمد داشت.دلیلی که این مقاله رو نوشتم این بود که بگم آره این عدد زیادی نیست و این مقداری که زمان گذاشتم روش در کوتاه مدت ارزش زیادی نداره اما به نظرم در بلند مدت می‌تونه هم شبکه‌ی ارتباطی من رو گسترش بده هم یه آب باریکه‌ی دلاری درست کنه. اما نکته‌ی جالبش اینه که من که در نهایت باید زبان بخونم چه بهتر که در کنارش یه مشوق مالی- ارتباطی هم داشته باشم.بروزرسانیدرآمد ماه سپتامرم هم مشخص شد و از همین الان احساس می‌کنم یه ذره گرامرم بهتره شده.پیشنهادپیشنهادم به شما هم همینه که هر استعدادی که دارین شروع کنین. هر چقدر هم اروم اروم شروع کنین و حتی اگر ۲ سال طول بکشه اما به هر حال بهتر از اینه که ۲ سال دیگه هم بگذره و هنوز شما شروع نکرده باشین.حتما این دو تا مقاله رو هم بخونین. حتی یک نفرتون هم که حرف منو بفهمه و شروع کنه به نظرم ارزش نوشتن این مقاله رو داشته. https://virgool.io/@amirtaqiabadi/%DA%86%D8%B1%D8%A7-%D9%85%DB%8C%DA%AF%D9%85-%D9%85%D9%88%D9%81%D9%82%DB%8C%D8%AA-%D8%B4%D8%A7%D9%86%D8%B3%DB%8C%D9%87-%D8%AF%D8%B1%DA%AF%D9%88%D8%B4%DB%8C-%DB%B4-jykfvnobe4br https://virgool.io/@amirtaqiabadi/perfectionism-%D8%B1%D9%87%D8%A7%DB%8C%DB%8C-%D8%A7%D8%B2-tsvncsklmp4c خواهشدر انتها خواهشم ازتون اینه که منو تو مدیوم هم فالو کنین و حتی اگر بتونین مقالاتم رو لایک کنین که کمک خیلی بزرگی به منه که باعث می‌شه مدویم بیشتر مقالات من رو به دیگران معرفی کنه. البته عدد تعداد فالور و تعداد لایک هم می‌تونه تایید اجتماعی ایجاد کنه که بقیه هم بیشتر بخونن.لینک مدیوم من: با VPN باز کنید https://medium.com/@amirtaqiabadi تا یادم نرفته بگم که ساختار لایک تو مدیوم با سایر لایک‌هایی که دیدین متفاوته و می‌تونین برای هر مقاله تا ۵۰ بار لایک ( دست بزنید - تشویق کنید) کنید و اگر همه‌ی این پنجاه بار رو هم که پر کنین که دیگه بوس بهتون.اگر هم دوست دارین محتوای من تو یوتیوب رو ببینین کانال یوتیوب من رو ببینید. وقتی تو یوتیوب مانیتایز شدم در مورد درآمد اون هم براتون می‌نویسم. امیر تقی آبادی امیر تقی آبادی Wed, 01 Sep 2021 16:13:02 +0430 https://virgool.io/@amirtaqiabadi/%D9%84%DB%8C%D9%86%DA%A9-%D9%87%D8%A7%DB%8C-%D8%AC%D8%B0%D8%A7%D8%A8-%D8%AF%D8%B1-%D8%AD%D9%88%D8%B2%D9%87-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%AA%DB%8C%D8%B1-%DB%B1%DB%B4%DB%B0%DB%B0-fccypoit1iyy به روال هر ماه، سریع بریم چند تا لینک خوب در حوزه UI UX رو معرفی کنیم.اولین و شاید مهمترین دلیلی که باعث شد برای این مقاله دست به قلم بشم گفتگوی من با امید هاشمی بود که در دو قسمت تو یوتیوب منتشرش کردم.یک فرد نابینا چطور با Screen Reader کار می‌کند؟وب اپ‌ها از دید صفحه خوان هااوایل شهریور قراره به اتفاق فریال، متخصص ارشد دسترس‌پذیری شرکت Thomson، یه وبینار تکمیلی برگزار کنیم که ببینیم طراح، مدیر محصول، کپی‌رایتر و برنامه‌نویس چه چیزهایی رو باید برای دسترس‌پذیر کردن رعایت کنن. این قسمت رو به احتمال زیاد تو ای‌سمینار بزارم. در نتیجه بهتره که پروفایل ایسمینارم رو فالو کنین که با خبر بشین. (البته که تو تویترم هم اطلاع‌رسانی خواهم کرد.)دومین مقاله‌ی مدیوم رو هم با عنوان Hamburger Menu will expire in Material You تو مدیوم منتشر کردم که اگر دوست دارین بدونین چرا همبرگر منو توی گوگل پلی حذف شده اینجا می‌تونین دلیلش رو پیدا کنین. https://virgool.io/@amirtaqiabadi/medium-vs-virgool-a4k3qbyfuitl به کمک پلاگین Inver color می‌تونین تو فیگما رنگ آتیم‌ها رو قریبنه کنین.به کمک وبسایت thankme.in می‌تونین نظر دیگران رو به صورت ناشناس در مورد خودتون بدونین. تو این صفحه‌ای که گذاشتم می‌تونین نظرتون رو بدون نیاز به ثبت‌نام در مورد من بگین و نظرات بقیه رو هم بخونین.موقع طراحی رسپانسیو نباید تنها به عرض دیوایس توجه کرد و باید ارتفاع‌ دیوایس و به خصوص viewport رو هم توجه کنیم. به این معنی که توی هر وبسایتی یک قسمتی از بالا و پایین نمایشگر برای المان‌های ضروری اشغال می‌شه که باید تو طراحی در نظرشون بگیریم. این موارد رو برای اندروید توی کامیونیتی فیگما با نام Android status & navigation bar می‌تونین پیدا کنین.به کمک پلاگین Mockuuups Studio می‌تونین خیلی سریع و تمیز، موکاپ‌های زیبا برای UI های خودتون داشته باشین.با پلاگین BeatFlyer Lite می‌تونین به آیتم‌ها توی فیگما انواع انیمیشن‌ها رو بدین که بهتر ایده‌تون رو به بقیه اعضای تیم منتقل کنین. امیر تقی آبادی امیر تقی آبادی Thu, 22 Jul 2021 16:29:48 +0430 https://virgool.io/@amirtaqiabadi/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%AF%DA%A9%D9%85%D9%87-%D8%A8%D8%B1-%D8%A7%D8%B3%D8%A7%D8%B3-heuristic-evaluation-xtyihorubtxm من این مقاله رو ۳ روز پیش تو مدیوم نوشته بودم و راستشو بخواین خیلی فارسی، انگلیسی نوشتم. برای همین به راحتی می‌تونین بخونینش و متوجه بشین حتی چک کردم تو Google translate هم کپیش کنین درست ترجمه می‌کنه.بعد از این، منو بیشتر تو مدیوم خواهید دید.من کنت مولاه فهذا مدیوم مولاه :دیپس خوشحال می‌شم که اونجا هم ببینمتون.تو این مقاله توضیح دادم که چطور می‌تونیم بر اساس الهام از دنیای واقعی دکمه‌هایی بسازیم که کاربر وقتی داره باهاش تعامل برقرار می‌کنه احساس کلیک کردن و فشار دادن دکمه رو داشته باشه. قبل از اینکه جلوتر بریم بهتر اینه که خودتون با این دکمه تعامل برقرار کنین تا منظورمو متوجه بشین. کد خروجی رو می‌تونین تو Codepen من ببینین. https://codepen.io/amirtaqiabadi/pen/mdmRoKX قبلا در مقاله‌ی کوتاه در مورد Heuristic Evaluation در مورد قانون هماهنگی سیستم با جهان واقعی - Match between system and the real world اینجور گفته بودم:سیستم باید با زبان کاربر صحبت کند. با کلمات و مفاهیمی که کاربر با آنها آشناست. از آیتم‌های رایج استفاده کند. اطلاعات را به نحوی ارائه کند که با Mental Model افراد هم‌خوانی داشته باشد. از آیکون‌ها و تصاویری استفاده کند که تا حد امکان شبیه اشیا دنیای واقعی باشد.دکمه چند حالت مختلف داره که بهتره برای همه‌ی این حالات از دنیای واقعی الهام بگیریم. مثلا به تجربه دیدیم که دکمه‌های واقعی، اینجوریه که از سطح زده بیرون و به خاطر این بیرون‌زدگی سایه داره.از طرفی می‌دونیم که تقریبا نمی‌تونیم سایه کامل دور و برمون ببینیم چون منبع نوری مختلفی دور و بر ماست و حتی اگر تنها یک منبع هم باشه بازتابش از سطوح، سایه کامل رو تبدیل به نیم‌سایه می‌کنه.در نتیجه بهتره که از چند سایه استفاده کنین. تو مقاله مدیوم لینک پلاگین فیگما مناسب این کار رو دادم.چهار حالت مختلف دکمهاز طرفی وقتی دستمون رو می‌بریم رو دکمه، عمل متناظرش در کامپیوتر hover کردنه. این کار باعث می‌شه سایه‌ی دستمون، دکمه رو کمی تیره‌تر می‌کنه. پس بهتره رنگ هاور دکمه از shade همون رنگ استفاده بشه.اگر نمی‌دونین shade چیه بهتره ویدئوی تئوری‌ چرخه رنگ برای انتخاب پلت رنگی رابط کاربری رو تو یوتیوب ببینین.وقتی هم که روی دکمه کلیک می‌کنیم هم سطحِ سطح می‌شه یا حتی می‌ره داخل که باعث می‌شه سایه به طور کامل حذف بشه یا به سایه‌ی داخلی تبدیل بشه. از طرفی این کار باعث می‌شه دکمه ازمون دور بشه و به نظر کوچیکتر بیاد.همه‌ی اینها تو Codepen موجوده و پیشنهادم اینه که امتحان کنین که ببینین آیا حس واقعی بودن از دکمه می‌گیرین یا نه.مقاله‌ی اصلی اینجا تموم نمی‌شه و ادامه داره برای همین بهتر اینه که بقیش رو تو مدیوم بخونین. https://medium.com/@amirtaqiabadi/design-button-based-on-laws-1-2-of-heuristic-evaluation-1184061d966b فقط رفتین علاوه بر فالو کردن یادتون نره لایکم کنین. ساختار لایک کردن مدویم با بقیه‌ی لایک‌هایی که دیدین خیلی فرق داره و به دنیای واقعی نزدیک‌ترخ به نظرم. اونم امتحان کنین تجربه‌ی باحالیه. علامت دست زدن پایین مقاله رو چند بار بزنین. همچنین اگر بتونین تو Producthunt از این ایده حمایت کنین کمک بزرگی به من کردین و حتما در مورد تجربه‌ی حضور در producthunt براتون می‌نویسم. https://www.producthunt.com/posts/button-css-based-real-world ممنونم. امیر تقی آبادی امیر تقی آبادی Tue, 20 Jul 2021 11:34:06 +0430 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) رو هم بخونین که دید بهتری از این موضوع پیدا کنین.خوشحال می‌شم نظر شما رو هم در این باره بدونم و یا در موردش در شبکه‌های اجتماعی صحبت کنین که این موضوع به گوش افراد بیشتری هم خورده باشه.قسمت دوم مصاحبه با امید رو هم با نام وب اپ‌ها از دید صفحه خوان ها رو می‌تونین تو یوتیوب ببینین. (فیلتر شکن نیازه) امیر تقی آبادی امیر تقی آبادی Tue, 13 Jul 2021 16:21:01 +0430 https://virgool.io/@amirtaqiabadi/%D9%84%DB%8C%D9%86%DA%A9-%D9%87%D8%A7%DB%8C-%D8%AC%D8%B0%D8%A7%D8%A8-%D8%AF%D8%B1-%D8%AD%D9%88%D8%B2%D9%87-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%AE%D8%B1%D8%AF%D8%A7%D8%AF-%DB%B1%DB%B4%DB%B0%DB%B0-ut8l3iwrnri7 سعی کردم هر طور شده این سری مقالات رو به صورت ماهیانه ادامه بدم، هرچند که خیلی شلوغ بودم و پیدا کردن لینک هم سخته اما تلاشمو کردم که قبل از پایان ماه این مقاله رو بنویسم که بد عهد نشم.تو مقاله‌ی کوتاه در مورد طراحی User Flow قول داده بودم که یه روز وبینار پروژه محور طراحی User Flow رو برگزار کنم. اونروز، امروزه.ایمان قاسمیان در مقاله‌ی بی‌نظیر قرینه‌سازی الگوهای رابط کاربر فارسی به روش طراحی اتمی اومده و مقاله‌ی من با عنوان چه پترن‌هایی در زبان فارسی قرینه می‌شوند؟ رو فوق‌العاده علمی و منطقی نقد کرده، در این حد که من هم از اون مقالم برگشتم. به شما هم پیشنهاد می‌کنم هر دو مقاله رو بخونین و لذت ببرین.پلاگین Morph برای فیگما کمک می‌کنه افکت‌های بسیار زیبای نئون، اسکومورفیسم، گلیچ و ... رو به راحتی بسازین.همیشه دیدم تعداد زیادی از بچه‌ها با سایه‌ها مشکل دارن در نتیجه تو یوتیوبم ویدئو اصول طراحی سایه‌ها در رابط کاربری در این مورد منتشر کردم که امیدوارم بسیاری از سوالات و کج‌فهمی‌هاتون رو حل کنه.وبلاگ دیوار در ویرگول با نام دیزاین در دیوار هم شامل بسیاری از تجارب خوب بچه‌های دیواره که شما رو با نمونه‌هایی از کار تخصصی یک UX Designer آشنا می‌کنه.مسیح در کانال تلگرامی هدفون سفید، پرتکرارترین سوالات در زمینه UX رو از دید خودش پاسخ داده که شاید سوال شما هم در این بین باشه. امیر تقی آبادی امیر تقی آبادی Mon, 21 Jun 2021 19:00: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 زمانبره در نتیجه مدت این فیلم هم زیاده و چون من روش اصطلاحا بلند بلند فکر کردم نمی‌شد کمترش کرد اما شما می‌تونین رو دور تند ببینید.این ویدئو یه سری پیشنیاز داره که بهتره قبل یا بلافاصله بعد از این ویدئو اونها رو ببینین.یادتون نره سابسکرایب کنین و با لایک و کامنت حمایت امیر تقی آبادی امیر تقی آبادی Sun, 20 Jun 2021 14:08:00 +0430 https://virgool.io/@amirtaqiabadi/%D9%84%DB%8C%D9%86%DA%A9-%D9%87%D8%A7%DB%8C-%D8%AC%D8%B0%D8%A7%D8%A8-%D8%AF%D8%B1-%D8%AD%D9%88%D8%B2%D9%87-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%A7%D8%B1%D8%AF%DB%8C%D8%A8%D9%87%D8%B4%D8%AA-%DB%B1%DB%B4%DB%B0%DB%B0-bvedyplzgsnq به عادت ماه‌های گذشته برای اردیبهشت هم یه تعداد لینک جذاب در حوزه‌ی طراحی رو معرفی کردم. شما هم اگر تولید کننده محتوای مرتبط هستین یا کسی رو می‌شناسین که تو این سری مقالات از قلم افتاده حتما تو کامنت‌ها معرفی کنین.butter.usاگر قصد دارین یه ورکشاپ یا جلسه‌ی دفاع آنلاین یه چیزی شبیه اینها با حداکثر ۲۰ شرکت کننده داشته باشین وبسایت butter رو شدیدن پیشنهاد می‌دم. من سالهاست تدریس می‌کنم و به تازگی هم دوره‌ی یوتیوبی آموزش UI/UX مقدماتی رو شروع کردم. همیشه دنبال ابزار آنلاینی بودم که در عین اینکه دارم از میرو، تخته‌وایت‌برد، گوگل درایو و یوتیوب استفاده می‌کنم تعامل تصویری با شرکت کنندگان هم داشته باشم تا بر اساس حالت چهرشون بتونم کلاس رو کمی مفیدتر کنم. خوشبختانه باتر این قابلیت‌ها رو تمام و کمال داره و امیدوارم تا زمانی که شما دارین این مقاله رو می‌خونین نسخه‌ی رایگانش همچنان در دسترس باشه.سعید علی‌پور هم تو اولین ویدئوی آموزشی یوتیوبش فارسی‌نویسی در فیگما به کمک پلاگین RTL PLZ رو منتشر کرده که بسیار آموزنده است. با سابسکرایب و لایک حمایتش کنین که آخرین ویدئوش نباشه.قبلا وبینار طراحی UI/UX صفحه Player برای Deviceهای مختلف رو برگزار کرده بودم. با حمایت دوستان تویتریم تصمیم بر این گرفتم که مجددا برای ۲۷ خرداد برگزارش کنم.اول اردیبهشت فیگما وبسایت FIGJAM رو معرفی کرده که یه چیزی شبیه Miro که قبلا معرفیش کرده بودم. هنوز امکانات میرو رو نداره اما به دلیل محیط روان و هماهنگ بودنش با فیگما از همین اول خیلی توجهمونو جلب کرده. احسان در یوتیوبش یه ویدئو با عنوان آموزش و معرفی FIGJAM - آپدیت جدید نرم افزار فیگما در موردش توضیح داده. https://www.youtube.com/watch?v=OI80BYgv6kw&list=PLT4L2_8BD6pmYfYtecPltD0JAB7yRpppb&index=6 تو ویدئوی یوتیوب تفکر طراحی چیست و انواع آن چه تفاوتی با هم دارند؟ در مورد تفکر طراحی شروع کردم و در مورد مپ کردن فریم‌ورک‌های مختلف تفکر طراحی بر روی هم مثالی زدم.با وجود اینکه قبل‌تر یه بار دیگه هم کانال یوتیوب آذین قاسمی رو معرفی کرده بودم اما از اونجا که آموزش notion رو منتشر کرده که خودم خیلی وقته تو فکرش بودم که در موردش ویدئو بسازم به نظرم جای دوری نمی‌ره اگر دوباره معرفیش کنم.پلاگین فونت‌ایراندر انتها بگم که پلاگین فونت ایران که قبلا معرفی کرده بودم هم بروز شده و احتمالا تا زمانی که شما این مقاله رو می‌خونین فونت ایران‌سنس یه آپدیت بزرگ کرده که به شخصه منتظرشم. https://virgool.io/@amirtaqiabadi/%D9%84%DB%8C%D9%86%DA%A9-%D9%87%D8%A7%DB%8C-%D8%AC%D8%B0%D8%A7%D8%A8-%D8%AF%D8%B1-%D8%AD%D9%88%D8%B2%D9%87-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%81%D8%B1%D9%88%D8%B1%D8%AF%DB%8C%D9%86-%DB%B1%DB%B4%DB%B0%DB%B0-vurjz27tzvxy شما هم تو کامنت‌ها یه نفر که ارزش دیده شدن داره رو معرفی کنین. امیر تقی آبادی امیر تقی آبادی Wed, 05 May 2021 10:51:12 +0430 https://virgool.io/@amirtaqiabadi/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-drag-and-drop-%D8%B5%D9%81%D8%AD%D9%87-%D8%A2%D9%BE%D9%84%D9%88%D8%AF-panel-brfs9pr0ypff این مقاله ماجرای طراحی صفحه آپلود یه پنله که به کاربرامون اجازه می‌دیم فیلم و سریال‌هاشون رو بارگذاری کنن.موضوعی که در جمله‌ی بالا نهفته شده که باید بهش توجه کنیم اینه که این پنل برای بارگذاری فایل فیلم و سریاله که حجم بالایی داره و در اکثر مواقع از طریق دسکتاپ بارگذاری می‌شه در نتیجه فقط تو نسخه دسکتاپ میاد و تو موبایل اصلا نمایش داده نمی‌شه.اسکچ اولیهاسکچ اولیهقبل از اینکه با تیم فنی صحبت کنم سعی کردم یه طرح اولیه بزنم. این کار کمک می‌کنه که یه سری سوال و ابهام برام ایجاد بشه که بتونم جلسه‌ی مفیدتری داشته باشم.دیدن نمونه خیلی کمک می‌کنه که User Flow‌های ممکن رو ببینین. یکی از بهترین فلوهای ممکن مسیر کاربری یوتیوبه که به شدت خوبه. مشابه یوتیوب من هم تصمیم گرفتم که کاربر اول فایل رو بارگذاری کنه و بعدش بره سراغ ورود اطلاعات فیلم و سریال و متناسب با این طراحی کردم. حتی مثل یوتیوب امکان بارگذاری هم‌زمان چند فایل رو هم در نظر گرفتم و با این نمونه‌ها با بچه‌های فنی صحبت کردم.در این بین متوجه شدم نمی‌صرفه (نه که نشه) که همزمان چند فایل رو کاربر بارگذاری کنه و باید اول اسم فیلم و مشخصات رو اعلام کنه و بعد بارگذاری کنه. همینطور که می‌بیننین در این حالت کل فرضیات من زیر سوال رفت اما من همچنان مصر بودم که ابتدا فایل رو بگیریم و در حین بارگذاری فایل اطلاعات رو بگیریم.دلیلش هم این بود که احتمال بیشتری وجود داره که فایل انتخابی مشکلی داشته باشه تا اینکه اطلاعاتی که داره وارد می‌کنه مشکل دار باشه پس بهتره در همون ابتدا که فایل رو انتخاب می‌کنه به خطا بخوره تا اینکه کلی تایپ کنه و بعدش بهش بگیم که فایلت مشکل داره.دانش فنی مورد نیاز طراحاینجا بود که دانش برنامه‌نویسی و تجربه قبلیم به کار اومد. قبل اینکه جلوتر بریم لازمه اون نکته‌ی برنامه‌نویسی رو با هم مرور کنیم. https://www.youtube.com/watch?v=AQ8NORYhO64 ویدئوی یوتیوب بالا رو که ببینین بیشتر درک می‌کنین که چرا یک دیزاینر (خوب) باید حداقلی از دانش برنامه‌نویسی و سایر علوم مرتبط بدونه.برای اینکه توضیح بدم چطور شد که هم به خواسته‌های تیم فنی توجه کردم و هم کاربر محور طراحی کردم لازمه تفاوت Server-side و Client-side رو یه توضیحی بدم. ببینین ما می‌تونیم یه سری کارها رو تو مرورگر کاربر انجام بدیم که باعث بشه سرعت در یه مواردی بیشتر بشه، فشار کمتری روی سرور بیاد و به جای نمایش خطا، از بروز خطا جلوگیری کنیم.هر چند همه‌ی اینها به معنی از دست دادن امنیه و نمی‌شه تمامی بررسی و تحلیل‌ها رو سمت کاربر (Client-side) و در مرورگرش انجام داد اما برخی کارها شدنیه.برای اینکه موضوع رو بهتر درک کنین بهتره یه مثالی بزنم براتون. یه بار تو دلیون ما یه مسابقه آنلاین سنگ - کاغذ - قیچی برگزار کرده بودیم و به جای اینکه برنده رو توی سرور مشخص کنیم سمت کاربر بازی تماما انجام می‌شد و نتیجه به سرور پاس داده می‌شد. https://www.aparat.com/v/Y63zk/%D8%AC%D8%A7%D8%AF%DB%8C_%D8%AA%DB%8C_%D9%88%DB%8C_%DB%B1%DB%B9_-_%D9%87%DA%A9_%D8%AF%D9%88%D8%B3%D8%AA%D8%A7%D9%86%D9%87_%D8%A8%D8%A7%D8%B2%DB%8C_%D8%B3%D9%86%DA%AF_%DA%A9%D8%A7%D8%BA%D8%B0 نتیجش این شد که همینطور که در این ویدئو جادی می‌بینین کلی کد تخفیف ۵۰ هزارتومانی تولید شده بود که اگر جلوشو نمی‌گرفتیم ما رو به برشکستگی می‌رسوند.همینطور که گفتم تیم فنی می‌خواست اول اسم و توضیخات فایل بیاد بعد فایل بارگذاری بشه اما من برعکس اینو می‌خواستم پس کاری که کردیم اینه که در ابتدا آدرس فایل رو از رو سیستم می‌خونیم و نگه می‌داریم و در مرحله بعد اطلاعات رو می‌گیریم. و این دو تا رو به ترتیبی که سرور می‌خواد براش می‌فرستیم.اینجوری هم کاربرمحور طراحی کردیم هم بیزینس محور.حالا فقط یه نکته‌ی دیگه رو هم باید در نظر بگیریم. اونم اینه که یه وقت فایل خطا نده چون ممکنه که فایلی که کاربر برای بارگذاری انتخاب می‌کنه حجیم باشه یا فرمت مناسبی نباشه و باید جلوی این کار رو گرفت.تو مقاله‌ی کوتاه در مورد Poka-yoke گفتم که جلوگیری از خطا از نمایش خطا مهمتره. اینکه موقع انتخاب فایل برای آپلود فقط فایل‌های مجاز رو نشون بدی هم یکی دیگه از مثال‌های پوکا یوکه است.اینجاست که بررسی سمت کاربر مهم می‌شه. همینطور که گفتم ما می‌تونیم در ابتدا بدون اینکه چیزی به سرور پاس بدیم فایل انتخابی رو بررسی کنیم و در اگر مشکل داره در لحظه خطای متناظر رو بدیم بدون اینکه چیزی سمت سرور ارسال بشه.با جستجوی تیم فنی وبسایت mediainfo رو پیدا کردیم که دیتاهای فایل رو سمت کاربر نشون می‌ده و اینجوری متوجه خطا بشیم.جستجوی کد آمادههمینطور که تو ویدئوی "چیزهایی که یک طراح باید از برنامه‌نویسی بداند" گفتم خیلی وقت‌ها که من دنبال چیز به خصوصی هستم شخصا سرچ می‌کنم و کد آماده‌ی اون چیزی که می‌خواهم رو پیدا می‌کنم و بعد متناسب با اون طراحی رو انجام می‌دم.به عنوان مثال من دنبال یه Drag and Drop هستم برای آپلود فایل برای React در نتیجه چیزی که سرچ کردم این بود:نمونه جستجوی من و در نهایت تو یکی از نتایج رسیدم به مقاله‌ی Create a drag-and-drop component with the HTML Drag and Drop API که طرح زیر رو داشت.دموی کد ارائه شده در مقالههمین رو فرستادم برای تیم فنی و اونها هم بدون اینکه حتی UI آمادشه شده باشه با high-fidelity wireframe زیر که زده بودم کار رو شروع کردن و قبل از پایان وقت کاری این قابلیت سمت کاربر پیاده شده بود.وایرفریم های فیدیلیتیتوضیحات سمت تیم بک‌اندالان دیگه طرح اولیه به همراه توضیحاتی که جدا آماده کردم آمادست که بره برای Backend که پیاده سازی بشه.یکی از این توضیحات اینه که در مورد فایل به بررسی مرورگر کاربر اکتفا نکنه و خودش هم جوانب احتیاط رو رعایت کنه و اگر در فایل مشکلی وجود داره به همراه متن خطای مرتبط برگردونه که به کاربر نمایش بدیم.اینجوری امنیت رو هم در کنار سرعت داریم و چیزی رو فدای دیگری نکردیم. به علاوه که با گرفتن فایل در ابتدا Mental Model کاربر یوتیوب برای ما هم رعایت شده و اول فایل رو می‌فرسته بعد اطلاعات رو تکمیل می‌کنه.مطالعه‌ی بیشتراینم اضافه کنم که برای طراحی بهتر درگ اند دراپ مقاله‌ی Drag–and–Drop: How to Design for Ease of Use رو هم خوندم که به شما هم پیشنهاد می‌دم. امیر تقی آبادی امیر تقی آبادی Fri, 09 Apr 2021 15:55:41 +0430 https://virgool.io/@amirtaqiabadi/%D9%84%DB%8C%D9%86%DA%A9-%D9%87%D8%A7%DB%8C-%D8%AC%D8%B0%D8%A7%D8%A8-%D8%AF%D8%B1-%D8%AD%D9%88%D8%B2%D9%87-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%81%D8%B1%D9%88%D8%B1%D8%AF%DB%8C%D9%86-%DB%B1%DB%B4%DB%B0%DB%B0-vurjz27tzvxy اول که سال نو مبارک. برامون پول زیاد آرزو می‌کنم بقیش با پول حل می‌شه. تو این پست ایده‌ها، منابع، ابزار و افزونه‌هایی که برای طراحی به درد می‌خوره رو معرفی می‌کنم. شما هم اگر برای ماه بعد پیشنهادی دارین زیر همین پست کامنت بزارین.قبل انتشار هر سایتی بهتره اون رو تو مرورگرهای مختلف به خصوص نسخه‌های قدیمی‌تر هم بررسی کنیم که ببینیم درست پیاده‌سازی شده یا نه. برای اینکار می‌توینن از وبسایت browserling برای بررسی در مرورگرهای مختلف استفاده کنین. متاسفانه نسخه رایگانش محدودیت زیادی داره. اگر گزینه بهتری می‌شناسین معرفی کنین.اینستاگرام نیایش مالکی رو خیلی وقته دنبال می‌کنم اما چون اسلوموشن صحبت می‌کرد حوصله نمی‌کردم ویدئهاشو ببینم. خوشبختانه کانال یوتیوبشو هم راه انداخته که می‌شه با سرعت 2X ویدئوهاشو ببینم و واقعا ارزش دیدن داره. مثلا از ویديوی همه چیز در مورد گرید برای یوآی دیزاین کلی چیز جدید یاد گرفتم.وریبل فونت داناامیر عباس از کانال یوتیوب SkillVid رو احتمالا بشناسین. تو ویدئوی شیوه صحیح استفاده از Variable Font در صفحات وب نکات مهمی رو در مورد وریبل فونت توضیح داده که قطع به یقین به کارتون میاد.تا یادم نرفته بگم که فونت‌های فونت ایران رو می‌تونین با کد تخفیف nowruz1400 با تخفیف نوروزی بخرین.زیاد از من می‌پرسن که برای طراح شدن نیاز به دانش برنامه‌نویسی هست یا نه؟ تو این لایو اینستاگرام به اتفاق یاشار پورمحمد در موردش طولانی صحبت کردیم.مشتاق مودت کانال تلگرام Product Words رو راه انداخته که توش اصلاحات تخصصی UI/UX رو خیلی مختصر و مفید توضیح می‌ده.اگر قصد ساخت پرسشنامه دارین و دوست دارین برای زبان فارسی بهینه‌تر باشه و امکانات بیشتری هم می‌خواین پرس‌لاین رو امتحان کنین.کتاب وادارم نکن فکر کنمکتاب معروف Don't Make Me Think رو انتشارات نشر نوین با نام وادارم نکن فکر کنم منتشر کرده. من موافق کتاب نیستم اما این کتاب برای افراد تازه‌وارد و مدرسینی که می‌خوان دوره مقدماتی UI/UX بزارن بد نیست. برای بقیه خیلی ارزش افزوده‌ای نداره و البته ترجمش هم مشخصا کار یه نفر خارج از این حوزه بوده و روون نیست.نسخه‌ی کرک شده‌ی نرم‌افزار Pichon رو اگر از این آدرسی که لینک دادم دانلود کنین می‌تونین تعداد بسیار زیادی از آیکن‌های غیر رایگان رو در نسخه‌ی SVG به راحتی دانلود و استفاده کنید. مبحث اخلاقیش با خودتون.مدتیه برای دوره‌ی جدیدم دنبال ابزار ضبط اسکرین و وبکم هستم. loom ، snagit و Camtasia رو امتحان کردم. تا این لحظه vmaker توجهمو جلب کرده. شما هم اگر پیشنهادی دارین مطرح کنین.به کمک وبسایت Smooth Shadow Generator که پلاگین فیگما هم داره می‌تونین سایه‌های خیلی نرم برای طراحی‌هاتون بسازین.وبسایت پروژه شبستان ایران ما رو هم یه سر بزنین. ممکنه یه جایی از زندگی نیاز به تصویر بناهای ایرانی داشته باشین و این پروژه به دردتون بخوره. https://virgool.io/@amirtaqiabadi/%D9%84%DB%8C%D9%86%DA%A9-%D9%87%D8%A7%DB%8C-%D8%AC%D8%B0%D8%A7%D8%A8-%D8%AF%D8%B1-%D8%AD%D9%88%D8%B2%D9%87-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%A7%D8%B3%D9%81%D9%86%D8%AF-%DB%B9%DB%B9-zmjl9gltm9uw جای چه چیزی اینجا خالیه؟ این زیر کامنت کنین. امیر تقی آبادی امیر تقی آبادی Wed, 24 Mar 2021 17:57:26 +0430 https://virgool.io/@amirtaqiabadi/%D8%A2%D9%85%D8%A7%D8%B1-%D8%A8%D8%A7%D8%B2%D8%AF%DB%8C%D8%AF-%D9%BE%D8%B3%D8%AA-%D9%87%D8%A7%DB%8C-%D9%85%D9%86-%D8%AF%D8%B1-%D8%B3%D8%A7%D9%84-%DB%B9%DB%B9-a6we7ejbjawn در طول تاریخ از اعداد استفاده کردیم تا اغلب داد و ستد کنیم و آن‌چیزی که شمردنی است را بشماریم. برای هر عدد واحد درست کردیم تا عددهای زندگی قاطی نشوند و از اعداد، شفاف‌تر استفاده کنیم؛ مثلا وقتی می‌گوییم ده هزار تومان به پول اشاره داریم و وقتی می‌گوییم ده هزار بلیط به بلیط!روز به روز که در زندگی جلو‌تر رفتیم عددها فرقی نکردند ولی این واحدها بودند که زیاد شدند. واحد کریپتو، واحد اصله درخت، واحد فاصله و …«واحد» یک توافق عمومی است برای شمردن؛ تا همانطور که گفتم شمردن‌ها قاطی نشود. مشاهده افراد دارای ثروت (اجتماعی یا مالی) به من ثابت کرده اینکه چه چیزی را بشماریم از اینکه چطور بشماریم مهم‌تر است. هرکس با واحد خاصی مسائل زندگی را می‌شمارد. اینطور به نظرم آمده که مشخص کردن واحد یعنی مشخص کردن اینکه من در زندگی برای چه چیزهایی ارزش قائلم و می‌خواهم چه چیزهایی را در زندگی بشمارم. https://cdn.virgool.io/annual-report/1399/h8seug1aweep-LXDIf.mp4 اعدادی که بدون واحد ثبت کردمبه ویدیویی که ویرگول برایم ساخته که نگاه می‌کنم میبینم که در سال ۹۹، من در مجموع ۲۸,۴۳۸ کلمه در ویرگول نوشتم و منتشر کردم و مخاطبین، پست‌های من را ۲,۰۲۰ مرتبه پسندیدند و ۴۸۳ بار هم نظر خود را روی پست‌های من به اشتراک گذاشتند. در سال ۹۹، ۷۱۵ نفر در ویرگول من را دنبال کردند تا پست‌های بعدیم را بخوانند. این اعداد نشان میدهند من کاری کرده‌ام. هرکدام به واحدی وصل هستند. از خودم می‌پرسم من کدام واحد را شمارش کرده‌ام؟ کدامیک از واحدهای بالا از همه برای من مهم‌تر است؟ ادامه ویدیو را می‌بینم.آمار از اثر بیرونی می‌گویندطبق آمار پست‌های من ۱۳,۶۷۰ بار خوانده شدند و ۵,۷۶۳,۳۱۲ ثانیه صرف مطالعه آنها شده است، که با توجه به جمعیتی که در ایران به اینترنت دسترسی دارند، ویرگول به من می‌گوید که توانستم ۰/۰۷۹۰۱۴۴۲۳ ثانیه، سرانه مطالعه دیجیتال کشور را بالا ببرم.از طرف دیگر ویرگول به من می‌گوید که اگر قرار بود پست‌هایم را چاپ و به دست تک تک خوانندگان برسانم باید ۱۴۵,۱۶۸ کاغذ مصرف می‌کردم.آن عددهای کوچک ابتدای ویدیو حالا تبدیل شده‌اند به عددهای بزرگ به اینکه من جلوی مصرف این تعداد کاغذ را گرفتم یا به اینکه من ۰/۰۷۹۰۱۴۴۲۳ ثانیه، سرانه مطالعه دیجیتال کشور را جابه جا کرده‌ام. واحد این عددها برای من ملموس‌تر است.واحد نوشتن چیست؟همه عددهای بالا و همینطور اثر بیرونی که روی خوانندگان و همینطور در مقیاس بزرگتر طبیعت و جامعه اطرافم گذاشتم اعدادی هستند که من دوستشان دارم و به آنها افتخار می‌کنم. اگر چنین ویدیویی دست شما نیز رسید به شما بابت تک تک اعداد تبریک می‌گویم.اثر هر نوشته تا حدودی معلوم است، اگر بنویسید جلوی قطع درخت را می‌گیرید، به سرانه مطالعه کشور اضافه می‌کنید و خوانندگانی جذب می‌کنید که شما را از طریق نوشته‌هایتان می‌شناسند و …به نظرم می‌رسد که نوشته‌های من و شما واحد ندارند ولی اثر بیرونی دارند. امیر تقی آبادی امیر تقی آبادی Mon, 22 Mar 2021 17:00:08 +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 - در حال مطالعه امیر تقی آبادی امیر تقی آبادی Thu, 18 Mar 2021 20:46:11 +0330 https://virgool.io/@amirtaqiabadi/%D9%84%DB%8C%D9%86%DA%A9-%D9%87%D8%A7%DB%8C-%D8%AC%D8%B0%D8%A7%D8%A8-%D8%AF%D8%B1-%D8%AD%D9%88%D8%B2%D9%87-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%A7%D8%B3%D9%81%D9%86%D8%AF-%DB%B9%DB%B9-zmjl9gltm9uw اگر شماره‌های قبلی این سری از مقالات رو دیده باشین می‌دونین که من اینجا افراد، ایده‌ها، منابع و چیزهایی که ارزش دنبال کردن و دیدن دارن رو منتشر می‌کنم. اگرم نمی‌دونستین که الان می‌دونین. قابلتون رو نداشت! آیکن پک کوکوبعد از آیکن پک iconly که به تازگی هم قراره بروزرسانی جدیدش بیاد، اینبار نوبت امیر باغیان که با آیکن پک کوکو توجهمون رو حسابی جلب کنه.اینستاگرام ux.sayena شروع کرده به آموزش سریالی UX که هرچند خیلی ساختار یافته نیست اما مطالب خوبی رو منتشر می‌کنه. مثلا من خودم اصطلاح Fly On The Wall رو از ویدئوهاش یاد گرفتم. وبسایت تستادی یه استارتاپ ایرانیه که به جای شما تست کاربردپذیری می‌گیره. به شخصه تجربه استفاده ندارم اما از آمارهای خوبی که منتشر کردن و مطالب وبلاگشون به نظرم درک خوبی از بازی دارند.کیبورد فارسی iOS برای فیگماآی دی @ikuttlass در تویتر کیبورد فارسی iOS رو تو فیگما طراحی و منتشر کرده که بتونیم تو طراحی‌هامون ازشون استفاده کنیم.شدیدا توصیه می‌کنم تو صفحات که کیبورد جز جدایی ناپذیر اقدام اون صفحه است حتما اندازه کیبورد رو تو طراحیتون در نظر بگیرین.وبسایت ezGIF رو من برای تبدیل ویدئو به gif، کراپ کردن و کم حجم کردن گیف استفاده می‌کنم که خیلی کار راه اندازه. به کمک وبسایت snazzymaps می‌تونین برای صفحه درباره ما یا هر جایی که نقشه با شکل و شمایل خاص خودتون می‌خواهین کدشو بسازین و بدین به برنامه‌نویس که استفاده کنه و از رفت و برگشت‌های اضافه جلوگیری کنین. کلی هم نمونه آماده داره که حتی به عنوان پوستر دیواری هم می‌تونین از نقشه‌های خوش آب و رنگش استفاده کنید.دایرالمعارف اصطلاحات UX رو هم تو بوکمارک‌هاتون ذخیره کنین که اگه به اصطلاح جدیدی برخوردین، لنگه کفش در بیابان نعمته.تو مقاله‌ی اول این سری اسم میرو و نوشن رو آوردم اما الان می‌خوام میلانوت رو بهتون معرفی کنم که یه ترکیب ساده شده‌ای از هر دوشه و برای مواقعی که ساختاری تودرتویی نوشن رو وایت‌بردی میرو می‌خواهیم توامان استفاده کنیم خیلی به کار میاد.به کمک وبسایت wordclouds می‌تونین ابر کلمات نظرات مشتریانتون رو در بیارین و خیلی سریع یه دید اولیه از نظراتی که در موردتون در شبکه‌های اجتماعی، مارکت‌های اپلیکیشن و ... داده شده رو ببینین. تو تویتر نمودار فراوانی عرض و ارتفاع صفحه نمایش دیوایس‌های ایرانی رو منتشر کردم که برای طراحی رسپانسیو و پیدا کردن breakpointهای طراحی به درد می‌خوره. به علاوه به زودی قراره یه محتوای خوب فارسی رو هم بازنشر کنم. https://virgool.io/@amirtaqiabadi/%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1%D9%87%D8%A7%DB%8C-%D9%85%D9%87%D9%85-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-ui-ux-zhtherrl9jae شما هم اگر ایده، وبسایت، فرد، منبع یا افزونه‌ی جالبی می‌شناین که خوبه بقیه هم بشناسن در زیر این مقاله یا تو تویتر معرفی کنین و منو با آی دی @amirtaqiabadi منشن کنین تا در نهایت به نام خودتون در مقالات بعدی معرفی کنم.تو کامنت‌‌های مقاله قبلی وبسایت UXNet معرفی شد که مطالب خوب مرتبطی منتشر می‌کنه. واردش که شدین طرحش ممکنه تو ذوق بزنه اما این فرصت رو بهش بدین، مطالبش ارزش خوندن داره. امیر تقی آبادی امیر تقی آبادی Wed, 24 Feb 2021 12:53:17 +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 امیر تقی آبادی امیر تقی آبادی Wed, 03 Feb 2021 16:10:02 +0330 https://virgool.io/@amirtaqiabadi/%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1%D9%87%D8%A7%DB%8C-%D9%85%D9%87%D9%85-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-ui-ux-zhtherrl9jae بهمن تا اینجا برای من خیلی جذاب و شلوغ پبش رفته، برای همین وقت نکردم لینک‌ها رو جمع کنم. اما کار خفن بچه‌های ستاره اول یعنی مورف باعث شد که سریع‌تر دست بجنبونم تا در حد توان از کارشون حمایت کنم به خصوص که طاها حامی‌فر یکی از دوستان خوبم هم تو این گروهه.از مقاله‌ی قبلی، دو تا دیزاین سیستم خوب فارسی معرفی شده یکی از سمت بچه‌های دیوار به اسم سنت یکی هم به همت بچه‌های ستاره اول به اسم مورف که منبع خوبی برای شروع تمرین UI فارسی محصوب می‌شه.بچه‌های Dexign Studio، وبسایت دَسْخَطْ رو ساختن که می‌تونین توش نوشته مدنظرتون رو با فونت‌های مختلف ببینین و عاقلانه‌تر تصمیم‌بگیرین. اگر می‌بینین سرعت سایت کنده تنها به این دلیله که فونت رو تبدیل به عکس می‌کنه که جلوی دانلود غیرقانونی فونت رو بگیره. سرعتش رو به کار خوبش ببخشین.اگر با فیگما کار کرده باشین احتمالا با مشکل فارسی نویسی توی فیگما آشنا هستین.سعید علی‌پور پلاگین RTL PLZ رو به تازگی با قایلیت‌های جدید آپدیت کرده. اگر قصد مهاجرت به فیگما رو دارین حتما به کارتون میاد.اگر به گیمیفیکیشن هم علاقه‌مندین من به اتفاق علیرضا شورابی یه لایو سریالی در موردش داریم که پنجشنبه‌ها تو اینستاگرام من برگزار می‌شه و قسمت‌های قبلی رو هم می‌تونین تو یوتیوب ببینین.کتاب ۱۰۰ چیزی که هر طراح باید بداند از معدود کتاب‌هایی که من زیاد بهش سر می‌زنم. جدای از تعدد مضوعاتی که پوشش می‌ده اینکه به فارسی ترجمه شده و به صورت آنلاین و البته رایگان در دسترسه باعث شده دسترسی و جستجو درش خیلی راحت‌تر باشه.از اونطرف کتاب Refactoring UI هم به تازگی به فارسی ترجمه شده و با قیمت معقولی برای فروش موجوده. اگر علاقه‌مند به طراحی UI اصولی هستین با کد تخفیف amirtaqiabadi می‌تونین این کتاب رو با ۵۰ درصد تخفیف بگیرین.حسین شرفی سه تا از اینفوگرافی‌های مطرح Accessibility رو ترجمه کرده که از کانال Product Design Books در دسترسه. ویدئوی من تو یوتیوب با عنوان بررسی دسترس‌پذیری اپلیکیشن به کمک نرم‌افزارهای Google play Console و Accessibility Scanner رو هم پشت بندش ببینین.سامان وحدت هم چک لیست تجربه کاربری رو ترجمه کرده که به همراه چک لیست UX-Unicorn در پروسه طراحی تجربه کاربری خیلی به دردتون می‌خوره.ایمبر هم یه پشتیبانی آنلاین ایرانیه که مفهوم پشتیبانی آنلاین رو با FAQ یکی کرده و اینجوری کار نیروهای پشتیبانی رو کم می‌کنه. https://virgool.io/@amirtaqiabadi/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B1%D9%88-%D8%A7%D8%B2-%DA%A9%D8%AC%D8%A7-%D8%B4%D8%B1%D9%88%D8%B9-%DA%A9%D9%86%DB%8C%D9%85-icej8h36mbmr شما هم اگر ایده، وبسایت، فرد، منبع یا افزونه‌ی جالبی می‌شناین که خوبه بقیه هم بشناسن در زیر این مقاله یا تو تویتر معرفی کنین و منو با آی دی @amirtaqiabadi منشن کنین تا در نهایت به نام خودتون در مقالات بعدی معرفی کنم.شهاب سیاوش هم فونت فارسی طراحی می‌کنه و تو سایت sfonts.ir برای فروش قرار می‌ده که تو مقاله‌ی قبلی کامنت گذاشته. امیر تقی آبادی امیر تقی آبادی Mon, 01 Feb 2021 12:59:03 +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 پلیر پخش فیلم رو قراره ۲۷ خرداد برگزار کنم. اونجا می‌بینمتون. امیر تقی آبادی امیر تقی آبادی Wed, 27 Jan 2021 12:47:10 +0330