اهمیت رابط کاربری (UI) اپلیکیشن

رابط‌ کاربری گرافیکی به کاربران اجازه می‌دهند بدون نیاز به یادگیری زبان‌های برنامه‌نویسی با رایانه‌ها ارتباط برقرار کنند. هدف این است تا به المان ها ظاهر گرافیکی بدهد تا نرم افزار براحتی قابل استفاده باشد.
قدرت طراحی و اهمیت UI اپلیکیشن به قدری است که میتواند عامل موفقیت یا شکست یک اپلیکیشن شود یا حتی بدتر میتواند تجربه ناخوش آیند و در نهایت ترک و پاک کردن اپلیکیشن شود در این مقاله به ویژگی های UI خوب و چندین نمونه اشاره کردیم.

در صورتی که می خواهید یک اپلیکیشن با کیفیت بالا داشته باشید همه جزئیات کوچک نیز مهم است.

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

ویژگی های رابط کاربری UI خوب و بد

نگاه کردن به نمونه هایی از طراحی بد در کنار نمونه های متضاد از طراحی خوب نه تنها سرگرم کننده است، بلکه درس های مهمی برای طراحان و صاحبان اپلیکیشن دارد. مشکلاتی که در ui اپ نباید وجود داشته باشند در این نمونه ها مشخص می شوند.

«وقتی طراحی خوب انجام می شود، به چشم نمی آید. فقط زمانی که ضعیف انجام شود متوجه آن می شویم.»

جارد اسپول، نویسنده، محقق و کارشناس کاربردی آمریکایی

بیایید به پنج نمونه از طرح‌ها نگاه کنیم و بدانیم که چطور یک طرح خوب باعث کارآمدی نرم افزار می شود.

نیاز به اطلاعات اضافی

بد: استفاده از نماد یا متن هایی که برای فهمیدن آن ها نیاز به اطلاعات زیادی می باشد برای مثال متن یا نماد های خاص و تخصصی در نرم افزار هایی که کاربران عمومی دارد

خوب: استفاده از متن ها و نماد های مرسوم برای مثال همه ما وقتی آیکون “منزل” رو میبینیم متوجه صفحه اصلی نرم افزار می شویم.

چه زمان هایی می توان از نماد جدید یا رابط گرافیکی غیر مرسوم استفاده کرد؟ اگر بودجه اضافی برای تغییر عادات کاربران اینترنتی دارید می توانید خرج این هدف کنید

سایه دادن به باکس ها

تا جای ممکن از سایه ها استفاده نکنید چون استفاده زیاد از سایه باعث شلوغ بنظر رسیدن طرح شما می شود. اگر ملزم به استفاده از سایه ها هستید پس به نکات زیر توجه داشته باشید:

• از سایه های پیش فرض استفاده نکنید
• برای سایه دادن رنگ سیاه مناسب نیست سعی کنید از رنگ تیره تری از پس زمینه برای رنگ سایه ها استفاده کنید این باعث نرم دیده شدن طرح میشود

ایجاد تفاوت بین دکمه های اصلی و ثانویه

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

اهمیت UI اپلیکیشن: رعایت کردن سلسه مراتب متن

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

برای داشتن چنین طرحی به نکات زیر توجه کنید:

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

عدم توازن آیکون ها

در اول مقاله به اهمیت رسا بودن آیکون ها اشاره کردیم حال آیکون های درست را چطوری استفاده کنیم؟

گاهی اوقات به نظر می رسد آیکون ها “آسان ترین” بخش طراحی UI هستند. برخی از طراحان حتی آنها را به عنوان یک عنصر تزئینی “اضافی” می بینند، در حالی که آنها بخشی اساسی از رابط های مدرن هستند.

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

تراز بندی متون (Text Alignment)

تراز بندی متن ها باعث متعادل دیده شدن طرح رابط کاربری می شود. پس به نکته زیر توجه کنید:

• المان های مرتبط را با جهات مختلف تراز نکنید. همیشه سعی کنید عناصر مرتبط را در یک طرف تراز کنید.

وضوح پایین

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

فضای کلیک مناسب در گوشی های موبایل

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

• با در نظر گرفتن اینکه میانگین عرض یک انگشت اشاره بزرگسالان 1.6 تا 2 سانتی متر است، عناصر مناسب با انگشت ایجاد کنید.
• هدف لمسی خود را حداقل 45-57 پیکسل عرض کنید. این به کاربران فضای کافی برای ضربه زدن بدون نگرانی می دهد.

UI یکی از موارد بود که در اپلیکیشن ها مهم است برای دانستن استانداردهای اپلیکیشن موبایل این مقاله را هم مطالعه کنید.