مصطفی علوی نیک
مصطفی علوی نیک
خواندن ۶ دقیقه·۵ سال پیش

تحلیل UI/UX اپلیکیشن چیلیوری

من به عنوان مدیر محصول چابک، بهتر دونستم مطلبی مرتبط با این موضوع بنویسم و تقدیم دوستان خوبم در چیلیوری کنم تا شاید بتوانند برخی موارد را در نظر گرفته و باعث رشد بیشتر این کسب و کار شود. همچنین با توجه به اینکه جدیدا دو کسب و کار ریحون و چیلیوری در هم ادغام شدند، نشانه ی یک تحرک خوب و جدید است و امیدوارم انحصار طلبی هایی که بیش از این در این مدل کسب و کارها وجود داشت را از بین ببرند.

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

مسلما یک کسب و کار فعالی چون چیلیوری در حال رفع مشکلات و یا حتی طراحی مجدد میباشد،و خیلی از این مواردی که در این مقاله به آن اشاره شده را آگاهی دارند، اما من بر اساس آن چیزی که در حال حاضر فعال و قابل دسترسی (قابل نصب از کافه بازار) میباشد نظرم رو اعلام میکنم. همچنین ممکن است بعضی از این ایرادات متوجه توسعه دهنده باشد و نه طراح.


صفحه ی خانه به عنوان ویترین هر اپلیکیشن تلقی میشود و این ویترین عمدتا بایستی بر اساس خواسته های اکثر کاربران و مهمتر از آن، بر اساس خواسته های کاربر فعلی طراحی شود که با مشاهده این صفحه به این نتیجه میرسیم در این رابطه هیچ اقدام درست و موثری بوجود نیامده و این مورد دیده نمیشود. همچنین تعامل در این صفحه در سطح بسیار پایینی قرار دارد که خود مسیله بزرگیست. با بررسی دیگر اپلیکیشن های جهانی مانند Deliveroo و تجارب ناقصم، میتوان پیشنهاداتی در این رابطه ارایه کرد:

  • مشاهده آخرین رستوران هایی که از آن سفارش ثبت شده (توسط خود کاربر)
  • کتگوری های متفاوت غذاها (ایتالیایی، سنتی و ...)
  • رستوران ها با پیشنهادات جدید
بخشی از صفحه خانه ی دلیورو
بخشی از صفحه خانه ی دلیورو


همچنین، چیلیوری از نظر UI نیز دارای اراداتیست از جمله تراز نبودن آیکنها و متون که وزن بصری رو تحت شعاع قرار میدهد (Optical Alignment) که در تصویر زیر نمونه ای آن مشهود است. همچنین با کمی دقت میتوجه میشویم آیکنها از یک خانواده نیستند. چراکه نه تنها ضخامت خطوط متفاوت هست، بلکه گوشه های آیکن ها یکنواخت نیستند.

متون و آیکنها Align نیستند
متون و آیکنها Align نیستند

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

طراحی کلی صفحه خانه من رو یاد طراحی های ۴-۵ سال پیش که خیلی باب بود (آن زمان که در ایران واقعا مفاهیم UX اصلا اجرا نمیشد یا فقط اسمی از آن وجود داشت) میندازه و حس خوبی با آن برقرار نمیکنم.

یکی از چیزهایی که آن دوره باب شد، استفاده از تب باری همانند اینستاگرام بود. خوب این تب بار درسته در اپلیکیشنی مانند انیستاگرام خیلی ارزشمند و کاربردیست، اما در اپلیکیشن سفارش غذا چطور؟ بیایم این تب بار رو در این اپلیکیشن بیشتر بررسی کنیم.

بعضی دوستان ممکن است عنوان کنند که اینجا ایران است با کاربرای ایرانی و تو، کاربران ایرانی رو نمیشناسی و بیشتر با شرکتهای خارج از ایران کار میکردی این مدت و داری مقایسه اشتباه میکنی و خیلی ایده آل گرایی و ... . خوب تا حدی با این متن مخالف نیستم، ولی این نکته رو بگم که طراحی UI/UX یعنی چه؟ مگر غیر از این هست که کاربرت رو خوب بشناس و متناسب با آن و انجام تستهای A/B بیایم و تصمیم نهایی بگیریم و تعامل و نرخ های متعدد رو اصلاح کنیم؟ خوب بیاین همین کار رو انجام بدید. ولی اینو بدونید استفاده از نمونه های موفق در طراحی، احتمال ریسک کار رو به شدت کاهش میده. کاری که قبلا یک گروهی خیلی خوب انجام دادند رو بیاین تحلیل کنید و نقاط مثبت و منفی متناسب با کاربر خودتون رو ازش استخراج کنید و طرحهای بهتری رو ایجاد کنید.

صفحه ی خانه و رستوران ها رو که براحتی میتوان ادغام (Merge) کرد. سبد خرید مسلما در این اپلیکیشن، مختص فقط و فقط یک رستوران هست. به عنوان مثال وقتی شما وارد یک رستوران بنام حسن میشوید و غذا ثبت میکنید(غذایی به سبد سفارش اضافه میکنید) و وارد رستوران محمد میشوید و مجدد غذا ثبت میکنید، متوجه میشوید در سبد خرید فقط غذاهای آخرین رستوران وجود دارد. و مسلما نمیتوان از چند رستوران همزمان سفارش داد (مگر اینکه این اتفاق بیافتد). پس سبد خرید وابسته به رستوران و در رستوران معنی میدهد و میتوانیم آن را به همان صفحه رستوران منتقل کنیم.

بخش ثبت نام و ورود اما بسیار مهم و ارزشمند است. مخصوصا برای کاربر قدیمی که دارای آدرس از قبل تعریف شده و تاریخچه خرید و ... میباشد. ولی آیا فقط برای یک مورد، ما میتونیم یک تب بار به آن عریضی را در پایین همه ی صفحات نگه داریم؟ مسلما این منطقی نیست. بیایم یک سر به اپلیکیشن دلیورو بیندازیم.

دلیورو
دلیورو

آیکن ورود در بالا سمت راست قرار گرفته است. با کلیک بر روی آیکن، وارد صفحه ی جدیدی میشویم که علاوه ورود و خروج، سفارشات قبلی، آدرسهای قبلی و حتی تنظیمات اپلیکیشن و درباره دلیورو نیز قرار گرفته شده است. عملا صفحه ی ورود و خروج و صفحه ی بیشتر (در چیلیوری)، در این اپلیکیشن(دلیورو) Merge شده اند.

با توجه به اینکه اکثر کاربران با آیکن ورود آشنا هستند(میشه از کاربران نظرسنجی کرد)، میتوان بدون در نظر گرفتن عنوان، آیکن را به تنها استفاده کرد.

با این فرض که شاید بگید نه و داده ها و نظرسنجی ها و ... چیز دیگری میگند ، میتونید از OnBoarding tutorial یا موارد دیگر در آموزش کاربر استفاده کنید یا اینکه برای آیکن بصورت موقت، از عنوان استفاده کنید

در مورد لودینگها، نمیتونم نظر خاصی بدم. ولی شاید نگاهی به مدل skeleton screens و یا موارد دیگر شاید بد نباشه.

YouTube’s home screen loading state in 2018
YouTube’s home screen loading state in 2018

بسته های چیلیوری VIP

به اینکه چقدر این بسته ها خوب و ارزشمند هستند(مسلما ارزشمند هستند)، ورود پیدا نمیکنم و به مباحث UI و UX آن میپردازم.

با توجه به اینکه این ویژگی احتمالا جدید باشد، انتظار کاری متفاوت و ارزشمندتر را از چیلیوری داشتم. ولی اشتباهات بسیار غیر قابل باوری مشاهده کردم که به این نتیجه رسیدم احتمالا در تیم چیلیوری، نه طراح گرافیکی وجود دارد و نه طراح UI/UX . شاید هم اینقدر سرشون شلوغه که به این موارد اهمیت نمیدند.

صفحه ی بسته های VIP چیلوری
صفحه ی بسته های VIP چیلوری

خوب این صفحه در نگاه اول کاملا دفع کننده است. نه تنها در درک آن، بلکه در نگاه به آن (چشم). چرا؟

اول اینکه متن این صفحه اصلا و اصلا بر پایه ی توانایی یک UX writer نوشته نشده و حتی یک کپی رایتر آشنا به کاربر هم ننوشته. مشخصه متن رو از روی طرح و مستندات مرتبط با این فیچر جدید، کپی پیست کردند. و این متن من رو یاد قوانین و شرایط خرید یک اینترنت ADSL میندازه که توسط شرکتهایی چون مخابرات و ... به کاربر نشون داده میشه.

حتی فاصله بین پاراگراف ها و خطوط اصلا رعایت نشده. عملا تصورم من این هست که Android studio باز شده. وارد Layout مربوط به صفحه ی بسته ها شده و متن رو عیننا از ورد کپی پیست کردند.

دوم اینکه از نظر گرافیکی، دارای ایرادات بسیاریست. به تصویر زیر نگاه کنیم.

کیفیت تصویر استفاده شده رو ببینید."۱۰ خرید یک ماهه".

سوم، چرا استفاده از رنگ خاکستری؟ رنگ خاکستری برای تصاویر و دکمه ها، عمدتا به معنای غیر فعال بودن و غیر قابل کلیک یا غیر قابل درخواست استفاده میشود. در نگاه اول تصور کردم که این بسته تمام شده. ولی با لمس دکمه آن، دیدم که نه، بلکه اشتباه طراحی بوده.

همچنین رنگ بندی ها رعایت نشده. رنگ فونت سفید بر روی دکمه خاکستری به هیچ عنوان درست نیست و حداقل چند مورد اشکال دیگر در این صفحه قابل مشاهده هست. (رنگ شناسی)


موارد از این دست بسیار بودند و باعث طولانی شدن این مقاله. تا اینجا مطلب رو تمام میکنم و در آینده به دیگر بخشها نیز میپردازم.

منتظر نظراتتون هستم.

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

https://virgool.io/@alavinik


چیلیوریتحلیل ui uxکسب و کاراستارتاپمدیر محصول
مدیر محصول دیتا (همیشه در حال یادگیری) https://www.linkedin.com/in/nixon-alavinik/
شاید از این پست‌ها خوشتان بیاید