https://virgool.io/MyPofefilm/feed داستان‌هایی در مورد حیات و ممات پف‌فیلم fa 2026-06-08 01:00:57 https://files.virgool.io/upload/publication/q1ha5nitgfg7/em3csl.png https://virgool.io/MyPofefilm https://virgool.io/MyPofefilm/payment-result-pages-design-lzrr1g9fwev8 این مقاله به طراحی صفحه بازگشت از بانک اختصاص داره. محوریت اصلی مقاله هم به زمانی اختصاص داره که پرداخت به هر دلیلی ناموفق بوده و می‌خواهیم کاری کنیم که تماس با پشتیبانی کمتر بشه و حتی پرداخت مجدد رو بیشتر کنیم.تو طراحی این صفحات ما از اصول طراحی رفتاری (طراحی شناختی) استفاده کردیم.صفحه‌ی Success Paymentتو مقاله‌ی ۱۰ خطای شناختی اثرگذار در طراحی Pricing Page در توضیح اثر اثر قدردانی (Trivialization Effect) توضیح دادم که ما تشکر رو بیشتر از یه هدیه نقدی ناچیز (کمتر مساوی ۱۰٪ بازگشت وجه) می‌پسندیم. در نتیجه کلمه‌ی ممنونیم رو با وزن بصری و فضای منفی زیادی قرار دادم که تو چشم باشه.و همینطور که تو مقاله‌ی ۶ اثر روانشناسی مهم در قیمت‌گذاری در توضیح اثر سوگیری حمایت از انتخاب (Choice-supportive bias) توضیح دادم ما از انتخاب‌هایی که کردیم همیشه دفاع می‌کنیم چون معتقدیم بهترین انتخاب ممکن رو کردیم. لذا امکان share تجربه کاربر رو فراهم کردیم که هم کاربر احساس بهتری داشته باشه و هم ما با Referral Marketing کاربر جدید بگیریم.صفحه‌ی Check Paymentتو کسب‌وکارهای آنلاین معمولا حجم زیادی از تماس‌هایی که با پشتیبانی گرفته می‌شه به مرحله‌ی پرداخت آنلاین مربوطه. یکی از مشکلات رایج اینه که پول از حساب کاربر کم می‌شه اما پرداخت موفقیت‌آمیز به سایت ارسال نمی‌شه و کاربر با خطای عدم پرداخت موفق روبرو می‌شه. در این مواقع کاربر اولین کارش اینه که با پشتیبانی تماس بگیره و پیگیر بشه و این موضوع ممکنه بار مالی زیادی روی بیزینس بزاره.برای اینکه این تماس با پشتیبانی رو کم کنیم مشابه صفحه‌ی Splash Screen پف‌فیلم یه دکمه‌ی دلخشونک (Placebo Button) اضافه کردیم که کاربر با زدن روش می‌تونه وضعیت پرداختتشو مجددا بررسی کنه. ما می‌تونیم به صورت اتوماتیک اینکار رو بکنیم (و می‌کنیم) و نتیجه رو نشون بدیم اما اضافه کردن این گزینه هر چند باعث اضافه شدن Interaction Cost می‌شه اما تماس با پشتیبانی رو به شدت کم می‌کنه.دکمه‌ی دلخشونک (Placebo Button) به دکمه‌هایی گفته می‌شن که به ظاهر کار می‌کنن. فشرده می‌شن. صدای فشرده شدن دارن اما مثل دارونماها عملا هیچ عملکردی ندارن جز تاثیرات روانی.به گفته‌ی الن لنگر (روانشناس هاروارد) انجام هر کاری معمولا حس بهتری از هیچ کاری نکردن می‌ده. در حقیقت این دکمه یه جور حس کنترل بر اوضاع (Illusion of control) رو در کاربر ایجاد می‌کنه که حس رضایت بخشیه تا اینکه فقط یه تماشاچی باشه. https://twitter.com/amirtaqiabadi/status/1263414304507932672?s=20 پرداخت شما موفقیت‌آمیز ثبت نشداگر مبلغی از حساب شما کم شده است اما خدمت مورد نظر خود را دریافت نکرده‌اید، این مشکل ممکن است به دلایل مختلفی از جمله قطعی موقتی اینترنت یا عدم ارسال صحیح اطلاعات از سایت بانک به هر دلیلی ایجاد شده باشد.مجدد وضعیت پرداختی خود دکمه "بررسی پرداخت ناموفق" را بزنید و در غیر اینصورت می‌توانید مجددا پرداخت را انجام دهید.در توضیحات این صفحه سعی کردیم از کمترین کلمات استفاده کنیم چون معتقدیم کاربرها نمی‌خونن اما به نکات مهم هم اشاره کنیم. اگر شما می‌تونین تمامی جزییات این متن رو در تعداد کلمات کمتر و روون‌تری بنویسین خوشحال می‌شیم که کامنت کنین.مهم اینه که نشون بدیم متوجهیم که ممکنه به دلایلی که بهشون واقفیم پولی از حسابتون کم شده باشه و از این طریق می‌تونیم بررسی کنیم که خیالتون راحت باشه و همچنین اگر خودتون انصراف زدین می‌تونین پرداخت مجدد رو بزنین یا برای تغییر پنل به اپلیکیشن برگردین.مشخصا اقدام اصلی این صفحه بررسی مجدد پرداخته.صفحه Pending Paymentبعد از اینکه کاربر روی بررسی مجدد پرداخت زد هر چند می‌تونیم مستقیما ببریمش به صفحه نتیجه اما تشخیص دادیم مدت انتظار رو بیشتر کنیم که کاربر احساس کنه داریم تمامی راه‌های ممکن رو بررسی می‌کنیم تا از صحت پرداخت مطمئن بشیم. این صفحه با یه انییشن لودینگ ساده و متن زیر همراه شده که در مدت زمان انتظار چیزی برای نمایش به کاربر داشته باشیم و تاکید کنیم اگر نتیجه منفی بود پول پس از ۷۲ ساعت به حساب شما بر می‌گرده و با این جمله هم تموم می‌شه که "جای هیچ نگرانی نیست." که مانع تماس کاربر با پشتیبانی بشیم.در حال بررسی مجدد پرداختما در حال بررسی صحت واریز شما از بانک هستیم. در صورتی که پرداخت شما به درستی انجام شده باشد به صفحه پرداخت موفق منتقل خواهید شد.در صورتی که با پیغام "متاسفانه سفارش شما پرداخت نشد" مواجه شدید، پرداخت شما توسط بانک مجددا تایید نشده است و می توانید مطمئن باشید که در صورتی که وجه شما از حسابتان کسر شده است نهایتا ظرف ۷۲ ساعت به حسابتان به صورت خودکار واریز خواهد شد و جای هیچ نگرانی نیست. https://virgool.io/@amirtaqiabadi/waiting-psychology-in-system-design-silkudhoz4ob صفحه‌ی Fail Paymentهر چند آدم‌ها معمولا متن‌ها رو نمی‌خونن و فقط اسکن می‌کنند اما به نظرم چون در اینجا پول از حسابشون کم شده با دقت بیشتری می‌خونن. در نتیجه نمایش پیغام اگر مبلغی از حساب شما کم شده باشه حداکثر ظرف ۷۲ ساعت بارگشت داده می‌شه باعث می‌شه کاربران کمتر با پشتیبانی تماس بگیرن.توی این صفجه یکی از سناریوهامون اینه که کاربر شاید به این دلیل که تمایل داشته پلن انتخابی خودش رو عوض کنه انصراف از پرداخت زده برای همین دکمه‌ی تغییر پلن رو در این صفحه قرار دادیم که البته نتایج تست گوریلا مشخص شد خیلی واضح نیست و با همون کارکرد متنش رو به بازگشت به اپلیکیشن تغییر دادیم.متاسفانه سفارش شما پرداخت نشدبررسی ما نشان می‌دهد پرداخت شما به درستی انجام نشده است و چنانچه مبلغی از حساب شما کسر شده است، حداکثر طی ۷۲ ساعت آینده به حساب شما باز خواهد گشت.از طرفی بلافاصله که کاربر وارد این صفحه می‌شه یه پیامک حاوی لینک پرداخت مجدد براش ارسال می‌شه و از طریق Toast هم بهش اطلاع داده می‌شه. فرضمون اینه که با این کار پرداخت‌های ناموفق بیشتری تبدیل به موفق می‌شه.تصویرسازی‌ها اولیه است و قصد بازطرحی داریم. اگر ایده‌ای دارین یا کسی رو می‌شناسین لطفا به من معرفی کنین.از این دست مقالات:بررسی موردی طراحی Tab bar پف‌فیلمبررسی موردی طراحی Login Page پف‌فیلمبررسی موردی طراحی Splash Screen پف‌فیلم بررسی موردی طراحی Payment Result Page پف‌فیلم - در حال مطالعه پف فیلم امیر تقی آبادی Sun, 13 Sep 2020 21:34:29 +0430 https://virgool.io/MyPofefilm/splash-screen-case-study-pofefilm-gvhxt2qaqzlj قبلا در مقاله‌ی چک لیست طراحی Splash Screen در مورد اصول طراحی صفحه‌ی شروع یا Launch screen زیاد صحبت کرده بودم و هر چند به نظریات مخالف در رد استفاده ازش هم پرداخته بودم اما الان اگر برگردم و اون مقاله رو بخوام اصلاح کنم وزن بیشتری به ارائه‌ی دلایل عدم استفاده از اسپلیش اسکرین می‌دم. https://cyrilmottier.com/2012/05/03/splash-screens-are-evil-dont-use-them/ این مقاله رو که بخونین دلایل بسیاری برای عدم استفاده از اسپلش اسکرین توضیح داده. اما در نهایت این ما هستیم که باید ما بر اساس ملاحظات و شرایط خومون تصمیم بگیریم.در ابتدای اپلیکیشن کاملا دوبه‌شک بودم که بزاریمش یا نه و برای همین فرض رو گذاشتم رو نداشتن و صفحه‌ی اول رو با skeleton screen طراحی کردیم که تا زمانی که محتوایی برای نمایش از اینترنت دریافت نشده یه چیزی برای نمایش وجود داشته باشه.اما در ادامه به سه دلیل تصمیم گرفتم از اسپلیش اسکرین استفاده کنیم.شکستن زمان انتظارزمانی که سرعت بارگزاری به هر دلیلی خیلی کند می‌شه بهتره ۲ مرحله المان بصری برای ارائه به کاربر داشته باشیم. یعنی یکبار در اسپلیش اسکرین کمی سرگرم می‌شه و سری دوم با Skeleton Screen سرگرم بشه. شکستن این بازه انتظار به دو زمان انتظار باعث می‌شه درک کاربر از مجموع زمان انتظار کمتر بشه و احساس کنه که اپلیکیشن سریعتر کار می‌کنه.قبلا در مقاله‌ی اصول روانشناسی حاکم بر فرآیندهای زمانبر در مورد نحوه‌ی ادراک ما از زمان زیاد حرف زدم.وزن بصری بیشتر برای Errorموضوع دومی که برامون مهم بود اینه که زمانی که اینترنت کاربر به طور کامل قطعه و نیازه که خطای مربوطه رو بهش نشون بدیم، هیچ المان جاذبِ توجه دیگه‌ای تو صفحه نباشه که توجه کاربر رو از خطا پرت کنه. صفحه‌ی اصلی با انیمیشن Skeleton Screen برای نمایش این موضوع به نظرم زیادی شلوغ بود در نتیجه ترجیه دادیم که نمایش خطا‌ی دسترسی به اینترنت رو در صفحه‌ی Splash Screen قرار بدیم که تمام توجه کاربر رو به خودش جلب کنه.همینطور که در مقاله‌ی چک لیست طراحی Splash Screen گفتم در زمان بروز خطا بهتره که راه حل هم به کاربر بدیم. برای این منظور در زمان نمایش خطا بررسی مجدد رو هم قرار دادیم که عملا هیچکاری نمی‌کنه چون اپلیکیشن به صورت پیشفرض داره مدام اتصال رو بررسی می‌کنه و نیازی به اقدامی از جانب کاربر نیست. اما این دکمه یه جور دِلخوشکُنَک و حس کنترل به کاربر می‌ده که باعث می‌شه تجربه‌ی بهتری داشته باشه. برای مطالعه‌ی این موضوع به مقاله‌ی Placebo Effect مراجعه کنید.یه چیزی دیگه‌ای هم که اصلا دنبالش نبودم و یه دفعه به ذهنم رسید این بود که زمانی که اینترنت قطعه با افکت گلیچ یه انیمیشنی به لوگو بدیم که جذاب باشه. البته نگرانم این جذابیت به حدی باشه که مانع کارکرد بشه و کاربر برای اینکه این انیمیشن رو ببینه عامدانه اینترنتشو قطع کنه که بیاد و این رو ببینه. همین مشکل رو هم در بازطرحی یکی از مودال‌ها داریم که در مقاله‌ی بعدی بهش اشاره می‌کنم. اما چون این انیمیشن رو دوست دارم اینجوری توجیه می‌کنم که چون این افکت افکتیه که آدما در تلویزیون‌هایی که مشکل آنتن‌دهی دارن بارها دیدن متوجه اینکه یه خطایی رخ داده می‌شن و هنوز هم صفحه به اندازه‌ای خلوت هست که خطای دسترسی به اینترنت سریع دیده بشه.ما آدمها برای چیزهایی که خودمون ساختیم و کلی هزینه (زمانی یا مالی) براش کردیم ارزش بیشتری قائلیم و تمام قد ازش دفاع می‌کنیم. به این پدیده در اصطلاح Investment Bias گفته می‌شه که زیبا در مقاله‌ی ۶ اشتباه رایج در پروتوتایپ کردن در موردش توضیح می‌ده که چطور این خطا باعث می‌شه فقط اون نتایجی از تست کاربردپذیری رو که باب میل ماست ببینیم.برندینگیکی از دلایلی که اکثر بیزینس‌ها برای اهمیت اسپلیش اسکرین ذکر می‌کنن همین برندینگه. ما هم در این مرحله‌ای که هستیم، فرضمون اینه که در یک صفحه‌ی خاص فقط لوگو و لوگوتایپ رو نشون بدیم که چشم کاربر عادت کنه به دیدن لوگو و اسم پف‌فیلم.البته در این مورد کاملا بازیم و ممکنه یه زمانی تصمیم بگیریم این دیگه یکی از دلایل نباشه.فارغ از این مسائل چون اسپلش اسکرین رو کاربر مانعی برای رسیدن به هدفش می‌دونه سعی کردیم خیلی سریع کاربر رو به صفحه‌ی اصلی هدایت کنیم و کمترین زمان ممکن رو در این صفحه سپری کنه.یکی دیگه از موارد مهمی که باید به کاربر گوشزد کنیم اما انقدر مهم نیست که در Flow کاربر سدی ایجاد کنیم نمایش Toast استفاده از VPN که در اسپلش اسکرین میاد و تا صفحه‌ی اصلی ادامه پیدا می‌کنه و بعد محو می‌شه.طرح پیشنهادی اسپلش اسکرین برای نتفلیکس همچنین در بروزرسانی بعدی قراره (مشابه لوگوی نتفیلیکیس در Concept بالا) به کمک انیمیشن Shared Element لوگو رو از صفحه‌ی اسپلیش اسکرین به صفحه‌ی خانه ببریم که Consistency بهتری برقرار بشه و لوگو و لوگو تایپ توجه بیشتری به خودش بگیره. البته این موضوع ممکنه روی سرعت تاثیر منفی بزاره که لازمه تستش کنیم. ممکنه بعد از تست تصمیم بگیریم که برش داریم یا برای گوشی‌های ضعیف‌تر غیر فعالش کنیم.در حال حاضر این قابلیت در React Native در نسخه‌ی آزمایشیه برای همین موکول کردیم به زمانی که این موضوع اضافه بشه به ورژن مورد استفاده‌ی ما.همینطور که توی این توییت مشخص شد نوشتن ورژن برنامه در صفحه اپلیکیشن کمک می‌کنه که اگر اپلیکیشن در این صفحه باقی موند و نرفت جلوتر، کاربر بتونه با پشتیبانی تماس بگیره و با اعلام شماره نسخه برنامه کمک کنه مشکل پیش اومده رو راحت‌تر درک کنیم. https://twitter.com/amirtaqiabadi/status/1307967640917422081?s=20 از این دست مقالات:بررسی موردی طراحی Tab bar پف‌فیلمبررسی موردی طراحی Login Page پف‌فیلمبررسی موردی طراحی Splash Screen پف‌فیلم - در حال مطالعهبررسی موردی طراحی Payment Result Page پف‌فیلم پف فیلم امیر تقی آبادی Sat, 06 Jun 2020 11:48:43 +0430 https://virgool.io/MyPofefilm/%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C-%D9%85%D9%88%D8%B1%D8%AF%DB%8C-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-login-page-%D9%BE%D9%81%D9%81%DB%8C%D9%84%D9%85-nhzjymrdltqk پس از مقاله‌ی بررسی موردی طراحی Tab bar اپلیکیشن پف‌فیلم در این مقاله به معرفی مواردی که در طراحی صفحه‌ی ورود به اپلیکیشن پف‌فیلم رعایت کردیم می‌پردازیم.اول از همه در عنوان نوشتیم که ورود و ثبت‌نام با شماره موبایل که کاربر بدونه از این صفحه هم می‌تونه ثبت‌نام کنه و هم می‌تونه وارد بشه که گیچ نشه. این موضوع در دکمه‌ی ورود/ثبت‌نام هم لحاظ شده.در طراحی این صفحه در نظر گرفتیم که کیبورد به صورت پیشفرض فعال است و در زمان طراحی UI هم جایگاه کیبورد رو درنظر گرفتیم که مطمئن باشیم هیچ آیتمی زیر کیبورد نمی‌ره. چیزی که در خیلی از اپلیکیشن‌ها رعایت نمی‌شه.همچنین نوع کیبورد رو Numeric گذاشتیم که فقط عدد نمایش داده بشه و امکان تغییر به کیبورد Qwerty رو هم بستیم. اینجوری مطمئن می‌شیم که هم کاربر در اولین نگاه می‌دونه چه چیزی رو باید وارد کنه، هم Interaction Cost تغییر کیبورد رو حذف کردیم و هم مشکل نوشتن اعداد فارسی در فیلد موبایل رو حل کردیم.به کرات دیدم که خیلی از اپلیکیشن و وبسایت‌ها وقتی با کیبورد فارسی اعداد رو می‌نویسی به مشکل می‌خوره و نه مطابق اصل پیشگیری از خطا (Error prevention) مقاله‌ی ارزشیابی اکتشافی (Heuristic Evaluation) از خطا جلوگیری می‌کنن و نه مطابق اصل شفافیت در بیان خطا و ارائه‌ی راه‌حل (Help users recognize, diagnose, and recover from errors) پیغام خطای مناسب رو بهش نشون می‌دن.از طرفی هم توی Hint و هم موقع وارد کردن شماره موبایل بر اساس نظریه‌ی Chunking نمایش شماره رو با فاصله نشون می‌دیم که کاربر راحتتر بتونه متوجه خطا بشه.بر اساس این نظریه چون افراد شماره موبایل رو به جای حفظ کردن عدد به عدد به صورت گروهی (۳ رقم ۳ رقم ۲ رقم ۲ رقم) حفظ می‌کنن یادآوری و تشخیص بهتری می‌تونه اتفاق بیفته و اگر به دلیل غلط تایپی عددی رو اشتباه نوشتن بتونن با یک نگاه متوجهش بشن.همچنین می‌شه با اضافه کردن کد AUTOFILL_HINT_PHONE_NUMBER_DEVICE به اندروید شماره موبایل کاربر رو برای انتخاب نشونش بدیم. این موضوع در حال بررسی و تسته. در مورد این ویژگی می‌تونین در اینجا بخونین.از طرفی در نظر گرفتیم که اگر کاربر شماره موبایل رو با صفر شروع کرد تعداد کارکترها محدود بشه به ۱۱ رقم و اگر با ۹ شروع کرد محدود بشه به ۱۰ رقم و حتی اگر با ۹۸ شروع شد هم محدود بشه به ۱۲ رقم. اگر هم شماره موبایل به نظر درست نبود کلا دکمه‌ی ورود فعال نمی‌شه و خطای لطفا شماره موبایل خود را به درستی وارد کنید نمایش داده می‌شه. همونطور که در مقاله‌ی چک لیست طراحی فرم ثبت‌نام نوشتم به جای استفاده از چک‌باکس تایید قوانین و مقررات به صورت جمله‌ی خبری نوشتم که کاربر نیاز به کار اضافه‌ای نداشته باشه. وقتی تنها راه ورود تایید قوانین و مقررات چرا باید یه Interaction Cost اضافه براش در نظر بگیریم؟و در نهایت هم با توجه به مقاله‌ی Visibility of system status زمانی که روی‌ دکمه‌ی ورود می‌زنه با یه Indicator نشون می‌دیم که درخواستشو دریافت کردیم و به زودی انجام می‌شه.در صفحه‌ی ورود کد تایید هم بسیاری از موارد بالا در نظر گرفته شده. مثلا نمایش شماره موبایل رو دوباره به صورت ۳ رقم ۳ رقم ۴ رقم نشون دادیم که اگر کد نیومد راحتتر بتونه شماره موبایلشو اسکن کنه و متوجه وجود خطا بشه.همچنین نوشتیم که باید یه کد ۴ رقمی رو وارد کنه که بدونه باید منتظر چی باشه چون به دلیلی که جلوتر می‌گم ما در پیامک ارسالی غیر از کد ۴ رقمی یه کد هش طولانی قرار دادیم و ممکنه این موضوع باعث خطا بشه.اما نکته‌ی مهم در طراحی این صفحه نه اپلیکیشن بلکه به پیامک دریافتی اشاره داره.اول اینکه چرا از یه کد ۴ رقمی استفاده کردیم به جای کد ۵ یا ۶ رقمی که مرسومه. دلیلش دوباره بر می‌گرده به Chunking که بالاتر توضیح دادم. خوندن و حفظ کردن یه کد ۴ رقمی خیلی راحتتره چون کاربر به صورت ۲رقم ۲رقم می‌خونه و حفظ می‌کنه اما در ۵ یا ۶ رقم به این سادگی نیست. رجوع کنین به تجربه‌ی استفاده از کد دریافتی رمز دوم که عمدتا مجبور می‌شیم دو سری به رمز نگاه کنیم تا بتونیم واردش کنیم.این موضوع ممکنه از نظر امنیتی برامون مشکل ساز بشه برای همین زمان Valid بودن کد رو به ۹۰ ثانیه محدود کردیم. احتمالا اگر در بررسی دیتا ببینیم که محدود کردن این عدد به ۶۰ ثانیه بار مالی زیادی برامون نخواهد داشت ممکنه این محدودیت رو به ۶۰ ثانیه هم ارتقا بدیم.دلیل دوم و مهمتر اینه که نمایش نوتیفیکیشن پیامک معمولا محدودیت کارکتر داره و به خصوص در مواردی که کاربر از قبل چند پیامک نخونده داشته باشه این محدودیت بیشتر هم می‌شه. در نتیجه نه تنها این کم کردن تعداد کارکتر خیلی کمک‌کنندس بلکه اون رو در ابتدای متن پیامک قرار دادیم که فرد بدون نیاز به باز کردن پیامک‌ها و خروج از اپلیکیشن بتونه کد رو بخونه و چون تعدادش کمه نیاز به مراجعه‌ی دوم نداره و از اپلیکیشن خارج نمی‎شه که این یک دستاورد بزرگیه.نکته‌ی سوم در طراحی متن پیامک اینه که توی متن پیامک اگر قبل از کد، - :code - رو قرار بدیم باعث می‌شه که توی iOS وقتی پیامک می‌رسه خود به خود توی clipboard ذخیره بشه و کاربر می‌تونه توی همین صفحه مستقیما paste کنه بدون اینکه از اپلیکیشن خارج بشه.این موضوع داخل اندروید هم با اضافه کردن کد AUTOFILL_HINT_SMS_OTP قابل پیاده‌سازیه که از اینجا می‌تونین توضیحات پیاده‌سازیشو بخونین. این موضوع رو ما تصمیم گرفتیم نداشته باشیم چون متن پیغام رو به انگلیسی نشون می‌ده و پرسنای اندرویدی ما کمتر با انگلیسی آشنایی داره.اون استیکر ? هم که برای اشاره‌ی بیشتر به کده که البته در بعضی از سرشماره‌ها به درستی ارسال نمی‌شه. https://developers.google.com/identity/sms-retriever/overview و اما مهمترین بخش کد اون Hash پایین پیامکه که با ویژگی به نام SMS Retriever API باعث می‌شه کاربر اندرویدی حتی نیاز به وارد کردن کد هم نداشته باشه و به صورت خودکار وارد بشه. این امکان خفن رو من فقط در اپلیکیشن‌های محدودی مثل شیپور و آدرس دیدم.همینطور که می‌دونین خوندن پیامک‌های کاربر نیاز به دسترسی داره که اصلا خوشایند نیست یه اپلیکیشن VOD چنین دسترسی رو درخواست کنه چه برسه که اجباریش کنه. برای همین گوگل در اندرویدهایی که نسخه‌ی Google play services 10.2x یا بالاتر دارند این امکان رو قرار داده که یه Listener در کدتون داشته باشین که اگر در پیامکی Hash code اپلیکیشن وجود داشت استثنا می‌تونه کد داخل اون پیامک رو از اندروید بگیره. اینجوری کاربر اندرویدی که اتفاقا جامعه هدف ما هستند بدون هیچ Interaction Cost می‌تونه وارد بشه.زمانی که اپلیکیشن رو توی گوگل پلی بارگذاری می‌کنین هش کد اپلیکیشن تغییر می‌کنه پس حواستون باشه که هش کد رو استاتیک وارد نکنین.یه چیزی هم که در بررسی سناریو محور این صفحه متوجهش شدم این بود که اگر پیامک برای کاربر نیاد و کاربر برای چک کردن بره داخل پیامک‌ها و برگرده تا ارسال مجدد رو بزنه تایمر متوقف می‌شد که خوب یه مشکل برنامه‌نویسی بود و حلش کردیم و شما هم یادتون باشه که این موضوع رو بررسی کنین.صحبتی با طراحان تازه‌کاراینو من به کرات توی دوره‌های آموزشی طراحی تجربه کاربریم دیدم که معمولا طراحان تازه کار یادشون می‌ره تایمر، ارسال مجدد، ویرایش شماره موبایل و خطاهای ممکن رو طراحی کنند. لطفا صفحه رو با کیبورد فعال طراحی کنین.همچنین چیزی که زیاد دیدم در صفحه‌ی ثبت‌نام می‌زارن اینه که نام کاربری می‌پرسن. (?WTF) نام کاربری دیگه منسوخ شده و تنها در مسنجرها و شبکه‌های مجازی کاربرد داره در نتیجه نیازی نیست که از کاربر بگیرین. همچنین اینکه ایمیل بگیرین یا شماره موبایل یا هر دو یه موضوع کسب‌وکاریه نه اینکه بگین چون صفحه خالی یا شلوغ بود این تصمیم رو گرفتم. براش باید توجیه داشته باشین.اگر می‌خواهین طراح خوبی بشین باید چشمای تیزبینی داشته باشین. من توی این IGTV یه سری از مشکلاتی که در صفحه‌ی ثبت‌نام یک اپلیکیشن دیدم لیست کردم که می‌تونین ببینین چطور باید این توانایی رو در خودتون تقویت کنین. https://www.instagram.com/tv/B9317YrBiTd/ از این دست مقالات:بررسی موردی طراحی Tab bar پف‌فیلمبررسی موردی طراحی Login Page پف‌فیلم - در حال مطالعهبررسی موردی طراحی Splash Screen پف‌فیلمبررسی موردی طراحی Payment Result Page پف‌فیلم پف فیلم امیر تقی آبادی Wed, 20 May 2020 18:33:23 +0430 https://virgool.io/MyPofefilm/%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C-%D9%85%D9%88%D8%B1%D8%AF%DB%8C-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-tab-bar-%D8%A7%D9%BE%D9%84%DB%8C%DA%A9%DB%8C%D8%B4%D9%86-vod-fvruits9zklg اول با تعریف کاربرا شروع کنم. چیزی که همگی توی شرکت روش اجماع نظر داریم اینه که ما و امثال ما مشتری‌های اصلی این بیزینس نیستیم. ما عادت کردیم به دانلود غیرقانونی فیلم و سریال و تا زمانی که اینترنت وصل باشه اگر همه‌ی سایت‌ها رو هم فیلتر کنند از طریق Torrent هم شده فیلم‌هامون رو پیدا می‌کنیم و حاضر به پرداخت پول نیستیم. فیلم و سریال ایرانی هم معمولا نمی‌بینیم و چون با سانسور هم حال نمی‌کنیم دوبله کردن فیلم برامون ارزشی نداره. زیرنویس رو هم که راحت پیدا می‌کنیم. تماشای رایگان برای ایرانسلی‌ها هم که فعلا در انحصار فیلیمو و مزیت ما نیست. پس تنها مزیت ما سهولت استفاده می‌تونه باشه برای همین بهش خیلی بها می‌دیم.من تعریف کردم که کیا کاربر ما نیستن. الان وقتشه فرضیاتی که در مورد کاربرامون داریم رو بررسی کنیم. کاربرای ما کسانی هستند که یا به دلیل سن بالا یا دوری از شهرهای بزرگ یا عدم علاقه اهل تکنولوژی نیستن و تنها استفادشون از اینترنت اینستاگرام و تلگرامه.این یعنی اپلیکیشن ما هر چقدر بتونه به تلگرام یا اینستاگرام شبیه‌تر باشه کاربر می‌تونه سریعتر و بدون آموزش ازش استفاده کنه و باهاش ارتباط برقرار کنه.تصویر شماره ۱به دلایل واضحی انتخاب ما از این دو، اینستاگرام بود. به جای Card Sorting با بنچمارک نمونه‌های ایرانی و خارجی مشخص شد که در لایه‌ی اول معماری اطلاعات صفحه‌ی اصلی (home page)، دسته‌بندی‌ها و پروفایل مهمترین دسته‌ها هستند و ما نیز آنها را حفظ کردیم و برای شباهت بیشتر با اینستاگرام و نیز قراردادن دکمه‌ی پر کاربرد جستجو در Thumb zone آن را از بالای صفحه که در اکثر اپلیکیشن‌ها قرار داد به پایین صفحه منتقل کردیم که خروجی شبیه تصویر شماره ۱ سمت راست شد.نکته‌ی مهم دیگر اینکه ما می‌خواستیم که مشابه کاری که پرهام خوشبخت در این مقاله برای فیلیمو انجام داده است انجام دهیم و با ابر کلمات مشکلات کاربرها رو لحظه به لحظه رصد کنیم در نتیجه اضافه کردن FAB پشتیبانی در تمام صفحات ناگزیر بود( به جای آنکه آن را در صفحه‌ی پروفایل یا تماس با ما قرار دهیم) و خروجی شبیه به تصویر شماره ۱ سمت چپ شد.تصویر شماره ۲اما همانطور که گفتم کاربران ما افراد تکنولوژی نیستن در نتیجه احتمالا مثل ما گوشی‌های رده بالا با سایز نمایشگر ۵ اینچ به بالا ندارند در نتیجه قرار دادن ۵ تب در موبایلی با عرض 360 پیکسل باعث کاهش دقت لمس دکمه و شلوغی طرح می‌شه. در این مرحله یک گام فراتر رفتیم و با بررسی‌ها متوجه شدیم درصد کم اما مهمی از کاربران احتمالی ما موبایل با عرض صفحه نمایش 320 پیکسل دارند در نتیجه تصمیم گرفتیم این موضوع را با انیمیشن جبران کنیم. به این معنی که زمانی که کاربر به پایین صفحه اسکرول می‌کند تب بار مخفی شده و FAB نمایان شود و بلعکس. در این حین با مدل جدید Tab Bar پینترست آشنا شدیم که به نظرمون برای کاری که ما می‌خواستیم بکنیم ایده‌آل بود. چون برای اپلیکیشن ما که پوستر فیلم‌ها بسیار مهمه قسمت کمتری از صفحه را می‌گرفت.تصویر شماره ۳اما فقط به این بسنده نکردیم با گشت و گذار در Dribbble ،Behance و Pinterest به تصویر شماره ۳ برخوردیم که با یک انیمیشن بسیار زیبا به جای فقط محو/ظاهر شدن Tab Bar و FAB آنها را به هم تبدیل کنیم که نسبت به سایر کارهای تیم توسعه هزینه‌ی بسیار زیادی برای پیاد‌ه‌سازی این انیمیشن بر روی دست ما گذاشت (هنوز هم تمام نشده است) که مجاب کردن مدیرعامل به صرف هزینه با این دو دلیل ممکن شد.۱. اعتماد شخصی که به مرور و با انجام A/B Testها و افزایش Conversion Rate اتفاق افتاده بود.۲. توضیح اینکه یک چنین انیمیشنی باعث می‌شود سرمایه‌گذاران راحت‌تر به توانایی فنی ما اعتماد کنند.تصویر شماره ۴مشکل بعدی قراردادن عنوان در کنار آیکن‌ها بود که با توجه به ارتفاع 48 پیکسلی تب‌بار قراردادن هردوی آنها به نحوی که هم خوانایی و تشخیص از بین نرود و هم فضای سفید رعایت شود کار سختی بود. (به خصوص با وجود کلمه‌ی طولانی دسته‌بندی‌ها) برای اینکار دوباره به سراغ نمونه دیدن رفتیم و در نهایت تصویر شماره ۴ توجهمون رو جلب کرد و قرار شد این را پیاده کنیم.تصویر شماره ۵در طرح ما صفحه‌ی تنظیمات قرار بود در داخل پروفایل قرار بدیم که با Guerrilla testing انجام شده مشخص شد پیدا کردنش برای مخاطب راحت نیست در نتیجه آیکن پروفایل رو به نمونه‌ی تصویر بالا شماره ۵ سمت راست تغییر دادیم و این موضوع تا حدودی بهتر شد اما چون کلمه‌ی مناسبی پیدا نکردیم عنوان آن را پروفایل نگه داشتیم. همچنین در این حین متوجه شدیم که سایه رنگی در React Native اندروید پشتیبانی نمی‌شود.برای Transition بین صفحات هم از حرکت افقی متناسب با جایگاه Tabها استفاده کردیم که متناسب با انتظار کاربر باشد.همچنین مشابه Breadcrumbs را نیز تصمیم گرفتیم در اپ پیاده کنیم برای همین وقتی کاربر به صفحات داخلی (مثلا سریال یا یک دسته‌ی خاص در دسته‌بندی‌ها) می‌رود تا زمانی که به صفحه‌ی فیلم نرسیده است که Tab bar با Toolbar عوض می‌شود برای برگشت به یک صفحه‌ی بالاتر مشابه تصویر شماره ۵ سمت چپ در Site map از دکمه‌ی بازگشت بر روی Tab barاستفاده کردیم. (این مورد فرض است و نیاز به Usability Test دارد.)یکی از مهمترین سوالات و پارادوکس‌هایی که من همیشه با آن روبرو بوده‌ام جهت حرکت به جلو به عقب در اپلیکیشن است که در مقاله‌ی چه پترن‌هایی در زبان فارسی قرینه می‌شوند؟ هم بسیار در مورد آن صحبت کرده‌ام. علاقه و استدلال شخصی من مشابه زبان انگلیسی است و برای آن توجیهات بسیاری دارم. اما در این مورد به خصوص یک موضوع دیگر حجت را بر من تمام کرد.چون جهت جلو رفتن نوار نمایش فیلم از چپ به راست است و اصلا نمی‌شود آن را تغییر داد به دلیل حفظ consistency داخل اپلیکیشن تصمیم گرفتیم حتما آیکن برگشت را به سمت چپ طراحی کنیم.تصویر شماره ۶یک مورد مهم دیگر هم که در طراحی Toolbar در نظر گرفته‌ایم که می‌خواهیم در نسخه‌ی یک تست کنیم استفاده از آیکن و مفهوم دست زدن به جای لایک و Dislike، ستاره یا امتیاز عددی است. این مورد را از مدیوم الهام گرفته‌ایم.دلیل آن هم سه نکته است.1. با توجه به مقاله‌ی طراحی تجربه کاربریِ سیستم امتیازدهی (Rating) هر یک از این گزینه‌ها مشکلاتی دارد.2. برای شناخت سلیقه‌ی کاربر و در نتیجه ارائه‌ی پیشنهادات متناسب می‌خواهیم چیزی شبیه Tinder را پیاده کنیم اما صرف دوست داشتن یا نداشتن مهم نیست و باید ملاکی بازه‌ای انتخاب کنیم. بازه‌ی عددی دادن خوب است اما اینجوری ممکن است شما به کلی فیلم امتیاز ۵ بدهید در حالی که همه‌ی آنها را به یک اندازه دوست نداشته باشید.3. بر اساس اصل دوم Heuristic Evaluation و Interaction design اینکار باعث شبیه سازی به دنیای واقعی می‌شود. شما زمانی که به سینما و تئاتر می‌روید برای فیلم خوب لایک نمی‌فرستید بلکه دست می‌زنید و هر چقدر بیشتر دست بزنید بیشتر از آن فیلم لذت برده‌اید.در نهایت هم نمایش شهودی این دست زدن را مشابه لایک استوری اینستاگرام قرار دادیم که این آشناپنداری باعث درک بهتر آن شود.در نهایت خروجی کار رو در اینجا می‌تونین ببینین.آنچه در بالا خوانید فقط بخش کوچکی از مسیری است که ما برای طراحی اپلیکیشن خود پیش گرفته‌ایم.برای اینکه با ماهیت Tab bar آشنا بشم مجبور شدم کلی مقاله بخونم که ماحصلش شده مقاله‌ی چک لیست طراحی Tab Bar / Bottom Navigationبه همین ترتیب برای طراحی صفحه‌ی جستجو حاصل کلی مقاله خوندن و نمونه دیدن شده مقاله‌ی چک لیست طراحی Search Boxماحصل مطالعه و شناخت دقیق صفحه ثبت نام/ورود و آنبوردینگ هم در این بین شد مقاله‌ی چک لیست طراحی فرم ثبت‌نام و چک‌لیست طراحی User Onboarding اپلیکیشن.در حالی که برای طراحی فرم ثبت نام شدیدا میخواستم از مودال استفاده کنم با مطالعه چک لیست طراحی Modals نظرم عوض شده و تصمیم گرفتم استفاده نکنم.برای اینکه به اهمیت عنوان و آیکن پی ببرم و تصمیم بگیرم که از آیکن خطی استفاده کنم یا توپر مقاله خوندم که نتیجش شده مقاله‌ی ۷ اثر روانشناسی تاثیرگذار بر Iconography.این مقالاتی که من منتشر کردم حاصل تحقیق برای رسیدن به سوالاتی بوده که در خلال طراحی این اپلیکیشن بهشون بر خوردم. امیدوارم بعد از این که به مقالات من سر می زنید ضرورت استفاده از آنها را بیشتر درک کنید.از این دست مقالات:بررسی موردی طراحی Tab bar پف‌فیلم - در حال مطالعهبررسی موردی طراحی Login Page پف‌فیلمبررسی موردی طراحی Splash Screen پف‌فیلمبررسی موردی طراحی Payment Result Page پف‌فیلم پف فیلم امیر تقی آبادی Mon, 03 Feb 2020 12:43:32 +0330