برای خیلیهامون پیش اومده که با اپلیکیشنهایی کار کردیم که امکانات زیادی داشتن، اما استفاده ازشون سخت، گیجکننده یا حتی خستهکننده بوده. این یعنی مسیر کاربر یا تجربه کاربری در اون اپ درست طراحی نشده. در نتیجه، با اینکه اپلیکیشن کامل بوده اما تجربه کاربری ضعیف باعث میشده کاربر دلزده بشه، استفاده نکنه و در نهایت اپ رو پاک کنه.
به همین خاطر، هدف من از ریدیزاین این اپلیکیشن استریم فیلم، بهبود تجربه کاربری و رابط کاربری اون بود که با الگوهای آشنایی که کاربران با اون در تعامل هستند مثل یوتیوب و فیلیمو هماهنگ باشه تا کاربر راحتتر مسیرش رو طی کنه و ارتباط بهتری با اپ برقرار کنه.
حالا بریم ببینیم چه مساله هایی وجود داشت و چطور برطرف شدن. :)
وقتی اپلیکیشن رو بررسی میکردم، چند تا مشکل واضح بود که از نظر رابط کاربری و تجربه کاربری اشکال داشت: مثل یکسان نبودن آیکون ها، شلوغی صفحه اصلی با دکمه های با اهمیت کمتر، پیچیده بودن جستجوی فیلم و ... که در ادامه میخواهیم اونا رو بررسی کنیم و ببنیم چطور میشه این موارد رو حل کرد:
مشکل:
بعضی از آیکونهای نوار پایین (Bottom Navigation Bar) به صورت پر و بعضی خطی طراحی شده بود و آیکون های نوار پایین (Tab Item)ها هم مناسب نیاز کاربران نبود
چند دکمه کالتواکشن کم استفاده وسط صفحه اصلی بود که فقط باعث شلوغی میشد
معرفی بازیگران هم بلافاصله بعد از دکمههای کم استفاده قرار داشت که اولویت کاربران نبود.
کاربر نمیدانست کدام فیلمها را شروع کرده و تا انتها ندیده.
راهحل:
همه آیکونهای نوار پایین از یک خانواده و با استایل یکسان انتخاب شدند.
Tab Item ها هم دوباره طراحی شدن و از ساختار قبلی (خانه – سینمایی – سریال – علاقهمندی) به (خانه – دستهبندی – جستجو – علاقهمندی) تغییر کرد تا کاربر راحتتر بتونه مسیرش رو پیدا کنه.
دکمه ها به بخش های دیگه منتقل شد و جای معرفی بازیگران رو با یک اسلایدر فیلمهای جدید جایگزین کردم تا کاربر با محتوای تازه بیشتر آشنا بشه.
یک بخش «در حال تماشا» به صفحه اصلی اضافه کردم تا ادامه فیلمها سریع در دسترس کاربر باش
مشکل:
کاربران در صفحه اصلی هنگام انتخاب فیلم دچار سردرگمی میشدند، چون دستهبندیها فقط به صورت کلمهای و ترکیبی از ژانر و مضمون نمایش داده میشد.
راهحل:
یک صفحه جداگانه برای دستهبندی طراحی شد که در آن فیلمها بر اساس ژانر و با کارتهای تصویری نمایش داده میشوند و این کار انتخاب و یافتن فیلمهای مورد علاقه را برای کاربر بسیار سادهتر کرد.
مشکل:
کاربران برای جستجو مسیر سختی داشتن؛ آیکون فقط بالای صفحه بود و دو بخش جداگانه «جستجو» و «جستجوی پیشرفته» هم کار رو پیچیدهتر میکرد.
راهحل:
آیکون جستجو به نوار پایین جابجا کردم تا بیشتر در دسترس باشه و دو بخش «جستجو» و «جستجوی پیشرفته» یکی کردم و فیلترهای مهم رو به صورت منوی دراپ داون طراحی کردم تا فرآیند جستجو سریعتر و کاربرپسندتر بشه.
مشکل:
در حین تماشا کاربر نمیتونست کیفیت فیلم رو تغییر بده
راه حل:
یک منوی جانبی از سمت راست طراحی کردم که همزمان بتونه موقع فیلم کیفیت فیلم، دوبله و زیرنویس رو عوض کنه
دو بخش «تایمر خواب» و «پخش خودکار قسمت بعدی» اضافه کردم تا تجربه کاربری بهتری باشه
مشکل:
کاربر برای انتخاب کیفیت باید بعد از کلیک روی پخش، وارد یک صفحه جدید میشد.
منوی انتخاب قسمت خیلی طولانی بود، چون بر اساس کیفیت، زبان و فصل تکرار میشد.
در نسخه قبلی فقط با کلیک، فیلم به حالت «دیده شده» تغییر میکرد.
راهحل:
فیلم با یک کلیک پخش میشود و کاربر میتواند کیفیت را مستقیماً از داخل پلیر تغییر دهد.
قسمتها فقط بر اساس فصل نمایش داده میشوند و کیفیت/زبان از داخل پلیر تغییر میکند.
یک پروگرسبار اضافه کردم که میزان پیشرفت تماشای هر فیلم را نشان میدهد.
نتیجهگیری
بعد از این بازطراحی، مسیرهای اصلی اپلیکیشن مثل جستجو، پخش فیلم و پیدا کردن محتواهای جدید کوتاهتر، شفافتر و راحتتر شدن. صفحه اصلی هم مرتبتر و کاربردیتر شده و کاربر بدون سردرگمی، مستقیم سراغ محتوای موردنظرش میره.
به طور مشخص، با سادهسازی دستهبندیها، حذف بخشهای اضافی، اضافه کردن اسلایدر فیلمهای جدید و بخش «ادامه تماشا» و بهبود مسیر پخش فیلم و جستجو، تجربه کاربری بهطرز محسوسی بهتر شده و تعامل کاربر با اپ راحتتر و لذتبخشتر شده.
مهمترین چیزی که از این پروژه یاد گرفتم این بود که گاهی سادهسازی مسیرها، استفاده از الگوهای آشنا و طراحی واضحتر، حتی بدون اضافه کردن قابلیتهای جدید، میتونه تجربه کاربر را به طور چشمگیری بهبود بده.
اگر علاقه داری میتونی نسخه کامل پروژه در فیگما رو ببینی که شامل استایل گاید، کامپوننتها و ماکاپها هم هست و خوشحال میشم نظرت رو بهم بگی. ممنون که این مقاله رو خوندی!🙏🌱
