وبلاگ

سایت ساز سی می پلاس

مقالات

نکات کلیدی برای طراحی رابط کاربری یا UI چیست

دوشنبه، ۹ مهر ۱۳۹۷

زمان مطالعه: حدود 5 دقیقه
نکات کلیدی برای طراحی رابط کاربری یا UI چیست

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

رابط کاربری چیست؟

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

 

انواع رابط‌های کاربری از ابتدا تا کنون

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

1- رابط کاربری دسته‌ای

شاید شما هم حتی نتوانید کامپیوتر را بدون صفحه نمایش تصور کنید اما باید بگوییم سال‌ها پیش کامپیوترها تنها یک کیبورد داشتند که ورودی را مانند کد از کاربر می‌گرفت و خروجی را پرینت می‌کرد! بنابراین عملا صفحه نمایشی وجود نداشته که واسط کاربری به شکل امروزی بخواهد وجود داشته باشد.
به این واسط‌های کاربری (همان کیبورد) که امکان تعامل انسان با کامپیوتر را فراهم می‌کرد، واسط کاربری دسته‌ای گفته می‌شد.

 

2- واسط کاربری خط فرمانی

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

3- رابط کاربری گرافیکی

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

 

اهمیت رابط کاربری چیست

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

 

نکات کلیدی در طراحی رابط کاربری

1- زبان رنگ‌ها را بشناسید

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

 

2- رنگ و اندازه و فونت مناسبی برای متن در نظر بگیرید

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

 

3- ساده طراحی کنید

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

0 دیدگاه

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد.
کد امنیتی

مشاهده دیدگاه های بیشتر