اصول طراحی رابط کاربری شاد

رتبه این آیتم
رتبه 3 در 1 رای از 1 تا 5

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

  • طراحی رابط کاربری خوب: تفاوت بین یک رابط کاربری خوب و یک رابط کاربری بد

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

  • ساده گرا باشه

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

  • طراحی فلت داشته باشه

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

  • برای نمایش مسائل پیچیده، از نمودار کمک بگیره

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

  • وارد عمل بشید: اصول طراحی رابط کاربری مدرن

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

  • برندسازی رو به حداقل برسونید

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

  • خیلی کم از تصاویر استفاده کنید

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

  • محتوای ساده

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

  • برای جهتیابی به فهرست ها اعتماد نکنید

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

  • اندازه پوشه (فایل)ها رو بزرگ نکنید

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

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

نباید جهتیابی اپلیکیشن ها سخت باشه- اپلیکیشن ها باید آسون باشن. رابط کاربری رو تا جایی که میشه ساده و تمیز نگهدارید. اینطوری کاربرها دعاتون هم می کنن. (حالا اگر هم دعا نکنن ولی حداقل براتون نظرهای نامهربانانه نمیذارن)


نویسنده این مقاله می باشد که از سال 1381 تا کنون در زمینه طراحی و بهینه سازی وب سایت فعالیت دارد.

شبکه اجتماعی های نویسنده اینستاگرام ، گوگل پلاس و لینکدین.

به اشتراک گذاری مطلب در

به اشتراک گذاری در فیس بوک به اشتراک گذاری در گوگل پلاس به اشتراک گذاری در توئیتر به اشتراک گذاری در لینکدین

آیتم های مرتبط

يک نظر بدهيد

موارد ستاره دار الزامی هستند

تماس با ما

info [ at ] joomir.com
تهران، سعادت آباد، سرو غربی، کوچه آریا، پلاک 4، واحد 7
22083926 - 22085386 - 22082258
طراحی سایت دارکوب | هاست دارکوب | دارکوب نام و علامت تجاری ثبت شده این مجموعه می باشد