طراحی رابط کاربری بانک تجارت
کاری از آرین مقبلی
لازم بود نرم اقزار موبایل بانک تجارت، امکانات بیشتری اضافه بشه و رابط کاربری نرم افزار هم بعد از مدتها بروز بشه.
از طرف شرکت عصر دانش افزار از من خواستن تا وظیفه تغییر UI محصول رو به عهده بگیرم.
مدتها بود نرم افزار منتشر بوده بود و با همه اشکالات و کمبودهایی که داشت برای کاربرها عادت شده بود.
در این شرایط هر تغییر جزئی در ساختار نرم‌افزار میتونست موجی از نارضایتی کاربرها رو به همراه داشته باشه و اونها رو گیج کنه.
هدف من به عنوان طراح رابط‌کاربری، قبل از هر چیز ایجاد محیطی آشنا و راحت برای کاربر بود.
فضایی اطمینان بخش که حس یک بانک رو به کاربر القا کنه.
به صورت معمول هم بسیاری از اطرافیانمون دید خوشایندی به فضای مجازی (مخصوصاً داد و ستد از اون ) ندارند.
پس باید به چند سوال پاسخ داد:
مهمترین سوال‌ها شاید این باشه: مخاطب و گروه هدف استفاده کننده از این نرم افزار چه افرادی هستند؟
این نرم افزار طیف وسیغی از کاربرها رو دربر میگیره. به طور کلی هر شخصی که از بانک استفاده می‌کنه باید ترقیب بشه تا از این نرم افزار استفاده کنه.
- نکته جذابی که این موبایل بانک داشت این بود که کاربر هر بانکی میتونست از خدمات این سامانه استفاده کنه و الزامی نبود که حتما در بانک تجارت حسابی داشته باشه.
با نگاهی به شمایل نسخه قدیمی با طرز کار اون آشنا شدم
برنامه فضای شلوغی داشت. از نور و سایه‌هایی برای نمایش برجسته اکشن‌بار استفاده شده بود.
حتی برای پس زمینه از یک نقش با جزئیات زیاد استفاده شده بود که در طولانی مدت باعث خستگی کاربر می‌شد.
بعضی صفحات در هم ادغام شده بودند و وجود چند دکمه با کاربرهای مختلف صفحه رو آشفته میکرد.
نوبت من بود
رابطه صفحات و هماهنگی بین اونها رو با رسم وایرفریم پیاده کردم.
زیاد نمی‌شد با ساختار نرم‌آفزار بازی کرد. اشخاصی بودند که هر روز از نرم افزار استفاده می‌کردند و جابجایی یک دکمه ممکن بود اونها رو آزار بده.
صفحات رو از خطوط اضافه و نور و سایه پاک کردم.
توجه باید روی اعداد باشه
کاربر دائما به دنبال اعداد روی صفحه می‌گرده
رنگ و آیکونها هم مینونه به کاربر کمک کنه تا مبالغ دریافت شده و برداشت شده رو سریع‌تر تمییز بده.
از رنگ سازمانی بانک تجارت استفاده کردم. رنگ آبی سلطنتی که بسیاری از بانک‌ها روزی از این رنگ استفاده می‌کردند.
تا جای امکان کاربر باید حس میکرد که داره از نرم افزار بانک تجارت استفاده می‌کنه (حتی اگر توی این بانک حسابی نداشت!)
از رنگ مکمل دیگری هم در کنار این رنگ استفاده کردم تا جلوه بیشتری به صفحات اپ دهد.
وقتی صحبت از خدمات بانکی میشود، مهم است تا به کاربر اعتماد و آرامشی دهی.
رنگ‌ها شاید نکته موثری بودن. به همین جاطر بود که سعی کردم از رنگ‌های خنثی استفاده کنم.
منوی کناری، خاکستری بود. با آیکون‌های پر جزئیات که با فاصله کمی از همدیگه چیده شده بودند و خطوطی که هر آیتم رو از هم جدا میکرد. این شلوغی اطمینان رو از کاربر می‌گرفت.
رنگ زمینه منو رو به سفید تغییر دادم. تمامی آیکونها دوباره از نو طراحی شدند و تمام عناصر اضافه حذف شدند.
برنامه امکانات زیادی داشت. همین نکته با ارزش میتونست در مواردی کاربر رو به اشتباه بیاندازه برای همین چیدمان صحیح دکمه ها، اولویت نمایش اونها در برابر کاربر، عامل موثری بود.
یک طراح گرافیست تنها به رنگ‌ها و زیبایی توجه نداره بلکه باید با روحیات و حالات کاربرها آشنا باشه و با ارتباط متفاوتی برقرار کنه.
همچنین شناخت ارگونومی و علم چگونگی عملکرد بدن و دستها برای برقراری ارتباط با نرم افزار عامل مهمی دیگری بود که بسیاری از طراحان و برنامه نویسان این حوزه دقتی به آن نمی‌کند.
ابعاد و اندازه دکمه‌ها و فضای قابل کلیک نکته دیگری بود که در اجرای نرم افزار با دوست عزیزم فرزین هماهنگ می‌کردم.
طراحی آیکون برنامه و صفحه ورودی هم خالی از لطف و هیجان نبود. متاسفانه لوگوی با کیفیتی از سوی بانک در اختیار من و تیم اجرایی قرار نگرفته بود. با این شرایط مجبور بودم تا لوگو را دوباره اجرا کنم و گاهی بخش‌هایی از آن را ساده کنم تا در نمایش کوچک آن جزئیات اصلی از بین نروند و در نمای بزرگ تمیز و با کیفیت جلوه کند.
برنامه با ظاهر جدید در دسترس کاربران قرار گرفته. اگر شما هم از نسخه قبلی استفاده می کردید، تفاوت ها را بیشتر حس می کنید.
اگر از این محصول استفاده می کنید، نظرتان را در مورد نتیجه نهایی با من به اشتراک بگذارید.
ممنون :)
برای دیدن تصاویر بیشتر از طرحها به ادامه مطلب مراجعه کنید...
