سمانه رستمی‌پور
سمانه رستمی‌پور
خواندن ۴ دقیقه·۴ سال پیش

فاز2:طراحی مجدد UI و UX اپلیکیشن کمدا

یادداشت نکات جمع آوری شده از فاز1 جهت اعمال در طراحی:

بدلیل حجم بالای کار و زمان بر بودن ریدیزاین کل اپلیکیشن،با هماهنگی استاد مربوطه تنها به طراحی رابط و تجربه کاربری مشکل دارترین و در عین حال پرکاربردترین بخش اپ یعنی بخش «خانه» کمدا پرداخته شده است.

1) ترکیب آیتم های «خانه» و «جستجو» برای دم دست بودن آیتم های ضروری در قسمت «خانه» و با هدف تغییر کاربری قسمت جستجو به بازارگردی.

2) دسته بندی ها با نظم باشد و از کلمات قابل فهم استفاده شود که کاربر گیچ نشود.

3)پروفایل های(در قالب استوری)کمشاخ ها بزرگتر و بالاتر از کمدهای جادویی نمایش داده شود که کاربران را به فعالیت بیشتر در کمدا برای دیده شدن ترغیب کند نه پول دادن و جادویی کردن کمد.

4)دسته بندی ها،کالکشن و... بصورت ستونی و پنجره بسته باشد که شلوغی را به حداقل برساند (در صورت نیاز کاربر با tab باز شود)

5)قابلیت سرچ با هشتگ(هشتگ های آماده جهت افزایش در سرعت کاربری)

6)تبلیغات در بالای صفحه بصورت رندوم نمایش داده شود که کاربر در صورت نیازش با ضربه زدن بر هر صفحه تبلیغ وارد سایت مربوطه شود و در صورت عدم تمایل آن را ببندد(با هر بار رفرش مجددا اپ نمایش داده خواهد شد).

7)امکان تعیین رنج قیمت،تعیین برند،رنگ و جنس توسط فیلترها

8) محو شدن بکگراند اپلیکین بهنگام باز کردن داشبور اصلی(داشبورد دایره ای) جهت جلوگیری از پرتی حواس کاربر و فوکوس بر هدف

طراحی Low-Fidelity-Wireframes


طراحی low-fidilety-wireframe برای صفحه «خانه» اپلیکیشن کمدا :

سناریو

از بین سناریوهایی که کاربران کمدا میتوانند داشته باشند طراح دو سناریو ورود و استفاده از «خانه» کمدا را در نظر گرفته:

در سناریو1 کاربر تنها به قصد خرید محصول مورد نظر عضو میشود و دنبال سریع ترین و کاربردی ترین مسیر برای جستجو،مقایسه،تعامل و خرید است و در سناریو2 کاربر عجله ای برای خرید ندارد و حتی تمایل دارد ارتباط نزدیک تری با اپ برقرار کند چرا که بتواند اپ شماره یک زندگی روزمره او شود و افرادی را دنبال کند و همانند اینستاگرام مشغول چالش ها،آموزش ها و دیگر کاربری هایش شود .
این مدل طراحی، کاربردپذیری سریع و آسان برای کاربر با هر دو سناریو ذکر شده را به همراه می آورد.
لازم است متذکر شد که طبق بررسی های انجام شده تفکر طراحی بنیانگذار اپ کمدا به تعاملی و دوستانه تر کردن کمدا گرایش دارد.
از این رو قسمت«خانه» کمدا به سه بخش تقسیم شد که کاربر با سناریو1 تنها با بخش«کمدا من» میتواند به هدف خود که انتخاب و خرید محصول مورد نظر و عدم تعامل بیشتر با اپ است برسد و بخش های «علاقمندی ها» و «دوستان» برای کاربر با سناریو2 که تمایل به تعامل بیشتر با اپلیکیشن و کاربرانش دارد،طراحی شده است.

ایده ها:

  • بخش «کمدا من» صفحه ی «خانه» اپ کمدا، جهت استفاده برای کاربرانی که تنها قصد خرید و فروش دارند و برای آنها زمان مهم است و تمایلی به تعامل بیشتر با کمدا ندارند.
  • قرار گرفتن پست ها و اطلاعیه های به اشتراک گذاشته شده ی افراد دنبال شده بوسیله ی کاربر به ترتیب زمان اشتراک گذاری(مانند اینستاگرام)؛ در بخش «دوستان» صفحه ی «خانه» اپ کمدا
  • قرار دادن انواع علاقمندی های قابل شخصی سازی برای کاربر در بخش«علاقمندی ها» صفحه «خانه»اپ کمدا
بعد از طراحی وایرفریم های اولیه بصورت دستی و با توجه به فهم مسئله؛ به طراحی با جزئیات بیشتر در لایه ی انسان، با توجه به آموزه ی های آقای علی بابایی پرداخته شده که در ادامه به بعضی از موارد بطور مختصر اشاره خواهد شد:

High-Fidelity-Wireframes:

ارگونومی فیزیکی:

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


شناخت فاکتورها و محدودیت های شناختی در تعامل:

  • تصمیم گیری : کنجکاوی کاربران برای شناخت اپلیکیشن آنها را به تست رابط کاربری و تشویق به تعامل با اپ وا می دارد؛که در شکل به آن اشاره شده است.
  • یادگیری: استفاده از فضایی آشنا مانند اینستاگرام و توییتر و نیز آیکون های معمول
  • محدودیت های حافظه: اندازه و شکل متفاوت داشبوردها جهت قابلیت به یادآوری بیشتر کاربر
  • پیش بینی: استفاده از آیکون هایی که خود افوردنس استفاده را به کاربر القا می کنند مانند آیکون + و «ضربدر» در داشبورد ها

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

  • سطح رفتاری: پاسخگویی به انجام هر عمل کاربر در هر مرحله
  • سطح بازتابنده: بازخورد آنی به کاربر بعد از انجام هر عمل- استفاده از رنگ های لوگو در طراحی بخش های اثرگذار رابط کاربری که به کمک هویت سازمانی بازتابنده استارتاپ کمدا باشد.

لینک پروتوتایپ ساخته شده با Adobe XD:

https://xd.adobe.com/view/64a8cde2-483d-4e9a-b3b6-eb7f845ed1ee-31fb/?fullscreen&hints=off

در فاز بعدی به تست کاربردپذیری این پروژه پرداخته شده است.

با تشکر از توجه شما

ux uiکمدافاکتورها و محدودیت های شناختی در تعاملLow Fidelity WireframesHigh Fidelity Wireframes
UI/UX Designer at EBCOM
شاید از این پست‌ها خوشتان بیاید