بررسی موردی طراحی Login Page پف‌فیلم

پس از مقاله‌ی بررسی موردی طراحی 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 قابل پیاده‌سازیه که از اینجا می‌تونین توضیحات پیاده‌سازیشو بخونین. این موضوع رو ما تصمیم گرفتیم نداشته باشیم چون متن پیغام رو به انگلیسی نشون می‌ده و پرسنای اندرویدی ما کمتر با انگلیسی آشنایی داره.

اون استیکر ? هم که برای اشاره‌ی بیشتر به کده که البته در بعضی از سرشماره‌ها به درستی ارسال نمی‌شه.

و اما مهمترین بخش کد اون Hash پایین پیامکه که با ویژگی به نام SMS Retriever API باعث می‌شه کاربر اندرویدی حتی نیاز به وارد کردن کد هم نداشته باشه و به صورت خودکار وارد بشه. این امکان خفن رو من فقط در اپلیکیشن‌های محدودی مثل شیپور و آدرس دیدم.

همینطور که می‌دونین خوندن پیامک‌های کاربر نیاز به دسترسی داره که اصلا خوشایند نیست یه اپلیکیشن VOD چنین دسترسی رو درخواست کنه چه برسه که اجباریش کنه. برای همین گوگل در اندرویدهایی که نسخه‌ی Google play services 10.2x یا بالاتر دارند این امکان رو قرار داده که یه Listener در کدتون داشته باشین که اگر در پیامکی Hash code اپلیکیشن وجود داشت استثنا می‌تونه کد داخل اون پیامک رو از اندروید بگیره. اینجوری کاربر اندرویدی که اتفاقا جامعه هدف ما هستند بدون هیچ Interaction Cost می‌تونه وارد بشه.

زمانی که اپلیکیشن رو توی گوگل پلی بارگذاری می‌کنین هش کد اپلیکیشن تغییر می‌کنه پس حواستون باشه که هش کد رو استاتیک وارد نکنین.

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

صحبتی با طراحان تازه‌کار

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

همچنین چیزی که زیاد دیدم در صفحه‌ی ثبت‌نام می‌زارن اینه که نام کاربری می‌پرسن. (?WTF) نام کاربری دیگه منسوخ شده و تنها در مسنجرها و شبکه‌های مجازی کاربرد داره در نتیجه نیازی نیست که از کاربر بگیرین. همچنین اینکه ایمیل بگیرین یا شماره موبایل یا هر دو یه موضوع کسب‌وکاریه نه اینکه بگین چون صفحه خالی یا شلوغ بود این تصمیم رو گرفتم. براش باید توجیه داشته باشین.

اگر می‌خواهین طراح خوبی بشین باید چشمای تیزبینی داشته باشین. من توی این IGTV یه سری از مشکلاتی که در صفحه‌ی ثبت‌نام یک اپلیکیشن دیدم لیست کردم که می‌تونین ببینین چطور باید این توانایی رو در خودتون تقویت کنین.

از این دست مقالات:

بررسی موردی طراحی Tab bar پف‌فیلم

بررسی موردی طراحی Login Page پف‌فیلم - در حال مطالعه

بررسی موردی طراحی Splash Screen پف‌فیلم

بررسی موردی طراحی Payment Result Page پف‌فیلم