رابط کاربری
فهرست مطالب
آخرین به روزرسانی در 03/05/2024
در این مقاله قصد داریم در رابطه با رابط کاربری یا همان USER INTERFACE صحبت کنیم.
رابط کاربری مجموعه ای از تمامی ظواهر و نمایی است که شما در یک اپلیکیشن و یا وبسایت مشاهده می کنید.
شاید یکی از مهم ترین بخش های طراحی در هر پلتفرمی از وبسایت و اپلیکیشن تا بازی، همین مبحث طراحی UI می باشد.
پس به شدت به نکاتی که در این مقاله می گوییم توجه ویژه ای داشته باشید.
(لازم به ذکر است رابط کاربری در این مقاله بر مبنای سایت و اپلیکیشن است و برای رابط کاربری بازی ما در مقاله ای جداگانه توضیحاتی را ارائه داده ایم.)
UI چیست ؟
همانطور که گفته شد رابط کاربری شامل تمامی مواردی است که شما در فرانت اند و ظاهر یک پلتفرم مشاهده می کنید.
این ظواهر شامل : رنگ بندی ها ، اشکال ، انیمیشن ها ، ابعاد ، فونت ها ، تصاویر و در کل فایل های مدیایی ، بوردرها ، افکت ها ، آیکون ها و … می باشد.
UI در لایه های متقابل ایجاد می شود که برای حواس انسان جذاب است (بینایی ، لمس ، شنوایی و موارد دیگر).
آنها شامل هر دو دستگاه ورودی مانند صفحه کلید ، ماوس ، صفحه لمسی ، میکروفون ، صفحه لمسی ، اسکنر اثر انگشت ، قلم الکترونیکی و دوربین و دستگاههای خروجی مانند مانیتور ، بلندگوها و چاپگرها هستند.
به وسایلی که با حواس متعدد تعامل دارند “رابط کاربری چند رسانه ای” می گویند.
به عنوان مثال ، رابط کاربری روزانه از ترکیبی از ورودی لمسی (صفحه کلید و ماوس) و خروجی بصری و شنیداری (مانیتور و بلندگوها) استفاده می کند.
نکات مهم در رابط کاربری
رابط کاربری برای برآوردن انتظارات کاربر و پشتیبانی از عملکرد موثر سایت و یا هر پلتفرم دیگر شما مهم است.
یک رابط کاربری خوب اجرا شده ، تعامل موثر بین کاربر و برنامه ، برنامه یا دستگاه را از طریق فایل های مدیایی، طراحی استاندارد و پاسخگویی تسهیل می کند.
هنگام طراحی UI برای پلتفرم شما ، مهم است که انتظارات کاربر را از نظر دسترسی ، زیبایی بصری و سهولت استفاده در نظر بگیرید.
ترکیبی مطلوب از تصاویر بصری موثر و پاسخگویی کارآمد ، نرخ تبدیل سایت شما را بهبود می بخشد ، زیرا نیازهای کاربر را پیش بینی کرده و سپس این نیازها را برآورده می کند.
انواع طراحی
طراحی تعاملی: در نظر داشتن کاربر هنگام ایجاد UI به بهبود تعامل و اجرای رفتارهای خاص که نیازهای کاربر را برآورده می کند ، کمک می کند.
علاوه بر این ، رابط های کاربری تعاملی کارآمد می توانند یاد بگیرند که هر مشکلی را پیش از آنکه بر تجربه کاربر تأثیر منفی بگذارد ، پیش بینی و برطرف کنند.
طراحی بصری: اهمیت ارزش زیبایی سایت شما را نمی توان دست کم گرفت.
طراحی موثر از عناصر رنگ ، کنتراست ، فونت ، مدیا ، اندازه ، اشکال ، انیمیشن ها و افکت ها برای جذب بازدیدکنندگان استفاده می کند و خواندن آنها را آسان می کند و با محتوا کار می کند و نه در اطراف آن ، برای ایجاد یک جریان منطقی و بصری از قابلیت ها.
ویژگی های یک رابط کاربری خوب
- یک طراحی UI ایده آل باید بر اساس UX باشد.
- باید دارای ظاهر جذاب و منحصر به فرد باشد.
- ساختار منطقی؛ و درک آن برای کاربران آسان باشد.
- ارتباط با کاربر و احساسات آن باید رعایت شود.
- از جلوه های پویا و انیماتیک استفاده کنید.
- به شدت مراقب ریسپانسیو بودن سایت در هنگام طراحی باشید.
- تنوع محتوا داشته باشید و تنها از یک نوع محتوای متنی ، تصویری یا حتی ویدیویی استفاده نکنید و از مجموعه ای از آن ها استفاده کنید.
- در استفاده از رنگ بندی ها به نوع خدمات خود و تناسب آن با رنگ بندی توجه ویژه داشته باشید.
( به عنوان مثال : برای یک وبسایت فروشگاه پوشاک و یا لوازم آرایش معمولا رنگ های متداول ، سفید ، صورتی ، بنفش ، قرمز ، آبی و زرد می باشد و به طور کلی از رنگ های شاد در آن استفاده می شود ) - خاص باشید ( طراحی ای را نداشته باشید که رقبای شما نیز از آن طراحی استفاده کرده باشند ، پس در دیزاین سایت متفاوت از بقیه باشید)
- سرعت و راحتی دسترسی را در طراحی رعایت کنید.
- کنترل کننده ها را به بهترین شکل برای کاربران قرار دهید ( مانند : فهرست اولیه برای خواندن مطالب و قابلیت کلیک بر روی هر سر تیتر)
- آیکون ها را به وضوح برچسب گذاری کنید.
- از افزودن بیش از حد رنگها یا دکمه ها خودداری کنید.
اصول طراحی رابط کاربری در تمامی پلتفرم ها
-
دسترسی کنترل کننده
رابط کاربری خوب حس کنترل و مدیریت را به کاربران خود القا می کند.
یکی از راه های دادن این کنترل و مدیریت به کاربر این است که اقدامات را برگشت پذیر کنید :
این قانون بدین معناست که کاربر همیشه باید بتواند هر کاری را که انجام می دهد به سرعت عقب بکشد.
این به کاربران امکان می دهد بدون ترس مداوم از خرابی ، محصول را کاوش و توسعه دهند ؛
اگر یک کاربر مجبور باشد در هر اقدامی که انجام می دهد بسیار مراقب بهم ریختگی باشد ، منجر به کندتر شدن تجربه و خسته کننده تر شدن می شود.
شاید رایج ترین رابط کاربری گرافیکی که در آن کاربران گزینه Undo/Redo را دارند ، ویرایشگرهای متن و گرافیکی باشند.
هنگام نوشتن متن یا ایجاد گرافیک ، “واگرد” به کاربران امکان می دهد تغییرات را ایجاد کرده و گام به گام از طریق تغییرات ایجاد شده به عقب برگردند. به این معنی که وقتی چند قدم به عقب برمی گردند ، می توانند دوباره تغییرات خود را پیش ببرند.
ناوبری مناسب :
رابط کاربری خوب با ارائه زمینه ای در مورد اینکه کاربران کجا هستند ، کجا بوده اند کاربران را در منطقه امنی قرار می دهد:
این به این معناست که شما باید طبقه بندی ها و دسته بندی های کاملا درست و استانداردی در مطالب خود داشته باشید به گونه ای که کاربر راحت ترین و در عین حال مشخص ترین محتوا را دنبال کند=.
از مهم ترین مثال هایی که می توان برای این استاندارد در رابط کاربری و برای پلتفرم سایت زد ، می شود به breadcrumbing اشاره کرد =.
تغییر هنگام تعامل :
بازخورد معمولاً با نقاط عمل مرتبط است؛ برای هر اقدام کاربر، سیستم باید یک واکنش واضح و معنی دار نشان دهد.
سیستمی با بازخورد برای هر عملی به کاربران کمک می کند تا بدون کاوش و درک انجام شدن واکنش به اهداف خود برسند.
طراحی UI باید ماهیت تعامل را در نظر بگیرد. برای اقدامات مکرر، پاسخ می تواند در حد اندکی مانند : یک انیمیشن زوم شدن باشد.
به عنوان مثال ، هنگامی که کاربران با یک شیء تعاملی (مانند یک دکمه) ارتباط برقرار می کنند ، ارائه برخی از نشانه ها برای تایید فعالیت ضروری است.
این ممکن است به سادگی دکمه ای باشد که هنگام فشار دادن رنگ تغییر می کند یا انیمیشن زوم برای آن فعال شود (این تغییر کاربر را از تعامل مطلع می کند). عدم وجود چنین بازخوردی کاربران را مجبور می کند تا بررسی کنند که آیا اقدامات مورد نظر آنها انجام شده است یا خیر.
نمایش پیشرفت :
این قسمت به این معناست که قائدتا کاربران علاقه دارند ، روند پیشرفت یک پروسه را مشاهده کنند و همزمان با آن پیش بروند.
اجازه بدهید با چند مثال منظور خود را بهتر شرح دهیم :
فرض کنید شما در حال نصب یک برنامه هستید ؛ در واقع این نوار سبز رنگی که همزمان با طی شدن پروسه های نصب رو به جلو حرکت می کند ، می تواند از مثال های بارزی برای این بخش باشد.
یا در یک اپلیکیشن پیام رسان زمانی که کاربر شما در حال تایپ برای ارسال پیام است؛
در پایین نام آن حالت teyping نمایش داده می شود و این خود یک حالت نمایش پیشرفت در اپلیکیشن است که باعث می شود کاربر در تایم انتظار دچار سردرگمی نشود که الان در چه مرحله ای به سر می برد.
جلوگیری از تکرار :
کاربران را مجبور نکنید مجبور شوند داده هایی را که قبلاً وارد کرده اند مجدد وارد کنند.
کاربران به راحتی از دنباله های خسته کننده ی ورود اطلاعات ناراحت می شوند ، به ویژه هنگامی که قبلاً تمام اطلاعات مورد نیاز را ارائه کرده اند.
رابط کاربری خوب حداکثر کار را انجام می دهد در حالی که به حداقل مقدار اطلاعات از کاربران نیاز دارد.
در واقع می توان نتیجه گرفت که حتی بهتر است شما ، حداقل اطلاعات را از کاربران دریافت کنید ، و دسترسی های لازم را به آن ها بدهید زیراکه به غیر از کسل کننده بودن وارد کردن اطلاعات بیش از حد، بسیاری از کاربران ترجیح می دهند اطلاعات شخصی خود را در جایی ثبت نکنند.
به عنوان مثال برای ثبت نام و ورود یک کاربر سعی کنید با دریافت اطلاعاتی مانند : تنها شماره همراه و نام و نام خانوادگی آن را وارد کنید .
افزایش ابعاد :
تجربه ثابت کرده است ابعاد بزرگ ، چه در دکمه ها و چه در المان های سایت از المان های تصویری تا متون برای کاربر از لحاظ ظاهری جذاب تر بوده و همچنین استفاده و دسترسی به آن ها نیز برای کاربر راحت تر می باشد.
استفاده از استعاره :
استفاده از استعاره در طراحی رابط کاربری به کاربران امکان می دهد بین دنیای واقعی و تجربیات دیجیتالی ارتباط برقرار کنند.
استعاره های دنیای واقعی با اجازه دادن به کاربران برای انتقال دانش موجود در مورد چگونگی ظاهر و نحوه کارکردن ، به کاربران قدرت می دهد.
استعاره ها اغلب برای آشنا ساختن ناآشناها به کار می روند. به عنوان مثال سطل بازیافت روی دسکتاپ خود را که حاوی فایل های حذف شده است در نظر بگیرید ؛ این سطل ، سطل آشغال واقعی نیست،
اما از نظر بصری به گونه ای نمایش داده می شود که به شما کمک می کند مفهوم حذف شدن را راحت تر درک کنید.
کاهش مراحل :
هنگام طراحی رابط کاربری ، سعی کنید تعداد کل اقدامات مورد نیاز کاربر برای رسیدن به هدف را کاهش دهید.
شایان ذکر است که قانون سه کلیک را به خاطر بسپارید، که نشان می دهد کاربر یک محصول باید بتواند با بیش از سه کلیک ماوس اطلاعاتی را بیابد.
صحت اطلاعات :
کاربران هرگز نباید صحت یک محصول را زیر سوال ببرند. رنگ ها ، فونت ها و نمادهای یکسان باید در سراسر محصول وجود داشته باشد.
مطمئن شوید سبک های بصری را بدون دلیل مشخص در محصول خود تغییر نمی دهید. به عنوان مثال ، یک دکمه ارسال در یک صفحه از سایت شما باید در هر صفحه دیگری یکسان به نظر برسد.
( البته نکته ی لازم به ذکر این است که همیشه اینطوری نیست و این مورد به معنای عدم داشتن تنوع در صفحات شما نیست.
بلکه به معنای داشتن یک هارمونی و پیوستگی بین صفحات مختلف وبسایت شما می باشد ، به عنوان مثال وبسایت ماناتاز را فرض کنید ، در هر مقاله ممکن است رنگ بندی ها متفاوت باشد اما طیف رنگ بندی ها متفاوت نیست و تمامی آن ها در دسته بندی رنگ های طلایی ، زرد ، کرمی و خردلی قرار دارند و این دقیقا همان هارمونی است.)
فرایند طراحی UI
1- تهیه داکیومنت و تمامی موارد لازم برای طراحی و دیزاین پلتفرم.
2- متناسب سازی طراحی با نوع خدمات و کاربری.
3- پیاده سازی اطلاعات طراحی در نرم افزارهای طراحی مانند : Adobe XD
4- تهیه و توسعه پروتوتایپ، wireframe، موکاپ و هر نوع دیگری از انواع مختلف نمونههای اولیه خواهد بود.
5- تست فرایند به اینصورت که میزان بازخورد کاربران و در نهایت عملکرد طراحی در دیوایز های مختلف را مورد بررسی قرار می دهیم.
6- این مرحله، مرحله طراحی سبک و سیاق نهایی رابط کاربری به صورت گرافیکی است. در این مرحله نوع تعامل بصری را با استفاده از تایپوگرافی و استفاده از تصاویر و آیتمهای گرافیکی مختلف نهایی میکنیم و طراحی UI را به سرانجام میرسانیم.
جمع بندی
فراید رابط کاربری نیز مانند تجربه کاربری یک فرایند تجربی است تا آموزشی.
یعنی شما به صورت کلی یک سری استانداردهای پایه را یادخواهید گرفت اما استانداردهای وابسته ، با توجه به مجموعه ی شما مشخص می شود.
اما یک نکته وجود دارد.
این نکته این است که شما در نهایت باید به جایی برسید که یک رابط خاص را به وجود بیاورید.
یعنی رابطی که در قالب استانداردها نباشد و یک نمونه ی جدیدی باشد اما در عین حال برای کاربران استاندارد و جذاب باشد.
رسیدن به چنین نقطه ای بسیار سخت است و اگر شما در این مقاله تازه با مفهوم رابط کاربری آشنا شده اید باید بدانید که راه بسیار درازی را در پیش دارید.
شما باید انقدر با پلتفرم ها و طراحی های مختلف آشنا شوید که در نهایت بتوانید طراحی خاص خود را به وجود بیاورید.