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

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