آشنایی با طراحی رابط کاربری یا UI

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

مقدمه

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

حال اینکه رابط کاربر چیست و شامل چه مراحلی می‌شود را در این مقاله با‌هم بررسی می‌نماییم.

تعریف پایه

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

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

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

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

انواع رابط کاربر از نظر ماهیت:

همان‌طور که گفته شد٬ هر ارتباط و واسطی بین ماشین و انسان٬ نیازمند طراحی رابط کاربریست. در اینجا با چند نمونه از این رابط‌ها آشنا می‌شویم:

رابط کاربر سخت‌افزاری؛ مثل ماوس، صفحه‌کلید، میکروفون، بلندگو و...

رابط کاربر نرم‌افزاری؛ مثل منوها، پنجره‌ها، آیکون‌ها، و...

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

رابط گزینشی؛ اگر فرمان‌ها از طریق فهرست‌های گزینشی (منوها) در اختیار کاربر قرار گیرند، به رابط مزبور، رابط گزینشی گفته می‌شود.

رابط‌ صوتی؛ از طریق صوت و صدا با کاربر ارتباط می‌گیرند؛ مثل سیری در آیفون٬ الکسا در آمازون٬ کورتونا در ویندوز ٬ و ...

رابط فیگور؛ کاربر با حرکات بدنی با فضا‌های سه بعدی درگیر می‌شوند؛ مثل بازی های سه بعدی و واقعیت مجازی و ...

رابط گرافیکی؛ کاربر برنامه‌ای که اطلاعات را به طور گرافیکی نشان داده و برای برقراری رابطه با کاربر به یک وسیله اشاره‌ای نیاز داشته باشد، گفته می‌شود که یک واسط گرافیکی کاربر دارد.

مراحل طراحی رابط کاربری:

تا اینجا با تعریف کلی و انواع رابط‌های کاربری آشنا شدیم. اما طراحی رابط کاربری شامل چه مراحلی می‌شود؟

اول؛ نیازسنجی

طراح رابط کاربر ابتدا باید پروژه را تمام و کمال بررسی نماید. اهداف اصلی رابیرون کشیده٬ ویژگی مخاطبان خود را پیدا کرده و آن‌ها را دسته بندی کند.هر چه طراح شناخت بیشتری از کاربران داشته باشد٬ طرح بهتری را ارائه می‌دهد.

دوم؛ اتود اولیه

پس از تحلیل داده‌ها و دریافت سرنخ‌ها٬ طراح کار خود را در قالب طرح‌های اولیه شروع می‌کند. در این مرحله نیازی به اجرای جزئیات نیست٬ و تنها ابزار طراح٬ قلم و کاغذ است.

سوم؛ ارائه اولیه

طی جلسه ای٬ که چه بهتر اگر حضوری باشد٬ طرح اولیه به کارفرما ارائه می‌شود. و درباره کلیات طرح که شامل اجزای کلی هر صفحه٬ جای دکمه‌ها و ... صحبت می‌شود تا چهارچوب کلی طرح تایید شود و با همفکری او، تغییرات لازم در نظر گرفته می‌شود.

چهارم؛ وایرفریم

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

پنجم؛ اجرای نهایی

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

این مراحل ممکن است در هر شرکت و تیمی ٬ متفاوت باشد. اما روند کلی و جامع برای دستیابی به رابط کاربری دلچسب٬ این‌هاست.

۸ مرحله برای داشتن رابط کاربری زیبا:

اول؛ شناخت کاربران

همان‌طور که اشاره شد٬ قبل از شروع مراحل طراحی٬ شناخت کاربر و دانستن نیاز‌های کاربران امری ضروریست. طراح یا تحلیل‌گر می‌تواند به صورت حضوری و رو ‌در رو٬ با برخی از کاربران ارتباط برقرار کند٬ سوالاتی را مطرح کند تا بتواند دغدغه‌شان را بشناسد و بهترین راه‌حل را ارائه دهد.

دوم؛ تعامل راحت

قبل از طراحی رابط کاربری٬ نحوه استفاده از آن باید مشخص باشد. کاربران به دو روش با رابط کاربری شما ارتباط می‌گیرد. ۱) به صورت مستقیم با یک جزء از محصول در تعامل‌اند مثل؛ کشیدن و رها کردن یک‌ آیتم با نوک انگشت (Drag and Drop)٬ ضربه زدن روی یک دکمه٬ ... و ۲) به صورت غیر مستقیم با یک جزء خارجی از محصول٬ مثل؛ استفاده از دستورات کلیدی و میانبر‌ها٬ اشاره و کلیک با ماوس٬ تایپ کردن در یک فرم٬ ...

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

سوم؛ تعیین انتظارات

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

چهارم؛ کاهش اشتباهات

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

به عنوان مثال شما بسیاری از تکنیک های جلوگیری از اشتباه را در تجارت الکترونیک و طراحی فرم می بینید. تا زمانی که شما تمام فیلد ها را پر نکنید، دکمه ها غیر فعال باقی می مانند. فرم ها تشخیص می دهند که آدرس ایمیل به درستی وارد نشده است. Pop-upها از شما میپرسند آیا واقعا میخواهید سبد خرید خود را رها کنید. این پیام های هشدار و تایید برای ادامه دادن٬ اخطار و یا گرفتن تاییدی از کابران است.

پنجم؛ فیدبک یا بازخورد

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

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

ششم؛ فواصل و ابعاد المان‌ها

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

هفتم؛ رعایت استاندارد‌ها

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

هشتم؛ ساده سازی

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

نتیجه‌گیری

طراحی رابط کاربری امروزه تاثیر بسیار چشم‌گیری در انتخاب شما توسط کاربران را دارد. با وجود رقابت‌های سنگینی در دیجیتال وجود دارد٬ به‌دست آوردن اعتماد مخاطب به مراتب سخت‌تر است. آن‌ها بعد از نصب اپلیکیشن شما و یا ویزیت سایت شما اگر ذره ای احساس راحتی نکنند و محتوایی که دنبالش بودند را نیافتند٬ به راحتی سایت/ اپلیکیشن شما را ترک می‌کند و به سراغ رقیبتان می‌رود.

پس برای داشتن سایت/ اپلیکیشنی که محبوب٬ کاربردی٬ جذاب و راحت٬ به رابط کاربری آن توجه کنید. در نظر داشته باشید که هرچه شناخت٬ تحقیق و بررسی کابران٬ قبل از شروع کار جامع تر باشد٬ مراحل طراحی سریع‌تر و نتیجه به دست آمده باب‌میل شما می‌شود.

اگر این مقاله براتون مفید بوده، حتما برای دوستاتونم مفیده.. پس چرا به اشتراک نذاریش؟ :)